/* Portal de alumnas · Academia KikiBrows — tokens
   Para pegar en las plantillas PHP existentes (un solo <link>).
   Paleta y tipografía = design system KikiBrows. Forma de las piezas = referencia de capas/vidrio.
   Copia de docs/diseno-portal/portal-tokens.css. Único cambio: las fuentes van con ruta relativa
   a este archivo (../assets/fonts/), para que carguen también con BASE_PATH (/portalpruebas). */

@font-face{font-family:"Jost";src:url("../assets/fonts/jost.woff2") format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../assets/fonts/cormorant.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../assets/fonts/cormorant-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}

:root{
  /* Color — marca */
  --oliva:#8F8457; --oliva-osc:#565030; --oliva-med:#6b6340; --oliva-max:#3f3a22; --oliva-noche:#2e2b1a;
  --rosa:#D9B5AF; --rosa-cla:#e7cfca; --rosa-osc:#b98e86;
  --crema:#EFEBE0; --crema-cla:#f7f4ec; --crema-max:#fbfaf5;
  --tinta:#3a362c; --tinta-2:#4a4638; --tinta-3:#5a5648; --tinta-4:#8a8574; --ciruela:#4a3b38;
  --error:#a23b32; --error-bg:#f0dcd9; --ok:#28603a;

  /* Color — portal */
  --base:var(--tinta);                 /* base oscura bajo la superficie */
  --superficie:var(--crema);           /* superficie clara con esquinas inferiores de 35px */
  --tarjeta:var(--crema-max);
  --linea:rgba(143,132,87,.18);
  --linea-fina:rgba(143,132,87,.14);
  --acento:linear-gradient(119deg,#b98e86 45%,#D9B5AF 78%);  /* contadores, acción principal, en vivo */
  --acento-texto:var(--oliva-noche);   /* texto sobre --acento: 4,9:1 en el tramo más oscuro (AA) */
  --premium-superficie:#f4e9e4;
  --premium-base:var(--ciruela);
  --oro-suave:#b8a06a;                 /* solo filetes y bordes, nunca texto */
  --oro-texto:#7a6634;                 /* micro-etiquetas doradas sobre crema (≥4,5:1) */

  /* Tipografía */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --fs-titulo-pantalla:27px;  /* en minúsculas, serif 500 */
  --fs-saludo:38px;           /* serif, cursiva como acento */
  --fs-card-title:21px;       /* serif 600 */
  --fs-body:14px; --fs-small:12.5px; --fs-micro:11px; --ls-micro:.18em;

  /* Radios */
  --r-pill:99px; --r-card:22px; --r-small:16px; --r-mosaico:32px; --r-superficie:35px; --r-hoja:30px;

  /* Espaciado y medidas */
  --gap-mosaico:5px; --pad-pantalla:16px; --tap:44px;
  --nav-alto:62px; --nav-inset:12px; --nav-bottom:22px; --base-alto:100px;
  --feed-ancho:640px; --lateral-ancho:248px; --columna-der:340px;

  /* Vidrio (solo piezas fijas: encabezado, barra, chips) */
  --vidrio-claro:rgba(255,255,255,.55);
  --vidrio-oscuro:rgba(247,244,236,.12);
  --vidrio-chip:rgba(46,43,26,.26);
  --vidrio-chip-calido:rgba(231,207,202,.62);
  --blur-boton:blur(14px) saturate(1.4);
  --blur-barra:blur(20px) saturate(1.4);
  --blur-chip:blur(22px) saturate(1.5);
  --blur-encabezado:blur(18px) saturate(1.3);

  /* Sombras (siempre oliva) */
  --sombra-card:0 18px 40px -26px rgba(86,80,48,.45);
  --sombra-flotante:0 22px 54px -20px rgba(86,80,48,.55);
  --sombra-accion:0 12px 26px -10px rgba(185,142,134,.7);

  /* Movimiento */
  --ease-kb:cubic-bezier(.16,.84,.44,1);
  --ease-hoja:cubic-bezier(.32,.72,0,1);
  --dur-aparicion:.9s; --stagger:.08s;
  --dur-presion:.22s; --dur-brillo:.45s;
  --dur-indicador:.5s; --dur-hoja:.5s; --dur-hoja-cierre:.32s;
  --dur-expandir:.55s; --dur-hover:.25s;
  --dur-corazon:.9s; --dur-pulso:1.8s;
}

/* Botón de vidrio — portado de referencia-voice-chat.html (.header-button), 30-09.
   Dos arcos de luz con conic-gradient enmascarados en anillo con radial-gradient:
   el GRUESO va abajo a la derecha (78°–188°) y el FINO arriba a la izquierda (274°–10°),
   más un brillo interior suave en 76% 76%. El grosor y la intensidad escalan con --n
   (tamaño en px) y en pantallas de alta densidad, igual que en la referencia.
   Sobre crema se conservan el fondo más opaco, el borde y la sombra del diseño para que
   el círculo se lea. */
.kb-vidrio{
  --n:44; --size:calc(var(--n) * 1px);
  --floorB:1.7px; --floorBs:.8px; --floorA:1.4px; --floorAs:.6px; --aa:.6px;
  --rimB-total:max(calc(var(--size) * .0235), var(--floorB));
  --rimB-solid:max(calc(var(--size) * .0095), var(--floorBs));
  --rimA-total:max(calc(var(--size) * .014), var(--floorA));
  --rimA-solid:max(calc(var(--size) * .004), var(--floorAs));
  --keep:clamp(0, calc((var(--n) - 24) / 72), 1);
  position:relative;isolation:isolate;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(95% 95% at 76% 76%, rgba(255,255,255,.24), rgba(255,255,255,0) 66%),
    linear-gradient(135deg, rgba(20,20,20,.025) 0%, rgba(20,20,20,0) 58%),
    var(--vidrio-claro);
  backdrop-filter:var(--blur-boton);-webkit-backdrop-filter:var(--blur-boton);
  border:1px solid var(--linea-fina);box-shadow:0 10px 22px -12px rgba(86,80,48,.45);
  transition:transform var(--dur-presion) var(--ease-kb)}
@media (min-resolution:1.5dppx){
  .kb-vidrio{--floorB:.9px;--floorBs:.45px;--floorA:.75px;--floorAs:.35px;--aa:.4px;--keep:clamp(0, calc((var(--n) - 14) / 42), 1)}
}
.kb-vidrio--oscuro{border:0;box-shadow:none;color:var(--crema-cla);
  background:
    radial-gradient(95% 95% at 76% 76%, rgba(255,255,255,.24), rgba(255,255,255,0) 66%),
    var(--vidrio-oscuro)}
.kb-vidrio > *{position:relative;z-index:1}
.kb-vidrio::before,.kb-vidrio::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  opacity:var(--keep);transition:transform var(--dur-brillo) var(--ease-kb)}
.kb-vidrio::before{
  background:conic-gradient(from 0deg,#fff0 0deg,#fff0 66deg,#fff 78deg,#fff 188deg,#fff0 200deg,#fff0 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--rimB-total)),#000 calc(100% - var(--rimB-solid) - var(--aa)),#000 calc(100% - var(--aa)),transparent 100%);
          mask:radial-gradient(closest-side,transparent calc(100% - var(--rimB-total)),#000 calc(100% - var(--rimB-solid) - var(--aa)),#000 calc(100% - var(--aa)),transparent 100%)}
.kb-vidrio::after{
  background:conic-gradient(from 0deg,#fff 0deg,#fff 10deg,#fff0 24deg,#fff0 258deg,#fff 274deg,#fff 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--rimA-total)),#000 calc(100% - var(--rimA-solid) - var(--aa)),#000 calc(100% - var(--aa)),transparent 100%);
          mask:radial-gradient(closest-side,transparent calc(100% - var(--rimA-total)),#000 calc(100% - var(--rimA-solid) - var(--aa)),#000 calc(100% - var(--aa)),transparent 100%)}
.kb-vidrio:active{transform:scale(.96)}
.kb-vidrio:active::before,.kb-vidrio:active::after{transform:rotate(24deg)}

/* Chip de estado sobre foto — borde de luz portado de .participant-status de la referencia:
   anillo con conic-gradient de intensidad variable (más brillante arriba a la izquierda y abajo
   a la derecha), mix-blend-mode plus-lighter y brillo interior. Se conserva el tinte del diseño
   (oscuro o cálido) para que el texto se lea sobre cualquier foto. El anillo usa la máscara
   content-box/exclude en vez de radial-gradient para que también calce cuando el chip es
   píldora (♥ 24). */
.kb-chip{--n:35;--size:calc(var(--n) * 1px);
  position:absolute;top:9px;right:9px;min-width:var(--size);height:var(--size);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;
  background:linear-gradient(80deg,rgba(255,255,255,.07),rgba(255,255,255,.13)),var(--vidrio-chip);color:#fbfaf5;
  box-shadow:inset 0 0 calc(var(--size) * .05) rgba(255,255,255,.22);
  backdrop-filter:var(--blur-chip);-webkit-backdrop-filter:var(--blur-chip)}
.kb-chip::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;padding:1.1px;
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.468) 0deg,rgba(255,255,255,.207) 15deg,rgba(255,255,255,0) 30deg,rgba(255,255,255,0) 45deg,
    rgba(255,255,255,.018) 60deg,rgba(255,255,255,.162) 75deg,rgba(255,255,255,.315) 90deg,rgba(255,255,255,.396) 105deg,
    rgba(255,255,255,.405) 120deg,rgba(255,255,255,.45) 135deg,rgba(255,255,255,.387) 150deg,rgba(255,255,255,.351) 165deg,
    rgba(255,255,255,.27) 180deg,rgba(255,255,255,.117) 195deg,rgba(255,255,255,0) 210deg,rgba(255,255,255,0) 240deg,
    rgba(255,255,255,.18) 255deg,rgba(255,255,255,.441) 270deg,rgba(255,255,255,.576) 285deg,rgba(255,255,255,.612) 300deg,
    rgba(255,255,255,.639) 315deg,rgba(255,255,255,.621) 330deg,rgba(255,255,255,.585) 345deg,rgba(255,255,255,.468) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mix-blend-mode:screen;mix-blend-mode:plus-lighter}
.kb-chip--calido{background:linear-gradient(80deg,rgba(255,255,255,.07),rgba(255,255,255,.13)),var(--vidrio-chip-calido);color:var(--acento-texto)}

/* Aparición */
.kb-aparece{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition:opacity var(--dur-aparicion) var(--ease-kb),transform var(--dur-aparicion) var(--ease-kb),filter var(--dur-aparicion) var(--ease-kb);
  transition-delay:calc(var(--i,0) * var(--stagger))}
.kb-aparece.is-visible{opacity:1;transform:none;filter:none}

@keyframes kb-pulso{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.035);opacity:0}100%{opacity:0}}
@keyframes kb-corazon{0%{transform:scale(.2);opacity:0}18%{transform:scale(1.15);opacity:1}32%{transform:scale(.95)}46%{transform:scale(1.05)}75%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes kb-brillo{0%{background-position:-200px 0}100%{background-position:240px 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:opacity!important;transition-duration:.2s!important}
  .kb-aparece{transform:none;filter:none}
}