/* Portal de alumnas · Academia KikiBrows — estructura en capas y piezas comunes.
   Va DESPUÉS de portal.css (los tokens del diseño, que se usan tal cual) y lo enlaza
   includes/portal_layout.php. Spec: docs/diseno-portal/README.md; su sección
   «Decisiones del 30-09» manda sobre los prototipos.
   · .kb-portal → páginas con sesión: superficie crema sobre la base oscura, encabezado y
     barra de píldora; desde 1024 px, barra lateral y superficie enmarcada.
   · .kb-acceso → login, activación y recuperación (9a–9d): sin barra de navegación.
   El scroll es el del documento (no un contenedor interno): así el navegador recuerda la
   posición al volver atrás y la barra de Safari se esconde al bajar. */

/* Tokens del design system que usa el diseño y no vienen en portal.css */
:root{
  --grad-hero:linear-gradient(158deg,#2e2b1a 0%,var(--oliva-osc) 52%,#48431f 100%);
  --linea-media:rgba(143,132,87,.16);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--tinta);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p{margin:0}
a{color:var(--oliva-osc);text-decoration:none;transition:color var(--dur-hover)}
a:hover{color:var(--oliva)}
button,input,select,textarea{font:inherit;color:inherit}
/* Foco del design system: contorno de 2 px oliva con 1 px de separación */
:focus-visible{outline:2px solid var(--oliva);outline-offset:1px}

/* ═════════════ Estructura en capas (páginas con sesión) ═════════════ */

.kb-portal{min-height:100vh;min-height:100svh;background:var(--superficie)}
/* Premium (2d): base ciruela, superficie rosada y filete dorado bajo la superficie */
.kb-premium{--base:var(--premium-base);--superficie:var(--premium-superficie)}

.kb-saltar{position:fixed;z-index:50;top:8px;left:8px;padding:10px 18px;border-radius:var(--r-pill);background:var(--oliva-osc);color:var(--crema-cla);font-size:14px;transform:translateY(-200%)}
.kb-saltar:focus{transform:none;color:var(--crema-cla)}

/* Marco: pinta la base oscura alrededor de la superficie (esquinas inferiores de 35 px).
   Es una caja transparente del tamaño de la superficie con una sombra sólida gigante:
   lo que queda fuera de la caja se ve oscuro y el contenido pasa por debajo al hacer scroll. */
.kb-marco{position:fixed;z-index:20;pointer-events:none;top:0;right:0;left:0;bottom:calc(var(--base-alto) + env(safe-area-inset-bottom));
  border-radius:0 0 var(--r-superficie) var(--r-superficie);box-shadow:0 0 0 100vmax var(--base)}
.kb-premium .kb-marco{border-bottom:1px solid var(--oro-suave)}

/* Base: la franja inferior (celular) o la barra lateral (escritorio). Sin fondo propio:
   el color lo pone el marco; esta caja solo recibe los toques de esa zona. */
.kb-base{position:fixed;z-index:30;left:0;right:0;bottom:0;height:calc(var(--base-alto) + env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:8px;padding:0 var(--nav-inset) calc(var(--nav-bottom) + env(safe-area-inset-bottom))}
.kb-base :focus-visible{outline-color:var(--crema-cla)}
.kb-base__logo,.kb-usuaria{display:none}
/* Celular en horizontal: nada bajo la muesca (viewport-fit=cover) */
.kb-pagina{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.kb-base{padding-left:max(var(--nav-inset),env(safe-area-inset-left));padding-right:max(var(--nav-inset),env(safe-area-inset-right))}

/* Barra de píldora: 5 destinos en palabras, en minúsculas */
.kb-barra{position:relative;flex:1;min-width:0;height:var(--nav-alto);padding:6px;border-radius:var(--r-pill);display:flex;align-items:center;
  background:rgba(247,244,236,.1);-webkit-backdrop-filter:var(--blur-barra);backdrop-filter:var(--blur-barra)}
.kb-barra::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(247,244,236,.14)}
.kb-barra::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.16));
  -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)}
.kb-barra a{position:relative;flex:1 1 auto;height:50px;padding:0 7px;border-radius:var(--r-pill);display:grid;place-items:center;white-space:nowrap;
  font-size:11.5px;letter-spacing:.02em;font-weight:400;color:rgba(247,244,236,.82);
  transition:background-color .35s var(--ease-kb),color var(--dur-hover)}
.kb-barra a:hover{color:var(--crema-cla)}
.kb-barra a[aria-current="page"]{background:var(--crema-cla);color:var(--oliva-osc);font-weight:600}

/* Acción contextual (solo Comunidad y Trabajos): círculo de 62 px con «+» */
.kb-accion{position:relative;flex:none;width:var(--nav-alto);height:var(--nav-alto);border-radius:50%;display:grid;place-items:center;
  background:var(--acento);color:var(--acento-texto);box-shadow:var(--sombra-accion);transition:transform var(--dur-presion) var(--ease-kb)}
.kb-accion::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 250deg,rgba(255,255,255,0),rgba(255,255,255,.9) 55deg,rgba(255,255,255,0) 115deg,rgba(255,255,255,0));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.8px),#000 calc(100% - 1.3px));
          mask:radial-gradient(closest-side,transparent calc(100% - 1.8px),#000 calc(100% - 1.3px))}
.kb-accion:hover{color:var(--acento-texto)}
.kb-accion:active{transform:scale(.96)}
.kb-accion__mas{font:300 32px/1 var(--sans);margin-top:-3px}
.kb-accion__texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Equipo (mentoras y admin, body.kb-equipo): 6 destinos. En el celular la barra usa todo el ancho, con las
   palabras un poco más juntas, y el «+» sube a flotar sobre ella a la derecha: así no tapa «equipo».
   Desde 1024 px (barra lateral) no cambia nada. */
@media (max-width:1023.98px){
  .kb-equipo .kb-barra{padding:6px 4px}
  .kb-equipo .kb-barra a{padding:0 4px;font-size:clamp(10px,2.9vw,11.5px);letter-spacing:0}
  .kb-equipo .kb-accion{position:absolute;right:max(var(--nav-inset),env(safe-area-inset-right));width:56px;height:56px;
    bottom:calc(var(--base-alto) + 14px + env(safe-area-inset-bottom))}
  .kb-equipo:has(.kb-accion) .kb-contenido{padding-bottom:calc(var(--base-alto) + 100px + env(safe-area-inset-bottom))}
}

/* Encabezado: volver · título en minúsculas · campana y avatar. Pasa a vidrio con scroll > 8 px (portal.js) */
.kb-encabezado{position:sticky;top:0;z-index:10;padding:max(8px,env(safe-area-inset-top)) var(--pad-pantalla) 10px;border-bottom:1px solid transparent;
  transition:background-color .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.kb-encabezado.is-vidrio{background:rgba(247,244,236,.72);-webkit-backdrop-filter:var(--blur-encabezado);backdrop-filter:var(--blur-encabezado);border-bottom-color:var(--linea-fina)}
.kb-premium .kb-encabezado.is-vidrio{background:rgba(244,233,228,.72)}
.kb-encabezado__fila{display:grid;grid-template-columns:96px minmax(0,1fr) 96px;align-items:center;height:48px}
.kb-encabezado__izq{display:flex}
.kb-encabezado__der{display:flex;justify-content:flex-end;gap:8px}
.kb-encabezado__titulo{font:500 var(--fs-titulo-pantalla)/1 var(--serif);letter-spacing:-.005em;color:var(--oliva-osc);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bajo 360 px la columna del título mide 96 px: a 27 px «Comunidad» o «Mis cursos» se cortaban. */
@media (max-width:359px){.kb-encabezado__titulo{font-size:20px}}

/* Botones de vidrio (.kb-vidrio viene de portal.css) usados como enlace o botón */
a.kb-vidrio,button.kb-vidrio{flex:none;padding:0;color:var(--oliva-osc);cursor:pointer;-webkit-appearance:none;appearance:none}
a.kb-vidrio:hover{color:var(--oliva-osc)}
.kb-vidrio svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kb-vidrio .kb-contador{position:absolute;z-index:2;top:-3px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--acento);color:var(--acento-texto);border:1.5px solid var(--crema-cla);font:600 10.5px/16px var(--sans);text-align:center}
.kb-avatar{display:block;width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.kb-avatar--inicial{display:grid;place-items:center;background:var(--crema-max);color:var(--oliva-osc);font:600 17px/1 var(--serif)}

.kb-contenido{display:block;padding:8px var(--pad-pantalla) calc(var(--base-alto) + 28px + env(safe-area-inset-bottom))}

/* Estado vacío (2f, 4f, 6c, 8b · portal_vacio()): titular serif de 26 px con un énfasis en cursiva,
   texto corto y botón opcional, centrados en el alto libre de la superficie. El alto descuenta el
   encabezado (arriba + 48 + 10 + 1 de filete), el padding de .kb-contenido (8 + 128) y la zona segura
   de abajo: así la página no hace scroll. Si el contenido no cabe, la caja crece. Con otras piezas
   arriba (selector, filtros), la pantalla le resta su alto al min-height. */
.kb-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 32px;text-align:center;
  min-height:calc(100vh - 195px - max(8px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));
  min-height:calc(100svh - 195px - max(8px,env(safe-area-inset-top)) - env(safe-area-inset-bottom))}
.kb-vacio__titulo{font:500 26px/1.15 var(--serif);color:var(--tinta);text-wrap:balance}
.kb-vacio__titulo em{font-style:italic;color:var(--oliva-osc)}
.kb-vacio__texto{max-width:34em;font-size:13.5px;line-height:1.5;color:var(--tinta-3);text-wrap:pretty}
.kb-vacio .kb-boton{margin-top:2px}

/* Escritorio: barra lateral de 248 px y superficie con 12 px de base alrededor y radio de 35 px */
@media (min-width:1024px){
  .kb-marco{top:12px;right:12px;bottom:12px;left:var(--lateral-ancho);border-radius:var(--r-superficie)}
  .kb-base{top:0;right:auto;width:var(--lateral-ancho);height:auto;flex-direction:column;align-items:stretch;gap:26px;padding:28px 18px}
  .kb-base__logo{display:block;align-self:flex-start;height:44px;width:auto;margin-left:10px}
  .kb-barra{flex:none;height:auto;padding:0;flex-direction:column;align-items:stretch;gap:4px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
  .kb-barra::before,.kb-barra::after{content:none}
  .kb-barra a{flex:none;height:48px;padding:0 18px;display:flex;align-items:center;font-size:14.5px;letter-spacing:0}
  .kb-accion{width:auto;height:52px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14.5px;font-weight:500;box-shadow:0 12px 26px -10px rgba(185,142,134,.6)}
  .kb-accion::before{content:none}
  .kb-accion__mas{font-size:24px;margin-top:-2px}
  .kb-accion__texto{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .kb-usuaria{display:flex;align-items:center;gap:10px;margin-top:auto;padding:8px;border-radius:var(--r-pill);background:rgba(247,244,236,.08);
    color:var(--crema-cla);font-size:13px;line-height:1.3}
  .kb-usuaria:hover{color:var(--crema-cla);background:rgba(247,244,236,.12)}
  .kb-usuaria .kb-avatar{width:38px;height:38px;flex:none}
  .kb-usuaria > span{min-width:0;overflow-wrap:anywhere}
  .kb-usuaria__sub{display:block;font-size:11.5px;color:rgba(247,244,236,.72)}
  .kb-pagina{padding:12px 12px 12px var(--lateral-ancho)}
  .kb-encabezado{top:12px;padding:18px 28px;border-bottom-color:var(--linea-media)}
  .kb-encabezado__fila{display:flex;align-items:center;gap:14px;height:auto}
  .kb-encabezado__izq:empty{display:none}
  .kb-encabezado__titulo{flex:1;font-size:30px;letter-spacing:0;text-align:left}
  .kb-encabezado__der{gap:10px}
  .kb-contenido{padding:26px 28px 40px}
  /* superficie (12 px de base arriba y abajo) − encabezado de 81 px − padding de .kb-contenido */
  .kb-vacio{min-height:calc(100vh - 171px)}
}

/* ═════════════ Acceso: login, activación y recuperación (9a–9d) ═════════════ */

.kb-acceso{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--grad-hero) var(--oliva-noche)}
/* Logo al centro del espacio libre sobre la tarjeta. Los dos espaciadores reparten ese espacio
   por igual (queda centrado como en el prototipo) y el de abajo nunca baja de 24 px, para que
   en pantallas bajas el logo no quede pegado a la tarjeta. */
.kb-acceso__hero{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding:max(40px,env(safe-area-inset-top)) 24px 0}
.kb-acceso__hero::before,.kb-acceso__hero::after{content:"";flex:1 1 0}
.kb-acceso__hero::after{min-height:24px}
.kb-acceso__logo{display:block;height:56px;width:auto}
.kb-acceso__etiqueta{margin-top:14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rosa-cla)}
.kb-acceso__tarjeta{display:flex;flex-direction:column;gap:14px;padding:30px 24px calc(40px + env(safe-area-inset-bottom));
  background:var(--superficie);border-radius:var(--r-superficie) var(--r-superficie) 0 0}

/* Tablet y escritorio: la misma tarjeta, flotando al centro sobre el degradado */
@media (min-width:600px){
  .kb-acceso{align-items:center;justify-content:center;padding:40px 24px}
  .kb-acceso__hero{flex:none;padding:0 0 28px}
  .kb-acceso__hero::before,.kb-acceso__hero::after{content:none}
  .kb-acceso__tarjeta{width:100%;max-width:440px;padding:34px 32px 38px;border-radius:var(--r-superficie);box-shadow:0 30px 60px -30px rgba(46,43,26,.55)}
}

/* ── Piezas de las pantallas de acceso (sirven también dentro del portal) ── */

/* Titular: cláusula en Jost + un solo énfasis en Cormorant cursiva */
.kb-titulo{font:600 30px/1.1 var(--sans);letter-spacing:-.022em;color:var(--tinta);text-wrap:pretty}
.kb-titulo em{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--oliva-osc)}
/* Ceja (Eyebrow del design system). En --oliva-med y no en --oliva: texto chico en oliva va en #6b6340 (contraste) */
.kb-eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--oliva-med)}
.kb-eyebrow::before{content:"";flex:none;width:30px;height:1px;background:currentColor}
.kb-texto{font-size:14px;line-height:1.5;color:var(--tinta-3);overflow-wrap:anywhere}
.kb-texto strong{font-weight:500;color:var(--tinta)}
.kb-texto a,.kb-nota a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.kb-nota{margin-top:4px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--tinta-3)}
/* Enlace suelto centrado; el padding agranda el área de toque sin mover nada */
.kb-enlace{align-self:center;margin:-12px 0;padding:12px 10px;text-align:center;font-size:13.5px}
.kb-alerta{padding:12px 16px;border-radius:var(--r-small);background:var(--error-bg);color:var(--error);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}

.kb-form{display:flex;flex-direction:column;gap:14px}
.kb-campo{display:flex;flex-direction:column;gap:6px}
.kb-campo__etiqueta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--oliva-med)}
.kb-campo__caja{position:relative}
/* Campo en píldora de 50 px. Letra de 16 px (el prototipo dice 15): con menos, iOS hace zoom al enfocar.
   El foco y el error suman 1 px por dentro con box-shadow, así el texto no se mueve. */
.kb-campo__input{display:block;width:100%;height:50px;margin:0;padding:0 18px;border:1px solid var(--linea);border-radius:var(--r-pill);background:var(--crema-max);
  font:400 16px/normal var(--sans);color:var(--tinta);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-hover),box-shadow var(--dur-hover)}
.kb-campo__input[type="password"]{letter-spacing:.2em}
.kb-campo__input:focus{outline:none;border-color:var(--oliva);box-shadow:inset 0 0 0 1px var(--oliva)}
.kb-campo__input[aria-invalid="true"]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.kb-campo__input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 100px var(--crema-max);-webkit-text-fill-color:var(--tinta);caret-color:var(--tinta)}
.kb-campo__input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1px var(--oliva),inset 0 0 0 100px var(--crema-max)}
.kb-campo__input[aria-invalid="true"]:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1px var(--error),inset 0 0 0 100px var(--crema-max)}
.kb-campo__input--mostrar{padding-right:88px}
/* «Mostrar» dentro del campo de contraseña: lo enciende portal.js (sin JS no aparece) */
.kb-campo__mostrar{position:absolute;top:3px;right:3px;bottom:3px;padding:0 15px;border:0;border-radius:var(--r-pill);background:none;
  font-size:12px;letter-spacing:0;color:var(--oliva-osc);cursor:pointer}
.kb-campo__mostrar[hidden]{display:none}
.kb-campo__pista{font-size:12px;color:var(--tinta-3)}
.kb-campo__pista.is-ok{color:var(--ok)}
.kb-campo__pista .kb-campo__ok{display:none}
.kb-campo__pista.is-ok .kb-campo__ok{display:inline}

/* Botón de bloque (Button del design system, variantes oliva oscuro y contorno). Solo cambia de color */
.kb-boton{display:block;width:100%;margin:0;padding:18px 24px;border:0;border-radius:var(--r-pill);background:var(--oliva-osc);color:var(--crema-cla);
  font:500 17px/24px var(--sans);letter-spacing:.04em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--dur-hover),color var(--dur-hover)}
.kb-boton:hover{background:var(--oliva-max);color:var(--crema-cla)}
.kb-boton--contorno{background:transparent;border:1px solid var(--oliva-osc);color:var(--oliva-osc)}
.kb-boton--contorno:hover{background:var(--oliva-osc);color:var(--crema-cla)}
/* Chico (Button sm del design system): estados vacíos y acciones dentro del contenido */
.kb-boton--chico{display:inline-block;width:auto;padding:11px 22px;font-size:14px;line-height:20px}

/* «Continuar con Google»: píldora de 50 px, fondo blanco y el logo G a color (pauta de Google).
   Más baja que «Entrar» y sin relleno oliva, para no competir con el botón principal. */
.kb-google{display:flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 20px;border:1px solid rgba(143,132,87,.45);border-radius:var(--r-pill);
  background:#fff;color:var(--tinta);font:500 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;transition:border-color var(--dur-hover)}
.kb-google:hover{color:var(--tinta);border-color:var(--oliva)}
.kb-google svg{flex:none;width:20px;height:20px}
.kb-separador{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--tinta-3)}
.kb-separador::before,.kb-separador::after{content:"";flex:1;height:1px;background:var(--linea)}