/* Turnero Econopet · estilos base
   El diseño final (logo, colores definitivos) se ajusta en la fase 7. */

/* Letra incluida en el sistema (Inter, licencia OFL): se ve igual en Mac, Windows y cualquier navegador */
@font-face { font-family: "Inter"; src: url("../fuentes/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --azul: #2D4B99;          /* azul Econopet */
  --azul-oscuro: #1F3570;
  --azul-claro: #EAEEF8;
  --azul-claro-2: #DCE3F3; --azul-claro-3: #CDD7EE;   /* un grado más oscuro que --azul-claro (columna de totales sobre renglón azul) */
  --azul-borde: #C8D2EB;
  --naranja: #EE7A2E;       /* naranja Econopet (decorativo: no lleva letra blanca encima) */
  --naranja-oscuro: #B85512;  /* naranja con letra blanca encima (contraste 4.8:1) */
  --rojo: #C42D29;          /* contraste ≥ 4.5 sobre --rojo-claro (WCAG AA, auditoría 13-oct-2026) */
  --rojo-claro: #fdecec;
  --verde: #157A47;         /* contraste ≥ 4.5 sobre blanco y --verde-claro */
  --verde-claro: #e6f5ec;  --verde-claro-2: #D4EDDE; --verde-claro-3: #C2E5D0;   /* un grado más oscuro que --verde-claro (columna de totales sobre renglón verde) */
  --ambar: #9A5B00;         /* contraste ≥ 4.5 sobre --ambar-claro */
  --ambar-claro: #fff4e0;
  --morado: #6b3fb8;
  --morado-claro: #f1ebfb;

  --fondo: #f3f5f9;
  --superficie: #ffffff;
  --blanco: #ffffff;        /* letra y fondos blancos sobre color */
  --azul-tenue: #F7F9FD;    /* fondo muy tenue (renglones al pasar el cursor, grupos) */
  --rojo-tenue: #FCF2F2; --ambar-tenue: #F8F4ED;   /* fondos "apenas" de color: renglón llamando y preferente */
  --verde-tenue: #F0F8F3; --amarillo-tenue: #FFF9E6; --amarillo-tenue-2: #FCEFC7; --amarillo-tenue-3: #F8E6AE; --gris-tenue: #F2F3F5; --gris-tenue-2: #E6E8EC; --gris-tenue-3: #DADDE3;   /* renglón por tipo de solicitud: inventario, extemporáneo e inversión (AD43) */
  --variante: #EEEFF2;      /* renglón de variante en las listas (C-10): gris bajito neutro, distinto del azul tenue del cursor (Joaquín, 14-oct-2026) */
  --rojo-borde: #F3C7C6; --verde-borde: #BFE3CD; --ambar-borde: #F1D6A6;   /* borde de pastillas y avisos de color */
  --ambar-fuerte: #D9881C;  /* panel "en preparación" del consultorio (amarillo original, elegido por Joaquín 13-oct-2026) */
  --cristal: rgba(255,255,255,.2); --cristal-borde: rgba(255,255,255,.35);   /* sobre paneles de color: etiqueta "cristal", contadores */
  --cristal-tenue: rgba(255,255,255,.1); --cristal-medio: rgba(255,255,255,.16); --linea-sobre-color: rgba(255,255,255,.18);
  --aviso-sobre-color: rgba(255,255,255,.95);   /* aviso blanco sobre un panel de color */
  --ambar-letra-panel: #B26A00;   /* letra ámbar sobre blanco en el panel "en preparación" (diseño original elegido por Joaquín) */
  --velo-tenue: rgba(16,24,40,.06);   /* velo detrás del panel lateral */
  --sombra-columna-fija: 8px 0 10px -8px rgba(16,24,40,.22); --sombra-columna-fija-der: -8px 0 10px -8px rgba(16,24,40,.22);   /* la fija de la derecha (Prom. Anual) */   /* columna del nombre fija al desplazar la tabla */
  --sobre-color: rgba(16, 24, 40, .16);   /* recuadros sobre fondos de color (pantalla azul): oscurecen, así la letra blanca siempre se lee */
  --verde-vivo: #7CE0A6;    /* punto "en vivo" sobre fondos oscuros */
  --gris-control: #CBD2DD;  /* interruptor apagado, casillas, puntos y barras de desplazamiento */
  --verde-oscuro: #0F5C36; --gris-oscuro: #48525F;           /* hover de botones verde y gris */
  --whatsapp: #25D366; --whatsapp-oscuro: #1EBE5B;           /* verde de la marca WhatsApp, el original (Joaquín, 13-oct-2026); única excepción de color externo */
  --wa-fondo: #EFEAE2; --wa-burbuja: #FFFFFF; --wa-hora: #667781; --wa-texto: #111B21;   /* vista previa de WhatsApp en Programar envío (pieza única, K-1; 15-oct-2026) */
  --graf-calor: #D9733A;    /* máximo del mapa de calor */
  --texto: #18202e;
  --texto-suave: #5d6878;
  --borde: #dfe4ec;
  --borde-control: #DFE4EC;  /* borde de campos, listas y buscador: gris claro, igual que las tarjetas y los recuadros (Joaquín, 13-oct-2026) */
  /* Paleta de gráficas (reglamento M-5): tonos suaves que salen del azul y el naranja Econopet */
  --graf-1: #2D4B99;        /* azul Econopet: serie principal */
  --graf-2: #7088C4;        /* azul medio */
  --graf-3: #B4C3E6;        /* azul pálido */
  --graf-4: #E9A273;        /* naranja suave */
  --graf-5: #82AF98;        /* verde salvia */
  --graf-6: #A598CF;        /* lavanda */
  --graf-pista: #EEF1F6;    /* fondo de barras */
  --graf-bien: #6FA487;     /* estados: bien / atención / mal / sin dato */
  --graf-atencion: #E3B46C;
  --graf-mal: #D88A7D;
  --graf-neutro: #C9D0DB;
  /* Etiquetas de descuento: fondo suave + letra oscura del mismo tono (contraste ≥ 4.5:1). Misma familia que las gráficas */
  --etq-azul-f: #EAEEF8;    --etq-azul-t: #2D4B99;
  --etq-naranja-f: #FCEFE4; --etq-naranja-t: #A3531F;
  --etq-salvia-f: #E6F1EA;  --etq-salvia-t: #3A7354;
  --etq-lavanda-f: #EFEBF8; --etq-lavanda-t: #5F4FA0;
  --etq-arena-f: #FAF1DF;   --etq-arena-t: #7F5B14;
  --etq-coral-f: #FBEBE8;   --etq-coral-t: #A1463B;

  /* Valores base con nombre (reglamento F-4, auditoría de diseño 13-oct-2026): nadie escribe una esquina, sombra,
     duración ni capa suelta; si hace falta una nueva, se agrega aquí con autorización. */
  --radio-mini: 5px;         /* piezas diminutas: casillas, botón ordenar, opción interna del segmentado */
  --radio-control: 8px;      /* botones, campos, listas, opciones de menú, íconos en cuadro */
  --radio-flotante: 12px;    /* listas y menús flotantes, recuadros internos, avisos, estados vacíos */
  --radio-contenedor: 14px;  /* tarjetas, ventanas, paneles laterales, indicadores */
  --radio-pastilla: 999px;   /* etiquetas, chips, contadores, notificaciones */
  --radio: var(--radio-contenedor);
  --radio-chico: var(--radio-control);
  /* Sombras: solo lo que flota sobre la página lleva sombra (4 niveles) */
  --sombra-sutil: 0 1px 2px rgba(16, 24, 40, .12);          /* opción elegida dentro de una bandeja */
  --sombra-flotante: 0 12px 28px rgba(16, 24, 40, .16);     /* listas, menús, sugerencias, notificación */
  --sombra-wa: 0 1px .5px rgba(11, 20, 26, .13);             /* burbuja de la vista previa de WhatsApp (la de la app) */
  --sombra-panel: 0 16px 40px rgba(16, 24, 40, .16);        /* panel lateral */
  --sombra-ventana: 0 20px 50px rgba(16, 24, 40, .25);      /* ventana emergente */
  --velo: var(--velo);                            /* fondo oscurecido detrás de una ventana */
  --sombra: none;            /* las tarjetas no llevan sombra */
  /* Movimiento: dos velocidades */
  --vel-rapida: .15s;        /* cursor encima, aparición de flotantes */
  --vel-media: .25s;         /* despliegues, panel lateral, ventana */
  --vel-presion: .05s;       /* el botón baja 1 px al presionarlo */
  --vel-grafica: .5s;        /* barras de gráficas que crecen al cargar datos */
  --ritmo-vivo: 1.6s;        /* parpadeo suave de lo que está "en vivo" */
  --ritmo-alerta: 1s;        /* parpadeo rápido de lo urgente: "llamando", sin conexión */
  /* Capas: qué queda encima de qué */
  --capa-fijo: 3;            /* encabezados de tabla y columnas fijas */
  --capa-panel: 20;          /* panel lateral y su velo */
  --capa-menu: 40;           /* submenú del menú lateral plegado */
  --capa-ventana: 50;        /* ventana emergente */
  --capa-flotante: 80;       /* listas, menús y sugerencias (pueden abrirse dentro de una ventana) */
  --capa-aviso: 90;          /* notificación y globo de ayuda */
  /* Foco del teclado: el mismo anillo azul en todo lo que se puede tocar */
  --anillo-foco: 0 0 0 3px var(--azul-claro);
  --halo-vivo: 0 0 0 3px rgba(124, 224, 166, .3);   /* aro del punto "en vivo" sobre fondos oscuros */
  --fuente: "Inter", Arial, sans-serif;

  /* Escala tipográfica (reglamento T-1, docs/LINEAMIENTOS_DISENO.md): los únicos tamaños permitidos. Grosores: 400, 500, 700 y 800 (solo números). */
  --ts-pequeno: 12px;     /* títulos de campo y tabla, celdas (M-3), etiquetas, notas y descripciones, campos de filtros, nombre del KPI */
  --ts-base: 14px;        /* botones, menú, pestañas, texto, lo escrito en formularios, nombres en fichas */
  --ts-destacado: 16px;   /* solo títulos de tarjeta o sección y texto de botones Panel */
  --ts-subtitulo: 20px;   /* título de ventana */
  --ts-titulo: 24px;      /* título de pantalla, uno solo */
  --ts-numero: 28px;      /* número de KPI */
  --ts-display: 40px;     /* números protagonistas */
  --ts-turno: 80px;       /* solo el turno del consultorio */
  /* Alturas de botón (reglamento B-1, regla de Joaquín 13-oct-2026): solo estas 5. El ancho varía con el texto.
     xl = acción principal de una pantalla (Generar turno, Llamar) · l = junto a un campo de 44 px y paneles laterales ·
     m = botón normal (encabezados, ventanas, pestañas, paginación, íconos) · s = chico dentro de tarjetas y filas ·
     xs = pastillas clicables (alternar, etiquetas de trato, filtros rápidos, "−16"). */
  --btn-panel: 64px;   /* tamaño "Panel" (B-1): botones del panel de color del consultorio */
  --btn-xl: 80px; --btn-l: 40px; --btn-m: 38px; --btn-s: 30px; --btn-xs: 24px;
  /* Campos de formulario: 40 px (regla C-1, cambiada por Joaquín el 13-oct-2026). En pantallas táctiles todo lo que se toca mide 44 */
  --campo: 40px; --toque: 44px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--fuente);
  font-size: var(--ts-base);
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
/* Interlineado de la escala T-1 en todo el sistema (Joaquín, 15-oct-2026): el alto del renglón sale del tamaño de la letra y se redondea
   hacia arriba a múltiplos de 4 → 12/16 · 14/20 · 16/24 · 20/28 · 24/32. Especificidad cero: lo que ya fija su interlineado (números
   grandes, botones del panel) se respeta. Si el navegador no conoce round(), se queda el 1.45 de body. */
:where(body, body *) { line-height: round(up, 1em * 1.3, 4px); }
h1, h2, h3 { margin: 0 0 .6em; }
h1 { font-size: var(--ts-titulo); }
h2 { font-size: var(--ts-pequeno); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }
a { color: var(--azul); }
button { font-family: inherit; }
/* El navegador pone <b> "más grueso que su contenedor" (podría llegar a 900); en el sistema siempre es 700 */
b, strong, th { font-weight: 700; }
/* Tamaños que el navegador pone por su cuenta (small = 11.67 px, h3 = 16.4 px, botón = 13.3 px): siempre de la escala */
small { font-size: var(--ts-pequeno); }
h3, h4 { font-size: var(--ts-destacado); }
h5, h6 { font-size: var(--ts-base); }
button, input, select, textarea { font-size: var(--ts-base); }

/* ─── Logo ─── */
.logo-img { height: 48px; width: auto; display: block; }
.logo-login { width: 300px; max-width: 90%; max-height: 120px; height: auto; object-fit: contain; display: block; margin: 0 auto 8px; }
/* Marca de la clínica (PD10): sin logotipo, su nombre en letra con el mismo lugar que tendría la imagen */
.marca-texto { display: flex; align-items: center; height: 48px; max-width: 260px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-login.marca-texto { justify-content: center; width: auto; max-width: 90%; height: auto; font-size: 32px; white-space: normal; text-align: center; }
/* «con Vetfly»: la marca del sistema, pequeña, solo en la entrada */
.con-vetfly { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: var(--ts-pequeno); color: var(--texto-suave); }
.con-vetfly img { height: 16px; width: auto; display: block; }

/* ─── Encabezado de las pantallas ─── */
.barra {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.barra .espacio { flex: 1; }
/* Cápsula de contexto: área | sucursal | persona · turno */
.contexto { display: flex; align-items: center; height: var(--btn-l); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-pastilla); padding: 4px; font-size: var(--ts-base); }
.contexto > span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; color: var(--texto-suave); white-space: nowrap; }
.contexto > span + span { border-left: 1px solid var(--borde); }
.contexto .ctx-area { min-width: 128px; justify-content: center;   /* mismo ancho en todas las áreas: lo de al lado no se mueve al cambiar de pantalla */
  background: var(--blanco); color: var(--azul); font-weight: 700; border-radius: var(--radio-pastilla); box-shadow: var(--sombra-sutil); }
.contexto .ctx-area + span { border-left: 0; }
/* Estado del consultorio (recepción) */
.estado-cons { display: flex; align-items: center; gap: 8px; background: var(--azul); color: var(--blanco); height: var(--btn-l); padding: 0 16px 0 12px;   /* mismo alto que la cápsula de contexto */ border-radius: var(--radio-pastilla); font-size: var(--ts-base); white-space: nowrap; }
.estado-cons i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-vivo); box-shadow: var(--halo-vivo); }
.estado-cons b { font-size: var(--ts-base); }
.estado-cons.llamando { background: var(--rojo); } .estado-cons.llamando i { background: var(--blanco); animation: parpadeo var(--ritmo-alerta) infinite; }
.estado-cons.preparacion { background: var(--ambar-claro); color: var(--ambar); } .estado-cons.preparacion i { background: var(--ambar); box-shadow: none; }
.estado-cons.libre { background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde); } .estado-cons.libre i { background: var(--texto-suave); box-shadow: none; }
.reloj-barra { text-align: right; line-height: 1.2; }
.reloj-barra b { display: block; font-size: var(--ts-base); font-variant-numeric: tabular-nums; }
.reloj-barra small { color: var(--texto-suave); font-size: var(--ts-pequeno); }
.conexion { display: flex; align-items: center; gap: 8px; font-size: var(--ts-pequeno); color: var(--verde); }
.conexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.conexion.caida { color: var(--rojo); }
.conexion.caida i { background: var(--rojo); animation: parpadeo var(--ritmo-alerta) infinite; }
@keyframes parpadeo { 50% { opacity: .2; } }
/* Punto "en vivo": parpadeo suave (conectado, en atención) */
.punto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.punto-vivo, .estado-cons.atencion i, .conexion:not(.caida) i { animation: vivo var(--ritmo-vivo) ease-in-out infinite; }
@keyframes vivo { 50% { opacity: .25; } }
/* Con el menú abierto (Joaquín, 22-oct-2026): el logo va centrado en el ancho de las tarjetas del menú y la cápsula
   de contexto empieza justo en el borde del menú, para que todo quede en las mismas líneas */
@media (min-width: 1181px) {
  body:has(.lateral:not(.compacto)) > .barra { padding-left: 12px; }
  /* El logo siempre centrado en el ancho de las tarjetas del menú (12 a 235 px); la cápsula sigue en el borde del menú (248 px) */
  body:has(.lateral:not(.compacto)) > .barra .logo-img { flex: none; width: 223px; margin-right: -3px; object-fit: contain; object-position: center; }
  body:has(.lateral:not(.compacto)) > .barra .marca-texto { justify-content: center; max-width: 223px; }
}
@media (max-width: 1100px) { .contexto > span:nth-child(3) { display: none; } }
/* Tableta: la barra superior deja solo lo esencial para no salirse (el área, el estado y el punto de conexión) */
@media (max-width: 1180px) { .barra { gap: 8px; padding-inline: 16px; } .contexto > span:nth-child(n+2) { display: none; } .conexion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ─── Tarjetas y estructura ─── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.contenido { padding: 20px; max-width: 1400px; margin: 0 auto; }

/* ─── Formularios ─── */
.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-size: var(--ts-pequeno); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 4px; }
.campo > span .req { color: var(--rojo); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], input[type=time], input[type=month], select, textarea {
  width: 100%;
  font: inherit; font-size: var(--ts-base);   /* lo escrito en formularios en 14 (Joaquín, 14-oct-2026) */
  padding: 12px 12px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--texto);
  transition: border-color var(--vel-rapida), box-shadow var(--vel-rapida);
}
/* Texto de ejemplo dentro de los campos: el gris del sistema, igual que "Selecciona…" o "Elegir fecha" (no el del navegador, F-1) */
::placeholder { color: var(--texto-suave); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}
input.invalido, select.invalido, .ctl.invalido, .ctl-oculto.invalido + .ctl { border-color: var(--rojo); }   /* el error del campo original también en la lista propia que se ve (M-11) */
/* Todos los campos de una línea miden lo mismo, en cualquier navegador */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], input[type=time], input[type=month], select { height: var(--campo); }
/* Las listas usan la flecha del sistema en lugar de la del navegador */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  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='%235d6878' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.casilla { display: flex; align-items: center; gap: 8px; font-size: var(--ts-base); cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--azul); }

/* ─── Botones ─── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--ts-base); font-weight: 500;
  height: var(--btn-m); padding: 0 16px; box-sizing: border-box; white-space: nowrap;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--vel-rapida), border-color var(--vel-rapida), transform var(--vel-presion);
}
.boton svg { width: 16px; height: 16px; flex: none; }   /* ícono dentro de cualquier botón (M-1) */
.boton:hover { background: var(--azul-claro); border-color: var(--azul-borde); color: var(--azul); }   /* reglamento B-5: todo botón se nota al pasar el cursor */
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.primario { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.boton.primario:hover { background: var(--azul-oscuro); }
/* Botón verde: abre métricas y análisis (aprobado por Joaquín, 13-oct-2026) */
.boton.verde { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.boton.verde:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }
/* Botón de WhatsApp: el verde de la marca WhatsApp (var(--whatsapp)), solo para abrir un chat (aprobado por Joaquín, 13-oct-2026) */
/* Un enlace con forma de botón mide lo mismo que un botón */
a.boton { line-height: normal; text-decoration: none; }
.boton.whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--blanco); }
.boton.whatsapp:hover { background: var(--whatsapp-oscuro); border-color: var(--whatsapp-oscuro); }
.boton.whatsapp svg { color: var(--blanco); }
/* Botón gris: exportar y descargar (aprobado por Joaquín, 13-oct-2026) */
.boton.gris { background: var(--texto-suave); border-color: var(--texto-suave); color: var(--blanco); }
.boton.gris:hover { background: var(--gris-oscuro); border-color: var(--gris-oscuro); }
.boton.peligro { color: var(--rojo); border-color: var(--rojo-borde); }
.boton.peligro:hover { background: var(--rojo-claro); }
/* Rojo lleno, letra blanca (Joaquín, 22-oct-2026: «Error en la Muestra»): una acción de alerta que debe verse */
.boton.peligro-lleno { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.boton.peligro-lleno:hover { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); filter: brightness(.92); }
.boton.texto { border-color: transparent; background: none; color: var(--azul); padding-left: 8px; padding-right: 8px; }
.boton.texto:hover { background: var(--azul-claro); }
.boton.grande { width: 100%; height: var(--btn-l); padding: 0 20px; letter-spacing: .02em; }
.boton.chico { height: var(--btn-s); padding: 0 12px; }
/* Apagado (sin permiso o módulo futuro): se ve, no cambia al pasar el cursor y explica por qué con su title */
.boton:disabled:hover { background: var(--superficie); border-color: var(--borde); color: var(--texto); }
.boton.primario:disabled:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.boton.verde:disabled:hover { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.boton.gris:disabled:hover { background: var(--texto-suave); border-color: var(--texto-suave); color: var(--blanco); }
.boton.whatsapp:disabled:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--blanco); }
.boton.texto:disabled:hover { background: none; border-color: transparent; color: var(--azul); }
.boton:disabled:active { transform: none; }

/* ─── Avisos (núcleo, regla de tres 13-oct-2026, opción A) ───
   Un solo aviso en todo el sistema: ícono arriba a la izquierda, título en negrita (primer <b>) en el color del aviso,
   texto normal y botón opcional a la derecha. Colores con significado fijo: error rojo · alerta ámbar · info azul · ok verde.
   Estructura con botón: <div class="aviso error"><div><b>Título</b>Texto</div><button class="boton chico">Ver</button></div> */
.aviso { position: relative; padding: 12px 16px 12px 48px; border: 1px solid var(--azul-borde); border-radius: var(--radio-flotante);
  background: var(--azul-tenue); color: var(--texto); font-size: var(--ts-base); line-height: 20px; margin-bottom: 16px; --aviso-color: var(--azul); --aviso-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E"); }
.aviso::before { content: ""; position: absolute; left: 16px; top: 12px; width: 20px; height: 20px; background: var(--aviso-color);
  -webkit-mask: var(--aviso-ico) center / contain no-repeat; mask: var(--aviso-ico) center / contain no-repeat; }
.aviso > b:first-child, .aviso > div > b:first-child { display: block; color: var(--aviso-color); }
.aviso:has(> .boton) { display: flex; align-items: center; gap: 12px; }
.aviso > div { flex: 1; min-width: 0; }
.aviso > .boton { flex: none; }
.aviso[hidden] { display: none; }
.aviso.error { background: var(--rojo-claro); border-color: var(--rojo-borde); --aviso-color: var(--rojo); --aviso-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E"); }
.aviso.alerta { background: var(--ambar-claro); border-color: var(--ambar-borde); --aviso-color: var(--ambar); --aviso-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E"); }
.aviso.ok { background: var(--verde-claro); border-color: var(--verde-borde); --aviso-color: var(--verde); --aviso-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.aviso.info { --aviso-color: var(--azul); }

/* ─── Avatar con iniciales (núcleo, regla de tres: azul claro en todos lados) ─── 34 px listas · .l 40 px · .xl 64 px */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center;
  font-size: var(--ts-pequeno); font-weight: 700; flex: none; }
.avatar.l { width: 40px; height: 40px; font-size: var(--ts-base); }
.avatar.xl { width: 64px; height: 64px; font-size: var(--ts-subtitulo); }

/* ─── Ícono de especie (núcleo): cuadro de 34 px; perro naranja, gato y otras en gris. HTML con especieHtml() de app.js ─── */
.esp { width: 34px; height: 34px; border-radius: var(--radio-control); display: grid; place-items: center; flex: none; background: var(--fondo); color: var(--texto-suave); }
.esp { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }   /* ícono de especie: el mismo contorno de los íconos en cuadro (M-1, Joaquín 15-oct-2026) */
.esp svg { width: 20px; height: 20px; }
.esp.perro { background: var(--etq-naranja-f); color: var(--etq-naranja-t); }

/* ─── Etiquetas ─── */
.chip { display: inline-block; font-size: var(--ts-pequeno); font-weight: 700; letter-spacing: 0; /* etiquetas: mayúscula al inicio de cada palabra, menos los conectores (Joaquín, 14 y 21-oct-2026; tituloFicha en app.js) */ padding: 2px 8px; border-radius: var(--radio-pastilla); vertical-align: middle; }
.chip.b { background: var(--morado-claro); color: var(--morado); }
.chip.pref { background: var(--ambar-claro); color: var(--ambar); }
.chip.ok { background: var(--verde-claro); color: var(--verde); }
.chip.rojo { background: var(--rojo-claro); color: var(--rojo); }
.chip.morado { background: var(--morado-claro); color: var(--morado); }   /* Recolección Realizada en Órdenes de Servicio */
.chip.naranja { background: var(--etq-naranja-f); color: var(--etq-naranja-t); }   /* Realizado en ODS Imagenología */
.chip.gris { background: var(--fondo); color: var(--texto-suave); }
.chip.verde { background: var(--verde-claro); color: var(--verde); } .chip.ambar { background: var(--ambar-claro); color: var(--ambar); }

.nota { font-size: var(--ts-pequeno);   /* descripciones y notas grises en 12 */ color: var(--texto-suave); }
.vacio { padding: 24px; text-align: center; color: var(--texto-suave); font-size: var(--ts-base); }

/* ─── Login ─── */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--azul-claro), var(--fondo) 60%); }
.login { width: 100%; max-width: 380px; }
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca p { margin: 0; color: var(--texto-suave); }
.login-form h1 { font-size: var(--ts-subtitulo); margin-bottom: 16px; }
.login-form .boton { margin-top: 8px; }
.login-form .nota { margin: 16px 0 0; text-align: center; }
.login-form .aviso { margin-bottom: 16px; }
/* Primeros Pasos (licencia nueva, 24-oct-2026): la misma tarjeta de la entrada, más ancha, con sus tres partes */
.login.login-ancho { max-width: 560px; }
.login-form .pp-sec { font-size: var(--ts-base); font-weight: 700; color: var(--azul); margin: 20px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.login-form .pp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.login-form .pp-nota { font-size: var(--ts-base); color: var(--texto-suave); margin: 0 0 8px; }
.login-form .casilla { margin: 4px 0 12px; }
.login-salir { display: flex; justify-content: center; margin-top: 16px; }   /* cambiar-clave.php: salir sin cambiarla (19-oct-2026) */

/* ─── Ventana emergente ─── */
.modal-fondo { position: fixed; inset: 0; background: var(--velo); display: grid; place-items: center; padding: 16px; z-index: var(--capa-ventana); }
.modal { background: var(--superficie); border-radius: var(--radio); width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; box-shadow: var(--sombra-ventana); }
.modal h3 { font-size: var(--ts-subtitulo); }
/* ✕ de cerrar de toda ventana: arriba a la derecha, el título no se le encima */
.modal { position: relative; }
.modal > .modal-x { position: absolute; top: 20px; right: 24px; z-index: var(--capa-fijo); }   /* a la orilla del contenido y al centro del título */
.modal > .modal-x ~ h3:first-of-type, .modal > .modal-x + * h3:first-of-type { padding-right: 48px; }
/* Ventanas (M-4): se ven igual que un formulario de página como "Nuevo cliente" (Joaquín, 13-oct-2026): fondo gris de la
   página, campos blancos con borde gris claro, títulos de campo 12/700, lo escrito 16, títulos de sección 20/700 y la
   descripción 14 gris. Lo que dentro iría en "recuadro interno" gris pasa a blanco con borde, porque ya está sobre gris.
   No aplica a las ventanas de elegir con casillas (Exportar…) ni a los paneles laterales (Filtros, Columnas): esos siguen blancos. */
/* Ventanas anchas (núcleo): .modal-ancho 820 px (formularios largos) · .modal-extra-ancho 1000 px (agenda, historial) */
.modal.modal-ancho { max-width: 820px; }
.modal.modal-extra-ancho { max-width: 1000px; }
.modal.formulario { background: var(--fondo); }
.modal.formulario h3 { font-size: var(--ts-titulo); }   /* como el título de "Nuevo cliente" */
/* La línea que explica la ventana va debajo del título en letra normal (14, color de texto), no en 12 gris: se lee como parte
   del encabezado, igual que en las ventanas de cambio en grupo (Joaquín, 15-oct-2026; M-4) */
.modal > h3 + p.nota, .modal > h3 + .nota { font-size: var(--ts-base); color: var(--texto); margin: 4px 0 16px; }
.modal.formulario :is(.inc-sec-t, .etq.ev-paso, .form-sec) { display: block; font-size: var(--ts-subtitulo); font-weight: 700; color: var(--texto);
  text-transform: none; letter-spacing: 0; background: none; padding: 0; border: 0; border-radius: 0; }
.modal.formulario :is(.ev-quien, .inc-ficha-g, .calif-resto) { background: var(--blanco); border: 1px solid var(--borde); }
/* Entrada suave (familia de despliegues F): el velo aparece y la ventana crece de 98 % a 100 % */
.modal-fondo { animation: aparece-velo var(--vel-media) ease; }
.modal-fondo > .modal { animation: aparece-ventana var(--vel-media) ease; }
@keyframes aparece-velo { from { opacity: 0; } }
@keyframes aparece-ventana { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal-fondo, .modal-fondo > .modal { animation: none; } }
/* Texto solo para lectores de pantalla (no se ve) */
/* Texto solo para lectores de pantalla. Fijo en la esquina de la ventana (no "absolute"): dentro de un panel que se desplaza,
   un "absolute" sin ancestro posicionado se escapaba del recorte y estiraba la página (hueco gris al bajar en Safari, P-1) */
.solo-lector { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.modal .acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.modal .acciones .espacio { flex: 1; }   /* un botón aparte a la izquierda (Mandar Enlace) y los de siempre a la derecha */
/* Si la ventana no cabe y su contenido se desplaza, los botones del pie se quedan a la vista (M-4): se pegan abajo con el
   fondo de la ventana, y el relleno de abajo de la ventana pasa a ser el suyo */
.modal > .acciones { position: sticky; bottom: -24px; margin: 4px 0 -24px; padding: 16px 0 24px; background: inherit; z-index: var(--capa-fijo); }

/* ─── Notificación flotante ─── */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--blanco); padding: 12px 20px; border-radius: var(--radio-pastilla); font-size: var(--ts-base); z-index: var(--capa-aviso); box-shadow: var(--sombra-flotante); }
.toast.error { background: var(--rojo); }

/* ─── Reportes (compartido) ─── */
/* Tarjetas de indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* El número queda siempre abajo, aunque el título ocupe dos renglones */
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.kpi small { display: block; font-size: var(--ts-pequeno); color: var(--texto-suave); }
.kpi b { font-size: var(--ts-numero); line-height: 32px; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }   /* KPI: número azul 800 (M-2) */

/* Barras simples */
.barras { display: grid; gap: 4px; }
.barra-fila { display: grid; grid-template-columns: 140px 1fr 40px; gap: 8px; align-items: center; font-size: var(--ts-base); }
.barra-fila .b { height: 14px; background: var(--azul); border-radius: var(--radio-mini); min-width: 2px; }
.barra-fila .n { text-align: right; font-variant-numeric: tabular-nums; }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }

/* ═══ Menú lateral ═══
   Cuerpo = menú + contenido. Un grupo por módulo (título en mayúsculas) y cada sección con su icono. */
.cuerpo { flex: 1; min-height: 0; display: flex; }
.cuerpo-cont { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lateral { width: 248px; flex: none; background: var(--blanco); border-right: 1px solid var(--borde); display: flex; flex-direction: column; padding: 16px 12px 12px; transition: width var(--vel-media), padding var(--vel-media); }
.lateral-lista { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.lateral a, .lateral .plegar { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 2px; border: 0; border-radius: var(--radio-control); background: none; color: var(--texto); text-decoration: none; font: inherit; font-size: var(--ts-base); font-weight: 500; text-align: left; cursor: pointer; transition: background var(--vel-rapida), color var(--vel-rapida); }
.lateral a svg, .lateral .plegar svg { width: 18px; height: 18px; flex: none; color: var(--texto-suave); transition: color var(--vel-rapida), transform var(--vel-media); }
.lateral .txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral a:hover, .lateral .plegar:hover { background: var(--fondo); }
.lateral a:hover svg, .lateral .plegar:hover svg { color: var(--azul); }
.lateral a.activo { background: var(--azul-claro); color: var(--azul); font-weight: 700; }
.lateral a.activo svg { color: var(--azul); }
/* Título de módulo: se abre y cierra; la flecha apunta abajo abierto y a la derecha cerrado */
.menu-grupo { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; font: inherit; font-size: var(--ts-pequeno); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); padding: 20px 12px 8px; border-radius: var(--radio-control); cursor: pointer; white-space: nowrap; overflow: hidden; transition: color var(--vel-rapida); }
.menu-grupo svg { width: 14px; height: 14px; flex: none; transform: rotate(-90deg); transition: transform var(--vel-media) ease; }
.menu-grupo:hover { color: var(--azul); }
.menu-modulo.abierto > .menu-grupo svg { transform: none; }
/* Despliegue animado: la lista crece hacia abajo (alto 0 → su alto) con un leve desvanecido y deslizamiento.
   Cerrada queda invisible también para el teclado. */
.menu-items, .menu-hijos { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--vel-media) ease, opacity var(--vel-media) ease, visibility 0s linear var(--vel-media); }
.menu-items > div, .menu-hijos > div { min-height: 0; overflow: hidden; transform: translateY(-6px); transition: transform var(--vel-media) ease; }
.menu-modulo.abierto > .menu-items, .menu-madre.abierto > .menu-hijos { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-modulo.abierto > .menu-items > div, .menu-madre.abierto > .menu-hijos > div { transform: none; }
.menu-modulo:first-child > .menu-grupo, .menu-sucursal + .menu-modulo > .menu-grupo { padding-top: 8px; }
/* Sección con hijos (Caja): misma fila que las demás, con flecha; los hijos con línea a la izquierda */
.lateral .madre { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 2px; border: 0; border-radius: var(--radio-control); background: none; color: var(--texto); font: inherit; font-size: var(--ts-base); font-weight: 500; text-align: left; cursor: pointer; transition: background var(--vel-rapida), color var(--vel-rapida); }
.lateral .madre svg { width: 18px; height: 18px; flex: none; color: var(--texto-suave); transition: color var(--vel-rapida), transform var(--vel-media) ease; }
.lateral .madre .txt { flex: 1; }
.lateral .madre svg:last-child { width: 15px; height: 15px; transform: rotate(-90deg); }
.lateral .madre:hover { background: var(--fondo); }
.lateral .madre:hover svg { color: var(--azul); }
.menu-madre.abierto > .madre svg:last-child { transform: none; }
.menu-madre.vigente > .madre { color: var(--azul); font-weight: 700; }
.menu-madre.vigente > .madre svg { color: var(--azul); }
.menu-hijos-in { display: flex; flex-direction: column; margin-left: 20px; padding-left: 12px; border-left: 1px solid var(--azul-borde); }
.menu-hijos-in a:last-child { margin-bottom: 8px; }
.hijos-titulo { display: none; }
.lateral .menu-hijos a { padding: 8px 12px; font-size: var(--ts-base); color: var(--texto-suave); }
.lateral .menu-hijos a:hover { color: var(--azul); }
.lateral .menu-hijos a.activo { color: var(--azul); }
.menu-sucursal { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-flotante); padding: 12px 12px 12px; margin-bottom: 12px; }
.menu-sucursal label { display: flex; align-items: center; gap: 8px; font-size: var(--ts-pequeno); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.menu-sucursal label svg { width: 13px; height: 13px; }
.menu-sucursal :is(select, .ctl) { margin-top: 8px; height: var(--campo); font-size: var(--ts-base); font-weight: 700; color: var(--azul); padding: 0 32px 0 12px; border-radius: var(--radio-control); }
.lateral .plegar { flex: none; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio-control) var(--radio-control); color: var(--texto-suave); }

/* Plegado: solo iconos; los títulos de módulo se vuelven una línea divisoria */
.lateral.compacto { width: 64px; padding-left: 8px; padding-right: 8px; }
.lateral.compacto .txt, .lateral.compacto .menu-sucursal { display: none; }
.lateral.compacto a, .lateral.compacto .plegar { justify-content: center; padding-left: 0; padding-right: 0; }
.lateral.compacto .menu-grupo { height: 0; padding: 0; margin: 8px 4px; border-top: 1px solid var(--borde); pointer-events: none; }
.lateral.compacto .menu-grupo > * { display: none; }
.lateral.compacto .menu-modulo:first-child > .menu-grupo { margin-top: 0; border-top: 0; }
.lateral.compacto .menu-items { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.lateral.compacto .menu-items > div { transform: none; }
.lateral.compacto .madre { justify-content: center; padding-left: 0; padding-right: 0; }
.lateral.compacto .madre svg:last-child { display: none; }
/* Plegado, los hijos de Caja salen en un cuadro flotante al pasar el cursor o al tocar */
.lateral.compacto .menu-madre > .menu-hijos { display: none; grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: none; position: fixed; z-index: var(--capa-menu); margin: 0; min-width: 210px; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-flotante); background: var(--blanco); box-shadow: var(--sombra-flotante); }
.lateral.compacto .menu-madre > .menu-hijos::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
/* El cuadro flotante aparece con un leve deslizamiento desde el icono */
.lateral.compacto .menu-madre:hover > .menu-hijos, .lateral.compacto .menu-madre.ver > .menu-hijos { display: grid; animation: aparece-flotante var(--vel-rapida) ease; }
.lateral.compacto .menu-hijos > div { overflow: visible; transform: none; }
.lateral.compacto .menu-hijos-in { margin: 0; padding: 0; border: 0; }
.lateral.compacto .menu-hijos-in a:last-child { margin-bottom: 0; }
@keyframes menu-flotante { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.lateral.compacto .hijos-titulo { display: block; font-size: var(--ts-pequeno); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 8px 12px 4px; white-space: nowrap; }
.lateral.compacto .menu-hijos a { justify-content: flex-start; padding: 8px 12px; white-space: nowrap; }
.lateral.compacto .plegar svg { transform: rotate(180deg); }
/* Al pasar el cursor, el nombre se empuja un poco a la derecha con un leve rebote */
.lateral .txt, .lateral .nom, .menu-grupo > span { display: inline-block; transition: transform var(--vel-media) cubic-bezier(.34, 1.56, .64, 1); }
.lateral a:hover .txt, .lateral .madre:hover .txt, .lateral .plegar:hover .txt, .lateral a:hover .nom { transform: translateX(5px); }
.menu-grupo:hover > span { transform: translateX(3px); }
/* ─── Despliegue (regla de Joaquín, 13-oct-2026): TODO lo que se abre y cierra usa el mismo efecto que el menú
   lateral: crece hacia abajo en 0.25 s con un leve desvanecido y deslizamiento, y su flecha gira al mismo tiempo.
   Uso: <div class="despliegue [abierto]"><div>…contenido…</div></div> y una flecha .flecha-despliegue en el botón. ─── */
.despliegue { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--vel-media) ease, opacity var(--vel-media) ease, visibility 0s linear var(--vel-media); }
.despliegue > div { min-height: 0; overflow: hidden; transform: translateY(-6px); transition: transform var(--vel-media) ease; }
.despliegue.abierto { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.despliegue.abierto > div { transform: none; }
.flecha-despliegue { transform: rotate(-90deg); transition: transform var(--vel-media) ease; }   /* como el menú: derecha cerrado, abajo abierto */
[aria-expanded="true"] > .flecha-despliegue { transform: none; }
/* El mismo efecto en filas de tabla (variantes de Productos y Servicios, composición de las razas): entran creciendo hacia abajo con
   desvanecido y salen igual; la flecha de la fila gira al mismo tiempo (desplegarFilas() en app.js; Joaquín, 15-oct-2026) */
/* Una fila no se puede "plegar" con el truco de .despliegue: cada celda crece desde cero (su relleno y su renglón) y su contenido
   aparece con desvanecido; al cerrar, lo mismo al revés. Así la fila empuja a las de abajo como el menú lateral.
   Los ceros llevan "px" a propósito: "line-height: 0" sin unidad no se mezcla con "16px" y la fila saltaba de golpe */
@keyframes celda-crece { from { padding-top: 0; padding-bottom: 0; line-height: 0px; border-bottom-width: 0; } }   /* sin opacidad: el fondo gris no se aclara a blanco (21-oct-2026); se desvanece solo el contenido */
@keyframes contenido-crece { from { line-height: 0px; max-height: 0; min-height: 0px; padding-top: 0px; padding-bottom: 0px; opacity: 0; transform: translateY(-6px); } to { max-height: 48px; } }
@keyframes celda-encoge { to { padding-top: 0; padding-bottom: 0; line-height: 0px; border-bottom-width: 0; } }   /* la línea también se cierra: al final nada sube de golpe */
@keyframes contenido-encoge { from { max-height: 48px; } to { line-height: 0px; max-height: 0; min-height: 0px; padding-top: 0px; padding-bottom: 0px; opacity: 0; transform: translateY(-6px); } }
tr.fila-entra > td { animation: celda-crece var(--vel-media) ease; }
tr.fila-entra > td * { animation: contenido-crece var(--vel-media) ease; overflow: hidden; }
tr.fila-sale > td { animation: celda-encoge var(--vel-media) ease forwards; }
tr.fila-sale > td * { animation: contenido-encoge var(--vel-media) ease forwards; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lateral, .lateral *, .despliegue, .despliegue > div, .flecha-despliegue, tr.fila-entra, tr.fila-sale, tr.fila-entra *, tr.fila-sale * { transition: none !important; animation: none !important; }
}
@media (max-width: 960px) {
  .cuerpo { align-items: flex-start; }
  .lateral { position: sticky; top: 0; height: 100vh; }
}

/* ═══ Pantallas de módulo (2.0): la ventana completa, solo el contenido se desplaza ═══ */
body.pantalla-modulo { height: 100vh; display: flex; flex-direction: column; }
body.pantalla-modulo > .barra { flex: none; }
.modulo-cont { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 48px; }   /* mismo margen que .modulo-enc: el título no brinca al cambiar de sección */
.modulo-cont > * { max-width: 1240px; }
/* Migas en cápsula (opción B, 13-oct-2026): módulo › [sección madre] › pantalla actual resaltada */
.migas { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-pastilla); padding: 3px 4px; margin-bottom: 12px; font-size: var(--ts-pequeno); line-height: 16px; }
.migas a, .migas b { padding: 2px 12px; border-radius: var(--radio-pastilla); white-space: nowrap; }
.migas a { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--texto-suave); font-weight: 500; text-decoration: none; transition: background var(--vel-rapida), color var(--vel-rapida); }
.migas a:hover { background: var(--fondo); color: var(--azul); }
.migas b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; background: var(--azul-claro); color: var(--azul); font-weight: 700; }
.migas .sep { flex: none; width: 6px; height: 6px; margin: 0 4px 0 2px; border-top: 1.5px solid var(--texto-suave); border-right: 1.5px solid var(--texto-suave); opacity: .5; transform: rotate(45deg); }
.migas .casa::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Contador junto al título de una pantalla de lista */
.titulo-cont { display: inline-block; margin-left: 12px; padding: 2px 12px; vertical-align: middle; border: 1px solid var(--azul-borde); border-radius: var(--radio-pastilla); background: var(--blanco); color: var(--azul); font-size: var(--ts-pequeno); font-weight: 700; line-height: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.titulo-cont:empty { display: none; }
.modulo-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.modulo-cab h1 { font-size: var(--ts-titulo); margin: 0; }
.construccion { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 44px 24px; border-radius: var(--radio-contenedor); box-shadow: none; }
.construccion-ico { width: 56px; height: 56px; border-radius: var(--radio-contenedor); background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.construccion-ico svg { width: 26px; height: 26px; }
.construccion p { margin: 0; max-width: 520px; color: var(--texto-suave); font-size: var(--ts-base); }
@media (max-width: 800px) { body.pantalla-modulo { height: auto; display: block; } }

/* ═══ Controles con diseño propio (iguales en todos los navegadores) ═══ */
.ctl-oculto { display: none !important; }
.ctl {
  width: 100%; height: var(--campo); display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: var(--ts-base); text-align: left; color: var(--texto);
  padding: 0 12px; border: 1px solid var(--borde-control); border-radius: var(--radio-chico); background: var(--blanco);
  cursor: pointer; transition: border-color var(--vel-rapida), box-shadow var(--vel-rapida);
}
.ctl > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl > span.sin-elegir { color: var(--texto-suave); font-weight: 400; }   /* «Selecciona…»: gris suave en todo formulario (C-11) */
.ctl > span.vacio { color: var(--texto-suave); text-align: left; font-size: inherit; padding: 0; margin: 0; border: 0; background: none; }   /* "Elegir fecha": igual que el texto de los demás campos, no como estado vacío */
.ctl svg { width: 15px; height: 15px; flex: none; color: var(--texto-suave); transition: transform var(--vel-rapida); }
.ctl:hover { border-color: var(--azul); }
.ctl:focus-visible, .ctl.abierto { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.ctl-select.abierto svg { transform: rotate(180deg); color: var(--azul); }
.ctl:disabled { opacity: .55; cursor: not-allowed; }
/* Un campo de texto apagado se ve como una lista apagada (el nombre que se arma solo, 25-oct-2026) */
input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
/* Lo que llena el sistema (Joaquín, 27-oct-2026): bloqueado pero con valor (Tipo de alimento, Nombre que se arma solo) va en negro, igual que
   lo que elige el usuario, porque así va quedando su alta. Bloqueado y vacío («Selecciona…», «No Aplica», el ejemplo) sigue en gris */
.ctl:disabled:has(> span:not(.sin-elegir)), input:disabled:not(:placeholder-shown), textarea:disabled:not(:placeholder-shown) { opacity: 1; color: var(--texto); -webkit-text-fill-color: var(--texto); }
/* ═══ Familia de flotantes (reglamento M-8, auditoría 13-oct-2026) ═══
   A · lista de opciones (.ctl-flotante, .desplegable-lista) · B · menú de acciones (.menu-flot, .menu-acc) · C · sugerencias (.resultados).
   Misma caja, mismas opciones y mismo efecto; solo cambia lo que llevan dentro. Esc o clic fuera cierran. */
.ctl-flotante, .menu-flot, .menu-acc, .resultados, .desplegable-lista, .lateral.compacto .menu-madre > .menu-hijos {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-flotante); box-shadow: var(--sombra-flotante); padding: 8px; }
.ctl-flotante, .menu-flot, .menu-acc, .resultados, .desplegable-lista { animation: aparece-flotante var(--vel-rapida) ease; }
@keyframes aparece-flotante { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Opción de cualquier flotante: 36 px, esquinas de control, cursor encima = azul claro, elegida = azul con ✓ */
.ctl-op, .menu-flot button, .menu-acc button, .desplegable-lista .op, .resultado {
  min-height: 36px; padding: 8px 12px; border-radius: var(--radio-control); font-size: var(--ts-base); font-weight: 500; color: var(--texto); cursor: pointer; }
.ctl-op:hover, .ctl-op.activa, .menu-flot button:hover, .menu-flot button:focus-visible, .menu-acc button:hover, .menu-acc button:focus-visible,
.desplegable-lista .op:hover, .desplegable-lista .op.activa, .resultado:hover, .resultado:focus { background: var(--azul-claro); color: var(--azul); outline: none; }
.ctl-op.elegida, .desplegable-lista .op.elegida, .menu-flot button.on { color: var(--azul); font-weight: 700; }
/* B-6: opción de menú apagada (sin permiso): más clara, cursor de prohibido y sin cambio al pasar el cursor */
.menu-flot button:disabled, .menu-acc button:disabled, .menu-flot button:disabled:hover, .menu-acc button:disabled:hover { opacity: .5; cursor: not-allowed; background: none; color: var(--texto); }
.menu-acc .rojo, .menu-flot .rojo { color: var(--rojo); } .menu-acc .rojo:hover, .menu-flot .rojo:hover { background: var(--rojo-claro); color: var(--rojo); }
@media (prefers-reduced-motion: reduce) { .ctl-flotante, .menu-flot, .menu-acc, .resultados, .desplegable-lista { animation: none; } }
.ctl-flotante { position: fixed; z-index: var(--capa-flotante); font-family: var(--fuente); }
.ctl-lista { max-height: 280px; overflow-y: auto; }
.ctl-op { white-space: nowrap; }
.ctl-op small { margin-left: 8px; font-size: var(--ts-pequeno); font-weight: 500; color: var(--texto-suave); }
.ctl-vacio { padding: 12px 12px; font-size: var(--ts-pequeno); color: var(--texto-suave); }
.ctl-op.elegida::after { content: "✓"; float: right; margin-left: 16px; color: var(--azul); }
.ctl-select .ctl-vacio { padding: 0; font-size: inherit; color: var(--texto-suave); font-weight: 400; }   /* "Nadie en particular": mismo tamaño y lugar que el texto de los demás campos */
/* Calendario */
.ctl-cal { width: 266px; padding: 4px; }
.ctl-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ctl-cal-cab b { font-size: var(--ts-base); color: var(--texto); }
.ctl-cal-cab button { width: var(--btn-s); height: var(--btn-s); border: 0; border-radius: var(--radio-control); background: none; font-size: var(--ts-subtitulo); color: var(--azul); cursor: pointer; }
.ctl-cal-cab button:hover { background: var(--azul-claro); }
.ctl-cal-sem, .ctl-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ctl-cal-sem span { font-size: var(--ts-pequeno); font-weight: 700; color: var(--texto-suave); padding: 4px 0; }
.ctl-dia { height: 34px; border: 0; border-radius: var(--radio-control); background: none; font: inherit; font-size: var(--ts-base); color: var(--texto); cursor: pointer; }
.ctl-dia:hover { background: var(--azul-claro); color: var(--azul); }
.ctl-dia.hoy { color: var(--azul); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--azul-borde); }
.ctl-dia.elegida { background: var(--azul); color: var(--blanco); font-weight: 700; }
.ctl-dia:disabled, .ctl-dia:disabled:hover { background: none; color: var(--texto-suave); opacity: .4; cursor: not-allowed; }   /* días que no se pueden elegir (antes del mínimo o que no se atiende) */
.ctl-cal-pie { display: flex; justify-content: space-between; border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 8px; }
.ctl-cal-pie button { border: 0; background: none; font: inherit; font-size: var(--ts-base); font-weight: 500; color: var(--azul); padding: 8px 12px; border-radius: var(--radio-control); cursor: pointer; }
.ctl-cal-pie button:hover { background: var(--azul-claro); }
/* Botón de archivo */
.ctl-archivo { display: inline-flex; align-items: center; gap: 12px; }
/* Dentro de un campo, la caja de archivo no toma el estilo de su etiqueta (bloque y mayúsculas): el botón y el nombre quedan separados (22-oct-2026) */
.campo > span.ctl-archivo { display: inline-flex; margin-bottom: 0; font-size: var(--ts-base); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); }
.ctl-archivo .nota { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo > .ctl-archivo + small { display: block; margin-top: 4px; }   /* la nota de abajo de «Elegir Archivo» en su propio renglón */

/* Casillas de verificación propias */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 18px; height: 18px; border: 1px solid var(--gris-control); border-radius: var(--radio-mini); background: var(--blanco);
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
  transition: background var(--vel-rapida), border-color var(--vel-rapida);
}
input[type=checkbox]::after { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--vel-rapida);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=checkbox]:checked { background: var(--azul); border-color: var(--azul); }
input[type=checkbox]:checked::after { transform: scale(1); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--azul-claro); }

/* Campos numéricos sin flechitas del navegador */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Barras de desplazamiento delgadas, iguales en Mac y Windows */
* { scrollbar-width: thin; scrollbar-color: var(--azul-borde) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--azul-borde); border-radius: var(--radio-pastilla); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gris-control); background-clip: content-box; }

/* ═══ Pestañas y KPI con icono (compartidos por todas las pantallas) ═══ */
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-flotante); padding: 4px; margin-bottom: 16px; }
.pestanas button { font: inherit; font-size: var(--ts-base); font-weight: 500; border: 0; background: none; color: var(--texto-suave); height: var(--btn-m); padding: 0 16px; border-radius: var(--radio-control); cursor: pointer; transition: background var(--vel-rapida), color var(--vel-rapida); }
.pestanas button:hover { background: var(--azul-claro); color: var(--azul); }
.pestanas button.on { background: var(--azul); color: var(--blanco); }
.pestanas button:disabled { opacity: .45; cursor: not-allowed; } .pestanas button:disabled:hover { background: none; color: var(--texto-suave); }

/* Pestañas sobre un área que se desplaza: línea divisoria abajo, a la misma distancia que el espacio de arriba (12 px) */
.pestanas-caja { flex: none; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.pestanas-caja > .pestanas { margin: 0; }

/* KPI con icono: icono en cuadro de color + texto + número */
/* Regla: ícono o etiqueta junto a texto de 1 o 2 renglones → alineados arriba (reglamento P-8) */ .kpi.con-ico { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 12px; }
.kpi-ico { width: 40px; height: 40px; border-radius: var(--radio-control); background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; flex: none; }
.kpi-ico { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }   /* contorno ligero de 1 px del tono del ícono al 28 %, como el indicador de consultorio (Joaquín, 15-oct-2026; M-1) */
.kpi-ico svg { width: 20px; height: 20px; }
.kpi-ico.rojo { background: var(--rojo-claro); color: var(--rojo); }
.kpi-ico.ambar { background: var(--ambar-claro); color: var(--ambar); }
.kpi-ico.verde { background: var(--verde-claro); color: var(--verde); }
.kpi-ico.morado { background: var(--morado-claro); color: var(--morado); }
.kpi-ico.naranja { background: var(--etq-naranja-f); color: var(--etq-naranja-t); }
.kpi-ico.gris { background: var(--fondo); color: var(--texto-suave); }   /* como la etiqueta gris (Inversión en Solicitudes, AD43) */

/* Barra de filtros (compartida): cuadrícula de 4 columnas, campos de 40 px con letra de 14 */
.filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; align-items: end; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-contenedor); padding: 16px 16px; margin-bottom: 16px; }
.tarjeta .filtros { border: 0; padding: 0; background: none; margin-bottom: 16px; }
.filtros .campo { margin: 0; min-width: 0; }
.filtros .campo > span { font-size: var(--ts-pequeno); margin-bottom: 8px; }
.filtros input, .filtros select { width: 100%; height: var(--campo); font-size: var(--ts-pequeno); padding: 0 12px; border-radius: var(--radio-control); }
.filtros select { padding-right: 36px; }
.filtros .campo.ancho { grid-column: span 2; }
.filtros .campo.ancho3 { grid-column: span 3; }
@media (max-width: 1100px) { .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filtros .campo.ancho3 { grid-column: span 2; } }
/* Filtros con ícono dentro del campo (calendario, ubicación…) */
.sel-ico { position: relative; display: block; }
.sel-ico > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--azul); pointer-events: none; }
.sel-ico > select, .sel-ico > input { padding-left: 40px; }
/* Filtros + secciones en una sola tarjeta (Métricas): filtros arriba y secciones subrayadas a todo lo ancho abajo */
.filtros-caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-contenedor); overflow: hidden; }
.filtros-caja > .filtros { margin: 0; border: 0; border-radius: 0; }
/* Parejas a lo ancho; si no caben (pantallas chicas), cada una mide su texto y la barra se desliza de lado */
.secciones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); border-top: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.secciones button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: var(--ts-base); font-weight: 500;
  color: var(--texto-suave); background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 8px 8px; cursor: pointer; white-space: nowrap; transition: color var(--vel-rapida), background var(--vel-rapida); }
.secciones button svg { width: 16px; height: 16px; flex: none; }
.secciones button:hover { color: var(--azul); background: var(--azul-claro); }
.secciones button.on { color: var(--azul); font-weight: 700; border-bottom-color: var(--azul); }
.secciones button.on:hover { background: none; }
@media (max-width: 1100px) { .secciones button { padding-inline: 12px; } }


/* ═══ Globo de ayuda propio (reglamento M-9): igual en todos los navegadores ═══ */
.globo-ayuda { position: fixed; z-index: var(--capa-aviso); max-width: 280px; padding: 8px 12px; border-radius: var(--radio-control); background: var(--texto); color: var(--blanco);
  font-size: var(--ts-pequeno); font-weight: 500; line-height: 16px; box-shadow: var(--sombra-flotante); pointer-events: none; animation: aparece-velo var(--vel-rapida) ease; }

/* ═══ Foco del teclado (WCAG 2.4.7): el mismo anillo azul en todo lo que se puede tocar, en cualquier navegador ═══ */
:where(button, a, [tabindex], summary):focus-visible { outline: none; box-shadow: var(--anillo-foco), 0 0 0 4px var(--azul); }
:where(.ctl-op, .menu-flot button, .menu-acc button, .resultado):focus-visible { box-shadow: none; }

/* Área de toque mínima de 24 px (WCAG 2.5.8) en las piezas diminutas, sin cambiar cómo se ven */
.casilla-t { min-width: 24px; min-height: 24px; }
.th-orden { min-width: 24px; min-height: 24px; }
.migas a { min-height: 24px; }
tr[tabindex]:focus-visible { box-shadow: none; outline: 2px solid var(--azul); outline-offset: -2px; }
tr[tabindex]:focus-visible td { background: var(--azul-tenue); }

/* ═══ Catálogo de componentes (reglamento K-1): cada pieza se define UNA vez aquí.
   Los nombres de cada sección (.cl-buscador, .pf-busca, .link-agregar…) solo dan lugar y ancho, nunca aspecto. ═══ */

/* Botón de solo ícono (B-7): cuadrado, mismo estilo que el botón estándar */
.boton.solo-ico { width: var(--btn-m); padding: 0; justify-content: center; }
.boton.solo-ico.chico { width: var(--btn-s); }
.boton.solo-ico svg { flex: none; }

/* Buscador (C-7): campo estándar con lupa gris a la izquierda. .chico = 40 px, dentro de paneles */
.buscador-caja { display: flex; align-items: center; gap: 12px; height: var(--campo); padding: 0 12px; border: 1px solid var(--borde-control); border-radius: var(--radio-control);
  background: var(--blanco); transition: border-color var(--vel-rapida), box-shadow var(--vel-rapida); }
.buscador-caja:hover { border-color: var(--azul); }
.buscador-caja:focus-within { border-color: var(--azul); box-shadow: var(--anillo-foco); }
.buscador-caja > svg { width: 18px; height: 18px; color: var(--texto-suave); flex: none; }
.buscador-caja input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; outline: none; box-shadow: none; background: none; font-size: var(--ts-base); }
.buscador-caja input:focus { box-shadow: none; }
.buscador-caja kbd { font: inherit; font-size: var(--ts-pequeno); color: var(--texto-suave); border: 1px solid var(--borde); border-radius: var(--radio-mini); padding: 1px 8px; }
.buscador-caja.chico { height: 40px; gap: 8px; }
.buscador-caja.chico > svg { width: 16px; height: 16px; }
.buscador-caja.chico input { font-size: var(--ts-pequeno); }

/* Control segmentado (M-2): pastillas grises, la elegida azul relleno */
.segmentado, .alternar, .filtros-fila { display: inline-flex; flex-wrap: wrap; gap: 4px; }
:is(.segmentado, .alternar, .filtros-fila) > button { height: var(--btn-xs); padding: 0 12px; border: 0; border-radius: var(--radio-pastilla); background: var(--fondo); color: var(--texto-suave);
  font: inherit; font-size: var(--ts-pequeno); font-weight: 700; cursor: pointer; transition: background var(--vel-rapida), color var(--vel-rapida); }
:is(.segmentado, .alternar, .filtros-fila) > button:not(.on):hover { background: var(--azul-claro); color: var(--azul); }
:is(.segmentado, .alternar, .filtros-fila) > button.on { background: var(--azul); color: var(--blanco); }

/* Opción con casilla o punto (filtros, menús de columna, Exportar, Configuración): pieza del núcleo */
.op-filtro { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }   /* relative: su casilla nativa oculta (absolute) se queda dentro y no estira la página (P-1) */
.op-filtro input { position: absolute; opacity: 0; pointer-events: none; }
.op-filtro span { flex: 1; } .op-filtro small { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.op-filtro.apagado { opacity: .45; cursor: not-allowed; }
/* Asa ⋮⋮ para cambiar el orden arrastrando (C-6: panel Columnas, Configuración › Productos) */
.op-filtro .asa { margin-left: auto; color: var(--texto-suave); cursor: grab; letter-spacing: -2px; border-radius: var(--radio-mini); }
.op-filtro .asa:focus-visible { box-shadow: var(--anillo-foco); outline: none; }
.op-filtro.arrastra { background: var(--azul-tenue); box-shadow: var(--sombra-flotante); }

/* Casilla (C-8): el mismo cuadro con ✓ para la casilla suelta, la de tabla (.casilla-t) y la de filtros (.op-filtro .cbx).
   Opción única (.op-filtro .rd): círculo con aro azul. */
.casilla-t { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
.casilla-t input, .op-filtro input { position: absolute; opacity: 0; pointer-events: none; }
.casilla-t i, .op-filtro .cbx, .op-filtro .rd { width: 18px; height: 18px; flex: none; border: 1px solid var(--gris-control); border-radius: var(--radio-mini); background: var(--blanco);
  transition: background-color var(--vel-rapida), border-color var(--vel-rapida); }
.op-filtro .rd { border-radius: 50%; }
.casilla-t:hover i, .op-filtro:hover .cbx, .op-filtro:hover .rd { border-color: var(--azul); }
.casilla-t input:checked + i, .op-filtro input:checked + .cbx { background-color: var(--azul); border-color: var(--azul); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat; }
.op-filtro input:checked + .rd { border: 5px solid var(--azul); }
/* Lista desplegable de varias opciones: cada opción con su casilla, en lugar de la ✓ a la derecha (Joaquín, 27-oct-2026) */
.ctl-op.ctl-op-multi { display: flex; align-items: center; gap: 12px; }
.ctl-op.ctl-op-multi.elegida { color: var(--texto); font-weight: 400; }
.ctl-op.ctl-op-multi.elegida::after { content: none; }
.ctl-op-multi .cbx { width: 18px; height: 18px; flex: none; border: 1px solid var(--gris-control); border-radius: var(--radio-mini); background: var(--blanco); }
.ctl-op-multi:hover .cbx { border-color: var(--azul); }
.ctl-op-multi.elegida .cbx { background-color: var(--azul); border-color: var(--azul); background-size: 10px; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.casilla-t input:focus-visible + i, .op-filtro input:focus-visible + i { box-shadow: var(--anillo-foco); }

/* ═══ Pantallas táctiles (tableta en Recepción y Consultorio, F-5): todo lo que se toca mide al menos 44 px.
   Con ratón no cambia nada; con el dedo los botones, opciones y menús crecen para no fallar el toque. ═══ */
@media (pointer: coarse) {
  .boton, .boton-reporte, .ctl, .desplegable-boton, .buscador-caja { min-height: var(--toque); }
  .boton.solo-ico, .boton.solo-ico.chico { width: var(--toque); height: var(--toque); }
  .boton.chico, .boton.texto.chico { height: var(--toque); }
  :is(.segmentado, .alternar, .filtros-fila) > button, .pestanas button, .pag-num { min-height: var(--toque); }
  .ctl-op, .menu-flot button, .menu-acc button, .resultado, .desplegable-lista .op { min-height: var(--toque); display: flex; align-items: center; }
  .lateral a, .lateral .madre, .lateral .plegar { min-height: var(--toque); }
  .interruptor, .casilla, .op-filtro { min-height: var(--toque); }
  .casilla-t, .th-orden { min-width: var(--toque); min-height: var(--toque); }
  .tag-trato, .pill-resto { height: 32px; }
  .migas a { min-height: 32px; }
}

/* "Saltar al contenido": invisible hasta que llega el teclado (WCAG 2.4.1) */
.saltar { position: fixed; top: 8px; left: 8px; z-index: var(--capa-aviso); padding: 8px 16px; border-radius: var(--radio-control); background: var(--azul); color: var(--blanco);
  font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform var(--vel-rapida); }
.saltar:focus { transform: none; }
/* Ventana angosta o zoom al 200 % (WCAG 1.4.10): la barra superior baja de renglón en lugar de salirse */
@media (max-width: 800px) { .barra { flex-wrap: wrap; row-gap: 8px; } .estado-cons { white-space: normal; } }

/* ═══ Encabezado de página (P-2): migas + título 24/700 (+ contador) a la izquierda, acciones a la derecha, línea abajo.
   .modulo-enc = a todo lo ancho (Clientes, Recepción, Consultorio) · .sec-cab = dentro del Panel. Mismo componente. ═══ */
.modulo-enc, .sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.modulo-enc { flex: none; padding: 16px 24px 12px; }
/* Un menú del encabezado abierto (Configuración, Opciones, Menú…) queda arriba de la barra de abajo, como Hoy · Día de la Agenda (Joaquín, 23-oct-2026) */
.modulo-enc:has(.menu-flot:not([hidden])) { position: relative; z-index: calc(var(--capa-flotante) + 1); }
.modulo-enc h1, .sec-cab h1 { font-size: var(--ts-titulo); margin: 0; color: var(--texto); white-space: nowrap; }
/* P-7 (excepción 2): el título nunca empuja los botones fuera de la orilla; si no cabe se corta con "…" y el nombre completo
   sale en el globo (title). Joaquín, 15-oct-2026 */
.modulo-enc > :first-child, .sec-cab > :first-child { flex: 1 1 auto; min-width: 0; }
.modulo-enc h1, .sec-cab h1 { overflow: hidden; text-overflow: ellipsis; }
/* Dentro de las secciones con desplazamiento propio, la línea del encabezado llega de orilla a orilla, igual que .modulo-enc */
.modulo-cont > .modulo-cab, :is(.modulo-cont, .admin-cont) .sec-cab { max-width: none; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
.modulo-acc, .sec-acc { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 1400px) { .modulo-acc .boton { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 1000px) { .modulo-enc, .sec-cab { flex-wrap: wrap; align-items: flex-start; } .modulo-acc, .sec-acc { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; } }
/* Pantallas de operación en ventanas bajas (820 px o menos): encabezado de página compacto */
@media (max-height: 820px) {
  body:is(.pantalla-recepcion, .pantalla-consultorio, .pantalla-ventas) .modulo-enc { padding-top: 8px; padding-bottom: 8px; }
  body:is(.pantalla-recepcion, .pantalla-consultorio, .pantalla-ventas) .modulo-enc .migas { margin-bottom: 4px; }
}

/* ═══ Etiqueta de catálogo (E-2): misma pastilla para descuentos (.etq-desc) y motivos de visita (.etq-motivo);
   el color lo elige cada catálogo entre 6: azul, naranja, salvia, lavanda, arena y coral. ═══ */
.etq-motivo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radio-pastilla); font-size: var(--ts-pequeno); font-weight: 700;
  letter-spacing: 0; text-transform: capitalize; line-height: 16px; white-space: nowrap; }
:is(.etq-desc, .etq-motivo) { background: var(--etq-azul-f); color: var(--etq-azul-t); }
:is(.etq-desc, .etq-motivo).naranja { background: var(--etq-naranja-f); color: var(--etq-naranja-t); }
:is(.etq-desc, .etq-motivo).salvia { background: var(--etq-salvia-f); color: var(--etq-salvia-t); }
:is(.etq-desc, .etq-motivo).lavanda { background: var(--etq-lavanda-f); color: var(--etq-lavanda-t); }
:is(.etq-desc, .etq-motivo).arena { background: var(--etq-arena-f); color: var(--etq-arena-t); }
:is(.etq-desc, .etq-motivo).coral { background: var(--etq-coral-f); color: var(--etq-coral-t); }

/* Texto de error junto al campo (F-5): rojo, 12 px, debajo del campo */
.error-campo { display: block; margin-top: 4px; color: var(--rojo); font-size: var(--ts-pequeno); font-weight: 500; line-height: 16px; text-transform: none; letter-spacing: 0; }

/* Safari pone su propio botón de contactos o llaves dentro de los campos: se oculta (F-1, nada del navegador) */
input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button, input::-webkit-strong-password-auto-fill-button {
  visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }

/* ═══ Cambio de pantalla suave (navegadores que lo permiten: Chrome, Edge, Safari 18): la barra y el menú se quedan
   quietos y solo el contenido se funde, en vez de que toda la página parpadee en blanco ═══ */
@view-transition { navigation: auto; }
.barra { view-transition-name: barra; }
#menu { view-transition-name: menu; position: relative; z-index: var(--capa-menu); }   /* el menú tiene su propia capa (por la transición): va arriba del contenido, así el submenú del menú plegado no queda detrás de las columnas fijas de las listas */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--vel-rapida); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Indicadores mientras llega el primer dato: vacíos (no "0" que luego cambia) pero con su alto, para que nada brinque */
.kpi b:empty::before, .kpi-linea b:empty::before { content: "\00a0"; }

.sin-partir { white-space: nowrap; }   /* códigos de turno: no se cortan en el guion (P-7) */
/* Explicación larga bajo el título de una página: aviso en el mismo lugar que la línea gris (M-10) */
.sec-aviso { margin: -8px 0 20px; }
.modal > h3 + .aviso { margin: 8px 0 16px; }
/* Centavos y decimales de las fichas (M-1, Joaquín 17-oct-2026): el número va exacto y lo de después del punto más chico */
.kpi-dec { font-size: var(--ts-base); font-weight: 700; line-height: 20px; letter-spacing: 0; }
.kpi small.kpi-dec, .met-kpi small.kpi-dec { display: inline; font-size: var(--ts-base); color: inherit; }   /* los centavos siguen al número (no son la línea de apoyo) */

/* Al llegar al final de la lista de un menú, la rueda o el trackpad no mueven la página de atrás (Joaquín, 18-oct-2026: el menú se cerraba) */
.ctl-flotante, .ctl-flotante *, .menu-flot, .menu-acc, .resultados, .desplegable-lista { overscroll-behavior: contain; }

/* Botón XS (B-1: 24 px, letra 12/700) para acciones dentro de un renglón de lista: Seguimiento › Registrar (Joaquín, 18-oct-2026) */
.boton.xs { height: var(--btn-xs); padding: 0 8px; font-size: var(--ts-pequeno); font-weight: 700; gap: 4px; }

/* Dinero con formato de contabilidad en todo el sistema, como Excel (M-12, L28, PL8; Joaquín, 22-oct-2026): el $ a la izquierda de la
   celda y la cantidad a la derecha con 2 decimales. En los datos (dd) ocupa su propio ancho, no todo el renglón */
.din { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 96px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.din > i { font-style: normal; }
.din.en-linea { display: inline-flex; min-width: 112px; }
/* Contabilidad en las fichas (ODC y ODS; Joaquín, 22-oct-2026): dos columnas de datos con sus secciones */
.ficha-contable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 16px; }
.ficha-contable > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cont-sec h4 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); font-size: var(--ts-pequeno); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.cont-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.cont-dl dt { color: var(--texto-suave); }
.cont-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .ficha-contable { grid-template-columns: 1fr; } }

/* Vetfly: aviso de licencia bajo la barra (PD5), solo a administradores */
.licencia-franja { padding: 8px 16px 0; }
.licencia-franja .aviso { margin: 0; }
/* Primeros Pasos en 3 pasos (25-oct-2026): número de paso, sucursales que ya tiene y las 6 áreas con su nombre y encendido */
.login-form .pp-paso { font-size: var(--ts-pequeno); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.login-form .pp-lista, .login-form .pp-beneficios { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: var(--ts-base); }
.login-form .pp-seguir { margin-top: 12px; }
.login.pp-areas-ancho { max-width: 760px; }
.login-form .pp-areas { display: grid; gap: 12px; margin: 8px 0 16px; }
.login-form .pp-area { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio-control); }
.login-form .pp-area .campo { margin: 0; }
.login-form .pp-area-txt { display: grid; gap: 2px; font-size: var(--ts-base); }
.login-form .pp-area-txt span { color: var(--texto); }
.login-form .pp-area-txt small { color: var(--texto-suave); font-size: var(--ts-pequeno); }
@media (max-width: 640px) { .login-form .pp-area { grid-template-columns: 1fr; } }
/* Campo con lista que también deja escribir (Categoría, Familia, Subfamilia, Tamaño, Etapa): se ve como las listas, con «Selecciona…» y ▾ */
.ctl-con-flecha { position: relative; display: block; }
/* Va dentro de .campo: no toma el estilo del título del campo; su texto y su «Selecciona…» son idénticos a los de una lista (F-6) */
.campo > span.ctl-con-flecha { margin-bottom: 0; font-size: var(--ts-base); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); }
.ctl-con-flecha > input { font-weight: 400; }
.ctl-con-flecha > input::placeholder { color: var(--texto-suave); font-weight: 400; }
.ctl-con-flecha > input { width: 100%; padding-right: 36px; }
.ctl-con-flecha > svg { position: absolute; right: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; transition: transform var(--vel-rapida); }
.ctl-con-flecha.abierta > svg { transform: translateY(-50%) rotate(180deg); color: var(--azul); }