/* ===========================================================================
   GAIA Studio — layout.css
   Navbar fixed, sidebar, footer, bottom nav móvil.

   Estrategia responsive: en celular la navegación vive ABAJO (bottomnav), donde
   llega el pulgar; el sidebar se convierte en cajón deslizable. En escritorio el
   sidebar es fijo y el bottomnav desaparece. Mismo HTML, sin duplicar vistas.
   =========================================================================== */

:root {
  --navbar-h: 60px;
  --sidebar-w: 252px;
  --bottomnav-h: 62px;
}

/* ── Estructura general ───────────────────────────────────────────────────── */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.shell-main {
  flex: 1 0 auto;
  padding: 1.25rem 0;
  /* Deja aire para navbar fijo arriba y bottomnav abajo (+ safe-area del iPhone) */
  margin-top: var(--navbar-h);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}
@media (min-width: 900px) {
  .shell-main { padding-bottom: 1.5rem; }
  .has-sidebar .shell-main { margin-left: var(--sidebar-w); }
  .has-sidebar .footer      { margin-left: var(--sidebar-w); }
}

/* ── Navbar (fijo) ────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--navbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--border);
}
@media (min-width: 900px) {
  .has-sidebar .navbar { left: var(--sidebar-w); }
  /* En escritorio el sidebar ya muestra la marca: repetirla en la barra la
     duplica en pantalla. En móvil el sidebar es un cajón oculto, así que ahí
     el logo de la barra SÍ se queda (es el único). */
  .has-sidebar .navbar > .navbar-brand { display: none; }
}

.navbar-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.0625rem; color: var(--text);
  letter-spacing: -.02em;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand img { height: 30px; width: auto; }
/* Nombre del estudio junto a la marca: en la serif de display y espaciado,
   como el logo. En noche va en blanco: el salvia sobre fondo oscuro se apaga. */
.navbar-logo-text {
  font-family: var(--font-display, var(--font));
  font-size: 1.15rem; font-weight: 500; letter-spacing: .06em;
  color: var(--brand);
}
[data-theme="dark"] .navbar-logo-text { color: #fff; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .navbar-logo-text { color: #fff; }
}
.navbar-logo-img { height: 34px; width: auto; }

/* Marca de respaldo mientras el estudio no sube su logo: el disco de la
   identidad de GAIA, dibujado en CSS. Sin imágenes = sin request extra. */
/* Marca de respaldo (Ui::logo sin logo cargado): el monograma en trazo sobre el
   color de marca. El SVG hereda `currentColor`, así que basta con el color del
   contenedor — y por eso NO lleva fondo relleno: el aro del propio dibujo ya
   hace de contorno, y rellenarlo lo convertía en una mancha. */
.navbar-logo-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--brand); flex: 0 0 auto;
}
.navbar-logo-mark .ic { width: 34px; height: 34px; vertical-align: 0; }

.navbar-actions { display: flex; align-items: center; gap: .375rem; margin-left: auto; }

/* La sección "móvil" del menú de usuario (tema y estudio) solo se ve en celular:
   en la barra no caben, pero esconderlas del todo dejaría al usuario sin salida. */
.usermenu-mobile { display: none; }
.usermenu-subhead { padding: .5rem .75rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 680px) {
  /* Navbar compacto: las acciones se mudan al menú del avatar, pero la marca
     del estudio SÍ se queda visible junto al menú. */
  .navbar { padding: 0 .625rem; gap: .5rem; }
  .navbar-actions > .studio-switch { display: none; }   /* la luna (tema) SÍ se queda */
  .usermenu-name { display: none; }                                /* solo el avatar */
  .usermenu-mobile { display: block; }
}

/* Botón hamburguesa (solo móvil) */
.navbar-burger { display: inline-flex; }
@media (min-width: 900px) { .navbar-burger { display: none; } }

/* ── Menú de usuario ──────────────────────────────────────────────────────── */
.usermenu { position: relative; }
.usermenu-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem; border-radius: 999px;
  border: var(--bw) solid transparent;
}
.usermenu-trigger:hover { border-color: var(--border); }
.usermenu-name { font-weight: 600; font-size: .875rem; max-width: 130px; }
@media (max-width: 640px) { .usermenu-name { display: none; } }

.usermenu-panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
  min-width: 224px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: .375rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
}
.usermenu-panel[hidden] { display: none; }
.usermenu-head { padding: .625rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .375rem; }
.usermenu-head strong { display: block; font-size: .9375rem; }
.usermenu-head span { font-size: .8125rem; color: var(--muted); word-break: break-all; }

.menu-item {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; padding: .625rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 500; color: var(--text);
  text-align: left;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item-icon { width: 18px; text-align: center; flex: 0 0 auto; opacity: .75; }
.menu-item-danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: .375rem 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: var(--bw) solid var(--border);
  /* En móvil arranca fuera de pantalla y entra como cajón */
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* La barra de desplazamiento, fuera de la vista.
   *
   * El menú se desplaza igual —rueda, dedo y teclado—, pero la barra NO se
   * pinta. En Windows es una franja gris de 16 px que aparece y desaparece
   * según quepa o no el menú, y hace dos cosas feas a la vez: parte el panel
   * en dos con un color que no es de la marca, y al aparecer le quita ancho al
   * contenido, así que los renglones se recorren solos al abrir una pantalla
   * con una sección más. Lo que dice que hay más abajo es el renglón cortado
   * en el borde, que se ve siempre y no ocupa lugar. */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge viejo */
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome · Safari */
.sidebar.is-open { transform: translateX(0); }
@media (min-width: 900px) {
  .sidebar { transform: translateX(0); }
}

.sidebar-head {
  display: flex; align-items: center; gap: .5rem;
  height: var(--navbar-h); flex: 0 0 auto;
  padding: 0 1rem;
  border-bottom: var(--bw) solid var(--border);
}
.sidebar-close { margin-left: auto; }
@media (min-width: 900px) { .sidebar-close { display: none; } }

.sidebar-nav { padding: .75rem; flex: 1 1 auto; }
.sidebar-section {
  padding: .875rem .75rem .375rem;
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6875rem .75rem;
  margin-bottom: .125rem;
  border-radius: var(--radius-sm);
  border: var(--bw) solid transparent;
  font-weight: 600; font-size: .9375rem; color: var(--text);
  min-height: 44px;
}
.sidebar-link:hover { background: var(--surface-2); text-decoration: none; }
.sidebar-link.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.sidebar-icon { width: 20px; text-align: center; flex: 0 0 auto; font-size: 1.0625rem; }

/* Los huecos de icono se dimensionaron para EMOJI (ancho fijo + font-size). Un
   SVG se mide en `em`, así que sin esto se salía de esos 20 px y descuadraba la
   columna de etiquetas. Ya no queda un solo emoji en los menús —todos pasan por
   Ui::icon()—, pero la caja fija se queda: es la que garantiza que las
   etiquetas arranquen todas en la misma columna. */
.sidebar-icon, .bottomnav-icon, .menu-item-icon, .sidebar-subicon {
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-icon .ic   { width: 20px; height: 20px; vertical-align: 0; }
.menu-item-icon .ic { width: 18px; height: 18px; vertical-align: 0; }
.bottomnav-icon .ic { width: 22px; height: 22px; vertical-align: 0; }
/* El icono del enlace activo toma el acento; el resto se queda discreto para
   que el activo se distinga sin depender solo del fondo. */
.sidebar-link.is-active .sidebar-icon { color: var(--accent); }

/* Grupo colapsable (p. ej. Configuración) */
.sidebar-group {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .6875rem .75rem; margin-bottom: .125rem;
  border-radius: var(--radius-sm); border: var(--bw) solid transparent;
  background: none; color: var(--text); font-family: inherit;
  font-weight: 600; font-size: .9375rem; min-height: 44px; cursor: pointer; text-align: left;
}
.sidebar-group:hover { background: var(--surface-2); }
.sidebar-caret { margin-left: auto; font-size: .7rem; color: var(--muted); transition: transform .15s; }
.sidebar-group.is-open .sidebar-caret { transform: rotate(180deg); }
.sidebar-subnav { display: flex; flex-direction: column; gap: .125rem; margin: 0 0 .25rem .9rem; padding-left: .6rem; border-left: 2px solid var(--border); }
.sidebar-subnav[hidden] { display: none; }
.sidebar-sublink {
  display: flex; align-items: center; gap: .6rem; padding: .5625rem .625rem;
  border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; font-size: .875rem; min-height: 40px;
}
.sidebar-sublink:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-sublink.is-active { background: var(--accent-soft); color: var(--accent); }
.sidebar-subicon { width: 18px; text-align: center; flex: 0 0 auto; font-size: .95rem; }
.sidebar-badge {
  margin-left: auto;
  background: var(--danger); color: #fff;
  border-radius: 999px; padding: .0625rem .375rem;
  font-size: .6875rem; font-weight: 700; min-width: 20px; text-align: center;
}
.sidebar-foot { padding: .75rem; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* Bloque del panel al pie del menú (cómo llegar, a quién avisar).
   `margin-top:auto` lo empuja al fondo cuando el menú es corto, sin fijarlo:
   si algún día la lista de enlaces crece, este bloque baja con ella en vez de
   quedar montado encima. */
.sidebar-card {
  margin: auto .75rem .5rem;
  padding: .75rem;
  background: var(--surface-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.sidebar-card-t { margin: 0 0 .5rem; color: var(--muted); }
.sidebar-card-row {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 .375rem;
  font-size: .8125rem; line-height: 1.4;
  color: var(--text);
}
.sidebar-card-row:last-child { margin-bottom: 0; }
.sidebar-card-row .ic { color: var(--accent); margin-top: .15em; }
a.sidebar-card-row:hover { color: var(--accent); }

/* Fondo oscuro tras el cajón (solo móvil) */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgb(0 0 0 / .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .sidebar-backdrop { display: none; } }

/* ── Bottom nav (móvil) ───────────────────────────────────────────────────── */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: var(--bw) solid var(--border);
}
@media (min-width: 900px) { .bottomnav { display: none; } }

.bottomnav-link {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1875rem;
  color: var(--muted); font-size: .6875rem; font-weight: 600;
  border-top: 3px solid transparent;
  margin-top: -3px;
}
.bottomnav-link:hover { text-decoration: none; }
.bottomnav-link.is-active { color: var(--accent); border-top-color: var(--accent); }
.bottomnav-icon { font-size: 1.25rem; line-height: 1; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: var(--bw) solid var(--border);
  padding: 1.5rem 0;
  font-size: .875rem; color: var(--muted);
  /* En móvil el bottomnav tapa el pie: se le da aire */
  margin-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) { .footer { margin-bottom: 0; } }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Layout de autenticación ──────────────────────────────────────────────── */
/* Centrado a prueba de pantallas chicas.
 *
 * Antes: `display:grid; place-items:center`. Dos problemas, ambos reales:
 *  1) La columna implícita es `auto`, o sea se dimensiona al max-content del
 *     hijo — los 520px de max-width de la tarjeta. Y `justify-items:center`
 *     impide que el hijo se estire al contenedor, así que su `width:100%`
 *     resolvía contra esos 520px, NO contra la pantalla: la tarjeta se salía
 *     por la derecha en cualquier celular de menos de 520px.
 *  2) `align-items:center` centra verticalmente, pero cuando la tarjeta es más
 *     alta que la pantalla el sobrante se reparte arriba y abajo y el borde
 *     superior queda INALCANZABLE: no se puede hacer scroll hacia arriba.
 *
 * Ahora: flex + `margin:auto` en la tarjeta. En horizontal, `width:100%` resuelve
 * contra el contenedor (pantalla − padding), así que no hay desbordamiento posible.
 * En vertical, los márgenes automáticos centran cuando sobra espacio y se
 * resuelven a 0 cuando falta — la tarjeta se pega arriba y la página scrollea.
 */
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  padding: 1.25rem;
  background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 430px;
  margin: auto;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
@media (min-width: 480px) { .auth-card { padding: 2.25rem; } }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head h1 { margin-bottom: .25rem; }
.auth-logo { margin: 0 auto .875rem; }
.auth-foot { margin-top: 1.25rem; text-align: center; font-size: .9375rem; color: var(--muted); }

/* ── Cabecera de página ───────────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-head h1 { margin: 0; }
.page-head-actions { margin-left: auto; display: flex; gap: .5rem; }

/* ── Contextos de color por rol ───────────────────────────────────────────── */
/* La clase va en <body> y todo el árbol hereda el acento correcto. Así el
   usuario SABE dónde está parado sin leer un título: salvia = su panel de
   alumno, arena = instructor, verde profundo = negocio, carbón = plataforma. */
.ctx-member { --accent: var(--member); --accent-soft: var(--member-soft); --accent-ink: var(--member-ink); }
.ctx-coach  { --accent: var(--coach);  --accent-soft: var(--coach-soft);  --accent-ink: var(--coach-ink); }
.ctx-studio { --accent: var(--studio); --accent-soft: var(--studio-soft); --accent-ink: var(--studio-ink); }
.ctx-super  { --accent: var(--super);  --accent-soft: var(--super-soft);  --accent-ink: var(--super-ink); }

/* ── Selector de estudio (navbar) ───────────────────────────────────────── */
/* Solo aparece cuando la persona pertenece a más de un estudio. */
.studio-switch { position: relative; }
.studio-switch-trigger {
  display: flex; align-items: center; gap: .5rem; padding: .3125rem .5rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: var(--bw) solid var(--border); color: var(--text); font-weight: 600; cursor: pointer; max-width: 200px;
}
.studio-switch-trigger:hover { border-color: var(--accent); }
.studio-switch-logo { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: .95rem; }
.studio-switch-logo img { width: 100%; height: 100%; object-fit: cover; }
.studio-switch-name { font-size: .875rem; }
.studio-switch-panel { right: 0; left: auto; min-width: 250px; }
.studio-pick { display: flex; align-items: center; gap: .625rem; width: 100%; text-align: left; }
.studio-pick.is-active { background: var(--accent-soft); color: var(--accent); }
.studio-pick-logo { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 1rem; }
.studio-pick-logo img { width: 100%; height: 100%; object-fit: cover; }
.studio-pick-check { margin-left: auto; color: var(--accent); font-weight: 800; }


/* ── Pestañas de sección ──────────────────────────────────────────────────── */
/* Son enlaces reales, no un conmutador de JS: cada pestaña es su propia URL.
   En celular la fila scrollea en horizontal en vez de partirse en dos renglones,
   que es lo que hace que se pierda la noción de "estas son hermanas". */
.tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--bw) solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .625rem .875rem;
  color: var(--muted);
  font-size: .9375rem; font-weight: 600;
  white-space: nowrap;
  /* El subrayado se dibuja SIEMPRE, transparente cuando no está activa: así la
     pestaña no brinca 2px al seleccionarse. */
  border-bottom: 2px solid transparent;
  margin-bottom: calc(-1 * var(--bw));
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-icon { font-size: 1rem; line-height: 1; }
.tab-badge {
  min-width: 18px; height: 18px; padding: 0 .3125rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .6875rem; font-weight: 700;
}