/* ============================================================================
   Agenia — tipografia, tokens y base
   Todo color, espacio, radio y sombra sale de aqui. Ningun valor literal suelto
   dentro de un componente.

   Direccion visual: "Serena". Radios amplios, botones en pildora, sombras suaves
   y separacion por aire y elevacion antes que por borde. El borde existe pero es
   casi imperceptible; lo que separa una tarjeta del fondo son el fondo de pagina
   (que NO es blanco) y su sombra, las dos cosas a la vez.
   ========================================================================== */

/* --- Sora, autoalojada ----------------------------------------------------
   Es una fuente VARIABLE (eje wght 100..800): un solo archivo cubre todos los
   pesos, asi que pedir 300 o 700 no baja nada extra. Se sirve desde el propio
   dominio y no desde Google: el despliegue no depende de un tercero, no hay
   peticion a otro origen y no se filtra la IP de cada usuario a otro servidor.
   El corte latin-ext solo se descarga si la pagina usa alguno de sus signos.  */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Marca ---
     El teal se oscurecio respecto del original (#0d7a6f) hasta #0f7f74 para
     que el blanco encima pase AA (4.84:1); el anterior quedaba justo en 4.50. */
  --color-marca:            #0f7f74;
  --color-marca-fuerte:     #0b6a61;
  --color-marca-suave:      #e0f2ee;
  --color-marca-contraste:  #ffffff;

  /* Superficies. Los neutros llevan una pizca de verde: un gris puro al lado
     del teal se lee como un descuido. */
  --color-fondo:            #e9efed;
  --color-superficie:       #ffffff;
  --color-superficie-alt:   #eef3f1;
  --color-borde:            #dfe7e4;
  --color-borde-suave:      #e9eeec;
  --color-borde-fuerte:     #d3ddda;   /* el unico borde que debe verse: campos */

  /* Texto. El contraste se verifico sobre --color-superficie Y sobre
     --color-fondo: la bajada de pantalla y los pies de tarjeta van sobre el
     fondo de pagina, que es mas oscuro que el blanco.
     --color-texto-tenue solo alcanza AA sobre --color-superficie: usarlo unica-
     mente ahi (placeholder, pie del sidebar), nunca sobre el fondo de pagina. */
  --color-texto:            #1b2a2b;
  --color-texto-suave:      #5a6d70;
  --color-texto-tenue:      #66797c;

  /* Estados. Cada uno trae su color de texto y su fondo, siempre en pareja. */
  --color-error:            #b3322a;
  --color-error-fuerte:     #932720;
  --color-error-fondo:      #fceeec;
  --color-exito:            #24713f;
  --color-exito-fondo:      #e6f4ea;
  --color-aviso:            #8a5a00;
  --color-aviso-fondo:      #fbf1df;
  /* Familias de perfil (0109): morado administracion, naranja recepcion, azul staff. */
  --color-familia-admin:        #5b3a9e;  --color-familia-admin-fondo:  #efe9fb;
  --color-familia-recepcion:    #8a4500;  --color-familia-recepcion-fondo: #fdeedd;
  --color-familia-staff:        #1d4f91;  --color-familia-staff-fondo:  #e5eefa;

  /* Barra lateral. En "Serena" es clara y se separa del contenido por un borde
     de un pelo, no por un bloque oscuro. */
  --color-sidebar:          #ffffff;
  --color-sidebar-alt:      #eef3f1;
  --color-sidebar-texto:    #44585b;
  --color-sidebar-activo:   #0b6a61;
  --color-sidebar-borde:    #e4ebe8;

  /* Portada del login: se mantiene clara en ambos temas porque la obra esta
     dibujada sobre claro. */
  --color-vitrina-1:        #ffffff;
  --color-vitrina-2:        #e4efeb;
  --color-vitrina-titulo:   #123a34;
  --color-vitrina-texto:    #40605a;

  /* Pastilla sobre la que se monta un logo subido por la clinica. Blanca en
     ambos temas y a proposito: casi todo logo viene dibujado sobre blanco y no
     se le puede quitar el fondo sin dejar halo (ver CLAUDE.md, seccion 11). */
  --color-pastilla-logo:    #ffffff;

  /* Graficos de los reportes. El periodo anterior se dibuja en CONTORNO (no
     solo con otro color): contra la serie actual el contraste es bajo a
     proposito, y la forma es la que los distingue. Ambos >= 3:1 sobre la
     superficie (elementos graficos, WCAG 1.4.11). */
  --color-grafico-actual:   #0f7f74;
  --color-grafico-anterior: #7f928e;

  /* Impresion: el papel es blanco en ambos temas (no se redefinen en oscuro). */
  --color-papel: #ffffff;
  --color-tinta: #000000;

  /* Espaciado */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;  --esp-3: 0.75rem;
  --esp-4: 1rem;     --esp-5: 1.5rem;  --esp-6: 2rem;   --esp-8: 3rem;

  /* Radios. Amplios a proposito; el radio es la firma de esta direccion. */
  --radio-sm:    10px;
  --radio-md:    16px;
  --radio-lg:    20px;
  --radio-full:  999px;
  --radio-boton: var(--radio-full);
  --radio-campo: 12px;

  /* Sombras tenidas de verde, nunca gris neutro. La tarjeta se separa del fondo
     por DOS vias a la vez —el fondo de pagina mas oscuro y esta sombra—, porque
     con una sola, en una pantalla barata o con mucha luz encima, el bloque
     blanco se pierde contra el fondo. */
  --sombra-sm: 0 1px 2px rgba(18, 45, 40, .06), 0 8px 24px rgba(18, 45, 40, .08);
  --sombra-md: 0 10px 30px rgba(20, 50, 45, .12);
  --sombra-lg: 0 20px 50px rgba(20, 50, 45, .18);
  --sombra-marca: 0 2px 8px rgba(15, 127, 116, .28);

  /* Tipografia. Sora es mas ancha y de ojo mas alto que una system-ui, asi que
     la escala arranca un punto mas abajo y respira mas entre lineas. */
  --fuente: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --texto-xs: .75rem;   --texto-sm: .8125rem;  --texto-base: .9375rem;
  --texto-lg: 1.0625rem; --texto-xl: 1.25rem;  --texto-2xl: 1.625rem;

  /* Medidas del armazon */
  --alto-navbar:       64px;
  --ancho-sidebar:     260px;
  --ancho-sidebar-min: 76px;
}

/* Tema oscuro: familia INDIGO (azul de noche), no el verde de la paleta clara.
   El teal de marca vira a cian (#35bcd0) porque sobre un neutro azul el teal
   verdoso se ensucia. Solo se redefinen los tokens que cambian: ningun color
   tiene su UNICA definicion aqui dentro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo:          #0d1220;
    --color-superficie:     #161d2f;
    --color-superficie-alt: #1f2840;
    --color-borde:          #28324f;
    --color-borde-suave:    #202a44;
    --color-borde-fuerte:   #3a4870;

    --color-texto:          #e4e9f6;
    --color-texto-suave:    #a6b1cd;
    --color-texto-tenue:    #8590ae;

    --color-marca:          #35bcd0;
    --color-marca-fuerte:   #55cee0;
    --color-marca-suave:    #153443;
    --color-marca-contraste:#061a26;

    --color-error:          #ff8f85;
    --color-error-fuerte:   #ff7166;
    --color-error-fondo:    #4c2837;
    --color-exito:          #79d69b;
    --color-exito-fondo:    #1c3f34;
    --color-aviso:          #efc477;
    --color-aviso-fondo:    #50402c;
    --color-familia-admin:      #dccdff;  --color-familia-admin-fondo:  #3b2f60;
    --color-familia-recepcion:  #ffd1a1;  --color-familia-recepcion-fondo: #4d3521;
    --color-familia-staff:      #bfd8ff;  --color-familia-staff-fondo:  #233a5e;

    --color-sidebar:        #161d2f;
    --color-sidebar-alt:    #1f2840;
    --color-sidebar-texto:  #b9c4de;
    --color-sidebar-activo: #55cee0;
    --color-sidebar-borde:  #28324f;

    --color-vitrina-1:      #dde4f0;
    --color-vitrina-2:      #c4cfe3;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --sombra-md: 0 10px 30px rgba(0, 0, 0, .45);
    --sombra-lg: 0 20px 50px rgba(0, 0, 0, .55);
    --sombra-marca: 0 2px 10px rgba(53, 188, 208, .32);

    --color-grafico-actual:   #35bcd0;
    --color-grafico-anterior: #6f7fa6;
  }
}

/* Eleccion explicita del usuario: gana sobre la preferencia del sistema. */
:root[data-tema="oscuro"] {
  --color-fondo:          #0d1220;
  --color-superficie:     #161d2f;
  --color-superficie-alt: #1f2840;
  --color-borde:          #28324f;
  --color-borde-suave:    #202a44;
  --color-borde-fuerte:   #3a4870;
  --color-texto:          #e4e9f6;
  --color-texto-suave:    #a6b1cd;
  --color-texto-tenue:    #8590ae;
  --color-marca:          #35bcd0;
  --color-marca-fuerte:   #55cee0;
  --color-marca-suave:    #153443;
  --color-marca-contraste:#061a26;
  --color-error:          #ff8f85;
  --color-error-fuerte:   #ff7166;
  --color-error-fondo:    #4c2837;
  --color-exito:          #79d69b;
  --color-exito-fondo:    #1c3f34;
  --color-aviso:          #efc477;
  --color-aviso-fondo:    #50402c;
  --color-familia-admin:      #dccdff;  --color-familia-admin-fondo:  #3b2f60;
  --color-familia-recepcion:  #ffd1a1;  --color-familia-recepcion-fondo: #4d3521;
  --color-familia-staff:      #bfd8ff;  --color-familia-staff-fondo:  #233a5e;
  --color-sidebar:        #161d2f;
  --color-sidebar-alt:    #1f2840;
  --color-sidebar-texto:  #b9c4de;
  --color-sidebar-activo: #55cee0;
  --color-sidebar-borde:  #28324f;
  --color-vitrina-1:      #dde4f0;
  --color-vitrina-2:      #c4cfe3;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --sombra-md: 0 10px 30px rgba(0, 0, 0, .45);
  --sombra-lg: 0 20px 50px rgba(0, 0, 0, .55);
  --sombra-marca: 0 2px 10px rgba(53, 188, 208, .32);
  --color-grafico-actual:   #35bcd0;
  --color-grafico-anterior: #6f7fa6;
}

/* --- Reset acotado ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  /* Sora trae tabular: las cifras de una columna quedan alineadas sin tener que
     recurrir a una fuente monoespaciada aparte. */
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Sora dibuja grande de ojo: los titulos piden un poco de tracking negativo
   para no verse sueltos. */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  text-wrap: balance;
}

a { color: var(--color-marca-fuerte); }

/* El navegador da [hidden] { display: none } con especificidad (0,1,0), la misma
   que cualquier selector de clase. Como esta hoja va despues, un componente que
   defina su propio `display` (por ejemplo `.aviso { display: flex }`) le gana y
   el elemento se dibuja igual, vacio pero con borde y relleno.
   El !important es deliberado: `hidden` debe ganarle a cualquier componente. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* El foco de teclado SIEMPRE visible: es como navega quien no usa mouse. */
:focus-visible {
  outline: 3px solid var(--color-marca);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* Respeta a quien pidio menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Salto al contenido: primer tabulador de la pagina, oculto hasta enfocarse. */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-marca);
  color: var(--color-marca-contraste);
  border-radius: 0 0 var(--radio-md) 0;
  text-decoration: none;
  font-weight: 600;
}
.salto-contenido:focus { left: 0; }

/* Solo para lectores de pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Iconos (Tabler, sprite incrustado) -----------------------------------
   Se dimensionan con `em` para que sigan al texto del contenedor, y el trazo
   usa currentColor para heredar su color. Asi el mismo icono sirve en el
   sidebar y en una tarjeta sin declarar nada extra. */
.icono {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

.icono--sm { width: 1em;    height: 1em; }
.icono--lg { width: 1.75em; height: 1.75em; }

/* --- Toasts (Notyf) -------------------------------------------------------
   Se alinean con los tokens del proyecto: pildora, sombra suave y la misma
   tipografia. El color de fondo lo pone la libreria por estilo en linea, con
   las variables que le pasa src/notificacion.ts. */
.notyf__toast {
  border-radius: var(--radio-full) !important;
  box-shadow: var(--sombra-md) !important;
  font-family: var(--fuente);
  font-size: var(--texto-sm);
  font-weight: 500;
  max-width: min(420px, calc(100vw - 2 * var(--esp-4)));
}

.notyf__message { line-height: 1.45; }

/* El area de cierre debe poder tocarse sin fallar en un telefono. */
.notyf__dismiss-btn { min-width: 44px; }

/* Quien pidio menos movimiento en su sistema no deberia recibir el deslizamiento. */
@media (prefers-reduced-motion: reduce) {
  .notyf__toast { animation: none !important; }
}