/*
 * themontessori.world — base compartida.
 *
 * Único stylesheet cargado por TODOS los layouts (junto a fonts.css). Centraliza
 * lo que de verdad es común a toda la app para no repetirlo: los tokens de marca
 * y las utilidades atómicas. Antes cada área (public, auth, errors) llevaba su
 * propia copia del :root; eso era copy-paste que se desincronizaba.
 *
 * Reparto: aquí viven SOLO los tokens con el MISMO valor en todas partes. Los
 * que varían por área a propósito (p. ej. --greige/--maroon más oscuros y con
 * contraste AA en las páginas de contenido, o el --ink-soft de errors) se quedan
 * en el :root de su archivo, que se carga DESPUÉS de este y por tanto gana.
 *
 * Plain CSS servido por Propshaft; NO se procesa con Tailwind.
 */

/* ===================== Tokens de marca (comunes) ===================== */
:root{
  --ink:#2D2A26;--ink-soft:#5B554B;--paper:#FFFFFF;--cream:#F4EFE3;--cream-2:#EFE8D7;
  --line:#E7E0D1;
  --blue:#6FA8C7;--orange:#DD9A52;--pink:#DCA1A8;--green:#7FA877;--yellow:#E6C45E;
  /* Versiones oscurecidas de los tonos de marca para usarlos como TEXTO sobre
     fondo claro: los pasteles de arriba se quedan por debajo de 3:1 y no valen
     ni para texto grande. Estos rondan 3.2:1 (mismo tono, más profundo) y se
     usan p. ej. en los números de la home. El amarillo es el que más se aparta
     (un amarillo claro no puede ser legible sobre blanco sin volverse dorado). */
  --blue-ink:#6396B1;--orange-ink:#BC8346;--green-ink:#74996C;--yellow-ink:#A68D44;
  /* --greige (texto secundario) y --maroon (acciones destructivas / enlaces) van
     con contraste AA sobre fondos claros: --greige #6E655A da ~4.8:1 sobre crema;
     --maroon #A94B42 da ~5.6:1 sobre blanco y ~4.7:1 sobre crema. Antes cada área
     tenía su propio tono y auth/errors se quedaron con el de marca (~2.6:1), por
     debajo de AA. ÚNICA excepción: sobre la barra lateral OSCURA el greige debe
     ser CLARO para contrastar sobre --ink; ese caso se resuelve en admin.css
     (.admin-sidebar), no aquí. */
  --greige:#6E655A;--maroon:#A94B42;
  /* Acción: el verde sustituye al negro en los botones de UI. El foco de teclado
     y el halo de los campos usan estos tokens; el negro (--ink) se queda para
     texto y superficies (cabecera oscura, footer), nunca como fondo de botón.
     El verde deja de ser el color semántico de "verificado". */
  --action:#2E6B3D;--action-hover:#24552F;--action-ring:rgba(46,107,61,.16);
  --danger:#9B2C22;--field-bg:#FDFCF8;--disabled-bg:#D8D3C6;--disabled-fg:#8C8272;
}

/* ==================== Utilidades de espaciado ====================
   Utilidades atómicas de margen, deliberadamente con los MISMOS nombres que
   Tailwind (.mt-2, .my-3…) y su misma escala (unidad = 0.25rem, así 3 = .75rem),
   por si algún día se introduce Tailwind de verdad: el HTML no habría que tocarlo.
   Se añaden SOLO a demanda, no la escala entera. */
.my-3{margin-top:.75rem;margin-bottom:.75rem}

/* ===================== Menú de cuenta (compartido) =====================
   Píldora compacta + desplegable de la persona logueada, IDÉNTICO en el header
   público (shared/_public_header) y en el topbar del editor (listings/_topbar);
   ambos renderizan shared/_account_menu. Vive aquí, en la base común, justo para
   que se vea igual en las dos áreas (antes el editor tenía su propio lt-menu,
   mucho más grande). Superficies claras en las dos, así que un único estilo vale.
   El menú se abre/cierra con menu_controller (clic fuera / Escape). */
.acct{position:relative}
.acct-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:3px 12px 3px 4px;background:none;cursor:pointer;font:inherit;color:var(--ink);max-width:240px;
  transition:color .2s,border-color .2s}
.acct-pill:hover{color:var(--blue);border-color:var(--blue)}
/* La inicial va en --ink sobre un tono de marca claro (fijado inline por
   account_avatar_color); el fondo aquí es solo un respaldo si faltara el inline.
   Con favicon/logo, la imagen tapa el círculo y el color no se ve. */
.acct-avatar{flex:none;width:23px;height:23px;border-radius:50%;background:var(--cream-2);color:var(--ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;letter-spacing:.02em}
.acct-avatar img{width:100%;height:100%;object-fit:cover}
.acct-name{font-weight:600;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-chevron{flex:none;color:var(--greige);transition:transform .18s}
.acct-pill[aria-expanded="true"] .acct-chevron{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* El panel arranca cerrado y menu_controller togglea el atributo `hidden`. Como
   arriba fijamos display:flex (regla de clase, de autor), gana al display:none
   que el navegador da a [hidden]; hay que reponerlo explícitamente o el menú se
   queda siempre desplegado. */
.acct-menu[hidden]{display:none}
.acct-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 14px;border-radius:8px;font-size:.9rem;
  font-weight:600;color:var(--ink);text-decoration:none;text-align:left;background:none;border:none;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.acct-item svg{flex:none;width:18px;height:18px;color:var(--greige)}
a.acct-item:hover,button.acct-item:hover{background:#faf8f4}
/* "Ver ficha" se deshabilita (dirty-lock) mientras el editor tenga cambios sin
   guardar; sin hover, para que no parezca pulsable. */
button.acct-item:disabled{opacity:.45;cursor:default}
button.acct-item:disabled:hover{background:none}
.acct-item__t{flex:1;min-width:0}
.acct-item--active{color:var(--ink-soft);cursor:default}
.acct-item--danger{color:var(--maroon)}
.acct-item--danger svg{color:var(--maroon)}
.acct-item--danger:hover{background:#f6e9e7}
.acct-logout{margin:0}
/* El nombre de la escuela es lo segundo que se retira del cluster de la cabecera
   (después del código de idioma): la píldora pasa de sus 240px de tope a 55px,
   y es lo que de verdad libera sitio. El umbral es el de la cabecera compartida
   —ver el bloque de breakpoints de public.css—, no un valor propio de aquí.
   Se oculta a la VISTA pero no al árbol de accesibilidad: con display:none el
   botón se queda con un avatar y un chevron, los dos aria-hidden o decorativos,
   y un lector de pantalla lo anuncia como "botón" a secas. */
@media (max-width:630px){
  .acct-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .acct-pill{padding:4px 8px 4px 4px;gap:6px}
}