/* ====================================================================
   DevibsDoctor · Sistema de diseño
   Sin dependencias externas: funciona sin internet.
   ==================================================================== */

/* -- 1. Tokens ------------------------------------------------------ */

:root {
  /* Marca · rojo médico (del logotipo) */
  --marca-50:  #FFF5F5;
  --marca-100: #FFE6E6;
  --marca-200: #FFC9CB;
  --marca-300: #FFA3A6;
  --marca-400: #FF6B70;
  --marca-500: #EE3B41;
  --marca-600: #D01F26;
  --marca-700: #B0141B;
  --marca-800: #8A0F15;
  --marca-900: #520A0E;

  /* Superficies (tema claro) · grises con una pizca de cian */
  --fondo:        #F9F7F7;
  --fondo-alt:    #F2EDED;
  --superficie:   #FFFFFF;
  --superficie-2: #FAF5F5;
  --superficie-3: #EFE6E6;
  --borde:        #E8DDDD;
  --borde-fuerte: #D2BEBE;

  /* Texto */
  --texto:        #1C1416;
  --texto-suave:  #55464A;
  --texto-tenue:  #82706F;
  --texto-invertido: #FFFFFF;

  /* Semánticos · el aviso usa naranja, distinto del ámbar de marca */
  --exito:   #15803D;
  --exito-bg:#E7F7EC;
  --alerta:  #C2410C;
  --alerta-bg:#FFEDD5;
  --peligro: #9D174D;
  --peligro-bg:#FCE7F0;
  --info:    #0369A1;
  --info-bg: #E4F2FB;

  /* Color del texto y los iconos que van ENCIMA de un color de acento
     (primario, éxito, alerta, peligro). En claro los acentos son oscuros y
     el texto va blanco; en oscuro se invierte. Un solo token lo resuelve. */
  --sobre-acento:  #FFFFFF;

  --primario:      var(--marca-700);
  --primario-hover:var(--marca-800);
  --primario-suave:var(--marca-50);
  --primario-texto:var(--sobre-acento);
  --anillo:        rgba(176, 20, 27, .24);

  /* Acento clínico: los datos médicos (signos, estudios, dosis) van en
     azul acero para que el rojo quede reservado a la marca y a lo urgente. */
  --clinico:      #1D4E89;
  --clinico-suave:#E8EFF7;

  /* Colores de acento para categorías y roles */
  --c-slate:  #64748B;
  --c-blue:   #2563EB;
  --c-green:  #16A34A;
  --c-amber:  #D97706;
  --c-red:    #DC2626;
  --c-violet: #7C3AED;
  --c-cyan:   #0891B2;
  --c-pink:   #DB2777;

  /* Formas */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Sombras */
  --sombra-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-sm: 0 1px 3px rgba(16, 24, 40, .09), 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-md: 0 4px 10px -2px rgba(16, 24, 40, .09), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --sombra-lg: 0 12px 26px -6px rgba(16, 24, 40, .14), 0 6px 12px -6px rgba(16, 24, 40, .08);
  --sombra-xl: 0 24px 48px -12px rgba(16, 24, 40, .22);

  /* Tipografía */
  --fuente: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", Inter, system-ui, sans-serif;
  --fuente-mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* Medidas */
  --sidebar-ancho: 254px;
  --sidebar-mini: 68px;
  --topbar-alto: 60px;
  --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-tema="oscuro"] {
  --fondo:        #120C0D;
  --fondo-alt:    #150E0F;
  --superficie:   #1B1214;
  --superficie-2: #201517;
  --superficie-3: #2B1B1E;
  --borde:        #2E1E21;
  --borde-fuerte: #452A2E;

  --texto:        #EDE2E3;
  --texto-suave:  #BCA6A9;
  --texto-tenue:  #8B7376;

  --exito:   #4ADE80;
  --exito-bg:#0D2A18;
  --alerta:  #FB923C;
  --alerta-bg:#2C1D0D;
  --peligro: #F472A0;
  --peligro-bg:#2E1122;
  --info:    #4CB8F5;
  --info-bg: #0E2231;

  /* En oscuro los acentos van brillantes, así que encima de ellos el texto
     debe ser oscuro. Así el mismo ámbar sirve de fondo de botón y de color
     de texto sobre el fondo de la app. */
  --sobre-acento:  #1A0507;

  --primario:      var(--marca-400);
  --primario-hover:var(--marca-300);
  --primario-suave:#3A1114;
  --primario-texto:var(--sobre-acento);
  --anillo:        rgba(255, 107, 112, .34);

  --clinico:      #7CB2E8;
  --clinico-suave:#12243A;

  --c-slate:  #94A3B8;
  --c-blue:   #60A5FA;
  --c-green:  #4ADE80;
  --c-amber:  #FBBF24;
  --c-red:    #F87171;
  --c-violet: #A78BFA;
  --c-cyan:   #22D3EE;
  --c-pink:   #F472B6;

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, .5);
  --sombra-lg: 0 14px 30px rgba(0, 0, 0, .6);
  --sombra-xl: 0 26px 54px rgba(0, 0, 0, .7);
}

/* -- 2. Base -------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulo);
  margin: 0;
  font-weight: 650;
  letter-spacing: -.011em;
  color: var(--texto);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }

p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--borde); margin: 18px 0; }

::selection { background: var(--marca-200); color: var(--marca-900); }
[data-tema="oscuro"] ::selection { background: var(--marca-700); color: #fff; }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: content-box; }

.ico { flex: none; vertical-align: -.15em; }

.mono { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Utilidades mínimas */
.oculto { display: none !important; }
[hidden] { display: none !important; }
.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;
}
.txt-der { text-align: right; }
.txt-cen { text-align: center; }
.txt-suave { color: var(--texto-suave); }
.txt-tenue { color: var(--texto-tenue); }
.txt-exito { color: var(--exito); }
.txt-peligro { color: var(--peligro); }
.txt-alerta { color: var(--alerta); }
.txt-primario { color: var(--primario); }
.txt-xs { font-size: .74rem; }
.txt-sm { font-size: .82rem; }
.txt-lg { font-size: 1.06rem; }
.negrita { font-weight: 650; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fila-fin { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.columna { display: flex; flex-direction: column; gap: 10px; }
.crece { flex: 1 1 auto; min-width: 0; }
.envolver { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.ancho-total { width: 100%; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- 3. Estructura -------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--sidebar-ancho);
  flex: none;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  transition: width var(--transicion);
}
.app.compacta .barra-lateral { width: var(--sidebar-mini); }

.marca {
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px; height: var(--topbar-alto);
  border-bottom: 1px solid var(--borde);
  flex: none;
}
.marca:hover { text-decoration: none; }
.marca-logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--marca-600), var(--marca-900));
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.03em;
  box-shadow: 0 2px 8px rgba(2, 114, 121, .38);
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto b { font-size: .95rem; color: var(--texto); letter-spacing: -.015em; }
.marca-texto span { font-size: .66rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .09em; }
.app.compacta .marca-texto { display: none; }
.app.compacta .marca { justify-content: center; padding: 0; }

.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 20px; }

.nav-titulo {
  font-size: .655rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-tenue); font-weight: 700;
  padding: 16px 10px 7px;
}
.app.compacta .nav-titulo {
  text-align: center; padding: 14px 0 6px; font-size: 0;
}
.app.compacta .nav-titulo::after {
  content: ""; display: block; height: 1px; background: var(--borde); margin: 0 14px;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--texto-suave); font-size: .875rem; font-weight: 500;
  position: relative; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.nav-item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav-item .ico { color: var(--texto-tenue); transition: color var(--transicion); }
.nav-item:hover .ico { color: var(--texto-suave); }

.nav-item.activo {
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 620;
}
.nav-item.activo .ico { color: var(--primario); }
.nav-item.activo::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--primario);
}

.nav-item .contador {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  background: var(--peligro); color: var(--sobre-acento);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); display: grid; place-items: center;
}

.app.compacta .nav-item { justify-content: center; padding: 10px; }
.app.compacta .nav-item span:not(.contador) { display: none; }
.app.compacta .nav-item .contador {
  position: absolute; top: 3px; right: 3px; margin: 0;
  min-width: 15px; height: 15px; font-size: .6rem;
}
.app.compacta .nav-item::after {
  content: attr(data-titulo);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--texto); color: var(--fondo);
  padding: 5px 10px; border-radius: var(--r-xs); font-size: .78rem; font-weight: 500;
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--transicion);
  box-shadow: var(--sombra-md);
}
.app.compacta .nav-item:hover::after { opacity: 1; }

.nav-pie { padding: 12px 10px; border-top: 1px solid var(--borde); flex: none; }

/* Contenido */
.contenedor-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-alto); flex: none;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 1.1rem; font-weight: 640; }
.topbar .miga { font-size: .74rem; color: var(--texto-tenue); margin-bottom: -2px; }
.topbar .miga a { color: var(--texto-tenue); }
.topbar .miga a:hover { color: var(--primario); }

.contenido { padding: 22px; flex: 1; max-width: 1600px; width: 100%; }
.contenido.ancho { max-width: none; }

/* -- 4. Botones ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: .855rem; font-weight: 570; line-height: 1.25;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), box-shadow var(--transicion), transform 90ms;
  text-decoration: none;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anillo); }
.btn[disabled], .btn.deshabilitado { opacity: .5; pointer-events: none; }

.btn-primario {
  background: var(--primario); border-color: var(--primario); color: var(--primario-texto);
  box-shadow: var(--sombra-xs);
}
.btn-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--sobre-acento); }

.btn-exito   { background: var(--exito);   border-color: var(--exito);   color: var(--sobre-acento); }
.btn-exito:hover { filter: brightness(.93); color: var(--sobre-acento); }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: var(--sobre-acento); }
.btn-peligro:hover { filter: brightness(.93); color: var(--sobre-acento); }
.btn-alerta  { background: var(--alerta);  border-color: var(--alerta);  color: var(--sobre-acento); }
.btn-alerta:hover { filter: brightness(.93); color: var(--sobre-acento); }

.btn-suave { background: var(--superficie-2); border-color: transparent; color: var(--texto-suave); }
.btn-suave:hover { background: var(--superficie-3); color: var(--texto); }

.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }

.btn-contorno-peligro { background: transparent; border-color: var(--peligro); color: var(--peligro); }
.btn-contorno-peligro:hover { background: var(--peligro); color: var(--sobre-acento); }

.btn-sm { padding: 5px 10px; font-size: .78rem; gap: 5px; border-radius: var(--r-xs); }
.btn-lg { padding: 11px 20px; font-size: .95rem; border-radius: var(--r-md); }
.btn-xl { padding: 15px 26px; font-size: 1.02rem; border-radius: var(--r-md); font-weight: 640; }

.btn-icono { padding: 7px; width: 34px; height: 34px; }
.btn-icono.btn-sm { padding: 5px; width: 28px; height: 28px; }
.btn-bloque { width: 100%; }

/* -- Recuadro de firma ------------------------------------------------
   Se usa sobre todo con el dedo en una tablet, así que va alto y con
   `touch-action:none` para que al firmar no se arrastre la página. */

.lienzo-firma {
  position: relative;
  height: 190px;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  overflow: hidden;
  transition: border-color var(--transicion), background var(--transicion);
}
.lienzo-firma.firmado {
  border-style: solid;
  border-color: var(--exito);
  background: var(--superficie);
}
.lienzo-firma canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.lienzo-firma-pista {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--texto-tenue); font-size: .88rem;
  pointer-events: none;
}

/* WhatsApp con su verde de siempre: es un servicio de fuera y se reconoce
   por el color, así que aquí no se le impone la paleta de la marca. */
.btn-whatsapp {
  background: color-mix(in srgb, #25D366 14%, var(--superficie));
  border-color: color-mix(in srgb, #25D366 42%, transparent);
  color: #128C4A;
}
.btn-whatsapp:hover {
  background: color-mix(in srgb, #25D366 26%, var(--superficie));
  color: #0B6B37;
}
[data-tema="oscuro"] .btn-whatsapp { color: #4AE383; }
[data-tema="oscuro"] .btn-whatsapp:hover { color: #6BED9C; }

/* Botones de icono con acento suave: cada acción de fila (ver/editar/
   eliminar/reactivar) se distingue por color sin pesar como un botón
   sólido — mismo patrón color-mix que ya usan las insignias de especie. */
.btn-icono-ver, .btn-icono-editar, .btn-icono-peligro, .btn-icono-exito {
  border-radius: 10px; border-width: 1px;
}
.btn-icono-ver     { background: color-mix(in srgb, var(--c-blue) 12%, var(--superficie));   border-color: color-mix(in srgb, var(--c-blue) 30%, transparent);   color: var(--c-blue); }
.btn-icono-ver:hover     { background: color-mix(in srgb, var(--c-blue) 24%, var(--superficie));   color: var(--c-blue); }
.btn-icono-editar  { background: color-mix(in srgb, var(--c-amber) 12%, var(--superficie));  border-color: color-mix(in srgb, var(--c-amber) 30%, transparent);  color: var(--c-amber); }
.btn-icono-editar:hover  { background: color-mix(in srgb, var(--c-amber) 24%, var(--superficie));  color: var(--c-amber); }
.btn-icono-peligro { background: color-mix(in srgb, var(--peligro) 12%, var(--superficie)); border-color: color-mix(in srgb, var(--peligro) 30%, transparent); color: var(--peligro); }
.btn-icono-peligro:hover { background: color-mix(in srgb, var(--peligro) 24%, var(--superficie)); color: var(--peligro); }
.btn-icono-exito   { background: color-mix(in srgb, var(--exito) 12%, var(--superficie));   border-color: color-mix(in srgb, var(--exito) 30%, transparent);   color: var(--exito); }
.btn-icono-exito:hover   { background: color-mix(in srgb, var(--exito) 24%, var(--superficie));   color: var(--exito); }

.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.grupo-btn .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grupo-btn .btn.activo { background: var(--primario); border-color: var(--primario); color: var(--sobre-acento); z-index: 1; }

/* -- 5. Tarjetas ---------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-xs);
}
.tarjeta + .tarjeta { margin-top: 16px; }

.tarjeta-cab {
  padding: 14px 18px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.tarjeta-cab h3 { font-size: .95rem; font-weight: 640; }
.tarjeta-cab .sub { font-size: .78rem; color: var(--texto-tenue); margin-top: 1px; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-cuerpo.sin-relleno { padding: 0; }
.tarjeta-pie {
  padding: 13px 18px; border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}

/* Rejilla */
.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rejilla-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* -- 6. Indicadores (KPI) ------------------------------------------- */

.kpi {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 16px 17px; position: relative; overflow: hidden;
  box-shadow: var(--sombra-xs);
}
.kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--acento, var(--primario)); opacity: .9;
}
.kpi-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.kpi-etiqueta {
  font-size: .715rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); font-weight: 660;
}
.kpi-icono {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: color-mix(in srgb, var(--acento, var(--primario)) 13%, transparent);
  color: var(--acento, var(--primario));
}
.kpi-valor {
  font-family: var(--fuente-mono); font-size: 1.62rem; font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.kpi-pie { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: .76rem; color: var(--texto-tenue); }
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 660; }
.kpi-delta.sube { color: var(--exito); }
.kpi-delta.baja { color: var(--peligro); }

/* Tarjeta KPI usada como filtro clicable (ver mascotas/index.php) */
a.kpi-filtro {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
a.kpi-filtro:hover { border-color: var(--acento, var(--primario)); text-decoration: none; transform: translateY(-2px); }
a.kpi-filtro.activo {
  border-color: var(--acento, var(--primario));
  background: color-mix(in srgb, var(--acento, var(--primario)) 8%, var(--superficie));
  box-shadow: 0 0 0 1px var(--acento, var(--primario)) inset, var(--sombra-xs);
}
a.kpi-filtro.activo .kpi-icono { background: var(--acento, var(--primario)); color: var(--sobre-acento); }

/* -- 7. Formularios ------------------------------------------------- */

.campo { margin-bottom: 15px; }
.campo:last-child { margin-bottom: 0; }

.campo > label, .etiqueta {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 5px;
}
.etiqueta .req { color: var(--peligro); margin-left: 2px; }

.entrada, .selector, textarea.entrada {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: .875rem; line-height: 1.5;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
  appearance: none;
}
.entrada::placeholder { color: var(--texto-tenue); }
.entrada:hover, .selector:hover { border-color: var(--texto-tenue); }
.entrada:focus, .selector:focus, textarea.entrada:focus {
  outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--anillo);
}
.entrada[readonly] { background: var(--superficie-2); color: var(--texto-suave); }
.entrada[disabled], .selector[disabled] { background: var(--superficie-3); color: var(--texto-tenue); cursor: not-allowed; }
.entrada.error, .selector.error { border-color: var(--peligro); }
.entrada.error:focus { box-shadow: 0 0 0 3px rgba(218, 54, 51, .2); }

textarea.entrada { resize: vertical; min-height: 78px; }

.selector {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2379809A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.entrada-num { font-family: var(--fuente-mono); text-align: right; font-variant-numeric: tabular-nums; }

.ayuda { font-size: .755rem; color: var(--texto-tenue); margin-top: 5px; }
.msg-error { font-size: .755rem; color: var(--peligro); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

/* Grupo con prefijo/sufijo */
.grupo-campo { display: flex; align-items: stretch; }
.grupo-campo .afijo {
  display: grid; place-items: center; padding: 0 11px;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  color: var(--texto-tenue); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.grupo-campo .afijo:first-child { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.grupo-campo .afijo:last-child { border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grupo-campo .entrada:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.grupo-campo .entrada:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.grupo-campo .entrada { flex: 1; min-width: 0; }

/* Buscador */
.buscador { position: relative; }
.buscador .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--texto-tenue); pointer-events: none;
}
.buscador .entrada { padding-left: 35px; }

/* Casillas e interruptores */
.casilla { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; user-select: none; }
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  appearance: none; width: 17px; height: 17px; flex: none; margin: 1px 0 0;
  border: 1.5px solid var(--borde-fuerte); border-radius: 5px;
  background: var(--superficie); cursor: pointer; position: relative;
  transition: background var(--transicion), border-color var(--transicion);
}
.casilla input[type="radio"] { border-radius: 50%; }
.casilla input:checked { background: var(--primario); border-color: var(--primario); }
.casilla input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid var(--sobre-acento); border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.casilla input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--sobre-acento);
}
.casilla input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anillo); }
.casilla-texto { font-size: .85rem; color: var(--texto); line-height: 1.4; }
.casilla-texto small { display: block; color: var(--texto-tenue); font-size: .755rem; }

.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.interruptor input { appearance: none; position: absolute; opacity: 0; }
.interruptor .pista {
  width: 38px; height: 21px; border-radius: var(--r-full); flex: none;
  background: var(--borde-fuerte); position: relative; transition: background var(--transicion);
}
.interruptor .pista::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--sombra-sm);
  transition: transform var(--transicion);
}
.interruptor input:checked + .pista { background: var(--primario); }
.interruptor input:checked + .pista::after { transform: translateX(17px); }
.interruptor input:focus-visible + .pista { box-shadow: 0 0 0 3px var(--anillo); }

/* Rejilla de formulario */
.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.col-completa { grid-column: 1 / -1; }

/* -- 8. Tablas ------------------------------------------------------ */

.tabla-envoltura { overflow-x: auto; border-radius: var(--r-md); }

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.tabla thead th {
  text-align: left; padding: 14px 18px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); background: var(--superficie-2);
  border-bottom: 1px solid var(--borde); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.tabla tbody td { padding: 16px 18px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tfoot td {
  padding: 14px 18px; border-top: 2px solid var(--borde);
  font-weight: 680; background: var(--superficie-2);
}
.tabla .num, .tabla .txt-der { text-align: right; font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones .btn { margin-left: 4px; }
.tabla-compacta tbody td { padding: 7px 12px; }
.tabla-fija { table-layout: fixed; }

.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--texto-suave); }
.tabla th .flecha-orden { opacity: .45; margin-left: 3px; }
.tabla th.orden-asc .flecha-orden, .tabla th.orden-desc .flecha-orden { opacity: 1; color: var(--primario); }

/* Celda con foto/avatar */
.celda-producto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.miniatura {
  width: 36px; height: 36px; border-radius: var(--r-xs); object-fit: cover; flex: none;
  background: var(--superficie-3); border: 1px solid var(--borde);
}
.miniatura-vacia {
  width: 36px; height: 36px; border-radius: var(--r-xs); flex: none;
  background: var(--superficie-3); border: 1px solid var(--borde);
  display: grid; place-items: center; color: var(--texto-tenue);
}

/* -- 9. Insignias --------------------------------------------------- */

.insignia {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2.5px 8px; border-radius: var(--r-full);
  font-size: .715rem; font-weight: 640; line-height: 1.5; white-space: nowrap;
  background: var(--superficie-3); color: var(--texto-suave);
  border: 1px solid transparent;
}
.insignia .ico { width: 12px; height: 12px; }
.insignia-exito   { background: var(--exito-bg);   color: var(--exito); }
.insignia-peligro { background: var(--peligro-bg); color: var(--peligro); }
.insignia-alerta  { background: var(--alerta-bg);  color: var(--alerta); }
.insignia-info    { background: var(--info-bg);    color: var(--info); }
.insignia-primario{ background: var(--primario-suave); color: var(--primario); }
.insignia-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.insignia-slate  { background: color-mix(in srgb, var(--c-slate) 15%, transparent);  color: var(--c-slate); }
.insignia-blue   { background: color-mix(in srgb, var(--c-blue) 15%, transparent);   color: var(--c-blue); }
.insignia-green  { background: color-mix(in srgb, var(--c-green) 15%, transparent);  color: var(--c-green); }
.insignia-amber  { background: color-mix(in srgb, var(--c-amber) 16%, transparent);  color: var(--c-amber); }
.insignia-red    { background: color-mix(in srgb, var(--c-red) 15%, transparent);    color: var(--c-red); }
.insignia-violet { background: color-mix(in srgb, var(--c-violet) 15%, transparent); color: var(--c-violet); }
.insignia-cyan   { background: color-mix(in srgb, var(--c-cyan) 15%, transparent);   color: var(--c-cyan); }
.insignia-pink   { background: color-mix(in srgb, var(--c-pink) 15%, transparent);   color: var(--c-pink); }

/* -- 10. Avatares --------------------------------------------------- */

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--marca-600), var(--marca-900));
  color: #fff; font-weight: 680; font-size: .78rem; letter-spacing: -.01em;
  object-fit: cover; overflow: hidden;
}
.avatar-sm { width: 26px; height: 26px; font-size: .68rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }

/* Subida de foto con previsualización en vivo (ficha del paciente) */
.foto-paciente-drop {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 136px; height: 136px; margin: 0 auto; overflow: hidden; cursor: pointer;
  border-radius: var(--r-lg); background: var(--superficie-2);
  border: 2px dashed var(--borde-fuerte);
  transition: border-color var(--transicion), background var(--transicion);
}
.foto-paciente-drop:hover, .foto-paciente-drop:focus-within { border-color: var(--primario); background: var(--superficie-3); }
.foto-paciente-drop.tiene-foto { border-style: solid; border-color: var(--borde); }
.foto-paciente-drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-paciente-vacia { color: var(--texto-tenue); display: flex; }
.foto-paciente-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px; text-align: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; font-weight: 600;
  opacity: 0; transition: opacity var(--transicion);
}
.foto-paciente-drop:hover .foto-paciente-overlay,
.foto-paciente-drop:focus-within .foto-paciente-overlay { opacity: 1; }
.foto-paciente-drop.tiene-foto .foto-paciente-overlay { background: rgba(0, 0, 0, .4); }
.foto-paciente-input {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}

/* -- 11. Menús desplegables ----------------------------------------- */

.desplegable { position: relative; }
.desplegable-menu {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 208px; z-index: 50;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: var(--sombra-lg);
  padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.desplegable.abierto .desplegable-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.desplegable-menu.izq { right: auto; left: 0; }
.desplegable-menu.flotando { opacity: 1; visibility: visible; transform: none; }

.desplegable-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-xs);
  color: var(--texto-suave); font-size: .845rem; width: 100%;
  background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.desplegable-item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.desplegable-item .ico { color: var(--texto-tenue); }
.desplegable-item.peligro { color: var(--peligro); }
.desplegable-item.peligro:hover { background: var(--peligro-bg); }
.desplegable-item.peligro .ico { color: var(--peligro); }
.desplegable-sep { height: 1px; background: var(--borde); margin: 5px 0; }
.desplegable-titulo {
  padding: 8px 10px 5px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-tenue); font-weight: 700;
}

/* -- 12. Modales ---------------------------------------------------- */

.modal-fondo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 12, 3, .58); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; visibility: hidden; transition: opacity 180ms, visibility 180ms;
}
.modal-fondo.abierto { opacity: 1; visibility: visible; }

.modal {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); box-shadow: var(--sombra-xl);
  width: 100%; max-width: 520px; max-height: calc(100vh - 44px);
  display: flex; flex-direction: column;
  /* Entra desde abajo con un rebote corto; sale recto y rápido, porque
     una salida con rebote se siente lenta cuando ya decidiste cerrar. */
  transform: scale(.94) translateY(16px); opacity: 0;
  transition: transform 220ms cubic-bezier(.2, 1.25, .5, 1), opacity 160ms ease-out;
}
.modal-fondo.abierto .modal { transform: scale(1) translateY(0); opacity: 1; }

.modal-fondo.cerrando { opacity: 0; }
.modal-fondo.cerrando .modal {
  transform: scale(.97) translateY(8px); opacity: 0;
  transition: transform 150ms ease-in, opacity 130ms ease-in;
}

/* El velo se desenfoca al aparecer: separa el modal del fondo sin
   oscurecerlo tanto que se pierda el contexto de dónde estás. */
.modal-fondo {
  transition: opacity 190ms, visibility 190ms, backdrop-filter 190ms;
}
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1040px; }

.modal-cab {
  padding: 17px 20px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex: none;
}
.modal-cab h3 { font-size: 1rem; }
.modal-cab .sub { font-size: .8rem; color: var(--texto-tenue); margin-top: 2px; }
.modal-cuerpo { padding: 20px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.modal-pie {
  padding: 14px 20px; border-top: 1px solid var(--borde);
  display: flex; justify-content: flex-end; gap: 10px; flex: none;
  background: var(--superficie-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* -- 13. Avisos ----------------------------------------------------- */

.aviso {
  display: flex; gap: 11px; padding: 12px 14px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .855rem; line-height: 1.5;
}
.aviso .ico { margin-top: 1px; flex: none; }
.aviso b { display: block; margin-bottom: 1px; font-weight: 640; }
.aviso-info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.aviso-exito   { background: var(--exito-bg);   color: var(--exito);   border-color: color-mix(in srgb, var(--exito) 25%, transparent); }
.aviso-alerta  { background: var(--alerta-bg);  color: var(--alerta);  border-color: color-mix(in srgb, var(--alerta) 30%, transparent); }
.aviso-peligro { background: var(--peligro-bg); color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 25%, transparent); }

/* Notificaciones flotantes */
#notificaciones {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none;
}
.notificacion {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--primario);
  border-radius: var(--r-sm); box-shadow: var(--sombra-lg);
  padding: 12px 14px; pointer-events: auto; min-width: 290px;
  animation: entra-notif 260ms cubic-bezier(.34, 1.3, .64, 1);
}
.notificacion.saliendo { animation: sale-notif 200ms forwards; }
.notificacion b { display: block; font-size: .85rem; font-weight: 640; margin-bottom: 1px; }
.notificacion p { font-size: .8rem; color: var(--texto-suave); margin: 0; }
.notificacion .cerrar {
  background: none; border: 0; color: var(--texto-tenue); cursor: pointer; padding: 2px; margin: -2px -4px 0 0;
}
.notificacion.exito   { border-left-color: var(--exito); }
.notificacion.exito .ico-tipo { color: var(--exito); }
.notificacion.error   { border-left-color: var(--peligro); }
.notificacion.error .ico-tipo { color: var(--peligro); }
.notificacion.aviso   { border-left-color: var(--alerta); }
.notificacion.aviso .ico-tipo { color: var(--alerta); }
.notificacion.info .ico-tipo { color: var(--info); }

@keyframes entra-notif { from { opacity: 0; transform: translateX(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sale-notif  { to { opacity: 0; transform: translateX(28px) scale(.97); } }

/* -- 14. Estados vacíos --------------------------------------------- */

.vacio { text-align: center; padding: 52px 24px; }
.vacio .ilustracion {
  width: 60px; height: 60px; border-radius: var(--r-lg); margin: 0 auto 15px;
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-tenue); border: 1px solid var(--borde);
}
.vacio h3 { font-size: .98rem; margin-bottom: 5px; }
.vacio p { color: var(--texto-tenue); font-size: .855rem; max-width: 380px; margin: 0 auto 16px; }

/* -- 15. Pestañas --------------------------------------------------- */

.pestanas {
  display: flex; gap: 2px; border-bottom: 1px solid var(--borde);
  margin-bottom: 18px; overflow-x: auto;
}
.pestana {
  padding: 9px 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .865rem; font-weight: 570; color: var(--texto-tenue);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--transicion), border-color var(--transicion);
}
.pestana:hover { color: var(--texto); text-decoration: none; }
.pestana.activo { color: var(--primario); border-bottom-color: var(--primario); font-weight: 630; }
.panel-pestana { display: none; }
.panel-pestana.activo { display: block; animation: aparece 200ms ease; }

@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* -- 15b. Animaciones de entrada ------------------------------------- */
/* Escalonado automático: aplica a cualquier tarjeta KPI, fila de tabla,
   fila de lista o tarjeta de rejilla en toda la app, sin tocar cada vista. */

@keyframes entra-arriba { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Bajo `body.animar`, que pone app.js cuando la página es visible: con
   `backwards` el primer fotograma es opacity 0, y una animación que no
   llega a correr dejaría la tabla en blanco. Sin la clase, todo se ve
   igual pero quieto. */
body.animar .kpi,
body.animar .tabla tbody tr,
body.animar .lista-datos .fila-dato,
body.animar .rejilla-auto > .tarjeta {
  animation: entra-arriba 420ms cubic-bezier(.22, 1, .36, 1) backwards;
}

body.animar .kpi:nth-child(1),
body.animar .tabla tbody tr:nth-child(1),
body.animar .lista-datos .fila-dato:nth-child(1),
body.animar .rejilla-auto > .tarjeta:nth-child(1) { animation-delay: 0ms; }
body.animar .kpi:nth-child(2),
body.animar .tabla tbody tr:nth-child(2),
body.animar .lista-datos .fila-dato:nth-child(2),
body.animar .rejilla-auto > .tarjeta:nth-child(2) { animation-delay: 30ms; }
body.animar .kpi:nth-child(3),
body.animar .tabla tbody tr:nth-child(3),
body.animar .lista-datos .fila-dato:nth-child(3),
body.animar .rejilla-auto > .tarjeta:nth-child(3) { animation-delay: 60ms; }
body.animar .kpi:nth-child(4),
body.animar .tabla tbody tr:nth-child(4),
body.animar .lista-datos .fila-dato:nth-child(4),
body.animar .rejilla-auto > .tarjeta:nth-child(4) { animation-delay: 90ms; }
body.animar .kpi:nth-child(5),
body.animar .tabla tbody tr:nth-child(5),
body.animar .lista-datos .fila-dato:nth-child(5),
body.animar .rejilla-auto > .tarjeta:nth-child(5) { animation-delay: 120ms; }
body.animar .kpi:nth-child(6),
body.animar .tabla tbody tr:nth-child(6),
body.animar .lista-datos .fila-dato:nth-child(6),
body.animar .rejilla-auto > .tarjeta:nth-child(6) { animation-delay: 150ms; }
body.animar .kpi:nth-child(7),
body.animar .tabla tbody tr:nth-child(7),
body.animar .lista-datos .fila-dato:nth-child(7),
body.animar .rejilla-auto > .tarjeta:nth-child(7) { animation-delay: 180ms; }
body.animar .kpi:nth-child(8),
body.animar .tabla tbody tr:nth-child(8),
body.animar .lista-datos .fila-dato:nth-child(8),
body.animar .rejilla-auto > .tarjeta:nth-child(8) { animation-delay: 210ms; }
.kpi:nth-child(n+9), .tabla tbody tr:nth-child(n+9), .lista-datos .fila-dato:nth-child(n+9), .rejilla-auto > .tarjeta:nth-child(n+9) { animation-delay: 240ms; }

.kpi { transition: transform var(--transicion), box-shadow var(--transicion); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.tabla tbody tr { transition: background var(--transicion); }

/* Píldoras de filtro */
.pildoras { display: flex; gap: 7px; flex-wrap: wrap; }
.pildora {
  padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto-suave);
  font-size: .795rem; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: all var(--transicion); font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.pildora:hover { border-color: var(--primario); color: var(--primario); text-decoration: none; }
.pildora.activo { background: var(--primario); border-color: var(--primario); color: var(--sobre-acento); }

/* -- 16. Paginación ------------------------------------------------- */

.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px; border-top: 1px solid var(--borde); flex-wrap: wrap;
}
.paginacion .resumen { font-size: .795rem; color: var(--texto-tenue); }
.paginacion .paginas { display: flex; gap: 4px; }
.paginacion .pagina {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-xs);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave);
  font-size: .82rem; font-weight: 570; display: grid; place-items: center;
  font-family: var(--fuente-mono);
}
.paginacion .pagina:hover { border-color: var(--primario); color: var(--primario); text-decoration: none; }
.paginacion .pagina.activo { background: var(--primario); border-color: var(--primario); color: var(--sobre-acento); }
.paginacion .pagina.deshabilitado { opacity: .4; pointer-events: none; }

/* -- 17. Barras de progreso ----------------------------------------- */

.progreso { height: 6px; border-radius: var(--r-full); background: var(--superficie-3); overflow: hidden; }
.progreso .barra { height: 100%; border-radius: var(--r-full); background: var(--primario); transition: width 400ms ease; }
.progreso .barra.exito { background: var(--exito); }
.progreso .barra.alerta { background: var(--alerta); }
.progreso .barra.peligro { background: var(--peligro); }

/* -- 18. Gráficas (SVG propias) ------------------------------------- */

.grafica { width: 100%; overflow: visible; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.grafica .cuadricula { stroke: var(--borde); stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; }
.grafica .etiqueta-eje { fill: var(--texto-tenue); font-size: 10.5px; font-family: var(--fuente-mono); }
.grafica .barra-dato { fill: var(--primario); transition: opacity var(--transicion); }
.grafica .barra-dato:hover { opacity: .78; }
.grafica .linea-dato { fill: none; stroke: var(--primario); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.grafica .area-dato { fill: url(#degradado-area); }
.grafica .punto-dato { fill: var(--superficie); stroke: var(--primario); stroke-width: 2.2; }

.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* -- 19. Listas de datos -------------------------------------------- */

.lista-datos { display: flex; flex-direction: column; }
.lista-datos .fila-dato {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--borde);
  transition: background var(--transicion);
}
.lista-datos .fila-dato:last-child { border-bottom: 0; }
.lista-datos .fila-dato:hover { background: var(--superficie-2); }
.lista-datos .rango {
  width: 24px; height: 24px; border-radius: var(--r-xs); flex: none;
  background: var(--superficie-3); color: var(--texto-tenue);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; font-family: var(--fuente-mono);
}
.lista-datos .fila-dato:nth-child(1) .rango { background: color-mix(in srgb, var(--c-amber) 20%, transparent); color: var(--c-amber); }
.lista-datos .fila-dato:nth-child(2) .rango { background: color-mix(in srgb, var(--c-slate) 20%, transparent); color: var(--c-slate); }
.lista-datos .fila-dato:nth-child(3) .rango { background: color-mix(in srgb, var(--c-red) 16%, transparent); color: var(--c-red); }

/* Pares clave/valor */
.pares { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; font-size: .855rem; align-items: baseline; }
.pares dt { color: var(--texto-tenue); font-weight: 500; }
.pares dd { margin: 0; font-weight: 570; text-align: right; }

/* -- 19b. Calendario de citas ----------------------------------------- */

.calendario-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario-cab b { font-size: .88rem; text-transform: capitalize; }
.calendario-semana {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-tenue); margin-bottom: 6px;
}
.calendario-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario-dia {
  /* Reset de <button>: la celda ya no es un <div>, para que teclado y
     lector de pantalla la puedan encontrar. */
  appearance: none; -webkit-appearance: none; font-family: inherit; margin: 0; padding: 0;
  aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: .8rem; background: var(--superficie-2); cursor: pointer; color: var(--texto);
  transition: border-color var(--transicion), background var(--transicion);
}
.calendario-dia:hover:not(.calendario-dia-deshabilitado):not(.calendario-dia-vacio) { border-color: var(--primario); }
.calendario-dia-vacio { background: none; cursor: default; }
.calendario-dia-deshabilitado { color: var(--texto-tenue); opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.calendario-dia-hoy:not(.calendario-dia-activo) { box-shadow: inset 0 0 0 2px var(--primario); }
.calendario-dia-activo { background: var(--primario); color: var(--primario-texto); font-weight: 700; }
.calendario-dia .punto-ocupado {
  position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-amber);
}
.calendario-dia-activo .punto-ocupado { background: var(--primario-texto); }

.horas-disponibles { display: flex; flex-wrap: wrap; gap: 7px; }
.hora-chip {
  padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--borde);
  background: var(--superficie); font-size: .8rem; font-family: var(--fuente-mono);
  cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.hora-chip:hover { border-color: var(--primario); }
.hora-chip.activo { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); font-weight: 700; }

.resultado-paciente {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--borde);
  background: var(--superficie); cursor: pointer; margin-bottom: 6px;
}
.resultado-paciente:hover { border-color: var(--primario); background: var(--superficie-2); }

/* -- 20. Encabezado de página --------------------------------------- */

.cab-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.cab-pagina h1 { font-size: 1.42rem; letter-spacing: -.02em; }
.cab-pagina .descripcion { color: var(--texto-tenue); font-size: .865rem; margin-top: 3px; }
.cab-pagina .acciones { display: flex; gap: 9px; flex-wrap: wrap; }

/* Barra de filtros */
.barra-filtros {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 18px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-md); margin-bottom: 16px;
}
.barra-filtros .campo { margin: 0; min-width: 150px; }
.barra-filtros .campo.crece { flex: 1 1 240px; }

/* -- 20b. Primeros pasos (onboarding) --------------------------------- */

.onboarding-barra {
  height: 6px; border-radius: 999px; background: var(--superficie-3);
  overflow: hidden; margin-bottom: 6px;
}
.onboarding-relleno {
  height: 100%; border-radius: 999px; background: var(--exito);
  transition: width .3s ease;
}
.onboarding-lista { display: flex; flex-direction: column; gap: 2px; }
.onboarding-paso {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px; border-bottom: 1px solid var(--borde);
}
.onboarding-paso:last-child { border-bottom: none; }
.onboarding-marca {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--borde-fuerte); color: transparent;
}
.onboarding-paso.hecho { opacity: .6; }
.onboarding-paso.hecho .onboarding-marca {
  background: var(--exito); border-color: var(--exito); color: var(--sobre-acento);
}
.onboarding-paso.hecho .negrita { text-decoration: line-through; text-decoration-color: var(--texto-tenue); }

/* -- 21. Impresión -------------------------------------------------- */

@media print {
  .barra-lateral, .topbar, .no-imprimir, #notificaciones { display: none !important; }
  body { background: #fff; color: #000; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .tabla thead th { background: #f2f2f2 !important; color: #000; }
  a { color: #000; text-decoration: none; }
}

/* -- 22. Responsivo ------------------------------------------------- */

@media (max-width: 1280px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .barra-lateral {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform var(--transicion);
    box-shadow: var(--sombra-xl); width: var(--sidebar-ancho) !important;
  }
  .app.menu-abierto .barra-lateral { transform: none; }
  .app.compacta .marca-texto, .app.compacta .nav-item span { display: flex; }
  .velo-menu {
    position: fixed; inset: 0; background: rgba(20, 12, 3, .55); z-index: 39;
    opacity: 0; visibility: hidden; transition: opacity var(--transicion), visibility var(--transicion);
  }
  .app.menu-abierto .velo-menu { opacity: 1; visibility: visible; }

  /* El panel lateral (con el aviso de "Prueba gratis" al fondo) queda por
     encima de la barra superior mientras está abierto — sin esto, los
     botones de la derecha (Nueva cita, tema, tu cuenta) se veían tapados
     a medias por el panel, como si algo estuviera roto. Se ocultan del
     todo mientras navegas el menú; reaparecen al cerrarlo. */
  .app.menu-abierto .topbar > *:not(:first-child) { visibility: hidden; }

  .contenido { padding: 16px; }
  .topbar { padding: 0 14px; }
  .rejilla-2, .rejilla-3, .rejilla-4, .rejilla-5 { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla, .form-rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .cab-pagina h1 { font-size: 1.24rem; }
  .kpi-valor { font-size: 1.4rem; }
}

@media (max-width: 560px) {
  .topbar .titulo-pagina { font-size: .95rem; }
  .modal-fondo { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; }
  .paginacion { justify-content: center; }
}

@media (max-width: 480px) {
  #notificaciones {
    top: 12px; left: 12px; right: 12px; max-width: none;
  }
  .notificacion { min-width: 0; }
  .notificacion p { overflow-wrap: anywhere; }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ====================================================================
   Tour guiado
   ==================================================================== */

.tour-velo {
  position: fixed; inset: 0; z-index: 300;
  background: transparent;           /* el oscurecido lo hace .tour-foco */
}
.tour-velo.lleno { background: color-mix(in srgb, var(--texto) 55%, transparent); }

.tour-foco {
  position: fixed; z-index: 301; pointer-events: none;
  border-radius: 12px;
  /* Resalta el objetivo oscureciendo todo lo demás */
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--texto) 55%, transparent),
              0 0 0 3px var(--primario);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease, opacity .2s ease;
}

.tour-carta {
  position: fixed; z-index: 302;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  box-shadow: var(--sombra-xl);
  padding: 18px 20px 16px; max-width: 340px; width: calc(100vw - 24px);
  animation: tourEntra .25s ease both;
}
.tour-carta.centrada {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%); max-width: 400px;
}
@keyframes tourEntra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; } }
.tour-carta.centrada { animation: tourEntraCentro .25s ease both; }
@keyframes tourEntraCentro { from { opacity: 0; } to { opacity: 1; } }

.tour-progreso {
  height: 4px; border-radius: 999px; background: var(--superficie-3);
  overflow: hidden; margin-bottom: 8px;
}
.tour-progreso-relleno {
  height: 100%; border-radius: 999px; background: var(--primario);
  transition: width .3s ease;
}
.tour-cuenta {
  font-size: .7rem; font-weight: 700; color: var(--texto-tenue);
  letter-spacing: .04em;
}
.tour-carta h3 { margin: 4px 0 6px; font-size: 1.02rem; font-weight: 700; }
.tour-carta p  { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: var(--texto-suave); }

.tour-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tour-nav { display: flex; gap: 8px; margin-left: auto; }

.tour-btn {
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); border-radius: var(--r-sm);
  padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 620;
  cursor: pointer;
}
.tour-btn:hover { background: var(--superficie-2); }
.tour-btn.tour-primario {
  background: var(--primario); border-color: var(--primario); color: var(--primario-texto);
}
.tour-btn.tour-primario:hover { background: var(--primario-hover); }
.tour-btn.tour-salir { border: none; background: none; color: var(--texto-tenue); padding-left: 0; }
.tour-btn.tour-salir:hover { color: var(--peligro); background: none; }

body.tour-activo { overflow-x: hidden; }

@media (max-width: 480px) {
  .tour-carta { padding: 15px 16px 13px; }
  .tour-nav .tour-btn { padding: 7px 11px; }
}

/* ====================================================================
   14. Expediente clínico
   ==================================================================== */

/* -- Cabecera del paciente: lo que se ve antes de escribir nada ------ */

.cabecera-clinica {
  position: sticky;
  top: calc(var(--topbar-alto) + 8px);
  z-index: 30;
}

.franja-alergias {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--peligro-bg);
  color: var(--peligro);
  border: 1px solid color-mix(in srgb, var(--peligro) 26%, transparent);
  font-size: .85rem; line-height: 1.45;
}
.franja-alergias .ico { flex: none; margin-top: 1px; }
.franja-alergias b { font-weight: 680; }

/* -- Nota firmada: se lee, no se edita ------------------------------- */

.texto-nota {
  white-space: pre-wrap;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-size: .9rem; line-height: 1.6;
  min-height: 38px;
}

/* -- Signos vitales -------------------------------------------------- */

.rejilla-signos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}
.rejilla-signos .campo { margin: 0; }
.rejilla-signos .etiqueta { font-size: .68rem; letter-spacing: .01em; }

.valor-signo {
  padding: 7px 9px; border-radius: var(--r-xs);
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* Un signo fuera de rango se marca, no se bloquea: llama la atención de
   quien captura y ya. La decisión sigue siendo suya. */
.entrada.signo-red,   .valor-signo.signo-red   { border-color: var(--c-red);   color: var(--c-red);   background: var(--peligro-bg); }
.entrada.signo-amber, .valor-signo.signo-amber { border-color: var(--c-amber); color: var(--c-amber); background: var(--alerta-bg); }
.entrada.signo-blue,  .valor-signo.signo-blue  { border-color: var(--c-blue);  color: var(--c-blue);  background: var(--info-bg); }

.caja-imc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--clinico-suave);
  color: var(--clinico);
  font-size: .84rem;
}
.caja-imc b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* -- Diagnósticos ---------------------------------------------------- */

.renglon-dx {
  padding: 10px 0;
  border-bottom: 1px dashed var(--borde);
}
.renglon-dx:last-child { border-bottom: 0; padding-bottom: 0; }
.renglon-dx:first-child { padding-top: 0; }

.lista-resultados { max-height: 340px; overflow-y: auto; margin-top: 10px; }

.resultado-cie10 {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 9px 10px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--borde);
  color: var(--texto); font: inherit; font-size: .87rem; line-height: 1.4;
}
.resultado-cie10:hover { background: var(--superficie-2); }
.resultado-cie10 .insignia { flex: none; }

/* -- Menú de plantillas ----------------------------------------------- */

.menu-plantillas {
  position: absolute; z-index: 120; width: 300px; max-height: 320px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: var(--sombra-lg); padding: 5px;
}
.menu-plantillas button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: transparent; border: 0; border-radius: var(--r-xs);
  cursor: pointer; color: var(--texto); font: inherit;
}
.menu-plantillas button:hover { background: var(--superficie-2); }
.menu-plantillas b { display: block; font-size: .84rem; font-weight: 640; }
.menu-plantillas span { display: block; font-size: .74rem; color: var(--texto-tenue); }

/* ====================================================================
   15. Dictado por voz
   ==================================================================== */

.boton-dictar.dictando {
  background: var(--peligro);
  border-color: var(--peligro);
  color: var(--sobre-acento);
}
.boton-dictar.dictando .ico { animation: pulso-microfono 1.4s ease-in-out infinite; }
.dictar-no-disponible { opacity: .45; cursor: not-allowed; }

/* El campo que está recibiendo el dictado se marca: con varios campos
   en pantalla, saber a cuál está yendo la voz evita dictar la
   exploración dentro del motivo de consulta. */
.campo-dictando {
  border-color: var(--peligro) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 18%, transparent) !important;
}

.barra-dictado {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 150; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--r-full);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra-lg); font-size: .85rem;
  max-width: calc(100vw - 24px);
}
.barra-dictado b { font-weight: 640; }

.punto-grabando {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--peligro); flex: none;
  animation: pulso-microfono 1.4s ease-in-out infinite;
}

@keyframes pulso-microfono {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .punto-grabando, .boton-dictar.dictando .ico { animation: none; }
}

/* -- Responsivo ------------------------------------------------------- */

@media (max-width: 1100px) {
  .rejilla[style*="320px"] { grid-template-columns: 1fr !important; }
  .cabecera-clinica { position: static; }
}

@media (max-width: 700px) {
  .barra-dictado { bottom: 10px; padding: 8px 12px; font-size: .8rem; }
}

@media print {
  .barra-dictado, .boton-dictar, .boton-plantilla { display: none !important; }
  .cabecera-clinica { position: static; }
}

/* -- Cronología del expediente ---------------------------------------- */

.linea-tiempo { position: relative; padding-left: 4px; }

.evento-tiempo {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed var(--borde);
}
.evento-tiempo:last-child { border-bottom: 0; }

.evento-icono {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto-suave);
}

.columna-lateral { position: sticky; top: calc(var(--topbar-alto) + 12px); }

@media (max-width: 1100px) {
  .columna-lateral { position: static; }
}

/* ====================================================================
   16. Recetador
   ==================================================================== */

.renglon-medicamento {
  padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie-2);
}
.renglon-medicamento:last-child { margin-bottom: 0; }

.numero-medicamento {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primario); color: var(--primario-texto);
  font-size: .76rem; font-weight: 700;
}

/* La alerta de alergia va pegada al campo del fármaco, no arriba de la
   pantalla: tiene que verse mientras se decide qué recetar. */
.alerta-alergia {
  margin-top: 7px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--peligro-bg); color: var(--peligro);
  border: 1px solid color-mix(in srgb, var(--peligro) 30%, transparent);
  font-size: .8rem; line-height: 1.45;
}

.campo-justificacion .entrada {
  border-color: var(--peligro);
}

/* -- Autocompletado --------------------------------------------------- */

.campo { position: relative; }

.autocompletado {
  position: absolute; z-index: 90; top: 100%; left: 0; right: 0;
  max-height: 280px; overflow-y: auto; margin-top: 3px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm); box-shadow: var(--sombra-lg);
}
.autocompletado button {
  display: block; width: 100%; text-align: left; padding: 8px 11px;
  background: transparent; border: 0; border-bottom: 1px solid var(--borde);
  cursor: pointer; color: var(--texto); font: inherit;
}
.autocompletado button:last-child { border-bottom: 0; }
.autocompletado button:hover { background: var(--superficie-2); }
.autocompletado b { display: block; font-size: .86rem; font-weight: 620; }
.autocompletado span { display: block; font-size: .74rem; color: var(--texto-tenue); }
.autocompletado em { font-style: normal; }

/* ====================================================================
   17. Estudios de imagen
   ==================================================================== */

.tarjeta-estudio {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  overflow: hidden; background: var(--superficie);
  transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta-estudio:hover {
  border-color: var(--primario); transform: translateY(-2px); text-decoration: none;
}

.estudio-vista {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: var(--superficie-3); color: var(--texto-tenue); overflow: hidden;
}
.estudio-vista img { width: 100%; height: 100%; object-fit: cover; }

.estudio-datos { padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.estudio-datos b { font-size: .85rem; font-weight: 620; }
.estudio-datos .insignia { align-self: flex-start; }

/* Las placas se ven sobre fondo oscuro incluso en tema claro: es como se
   leen en el negatoscopio, y el contraste de una radiografía sobre blanco
   se pierde. */
.imagen-estudio {
  display: block; width: 100%; max-height: 70vh; object-fit: contain;
  background: #0b0b0d; border-radius: var(--r-sm);
}

.visor-pdf {
  width: 100%; height: 70vh; border: 1px solid var(--borde); border-radius: var(--r-sm);
}

/* ====================================================================
   18. Tablero
   --------------------------------------------------------------------
   Las tarjetas entran escalonadas usando --i como retardo. Todo el
   movimiento está bajo `prefers-reduced-motion` al final del bloque:
   quien pidió menos animación no debe ver ninguna.
   ==================================================================== */

/* Las animaciones de entrada se activan desde JavaScript, añadiendo la
   clase `animar` al <body>.
   La razón es que el estado inicial de estas animaciones es «invisible», y
   una animación que no llega a correr —pestaña abierta en segundo plano,
   JavaScript desactivado, un error en otro script— dejaría el contenido
   escondido para siempre. Con el disparo por clase, si algo falla el
   tablero simplemente aparece sin animación, que es justo lo que debe
   pasar. */
body.animar .entra {
  animation: entra-tarjeta 460ms cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: min(calc(var(--i, 0) * 55ms), 400ms);
}

@keyframes entra-tarjeta {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* -- Cinta de saludo -------------------------------------------------- */

.cinta-saludo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--marca-500) 22%, transparent), transparent 62%),
    linear-gradient(135deg, var(--marca-800), var(--marca-900) 72%);
  color: #fff;
  box-shadow: var(--sombra-md);
  position: relative; overflow: hidden;
}

/* Trama de cruces médicas, muy tenue, para que la cinta no sea un
   rectángulo plano de color. */
.cinta-saludo::after {
  content: ''; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M19 8h6v8h8v6h-8v8h-6v-8h-8v-6h8z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 44px 44px;
}

.cinta-texto { position: relative; z-index: 1; min-width: 0; }
.cinta-texto h2 {
  margin: 0 0 3px; font-size: 1.4rem; font-weight: 700; color: #fff;
  letter-spacing: -.015em;
}
.cinta-texto p { margin: 0; font-size: .86rem; opacity: .8; }

.cinta-siguiente {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background var(--transicion), transform var(--transicion);
}
.cinta-siguiente:hover {
  background: rgba(255, 255, 255, .22); color: #fff;
  text-decoration: none; transform: translateX(2px);
}
.cinta-libre { cursor: default; }
.cinta-libre:hover { background: rgba(255, 255, 255, .13); transform: none; }

.cinta-hora {
  font-family: var(--fuente-mono); font-size: 1.3rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cinta-quien { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cinta-quien b { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; opacity: .72; }
.cinta-quien span { font-size: .88rem; font-weight: 600; }

/* -- Tarjetas de indicador -------------------------------------------- */

.rejilla-kpi {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.kpi-lujo {
  position: relative; overflow: hidden;
  display: block; padding: 17px 18px 16px;
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-xs);
  text-decoration: none; color: inherit;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
a.kpi-lujo:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-lg);
  border-color: var(--tono); text-decoration: none;
}

/* Franja de color arriba: identifica la tarjeta sin teñirla entera, que
   con cuatro juntas cansaría la vista. */
.kpi-lujo::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tono), color-mix(in srgb, var(--tono) 35%, transparent));
}

.kpi-rojo    { --tono: var(--marca-600); }
.kpi-verde   { --tono: var(--exito); }
.kpi-ambar   { --tono: var(--alerta); }
.kpi-azul    { --tono: var(--clinico); }
.kpi-violeta { --tono: var(--c-violet); }

/* Un halo que sigue al cursor. Es decorativo y se apaga con reduced-motion. */
.kpi-brillo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 0%),
              color-mix(in srgb, var(--tono) 14%, transparent), transparent 68%);
  transition: opacity 260ms;
}
a.kpi-lujo:hover .kpi-brillo { opacity: 1; }

.kpi-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 11px;
}

.kpi-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tono) 13%, transparent);
  color: var(--tono);
}

.kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 660;
}
.kpi-delta.sube { background: var(--exito-bg); color: var(--exito); }
.kpi-delta.baja { background: var(--alerta-bg); color: var(--alerta); }

.kpi-numero {
  font-size: 1.85rem; font-weight: 740; line-height: 1.08;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  color: var(--texto); margin-bottom: 3px;
}
.kpi-nombre { font-size: .82rem; font-weight: 620; color: var(--texto-suave); }
.kpi-detalle { font-size: .73rem; color: var(--texto-tenue); margin-top: 2px; }

/* -- Rejilla de dos columnas ------------------------------------------ */

.rejilla-tablero {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.col-tablero { min-width: 0; }

/* -- Agenda del día --------------------------------------------------- */

.linea-agenda { position: relative; }

/* El riel vertical que une las horas. Se dibuja con un pseudoelemento y
   no con bordes por fila para que no se corte entre una y otra. */
.linea-agenda::before {
  content: ''; position: absolute; top: 14px; bottom: 14px; left: 62px;
  width: 2px; background: var(--borde); border-radius: 2px;
}

.fila-agenda {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-radius: var(--r-sm);
  transition: background var(--transicion);
}
.fila-agenda:hover { background: var(--superficie-2); }

.agenda-hora {
  flex: none; width: 50px; text-align: right; line-height: 1.15;
}
.agenda-hora b {
  display: block; font-family: var(--fuente-mono); font-size: .92rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.agenda-hora span { font-size: .68rem; color: var(--texto-tenue); }

.agenda-punto {
  position: relative; z-index: 1; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--tono-fila); box-shadow: 0 0 0 3px var(--superficie);
}
.tono-verde  { --tono-fila: var(--exito); }
.tono-azul   { --tono-fila: var(--c-blue); }
.tono-cian   { --tono-fila: var(--c-cyan); }
.tono-ambar  { --tono-fila: var(--alerta); }
.tono-gris   { --tono-fila: var(--c-slate); }

/* La cita en sala late: es la persona que está esperando ahí afuera. */
.tono-azul .agenda-punto { animation: latido-punto 1.9s ease-in-out infinite; }

@keyframes latido-punto {
  0%, 100% { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 3px color-mix(in srgb, var(--c-blue) 45%, transparent); }
  50%      { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 8px color-mix(in srgb, var(--c-blue) 0%, transparent); }
}

.agenda-quien { flex: 1; min-width: 0; }
.agenda-acciones { flex: none; }

/* Una cita cuya hora ya pasó y sigue pendiente: se marca sin gritar. */
.fila-agenda.atrasada .agenda-hora b { color: var(--alerta); }
.fila-agenda.atrasada { background: color-mix(in srgb, var(--alerta) 5%, transparent); }

.tono-gris { opacity: .55; }

/* -- Gráfica de barras ------------------------------------------------- */

.grafica-barras {
  display: flex; align-items: flex-end; justify-content: space-around;
  gap: 10px; height: 200px; padding-top: 8px;
}

.grupo-barras {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; min-width: 0;
}

/* Las barras van posicionadas y no en flujo: `height: 52%` sobre un
   contenedor flex sin altura explícita resuelve a `auto` y la barra
   colapsa a su min-height. Con el contenedor en `position: relative` y
   las barras absolutas, el porcentaje sí tiene contra qué medirse. */
.par-barras {
  position: relative; flex: 1 1 auto; width: 100%; min-height: 0;
}

/* La barra se ancla con `top` y `bottom`, y el `top` lo calcula PHP y
   viene en el atributo style.
   Dos cosas que no funcionaron antes y por eso quedó así: `height: 52%`
   sobre un contenedor cuya altura viene de flex resuelve a `auto` y la
   barra colapsa a su min-height; y `calc(100% - var(--alto))` cae al
   valor de reserva, porque una propiedad personalizada sin registrar no
   siempre es sustituible dentro de calc(). Un porcentaje literal en el
   style no tiene ninguno de los dos problemas. */
.barra {
  position: absolute; width: 20px; bottom: 0;
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  /* Crece con scaleY desde la base. Animar `top` con fill-mode backwards
     dejaba la barra congelada en su estado inicial; el transform no toca
     el layout, lo resuelve el compositor y no interfiere con top/bottom. */
  transform-origin: bottom center;
  transition: filter var(--transicion);
}
.barra-ingreso { right: calc(50% + 2px); }
.barra-egreso  { left: calc(50% + 2px); }
.barra-ingreso { background: linear-gradient(180deg, var(--exito), color-mix(in srgb, var(--exito) 62%, transparent)); }
.barra-egreso  { background: linear-gradient(180deg, var(--alerta), color-mix(in srgb, var(--alerta) 62%, transparent)); }
.grafica-barras .barra { z-index: 1; }
.grupo-barras:hover .barra { filter: brightness(1.12); }

body.animar .barra {
  animation: crece-barra 620ms cubic-bezier(.22, 1, .36, 1) backwards;
}

@keyframes crece-barra {
  from { transform: scaleY(0); opacity: .35; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* La cifra aparece al pasar el cursor: con seis meses en pantalla, ponerlas
   todas fijas sería ilegible. */
.rotulo-barra {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font-size: .65rem; font-weight: 660; white-space: nowrap;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--texto); color: var(--superficie);
  opacity: 0; transition: opacity var(--transicion); pointer-events: none;
}
.grupo-barras:hover .rotulo-barra { opacity: 1; }

.barra-mes {
  font-size: .72rem; font-weight: 620; color: var(--texto-suave);
  margin-top: 7px; text-transform: capitalize;
}
.barra-util { font-size: .64rem; color: var(--texto-tenue); }

.leyenda { display: flex; gap: 13px; font-size: .74rem; color: var(--texto-tenue); }
.punto-leyenda { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.punto-ingreso { background: var(--exito); }
.punto-egreso  { background: var(--alerta); }

/* -- Listas de pendientes ---------------------------------------------- */

.fila-pendiente {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px; margin: 0 -10px;
  border-radius: var(--r-sm); text-decoration: none; color: inherit;
  transition: background var(--transicion), transform var(--transicion);
}
.fila-pendiente:hover {
  background: var(--superficie-2); text-decoration: none; transform: translateX(3px);
}
.fila-pendiente + .fila-pendiente { border-top: 1px solid var(--borde); }

.tarjeta-urgente { border-color: color-mix(in srgb, var(--alerta) 34%, var(--borde)); }

.pulsa { animation: pulsa-insignia 2.4s ease-in-out infinite; }
@keyframes pulsa-insignia {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

.fila-morbilidad {
  display: flex; align-items: center; gap: 11px; margin-bottom: 11px;
}
.fila-morbilidad:last-child { margin-bottom: 0; }
.fila-morbilidad .insignia { min-width: 60px; justify-content: center; }

.progreso > div { width: var(--ancho, 0); }

body.animar .progreso > div {
  animation: crece-progreso 760ms cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: 220ms;
}
@keyframes crece-progreso { from { width: 0; } to { width: var(--ancho, 0); } }

/* -- Mini indicadores y atajos ----------------------------------------- */

.rejilla-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.mini-dato {
  text-align: center; padding: 11px 6px;
  border-radius: var(--r-sm); background: var(--superficie-2);
}
.mini-dato b {
  display: block; font-size: 1.3rem; font-weight: 720; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.mini-dato span { font-size: .68rem; color: var(--texto-tenue); }

.rejilla-atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.atajo {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border-radius: var(--r-md);
  background: var(--superficie-2); border: 1px solid transparent;
  text-decoration: none; color: var(--texto-suave);
  font-size: .74rem; font-weight: 600; text-align: center;
  transition: all var(--transicion);
}
.atajo:hover {
  background: var(--primario-suave); border-color: var(--primario);
  color: var(--primario); text-decoration: none; transform: translateY(-2px);
}
.atajo-icono {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--superficie); color: var(--primario);
  transition: transform var(--transicion);
}
.atajo:hover .atajo-icono { transform: scale(1.08); }

/* -- Responsivo -------------------------------------------------------- */

@media (max-width: 1080px) {
  .rejilla-tablero { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cinta-saludo { padding: 16px 18px; }
  .cinta-texto h2 { font-size: 1.15rem; }
  .cinta-siguiente { width: 100%; }
  .grafica-barras { height: 165px; gap: 5px; }
  .barra { width: 13px; }
  .linea-agenda::before { left: 56px; }
  .agenda-hora { width: 44px; }
  .rejilla-atajos { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.animar .entra, body.animar .barra, body.animar .progreso > div { animation: none; }
  .tono-azul .agenda-punto, .pulsa { animation: none; }
  .kpi-lujo, .atajo, .fila-pendiente, .cinta-siguiente { transition: none; }
  a.kpi-lujo:hover, .atajo:hover, .fila-pendiente:hover { transform: none; }
}

@media print {
  .cinta-saludo, .rejilla-atajos, .agenda-acciones { display: none !important; }
  .entra { animation: none; }
}

/* -- Modal de exportación del expediente ------------------------------- */

.lista-secciones { display: flex; flex-direction: column; gap: 8px; }

.casilla-seccion {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--borde); background: var(--superficie-2);
  cursor: pointer; transition: all var(--transicion);
}
.casilla-seccion:hover { border-color: var(--borde-fuerte); }
.casilla-seccion:has(input:checked) {
  border-color: var(--primario); background: var(--primario-suave);
}
.casilla-seccion input { margin-top: 2px; flex: none; accent-color: var(--primario); }
.casilla-seccion b { display: block; font-size: .87rem; font-weight: 620; }
.casilla-seccion small { display: block; font-size: .74rem; color: var(--texto-tenue); }

/* -- Modales: menos movimiento ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-fondo, .modal-fondo.cerrando .modal { transition: none; }
  .modal { transform: none; opacity: 1; }
}

/* ====================================================================
   19. Animaciones generales
   --------------------------------------------------------------------
   Todo lo de aquí se activa con `body.animar`, que pone app.js cuando la
   página es visible. Si el script no corre, la pantalla se ve igual pero
   quieta: ninguna animación es responsable de que algo sea visible.
   ==================================================================== */

/* -- Filas y elementos de lista --------------------------------------- */

body.animar .entra-fila {
  animation: entra-fila 380ms cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: min(calc(var(--i, 0) * 26ms), 340ms);
}

@keyframes entra-fila {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Las filas de tabla NO usan esto: ya las anima el bloque de
   `entra-arriba`, con retardo por nth-child. `entra-fila` es para listas
   que no son tablas — tarjetas de estudio, renglones de pendientes. */

/* -- Cabecera de página ------------------------------------------------ */

.cab-seccion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}

.cab-seccion h2 {
  margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 9px;
}
.cab-seccion h2 .ico { color: var(--primario); }
.cab-seccion .sub { font-size: .82rem; color: var(--texto-tenue); margin-top: 2px; }

/* -- Tarjeta con acento ------------------------------------------------ */

.tarjeta-acento {
  position: relative; overflow: hidden;
}
.tarjeta-acento::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tono, var(--primario)),
              color-mix(in srgb, var(--tono, var(--primario)) 30%, transparent));
}

/* -- Halo reutilizable ------------------------------------------------- */

[data-halo] { position: relative; }

[data-halo] .halo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 0%),
              color-mix(in srgb, var(--tono, var(--primario)) 12%, transparent), transparent 68%);
  transition: opacity 260ms;
}
[data-halo]:hover .halo { opacity: 1; }

/* -- Filas de tabla con realce ----------------------------------------- */

.tabla tbody tr {
  transition: background var(--transicion);
}
.tabla tbody tr:hover { background: var(--superficie-2); }

/* Un renglón que lleva a algún lado se marca al pasar el cursor. */
.tabla tbody tr.clicable { cursor: pointer; }
.tabla tbody tr.clicable:hover { background: var(--primario-suave); }

/* -- Botones e iconos con reacción -------------------------------------- */

.btn-icono, .btn-sm, .btn {
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), transform 90ms ease-out;
}
.btn:active, .btn-icono:active { transform: scale(.96); }

/* -- Estado vacío ------------------------------------------------------- */

.vacio-ilustracion {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--superficie-2); color: var(--texto-tenue);
}
body.animar .vacio-ilustracion {
  animation: aparece-vacio 520ms cubic-bezier(.22, 1, .36, 1) backwards;
}
@keyframes aparece-vacio {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* ====================================================================
   20. Modal de confirmación
   ==================================================================== */

.modal-confirmar { max-width: 380px; }

.confirmar-cuerpo { text-align: center; padding: 26px 24px 20px; }

.confirmar-cuerpo h3 {
  font-size: 1.02rem; margin: 0 0 6px; line-height: 1.35;
}
.confirmar-cuerpo p {
  margin: 0; font-size: .87rem; line-height: 1.55; color: var(--texto-suave);
  white-space: pre-line;
}

.confirmar-icono {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
}
.confirmar-icono.peligro { background: var(--peligro-bg); color: var(--peligro); }
.confirmar-icono.aviso   { background: var(--alerta-bg);  color: var(--alerta); }

body.animar .modal-fondo.abierto .confirmar-icono {
  animation: late-icono 520ms cubic-bezier(.3, 1.4, .5, 1) backwards;
}
@keyframes late-icono {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-confirmar .modal-pie { justify-content: stretch; }
.modal-confirmar .modal-pie .btn { flex: 1; justify-content: center; }

/* -- Cabecera de modal con icono ---------------------------------------- */

.modal-cab .titulo-modal {
  display: flex; align-items: center; gap: 10px;
}

.modal-icono {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md); flex: none;
  background: var(--primario-suave); color: var(--primario);
}
.modal-icono.peligro { background: var(--peligro-bg); color: var(--peligro); }
.modal-icono.alerta  { background: var(--alerta-bg);  color: var(--alerta); }
.modal-icono.exito   { background: var(--exito-bg);   color: var(--exito); }

/* == 21. Padrón de pacientes ============================================ */

/* -- Barra de trabajo: buscar, filtrar y elegir vista ------------------- */

.barra-padron {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.barra-padron .buscador-grande { flex: 1 1 300px; min-width: 220px; position: relative; }
.barra-padron .buscador-grande > .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--texto-tenue); pointer-events: none; transition: color var(--transicion);
}
.barra-padron .buscador-grande input {
  width: 100%; padding: 11px 40px 11px 42px; border-radius: var(--r-full);
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--texto); font-family: inherit; font-size: .9rem; font-weight: 500;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.barra-padron .buscador-grande input:focus {
  outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px var(--anillo);
}
.barra-padron .buscador-grande:focus-within > .ico { color: var(--primario); }
.barra-padron .buscador-grande .limpiar {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--texto-tenue);
  display: grid; place-items: center; cursor: pointer;
}
.barra-padron .buscador-grande .limpiar:hover { background: var(--superficie-3); color: var(--texto); }

/* Selector de vista: dos botones que comparten caja */
.selector-vista {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-full);
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.selector-vista button {
  width: 34px; height: 30px; border: 0; border-radius: var(--r-full); padding: 0;
  background: transparent; color: var(--texto-tenue); cursor: pointer;
  display: grid; place-items: center; transition: all var(--transicion);
}
.selector-vista button:hover { color: var(--texto); }
.selector-vista button.activo {
  background: var(--superficie); color: var(--primario); box-shadow: var(--sombra-xs);
}

/* -- Fichas de paciente ------------------------------------------------- */

.rejilla-padron {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}

.ficha-paciente {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 14px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); box-shadow: var(--sombra-xs);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.ficha-paciente:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-lg);
  border-color: var(--borde-fuerte);
}

/* Filo de color a la izquierda: dice el estado del paciente sin ocupar
   una línea de texto. */
.ficha-paciente::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--tono, var(--marca-600));
  opacity: 0; transition: opacity var(--transicion);
}
.ficha-paciente:hover::before,
.ficha-paciente.marcada::before { opacity: 1; }
.ficha-paciente.con-alergias { --tono: var(--peligro); }
.ficha-paciente.con-adeudo   { --tono: var(--alerta); }
.ficha-paciente.inactiva     { --tono: var(--c-slate); }
.ficha-paciente.inactiva .ficha-datos { opacity: .72; }

.ficha-cab { display: flex; align-items: flex-start; gap: 12px; }

.ficha-retrato { position: relative; flex: none; }
.ficha-retrato .avatar { width: 48px; height: 48px; font-size: 1rem; }
.ficha-retrato img.avatar { object-fit: cover; }

/* Timbre de alergia sobre el retrato: es lo que no se puede pasar por
   alto al recetar, así que va encima de la foto y no en una lista. */
.timbre-alergia {
  position: absolute; right: -3px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--peligro); color: #fff;
  border: 2px solid var(--superficie);
}
body.animar .timbre-alergia::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--peligro);
  animation: pulso-alergia 2.6s ease-out infinite;
}
@keyframes pulso-alergia {
  0%   { transform: scale(.8); opacity: .85; }
  100% { transform: scale(2);  opacity: 0; }
}

.ficha-datos { min-width: 0; flex: 1; }
.ficha-datos .nombre {
  display: block; font-weight: 640; font-size: .95rem; color: var(--texto);
  line-height: 1.25; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha-datos .nombre:hover { color: var(--primario); text-decoration: none; }
.ficha-datos .subtitulo {
  font-size: .765rem; color: var(--texto-tenue); font-weight: 500;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ficha-datos .subtitulo .mono { font-size: .73rem; }
.ficha-datos .subtitulo .sep { opacity: .45; }

.ficha-marcas { display: flex; gap: 5px; flex-wrap: wrap; }

.ficha-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 11px; border-top: 1px solid var(--borde);
}
.ficha-visto { font-size: .755rem; color: var(--texto-tenue); font-weight: 500; }
.ficha-visto b { color: var(--texto-suave); font-weight: 620; }

/* Las acciones aparecen al acercarse; en táctil se quedan siempre. */
.ficha-acciones { display: flex; gap: 4px; opacity: .45; transition: opacity var(--transicion); }
.ficha-paciente:hover .ficha-acciones,
.ficha-paciente:focus-within .ficha-acciones { opacity: 1; }
@media (hover: none) { .ficha-acciones { opacity: 1; } }

/* -- Vista rápida (modal) ---------------------------------------------- */

.vista-rapida-cab { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.vista-rapida-cab .avatar { width: 52px; height: 52px; font-size: 1.05rem; }
.vista-rapida-cab img.avatar { object-fit: cover; }
.vista-rapida-cab h3 { margin: 0 0 2px; font-size: 1.02rem; }
.vista-rapida-cab .subtitulo { font-size: .78rem; color: var(--texto-tenue); }

.vista-rapida-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 16px; margin-top: 14px;
}
.vista-rapida-datos .dato {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.vista-rapida-datos .dato dt {
  font-size: .7rem; font-weight: 640; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .04em;
}
.vista-rapida-datos .dato dd { margin: 0; font-size: .875rem; color: var(--texto); font-weight: 520; }
.vista-rapida-datos .dato dd.vacio-dato { color: var(--texto-tenue); font-weight: 500; }

/* -- Entrada escalonada de las fichas ----------------------------------- */

body.animar .rejilla-padron > .ficha-paciente {
  animation: entra-ficha 420ms cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: min(calc(var(--i, 0) * 34ms), 400ms);
}
@keyframes entra-ficha {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Al cambiar de vista o de filtro, lo que llega se anuncia */
body.animar .rejilla-padron.recien,
body.animar .tabla-envoltura.recien { animation: aparece-lista 300ms ease-out; }
@keyframes aparece-lista { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 620px) {
  .barra-padron .selector-vista { order: 3; }
  .rejilla-padron { grid-template-columns: 1fr; }
}

/* == 22. Firma electrónica avanzada ===================================== */

/* La caja se distingue del resto del panel a propósito: pedir una
   contraseña en medio de un formulario clínico necesita señalar que eso
   es otra cosa, y que es voluntario. */
.caja-efirma {
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.caja-efirma .etiqueta {
  display: flex; align-items: center; gap: 6px;
  color: var(--texto-suave);
}
.caja-efirma .etiqueta .ico { color: var(--primario); }
.caja-efirma .opcional-efirma {
  margin-left: auto; font-size: .68rem; font-weight: 600;
  color: var(--texto-tenue); background: var(--superficie-3);
  padding: 1px 8px; border-radius: var(--r-full);
  text-transform: none; letter-spacing: 0;
}
.caja-efirma .ayuda { margin-top: 7px; line-height: 1.45; }

/* Distintivo del documento firmado con e.firma */
.marca-avanzada {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--exito-bg); color: var(--exito);
  font-size: .72rem; font-weight: 660;
}
.marca-avanzada.rota { background: var(--peligro-bg); color: var(--peligro); }

.datos-firma {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px 16px; margin-top: 10px;
}
.datos-firma div { padding: 7px 0; border-bottom: 1px solid var(--borde); }
.datos-firma dt {
  font-size: .68rem; font-weight: 640; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .04em;
}
.datos-firma dd { margin: 1px 0 0; font-size: .82rem; color: var(--texto); }
.datos-firma dd.mono { font-size: .74rem; word-break: break-all; }

/* == 23. Hospitalización ================================================ */

/* -- El pizarrón -------------------------------------------------------- */

/* La chapa de la cama va arriba a la derecha de la ficha, como la etiqueta
   que de verdad cuelga a los pies del paciente. */
.chapa-cama {
  flex: none; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--clinico-suave); color: var(--clinico);
  font-size: .73rem; font-weight: 680; white-space: nowrap;
}

.ficha-cama .motivo-ingreso {
  margin: 0; font-size: .845rem; line-height: 1.45; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- La bitácora de turnos ---------------------------------------------- */

.nota-turno {
  position: relative;
  padding: 14px 16px 12px 20px;
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.nota-turno + .nota-turno { margin-top: 12px; }

/* Filo a la izquierda: dice el estado de la nota sin gastar una línea. */
.nota-turno::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--exito);
}
.nota-turno.borrador::before  { background: var(--alerta); }
.nota-turno.cancelada::before { background: var(--texto-tenue); }

.nota-turno.borrador  { background: var(--alerta-bg); border-color: transparent; }
.nota-turno.cancelada { opacity: .72; }

/* Una nota cancelada se lee tachada: sigue en el expediente, pero no
   cuenta. Es la misma convención del expediente en papel. */
.nota-turno.cancelada .texto-nota,
.nota-turno.cancelada .nota-indicaciones { text-decoration: line-through; }

.nota-turno-cab {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.nota-turno-fecha {
  margin-left: auto; font-size: .755rem; color: var(--texto-tenue);
  font-weight: 600; white-space: nowrap;
}

.nota-turno .texto-nota {
  font-size: .9rem; line-height: 1.6; color: var(--texto); white-space: pre-line;
}

.nota-indicaciones {
  margin-top: 10px; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--clinico-suave); color: var(--texto);
  font-size: .855rem; line-height: 1.5;
}
.nota-indicaciones b {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--clinico); font-size: .755rem; font-weight: 680;
  text-transform: uppercase; letter-spacing: .04em;
}

.nota-turno-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--borde);
}

@media (max-width: 620px) {
  .nota-turno-fecha { margin-left: 0; width: 100%; }
}

/* == 24. Consentimientos e incapacidades ================================ */

/* -- Firmas trazadas ---------------------------------------------------- */

.rejilla-firmas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.firma-bloque { display: flex; flex-direction: column; gap: 8px; }

.firma-titulo b { display: block; font-size: .855rem; font-weight: 640; color: var(--texto); }
.firma-titulo small { font-size: .75rem; color: var(--texto-tenue); }

/* El lienzo ya venía estilado del diseño original; aquí solo se resuelve
   lo que faltaba para que se pueda firmar de verdad. */
.lienzo-firma canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Sin esto, en táctil el gesto de firmar arrastra la página en vez de
     dejar trazo, y el paciente cree que el sistema no responde. */
  touch-action: none;
  cursor: crosshair;
}
.lienzo-firma img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 10px;
}
.lienzo-firma-pista {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; text-align: center; padding: 0 16px;
  font-size: .8rem; color: var(--texto-tenue);
}

/* -- La caja de días de incapacidad ------------------------------------- */

.caja-dias {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: var(--r-md);
  background: var(--primario-suave);
  border: 1px solid color-mix(in srgb, var(--primario) 20%, transparent);
  transition: background var(--transicion), border-color var(--transicion);
}
.caja-dias.mal {
  background: var(--peligro-bg);
  border-color: color-mix(in srgb, var(--peligro) 25%, transparent);
}

.caja-dias .dias-numero {
  font-size: 2.4rem; font-weight: 760; line-height: 1;
  letter-spacing: -.04em; color: var(--primario);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}
.caja-dias.mal .dias-numero { color: var(--peligro); }

.caja-dias .dias-texto { display: flex; flex-direction: column; gap: 2px; }
.caja-dias .dias-texto b { font-size: .93rem; font-weight: 640; color: var(--texto); }
.caja-dias .dias-texto small { font-size: .765rem; color: var(--texto-tenue); line-height: 1.4; }

/* == 25. Paquetes de suscripción ======================================== */

.ficha-paquete { transition: transform var(--transicion), box-shadow var(--transicion); }
.ficha-paquete:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }
.ficha-paquete.inactiva { opacity: .62; }

/* El precio es lo que se compara entre paquetes: va grande y solo. */
.precio-paquete {
  display: flex; align-items: baseline; gap: 6px;
  margin: 14px 0 4px;
}
.precio-paquete b {
  font-size: 2rem; font-weight: 760; line-height: 1;
  letter-spacing: -.035em; color: var(--primario);
  font-variant-numeric: tabular-nums;
}
.precio-paquete small { font-size: .8rem; color: var(--texto-tenue); font-weight: 600; }

/* == 26. El plan de un consultorio ====================================== */

.precio-plan {
  font-size: 1.55rem; font-weight: 760; letter-spacing: -.03em;
  color: var(--primario); font-variant-numeric: tabular-nums;
}
.precio-plan small { font-size: .8rem; font-weight: 600; color: var(--texto-tenue); }

/* El desglose explica de dónde sale ese número: paquete, extras y tope.
   Un importe suelto no se puede defender en una llamada de cobranza. */
.desglose-plan {
  display: grid; gap: 2px 20px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.desglose-plan > div {
  padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.desglose-plan dt {
  font-size: .7rem; font-weight: 640; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .04em;
}
.desglose-plan dd { margin: 2px 0 0; font-size: .885rem; color: var(--texto); }

/* -- Menos movimiento ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.animar .entra-fila,
  body.animar .vacio-ilustracion,
  body.animar .rejilla-padron > .ficha-paciente,
  body.animar .rejilla-padron.recien,
  body.animar .tabla-envoltura.recien,
  body.animar .timbre-alergia::after,
  body.animar .modal-fondo.abierto .confirmar-icono { animation: none; }
  .btn:active, .btn-icono:active { transform: none; }
}

@media print {
  .entra-fila { animation: none !important; }
}