/* ============================================================================
   CANINEUS · panel.css
   Sistema de diseño. Fase 1.

   Cómo está organizado:
     1. Tokens              — neutros fijos, claro y oscuro
     2. Paletas             — lo único que cambia con la marca del colegio
     3. Compatibilidad      — traduce las variables viejas mientras migramos
     4. Base                — reset y tipografía
     5. Armazón             — sidebar (escritorio) / appbar + tabbar (móvil)
     6. Componentes         — botones, campos, listas, hojas, etc.
     7. Legado              — clases antiguas, retocadas hasta que se migren

   Reglas que no se rompen:
     · Los fondos y el texto NUNCA usan el color de la paleta.
     · Las sombras son grises, nunca de color.
     · Ningún objetivo táctil por debajo de 44 px en móvil.
   ========================================================================== */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Neutros */
  --bg:          #F5F6F8;
  --surface:     #FFFFFF;
  --surface-2:   #F1F3F6;
  --surface-3:   #E8EBEF;
  --border:      #E3E7EC;
  --border-2:    #CBD2DA;
  --text:        #14171C;
  --text-2:      #5B6572;
  --text-3:      #8B95A2;

  /* Estado */
  --ok:        #10714A;  --ok-bg:     #E7F4EE;  --ok-br:     #BFE3D2;
  --warn:      #8A5300;  --warn-bg:   #FDF2E0;  --warn-br:   #F0D9AE;
  --danger:    #AE2A1C;  --danger-bg: #FDECEA;  --danger-br: #F4C8C2;

  /* Tipografía */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:16px;
  --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:34px;

  /* Espaciado, base 4 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px; --s-18:72px;

  /* Forma */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Sombras — grises, nunca de color */
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 2px 8px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-3: 0 12px 32px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);

  /* Medidas del armazón */
  --sidebar-w: 236px;
  --appbar-h:  54px;
  --tabbar-h:  56px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"]{
  --bg:        #0E1116;
  --surface:   #161A21;
  --surface-2: #1E242D;
  --surface-3: #2A313B;
  --border:    #262C35;
  --border-2:  #39414D;
  --text:      #ECEFF3;
  --text-2:    #A0AAB7;
  --text-3:    #6F7A89;

  --ok:        #4FD190;  --ok-bg:     #11291F;  --ok-br:     #1E4735;
  --warn:      #E2A852;  --warn-bg:   #2A2113;  --warn-br:   #4A3A1C;
  --danger:    #F07A70;  --danger-bg: #2C1716;  --danger-br: #4E2622;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --sh-3: 0 14px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
}


/* ============================================================
   2. PALETAS
   Las claves son las mismas de siempre ('azul-original', etc.)
   para no tener que migrar nada en configuracion_negocio.
   Cada paleta define cuatro valores:
     --acento        fondo de la acción principal (texto blanco encima)
     --acento-hover  su estado al pasar el cursor
     --acento-suave  fondo teñido para selección y avisos
     --acento-txt    versión legible sobre fondo claro
   ============================================================ */
[data-paleta="azul-original"]{ --acento:#1D63D1; --acento-hover:#1852AF; --acento-suave:#EAF1FD; --acento-txt:#14509E; }
[data-paleta="esmeralda"]    { --acento:#0E8A5F; --acento-hover:#0B714E; --acento-suave:#E6F5EF; --acento-txt:#0A6D4B; }
[data-paleta="purpura"]      { --acento:#6D3BD1; --acento-hover:#5A2FB0; --acento-suave:#F0EAFD; --acento-txt:#5A2FB0; }
[data-paleta="vino"]         { --acento:#B32741; --acento-hover:#951F35; --acento-suave:#FCEBEF; --acento-txt:#921F35; }
[data-paleta="ambar"]        { --acento:#B26A00; --acento-hover:#935700; --acento-suave:#FDF1E0; --acento-txt:#8A5200; }
[data-paleta="cian"]         { --acento:#0A7C90; --acento-hover:#086476; --acento-suave:#E4F4F7; --acento-txt:#086476; }
[data-paleta="grafito"]      { --acento:#3E4651; --acento-hover:#2C333C; --acento-suave:#EEF0F3; --acento-txt:#333A44; }
[data-paleta="bronce"]       { --acento:#8A6A16; --acento-hover:#6E5411; --acento-suave:#F8F1DE; --acento-txt:#6E5411; }

/* En oscuro el acento sube de luminosidad: el mismo tono que
   funciona sobre blanco se apaga sobre un fondo oscuro. */
[data-theme="dark"][data-paleta="azul-original"]{ --acento:#3B82F6; --acento-hover:#5B9AFB; --acento-suave:#14243B; --acento-txt:#84B4FF; }
[data-theme="dark"][data-paleta="esmeralda"]    { --acento:#12A874; --acento-hover:#18C088; --acento-suave:#0F2A20; --acento-txt:#5FD9AC; }
[data-theme="dark"][data-paleta="purpura"]      { --acento:#8B5CF6; --acento-hover:#A277FF; --acento-suave:#1F1837; --acento-txt:#BFA0FF; }
[data-theme="dark"][data-paleta="vino"]         { --acento:#D93E5C; --acento-hover:#E85874; --acento-suave:#2E1620; --acento-txt:#FF93A8; }
[data-theme="dark"][data-paleta="ambar"]        { --acento:#D98A0B; --acento-hover:#EDA02A; --acento-suave:#2C2110; --acento-txt:#F5C069; }
[data-theme="dark"][data-paleta="cian"]         { --acento:#0EA5BE; --acento-hover:#20BDD6; --acento-suave:#0E272D; --acento-txt:#5FD5E8; }
[data-theme="dark"][data-paleta="grafito"]      { --acento:#7C8899; --acento-hover:#93A0B0; --acento-suave:#1F252D; --acento-txt:#AEB9C6; }
[data-theme="dark"][data-paleta="bronce"]       { --acento:#B8912E; --acento-hover:#CFA742; --acento-suave:#282112; --acento-txt:#E0C275; }


/* ============================================================
   3. COMPATIBILIDAD
   Las páginas que todavía no se han migrado siguen pidiendo
   --navy-panel, --mist, --line… Aquí se traducen al sistema
   nuevo para que sigan funcionando y se vean decentes mientras
   las vamos pasando una por una.
   BORRAR ESTE BLOQUE cuando no quede ninguna página sin migrar.
   ============================================================ */
:root{
  --navy-deep:   var(--bg);
  --navy-panel:  var(--surface);
  --navy-panel-2:var(--surface-2);
  --ink:         var(--bg);
  --white:       var(--text);
  --mist:        var(--text-2);
  --mist-dim:    var(--text-3);
  --line:        var(--border);
  --line-strong: var(--border-2);
  --blue-deep:   var(--acento);
  --blue-mid:    var(--acento);
  --blue-bright: var(--acento);
  --blue-glow:   var(--acento-txt);
  --radius:      var(--r-lg);
}


/* ============================================================
   4. BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  background:var(--bg);
  /* Reserva el hueco de la barra de desplazamiento: sin esto, al abrir
     un modal el contenido salta unos píxeles a la derecha. */
  scrollbar-gutter:stable;
}

body{
  min-height:100dvh;
  font-family:var(--font);
  font-size:var(--t-base);
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* El doble toque para hacer zoom se desactiva; el pellizco sigue. */
  touch-action:manipulation;
  /* Sin rebote elástico en el armazón: es de lo que más delata
     que una app instalada es en realidad una página web. */
  overscroll-behavior-y:none;
}

h1,h2,h3,h4{ line-height:1.2; letter-spacing:-0.02em; font-weight:700; }
h1{ font-size:26px; letter-spacing:-0.03em; }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-md); letter-spacing:-0.01em; }
h4{ font-size:var(--t-base); }

a{ color:var(--acento-txt); text-decoration:none; }
button, input, select, textarea{ font-family:inherit; }
img{ max-width:100%; display:block; }

::selection{ background:var(--acento-suave); color:var(--acento-txt); }

:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ============================================================
   5. ARMAZÓN
   Escritorio: barra lateral fija a la izquierda.
   Móvil: barra superior fija + barra de pestañas abajo.
   Son dos estructuras distintas, no una encogida.
   ============================================================ */

/* ---- Barra lateral (solo escritorio) ----
   El menú es lo único que se desplaza; la marca arriba y el pie con la
   cuenta abajo quedan siempre visibles. Antes toda la barra se
   desplazaba junta y en pantallas bajas "Cerrar sesión" se salía. */
.sidebar{
  position:fixed; top:0; left:0;
  width:var(--sidebar-w); height:100dvh;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:var(--s-3) var(--s-2);
  overflow:hidden;
  z-index:110;
}
.sidebar .nav-groups{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
.sidebar .nav-groups::-webkit-scrollbar{ width:0; }
.sidebar .brand, .sidebar .sidebar-footer{ flex-shrink:0; }

/* ---- Contenido ----
   Ocupa todo el espacio a la derecha de la barra lateral. El relleno
   sube un poco en pantallas muy anchas para que no quede pegado a los
   bordes, pero el contenido no se limita a una columna central. */
main{
  margin-left:var(--sidebar-w);
  min-width:0;
  padding:var(--s-8) var(--s-6) var(--s-14);
}
@media (min-width:1600px){
  main{ padding-left:var(--s-10); padding-right:var(--s-10); }
}

/* ---- Barra superior de móvil ---- */
.appbar{
  display:none;
  position:sticky; top:0; z-index:100;
  height:var(--appbar-h);
  align-items:center; gap:var(--s-2);
  padding:0 var(--s-2) 0 var(--s-4);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.appbar .appbar-title{
  flex:1; min-width:0;
  font-size:var(--t-lg); font-weight:700; letter-spacing:-0.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar-logo{ width:30px; height:30px; border-radius:9px; object-fit:cover; flex-shrink:0; }

/* Botón de icono con área táctil cómoda */
.icon-btn{
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:var(--r-full);
  color:var(--text-2); cursor:pointer; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn:active{ background:var(--surface-3); }
.icon-btn svg{ width:21px; height:21px; }
/* Punto de aviso, sin número: el número va dentro del módulo */
.icon-btn .dot-alert{
  position:absolute; top:9px; right:10px;
  width:9px; height:9px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface);
}

/* ---- Barra de pestañas (solo móvil) ---- */
.tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-b);
}
.tabbar-inner{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:relative; }

/* Píldora que se desliza de una pestaña a otra. Se mueve en el momento
   del toque, no al llegar la página nueva: así el movimiento se ve
   entero y el cambio se siente inmediato. */
.tab-indicador{
  position:absolute; top:6px; left:0;
  height:calc(var(--tabbar-h) - 12px);
  border-radius:var(--r-full);
  background:var(--acento-suave);
  pointer-events:none; z-index:0;
  transition:transform .26s cubic-bezier(.34,.9,.3,1),
             width .26s cubic-bezier(.34,.9,.3,1),
             opacity .18s ease;
}
/* Al entrar en una página debe aparecer ya en su sitio, no llegar
   deslizándose desde el borde izquierdo. */
.tab-indicador.sin-animar{ transition:none; }

.tab{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--tabbar-h);
  border:none; background:none; cursor:pointer;
  color:var(--text-3); font-size:10.5px; font-weight:500;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.tab svg{ width:23px; height:23px; stroke-width:1.8; }
.tab.active{ color:var(--acento-txt); font-weight:600; }
.tab.active svg{ stroke-width:2.2; }
/* Respuesta al dedo antes de que llegue la página nueva. */
.tab:active{ opacity:.6; }
.tab .dot-alert{
  position:absolute; top:7px; left:50%; margin-left:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface);
}

/* ---- Cambio a móvil ---- */
@media (max-width:1023px){
  .sidebar{ display:none; }
  .appbar{ display:flex; }
  .tabbar{ display:block; }
  main{
    margin-left:0;
    max-width:none;
    padding:var(--s-4) var(--s-4);
    /* Justo lo necesario para que la última fila no quede bajo la
       barra: más margen que este deja un hueco visible al final. */
    padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s-4));
  }
  h1{ font-size:var(--t-xl); }
}


/* ============================================================
   6. COMPONENTES
   ============================================================ */

/* ---- Bienvenida al iniciar sesión ----
   La plataforma se ve por detrás, desenfocada, y encima solo el trazo
   del logo: el fondo del vídeo se recorta en tiempo real desde el
   armazón. Por eso aquí la capa no lleva color sólido, solo un velo. */
.bienvenida{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
          backdrop-filter:blur(18px) saturate(.9);
  opacity:1; transition:opacity .45s ease;
}
.bienvenida.saliendo{ opacity:0; pointer-events:none; }

/* El vídeo original no se muestra: es solo la fuente de la que el
   lienzo toma cada fotograma.

   Se saca fuera de la pantalla en lugar de encogerlo u ocultarlo. Safari
   en iPhone se niega a reproducir un vídeo que considera invisible —un
   píxel, opacidad cero o display:none— y entonces no hay fotogramas que
   copiar. Fuera de la pantalla, con su tamaño real, sí lo reproduce. */
.bienvenida-fuente{
  position:absolute; top:0; left:-10000px;
  width:240px; height:135px;
  pointer-events:none;
}

/* Diagnóstico en pantalla, solo con ?diag=1 en la dirección. */
.bienvenida-diag{
  position:absolute; left:0; right:0; bottom:0;
  max-height:45%; overflow:auto;
  padding:10px 12px calc(10px + var(--safe-b));
  background:rgba(0,0,0,.82); color:#9fe870;
  font-family:ui-monospace, monospace; font-size:11px; line-height:1.6;
  white-space:pre-wrap; word-break:break-all;
}

.bienvenida-lienzo{
  width:min(78vw, 460px);
  height:auto;
  /* El lienzo es 16:9 y el logo va centrado, así que el aire de los
     lados es transparente y no molesta. */
}

@media (prefers-reduced-motion:reduce){
  /* A quien pide menos movimiento no se le pone ninguna animación: solo
     el velo desenfocado mientras carga, que dura lo mismo. */
  .bienvenida-lienzo, .bienvenida-fuente{ display:none; }
}

/* ---- Indicador de carga entre páginas ----
   z-index por debajo del armazón a propósito: la barra lateral (110),
   la superior y las pestañas (100) quedan encima y nítidas, así que
   solo se atenúa el contenido y nunca se pierde la referencia de
   dónde estás. */
.cargando-overlay{
  position:fixed; inset:0; z-index:90;
  display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cargando-overlay.on{ display:flex; }
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--border-2); border-top-color:var(--acento);
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .spinner{ animation-duration:1.8s; }
}

/* ---- Encabezado de página ---- */
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-5); flex-wrap:wrap; margin-bottom:var(--s-6);
}
.page-head .sub{ color:var(--text-2); margin-top:4px; }

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:40px; padding:0 var(--s-4);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-size:var(--t-base); font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .13s ease, border-color .13s ease, color .13s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn:disabled{ opacity:.5; cursor:default; }

.btn-primary{ background:var(--acento); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--acento-hover); }
.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border-2); box-shadow:var(--sh-1); }
.btn-secondary:hover:not(:disabled){ background:var(--surface-2); }
.btn-ghost{ background:none; color:var(--text-2); }
.btn-ghost:hover:not(:disabled){ background:var(--surface-2); color:var(--text); }
.btn-danger{ background:var(--surface); color:var(--danger); border-color:var(--danger-br); }
.btn-danger:hover:not(:disabled){ background:var(--danger-bg); }

.btn-sm{ height:34px; padding:0 var(--s-3); font-size:var(--t-sm); }
.btn-lg{ height:48px; padding:0 var(--s-6); font-size:var(--t-md); }
.btn-block{ width:100%; }

/* En móvil ningún botón baja de 44 px de alto */
@media (max-width:1023px){
  .btn{ height:46px; padding:0 var(--s-5); }
  .btn-sm{ height:44px; }
}

/* ---- Campos ---- */
.field{ margin-bottom:var(--s-4); }
.field > label{ display:block; font-size:var(--t-sm); font-weight:500; color:var(--text); margin-bottom:6px; }
.field .help{ font-size:var(--t-sm); color:var(--text-3); margin-top:6px; }
.field .err{ font-size:var(--t-sm); color:var(--danger); margin-top:6px; }

.input{
  width:100%; height:42px; padding:0 var(--s-3);
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-size:var(--t-base); outline:none;
  transition:border-color .13s ease, box-shadow .13s ease;
}
textarea.input{ height:auto; min-height:88px; padding:11px var(--s-3); resize:vertical; line-height:1.5; }
select.input{ appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
.input::placeholder{ color:var(--text-3); }
.input:hover:not(:disabled){ border-color:var(--text-3); }
.input:focus{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.input:disabled{ background:var(--surface-2); color:var(--text-3); cursor:default; }
.input.error{ border-color:var(--danger); }
.input.error:focus{ box-shadow:0 0 0 3px var(--danger-bg); }

/* ---- El zoom automático de iOS ----
   iOS acerca la pantalla al enfocar cualquier campo cuya letra mida
   menos de 16 px, y después no vuelve solo: hay que pellizcar para
   deshacerlo. Peor aún, mientras está acercado la barra lateral y las
   pestañas (que están fijas) se salen de la vista.

   Va con !important a propósito: cada página define sus propios campos
   con más peso que esta regla, y basta con que uno se escape para que
   el problema vuelva. Es el único sitio del proyecto donde se usa. */
@media (max-width:1023px){
  .input{ height:48px; }
  input, select, textarea,
  .input, .field input, .field select, .field textarea{
    font-size:16px !important;
  }
}

/* ---- Interruptor ---- */
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch .slider{ position:absolute; inset:0; background:var(--surface-3); border-radius:var(--r-full); transition:background .16s ease; }
.switch .slider::before{
  content:''; position:absolute; width:20px; height:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; box-shadow:var(--sh-1);
  transition:transform .16s ease;
}
.switch input:checked + .slider{ background:var(--acento); }
.switch input:checked + .slider::before{ transform:translateX(18px); }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:52px; padding:var(--s-3) var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); margin-bottom:var(--s-4);
}
.toggle-row .hint{ display:block; font-size:var(--t-sm); color:var(--text-2); margin-top:2px; }

/* ---- Selector segmentado ---- */
.segmented{ display:inline-flex; background:var(--surface-2); border-radius:var(--r-sm); padding:3px; gap:2px; }
.segmented button{
  border:none; background:none; cursor:pointer;
  padding:8px 14px; border-radius:6px;
  font-size:var(--t-sm); font-weight:500; color:var(--text-2);
}
.segmented button[aria-pressed="true"], .segmented button.active{
  background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--sh-1);
}

/* ---- Insignias ---- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px; border-radius:var(--r-full);
  font-size:var(--t-xs); font-weight:600; white-space:nowrap;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-br); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-br); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-br); }
.badge-marca{ background:var(--acento-suave); color:var(--acento-txt); border-color:transparent; }

/* Contador numérico, para módulos con pendientes */
.count{
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); background:var(--danger); color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

/* ---- Retratos ---- */
.avatar{
  width:40px; height:40px; border-radius:var(--r-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--surface-3); color:#fff;
  font-size:var(--t-base); font-weight:700; letter-spacing:-0.02em;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-sm{ width:30px; height:30px; font-size:var(--t-xs); }
.avatar-lg{ width:64px; height:64px; font-size:var(--t-xl); }
.avatar-xl{ width:88px; height:88px; font-size:var(--t-2xl); }

/* ---- Tarjetas ---- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
.card-pad{ padding:var(--s-6); }
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5) var(--s-6); border-bottom:1px solid var(--border);
}
.card-head .sub{ font-size:var(--t-sm); color:var(--text-2); margin-top:2px; }
@media (max-width:1023px){
  .card-pad{ padding:var(--s-4); }
  .card-head{ padding:var(--s-4); }
}

/* ---- Cifras ---- */
.stat{ padding:var(--s-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.stat .lbl{ font-size:var(--t-sm); color:var(--text-2); margin-bottom:6px; }
.stat .val{ font-size:var(--t-2xl); font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.stat .val.debe{ color:var(--danger); }
.stat .delta{ font-size:var(--t-sm); color:var(--text-3); margin-top:4px; }
.stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-3); }
@media (max-width:1023px){
  .stat{ padding:var(--s-3) var(--s-4); }
  .stat .val{ font-size:var(--t-lg); }
  .stats-row{ grid-template-columns:1fr 1fr; }
  /* Un número impar de cifras deja la última sola: que ocupe el ancho
     en vez de quedar media tarjeta vacía al lado. */
  .stats-row > .stat:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* ---- Listas ---- */
.list{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.list-row{
  display:flex; align-items:center; gap:var(--s-4);
  min-height:64px; padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--border);
  transition:background .12s ease;
}
.list-row:last-child{ border-bottom:none; }
.list-row:hover{ background:var(--surface-2); }
.list-row.clickable{ cursor:pointer; }
/* Flecha del aviso: indica que lleva a otro sitio, no que decide aquí. */
.list-row .ir{ width:18px; height:18px; color:var(--text-3); flex-shrink:0; }
a.list-row{ text-decoration:none; color:inherit; }
.list-row.clickable:active{ background:var(--surface-3); }

/* Sin destello gris del navegador: el estado pulsado lo definimos
   nosotros, y el suyo llega tarde y con otro color. */
a, button, .fila, .acceso, .list-row, .pet-card, .item-card, .cliente-card{
  -webkit-tap-highlight-color:transparent;
}
@media (hover:none){
  .fila:active, .acceso:active, .cliente-card:active{ background:var(--surface-2); }
  .item-card:active, .pet-card:active{ opacity:.7; }
}
.list-main{ flex:1; min-width:0; }
.list-title{ font-weight:600; font-size:var(--t-base); }
.list-meta{ font-size:var(--t-sm); color:var(--text-2); margin-top:1px; }
.list-actions{ display:flex; gap:var(--s-2); opacity:0; transition:opacity .12s ease; }
.list-row:hover .list-actions,
.list-row:focus-within .list-actions{ opacity:1; }
/* En táctil no existe "pasar el cursor": las acciones se ven siempre */
@media (hover:none){ .list-actions{ opacity:1; } }
@media (max-width:1023px){
  .list-row{ padding:var(--s-3) var(--s-4); }
  .list-actions{ display:none; } /* pasan al botón de tres puntos */
}

/* ---- Tiras de pestañas horizontales ----
   Van con "body" delante para ganarle a las reglas de cada página.

   Dos cosas que se arreglan aquí:
   · overflow-x:auto por sí solo convierte también el eje vertical en
     desplazable, y la tira se movía hacia arriba y abajo con el dedo.
   · Cuando hay más pestañas de las que caben, no había ninguna señal:
     el borde se desvanece para que se vea que sigue. */
body .toolbar-tabs, body .subtabs, body .tabs{
  overflow-x:auto;
  /* Sin esto, declarar overflow-x:auto convierte también el eje
     vertical en desplazable y la tira se movía arriba y abajo. Con
     hidden, el gesto vertical pasa a la página, que es lo natural. */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
body .toolbar-tabs::-webkit-scrollbar,
body .subtabs::-webkit-scrollbar,
body .tabs::-webkit-scrollbar{ height:0; }

.con-mas-der{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.con-mas-izq{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 36px);
          mask-image:linear-gradient(to right, transparent, #000 36px);
}
.con-mas-izq.con-mas-der{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
          mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* ---- Pestañas dentro de una pantalla ---- */
.tabs{
  display:flex; gap:var(--s-5);
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ height:0; }
.tabs button{
  border:none; background:none; cursor:pointer; white-space:nowrap;
  padding:var(--s-3) 0; font-size:var(--t-base); font-weight:500; color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button[aria-selected="true"], .tabs button.active{
  color:var(--text); font-weight:600; border-bottom-color:var(--acento);
}
@media (max-width:1023px){
  .tabs{ margin:0 calc(var(--s-4) * -1); padding:0 var(--s-4); }
}

/* ---- Estado vacío ---- */
.empty{ text-align:center; padding:var(--s-14) var(--s-6); }
.empty .ico{
  width:44px; height:44px; margin:0 auto var(--s-4);
  border-radius:var(--r-md); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-3);
}
.empty .ico svg{ width:21px; height:21px; }
.empty h3{ margin-bottom:6px; }
.empty p{ color:var(--text-2); max-width:44ch; margin:0 auto var(--s-5); }

/* ---- Bloqueo del fondo con un modal abierto ----
   Sin esto, al desplazarse dentro de un modal el gesto "se escapa" y
   acaba moviendo la página de detrás. Se aplica sola: el armazón vigila
   si hay algún modal abierto y pone esta clase. */
body.sin-scroll{ overflow:hidden; }

/* Y aunque el fondo esté bloqueado, el desplazamiento dentro de una
   caja no debe propagarse al llegar a su tope. */
.modal-overlay, .modal, .dialog, .dialog-body, .detail-scroll,
.desc-list, .picker-list, .sidebar .nav-groups{
  overscroll-behavior:contain;
}

/* En móvil, un solo contenedor con desplazamiento por modal: el propio
   modal. Cada página define su .modal-overlay con desplazamiento propio,
   y al quedar dos anidados el gesto caía a veces en el de fuera —que no
   tiene nada que mover— y parecía que la pantalla se trababa.
   El selector lleva "body" delante para ganarle a las reglas de página. */
@media (max-width:1023px){
  body .modal-overlay.active{ overflow:hidden; }
  body .modal-overlay.active > .modal{
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }
}

/* ---- Capa oscura compartida ---- */
.scrim{
  position:fixed; inset:0; z-index:200;
  background:rgba(9,12,17,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:none;
}
.scrim.open{ display:block; }

/* ---- Salida de los modales ----
   La añade el armazón a todos. Va con "body" delante para ganarle a las
   reglas de cada página, que definen su propio .modal. */
body .modal-overlay .modal{ position:relative; }
.modal-cerrar{
  position:absolute; top:10px; right:10px; z-index:3;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:var(--r-full);
  background:var(--surface-2); color:var(--text-2);
  cursor:pointer; transition:background .13s ease, color .13s ease;
}
.modal-cerrar:hover{ background:var(--surface-3); color:var(--text); }
.modal-cerrar svg{ width:18px; height:18px; }
/* Sitio para la equis, que si no se monta sobre títulos largos. */
body .modal-overlay .modal > h2{ padding-right:44px; }

@media (max-width:1023px){
  /* En la hoja, la equis sube a la altura del asa. */
  .modal-cerrar{ top:var(--s-3); right:var(--s-3); width:42px; height:42px; }
  .modal-cerrar svg{ width:20px; height:20px; }
}

/* ---- Diálogo (escritorio) / hoja (móvil) ----
   Mismo marcado en los dos: solo cambia la presentación. */
.dialog{
  position:fixed; z-index:210;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 40px)); max-height:calc(100dvh - 80px);
  display:none; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
}
.dialog.open{ display:flex; }
.dialog-head{ padding:var(--s-5) var(--s-6) var(--s-3); }
.dialog-head h2{ font-size:var(--t-lg); }
.dialog-head .sub{ font-size:var(--t-sm); color:var(--text-2); margin-top:4px; }
.dialog-body{ padding:0 var(--s-6); overflow-y:auto; flex:1; }
.dialog-foot{ padding:var(--s-4) var(--s-6) var(--s-5); display:flex; gap:var(--s-3); }
.dialog-foot .btn{ flex:1; }
.dialog-grip{ display:none; }

@media (max-width:1023px){
  .dialog{
    top:auto; bottom:0; left:0; transform:none;
    width:100%; max-height:92dvh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-left:none; border-right:none; border-bottom:none;
    padding-bottom:var(--safe-b);
  }
  .dialog-grip{
    display:block; width:38px; height:4px; border-radius:var(--r-full);
    background:var(--surface-3); margin:10px auto 2px;
  }
  .dialog-head{ padding:var(--s-3) var(--s-4) var(--s-3); }
  .dialog-body{ padding:0 var(--s-4); }
  .dialog-foot{ padding:var(--s-4); flex-direction:column-reverse; }
  .dialog-foot .logout-link{ height:50px; }
}

/* ---- Menú de acciones (los tres puntos) ---- */
.action-sheet .dialog-body{ padding-bottom:var(--s-2); }
.action-item{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; min-height:52px; padding:0 var(--s-1);
  border:none; background:none; cursor:pointer; text-align:left;
  font-size:var(--t-base); font-weight:500; color:var(--text);
  border-bottom:1px solid var(--border);
}
.action-item:last-child{ border-bottom:none; }
.action-item svg{ width:20px; height:20px; color:var(--text-2); flex-shrink:0; }
.action-item.danger{ color:var(--danger); }
.action-item.danger svg{ color:var(--danger); }

/* ---- Esqueleto de carga ---- */
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation:sk 1.3s ease infinite;
  border-radius:var(--r-sm);
}
@keyframes sk{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---- Buscador ---- */
.search-box{
  display:flex; align-items:center; gap:var(--s-2);
  height:42px; padding:0 var(--s-3);
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-sm);
}
.search-box:focus-within{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.search-box svg{ width:17px; height:17px; color:var(--text-3); flex-shrink:0; }
.search-box input{ flex:1; min-width:0; border:none; background:none; outline:none; color:var(--text); font-size:var(--t-base); }
@media (max-width:1023px){ .search-box{ height:48px; } }

/* ---- Utilidades mínimas ---- */
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }
.num{ font-variant-numeric:tabular-nums; }
.stack{ display:flex; flex-direction:column; gap:var(--s-5); }
.row-gap{ display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ============================================================
   7. LEGADO
   Clases de las páginas todavía sin migrar. Se dejan usables y
   con el aspecto nuevo, no bonitas. Se borran a medida que cada
   pantalla pasa a los componentes de arriba.
   ============================================================ */
.sidebar-overlay{ position:fixed; inset:0; background:rgba(9,12,17,.45); z-index:105; display:none; }
.sidebar-overlay.active{ display:block; }
.menu-toggle{ display:none; }

.brand{ display:flex; align-items:center; gap:9px; padding:var(--s-2) var(--s-3) var(--s-3); }
.brand-logo{ width:30px; height:30px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.brand-text{ min-width:0; }
.brand-text .name{ font-size:var(--t-sm); font-weight:700; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text .sub{ font-size:11px; color:var(--text-3); margin-top:1px; }

.nav-label, .nav-groups > .nav-label{
  font-size:11px; font-weight:600; color:var(--text-3);
  padding:var(--s-3) var(--s-3) 4px; text-transform:none; letter-spacing:0;
}
.nav-groups{ display:flex; flex-direction:column; gap:1px; }
.nav-item{
  display:flex; align-items:center; gap:9px;
  padding:7px var(--s-3); border-radius:var(--r-sm);
  color:var(--text-2); font-size:13.5px; font-weight:500;
  text-decoration:none; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item:active{ background:var(--surface-3); }
.nav-item.active{ background:var(--acento-suave); color:var(--acento-txt); font-weight:600; box-shadow:none; }
.nav-item.disabled{ color:var(--text-3); cursor:default; }
.nav-item.disabled:hover{ background:none; color:var(--text-3); }
.nav-item .tag{
  margin-left:auto; font-size:11px; font-weight:500; color:var(--text-3);
  border:none; padding:0; text-transform:none; letter-spacing:0;
}

.sidebar-footer{ margin-top:auto; padding-top:var(--s-2); border-top:1px solid var(--border); }
.role-card{ display:flex; align-items:center; gap:9px; padding:var(--s-2) var(--s-3); }
.avatar-ring{ width:32px; height:32px; border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.avatar-ring .avatar{ width:32px; height:32px; background:var(--acento); color:#fff; font-size:11px; }
.role-card .who{ min-width:0; }
.role-card .who .n{ font-size:var(--t-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-card .who .r{ font-size:var(--t-xs); color:var(--text-3); }

/* Apariencia: la elige cada usuario y está a mano en todas las páginas,
   no escondida en un ajuste. */
.modo-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); padding:2px var(--s-3) var(--s-2); }
.modo-label{ font-size:var(--t-sm); color:var(--text-2); }
.segmented-iconos button{ width:32px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.segmented-iconos svg{ width:15px; height:15px; }

/* Cerrar sesión: fondo propio en vez de un borde fino que se pierde. */
.logout-link{
  width:100%; height:40px;
  background:var(--surface-2); border:none; border-radius:var(--r-sm);
  color:var(--text-2); font-family:inherit; font-size:var(--t-base); font-weight:600;
  cursor:pointer; transition:background .13s ease, color .13s ease;
}
.logout-link:hover{ background:var(--danger-bg); color:var(--danger); }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6); }
.topbar-left{ display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.crumbs{ font-size:var(--t-sm); color:var(--text-3); letter-spacing:0; }
.crumbs b{ color:var(--text); font-weight:600; }
.top-right{ display:flex; align-items:center; gap:var(--s-3); }
.clock{
  font-size:var(--t-sm); color:var(--text-2); font-variant-numeric:tabular-nums;
  background:var(--surface); border:1px solid var(--border);
  padding:9px var(--s-3); border-radius:var(--r-sm); min-width:96px; text-align:center;
}
.search{
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--surface); border:1px solid var(--border);
  padding:9px var(--s-3); border-radius:var(--r-sm);
  color:var(--text-3); font-size:var(--t-sm); width:220px;
}
.search svg{ width:16px; height:16px; }
.section-label{
  font-size:var(--t-sm); font-weight:600; color:var(--text-2);
  margin:var(--s-8) 0 var(--s-4); text-transform:none; letter-spacing:0;
}

@media (max-width:1023px){
  .topbar{ display:none; }  /* la reemplaza .appbar */
}


/* ---- Recortador de imágenes (photocrop.js) ----
   El área se ve redonda porque así se mostrará después: en el menú, en
   las fichas y en la pantalla de acceso. Un recuadro cuadrado aquí haría
   que el encuadre elegido no coincidiera con el resultado. */
.recorte-capa{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-5);
  background:rgba(9,12,17,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.recorte-panel{
  width:100%; max-width:420px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:var(--s-6) var(--s-5) calc(var(--s-5) + var(--safe-b));
  text-align:center;
}
.recorte-titulo{ font-size:var(--t-md); font-weight:700; letter-spacing:-0.01em; }
.recorte-ayuda{ font-size:var(--t-sm); color:var(--text-2); margin-top:4px; line-height:1.5; }

.recorte-marco{
  position:relative; margin:var(--s-5) auto var(--s-4);
  border-radius:var(--r-full); overflow:hidden;
  background:var(--surface-2);
  cursor:grab; touch-action:none;   /* el gesto lo maneja el recortador */
  user-select:none; -webkit-user-select:none;
}
.recorte-marco:active{ cursor:grabbing; }
.recorte-marco canvas{ display:block; }
/* Un aro tenue que recuerda dónde está el borde del círculo. */
.recorte-mascara{
  position:absolute; inset:0; border-radius:var(--r-full);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  pointer-events:none;
}

.recorte-zoom{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); color:var(--text-3); }
.recorte-zoom svg{ width:18px; height:18px; flex-shrink:0; }
.recorte-zoom input{ flex:1; accent-color:var(--acento); height:22px; }

.recorte-botones{ display:flex; gap:var(--s-3); }
.recorte-botones button{ flex:1; height:46px; border-radius:var(--r-sm); font-family:inherit; font-size:var(--t-base); font-weight:600; cursor:pointer; }
.recorte-cancelar{ border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); }
.recorte-guardar{ border:none; background:var(--acento); color:#fff; }
.recorte-guardar:hover{ background:var(--acento-hover); }