/* DISEÑO DE EDNA — extraído VERBATIM de plataforma-pmedic.html
   NO EDITAR A MANO. Se regenera con ./extraer-diseno.sh
   Si hay que corregir una alineación, se corrige en la maqueta y se
   vuelve a extraer. Editar aquí reabre la deriva que esto cierra. */

/* =====================================================================
   1. RESET Y BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:light}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--gris-piedra);
  color:var(--marino);
  font-size:14px;
  line-height:1.45;
  min-height:100vh;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;color:var(--marino)}
input,select,textarea,option{background-color:var(--blanco)}
/* Ningún desplegable del sistema: traían su gris, su tipografía y su flecha.
   La flecha se dibuja con dos degradados, sin imagen externa. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:34px;font-weight:600;color:var(--marino);
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-suave) 50%),
                   linear-gradient(135deg,var(--texto-suave) 50%,transparent 50%);
  background-position:calc(100% - 18px) 54%,calc(100% - 13px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:hover{border-color:var(--indigo)}
select option{background-color:var(--blanco);color:var(--marino);font-weight:500}
input[type="color"]{background-color:transparent}
::-webkit-calendar-picker-indicator{filter:none}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}

/* =====================================================================
   2. TOKENS DE DISEÑO — PALETA OBLIGATORIA (no se amplía)
   ===================================================================== */
:root{
  /* MISMA DISTANCIA ENTRE CELDAS QUE PERRITOS HOUSE
     Un solo token para todo el aire entre tarjetas: entre columnas, entre
     filas y entre tarjetas apiladas. Las dos plataformas usan 12 px. */
  --hueco:12px;
  --lavanda:#D6F1F8;          /* tinte del petróleo, más vivo */
  --indigo:#017B99;           /* acento primario — petróleo legible */
  --marino:#07566B;           /* títulos y texto fuerte */
  --petroleo:#0191B4;         /* el de la paleta, para rellenos y barras */
  --turquesa:#35BBCA;
  --panel:#017B99;            /* el petróleo del menú, legible en blanco */
  --acento-tinte:#016377;     /* el acento cuando va sobre lavanda */
  --lima:#D3DD18;             /* vigente / vigente / pagado */
  --amarillo:#F8D90F;         /* por vencer / por cobrar */
  --naranja:#FE7A15;          /* adeudo / vencido */
  --blanco:#FFFFFF;
  --gris-piedra:#F4FBFD;
  --gris-borde:#CFE6EE;
  --texto-suave:#5A6672;
  /* Único color de riesgo, autorizado por Edna el 22-sep-2026 ("ponlos porque son
     indicadores de riesgo"). Úsalo SOLO para: chip Vencido, chip de severidad Alta,
     y flechas de variación cuando el cambio representa más riesgo (gasto que sube,
     cobranza pendiente que baja). Nada más lleva rojo — ni bordes, ni títulos, ni
     totales. No se amplía ni se deriva un segundo tono. */
  /* Los tres estados de un saldo, cada uno con su relleno de la paleta y
     su texto profundo para que se lea: verde vigente, amarillo por
     vencer, naranja vencido. El rojo sale del sistema —ahora el aviso de
     dinero sin cobrar es el naranja de la paleta. */
  --verde:#D3DD18;--verde-fondo:#EDF7A8;--verde-texto:#4A5600;
  --ambar:#F8D90F;--ambar-fondo:#FEF0A0;--ambar-texto:#7A5E00;
  --rojo:#FE7A15;--naranja:#FE7A15;--naranja-fondo:#FFDCC0;--naranja-texto:#9A3A00;

  /* radios y sombra — no son color, son medida */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:999px;
  --sombra-card:0 1px 2px rgba(0,0,0,.04);

  /* ritmo vertical 4/8/12/16/24/32/48 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}

/* =====================================================================
   3. TIPOGRAFÍA — escala fija, sin fuentes externas
   ===================================================================== */
.tipo-h1{font-size:24px;font-weight:700;line-height:1.25}
.tipo-h2{font-size:18px;font-weight:600;line-height:1.3}
.tipo-label{font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.tipo-dato{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.suave{color:var(--texto-suave)}

/* =====================================================================
   4. LAYOUT — SIDEBAR (292px: lo que mide el nombre de módulo más largo)
   ===================================================================== */
.app{display:flex;min-height:100vh}

.sidebar{
  width:292px;min-width:292px;
  background:var(--panel);
  color:var(--blanco);
  display:flex;flex-direction:column;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;
}
.sidebar-brand{
  margin:calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-5);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  background:var(--blanco);
  border-bottom:3px solid var(--lavanda);
  text-align:center;
}
.sidebar-brand .sidebar-logo-placa{background:none;padding:0;border-radius:0;box-shadow:none;margin:0 auto;width:100%}
.sidebar-brand .sidebar-logo-img{width:100%;max-width:168px;height:auto;margin:0 auto;display:block}
.sidebar-brand .lema{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marino);opacity:.75;margin-top:var(--sp-2);
}

/* .sidebar-logo (ícono + wordmark): definida en la sección 34 */

.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px 12px;border-radius:var(--r-md);
  color:rgba(255,255,255,.7);
  font-size:14px;font-weight:500;
  background:transparent;border:none;width:100%;text-align:left;
  transition:background .12s,color .12s,opacity .12s}
.nav-item svg.icon{width:18px;height:18px;flex:none;color:currentColor}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-item.activo{background:var(--lavanda);color:var(--marino);opacity:1}
.nav-item.activo:hover{background:var(--lavanda)}

/* .sidebar-soporte: definida en la sección 35 (píldora con borde) */

.sidebar-cierre{
  margin-top:var(--sp-4);
  background:var(--blanco);color:var(--marino);
  border-radius:var(--r-lg);
  padding:var(--sp-4);
  position:relative;overflow:hidden;
}
.sidebar-cierre 
.sidebar-cierre p{font-size:14px;font-weight:600;line-height:1.35}
.sidebar-cierre .marca-pie{
  margin-top:var(--sp-4);font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--texto-suave);line-height:1.6;text-transform:uppercase;
}

/* =====================================================================
   5. LAYOUT — TOPBAR
   ===================================================================== */
.main{flex:1;margin-left:292px;display:flex;flex-direction:column;min-height:100vh}

.topbar{
  background:var(--blanco);
  border-bottom:1px solid var(--gris-borde);
  padding:0 var(--sp-6);
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
  gap:var(--sp-4);
}
.topbar-izq{display:flex;flex-direction:column;gap:2px;min-width:0}
.breadcrumb{font-size:13px;color:var(--texto-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb b{color:var(--marino);font-weight:600}
.topbar-nota{
  font-family:'Segoe Script','Bradley Hand','Snell Roundhand',cursive;
  font-style:italic;
  font-size:13px;color:var(--indigo);
  display:flex;align-items:center;gap:4px;
}
.topbar-nota svg.icon{width:13px;height:13px;color:var(--indigo)}

.topbar-der{display:flex;align-items:center;gap:var(--sp-5);flex:none}

.vista-switch{display:flex;gap:6px;background:var(--gris-piedra);padding:4px;border-radius:var(--r-pill)}

.topbar-fecha{text-align:right;font-size:12px;color:var(--texto-suave);line-height:1.4;white-space:nowrap}
.topbar-fecha b{display:block;color:var(--marino);font-weight:600;font-size:13px}

/* =====================================================================
   6. LAYOUT — CONTENIDO
   ===================================================================== */
.contenido{padding:var(--sp-6);flex:1}
.modulo{display:none}
.modulo.activo{display:block}
.modulo-header{margin-bottom:var(--sp-5)}
.modulo-header .tipo-h1{margin-bottom:2px}

.en-construccion svg.icon{width:32px;height:32px;color:var(--gris-borde);margin:0 auto var(--sp-3)}

/* =====================================================================
   7. ICONOS — sprite de línea, sin emoji
   ===================================================================== */
.icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   8. COMPONENTE — CARD
   ===================================================================== */
.card{
  background:var(--blanco);
  border:1px solid var(--gris-borde);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--sombra-card);
}
.card + .card{margin-top:var(--hueco)}
/* El mismo desfase que había en Perritos House: dentro de una rejilla,
   .card + .card le metía margen de arriba a la segunda y la tercera
   tarjeta de la MISMA fila, y arrancaban 12 px más abajo que la primera. */
[class*="grid-"] > .card + .card,
.col > .card + .card,
[class*="col-der"] > .card + .card{margin-top:0}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);gap:var(--sp-3)}
.card-head .tipo-h2{color:var(--marino)}
/* Cuando el encabezado trae controles que no caben al lado del título, el
   título se queda con su renglón completo y los controles bajan juntos.
   Antes "Evolución del paciente" se partía en tres líneas. */
.card-head-apilada{flex-wrap:wrap}
.card-head-apilada>.tipo-h2{flex:1 1 100%}
.card-head-apilada>.select{flex:1 1 0;min-width:0}
.card-accion{
  font-size:12px;font-weight:600;color:var(--acento-tinte);
  background:var(--lavanda);border:1px solid var(--lavanda);border-radius:8px;
  padding:5px 11px;cursor:pointer;
  display:inline-flex;flex:none;width:auto;align-items:center;gap:5px;
  font-family:inherit;line-height:1.2;white-space:nowrap;
}
.card-accion svg.icon{width:13px;height:13px}
.card-accion:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.card-accion:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

.col{display:flex;flex-direction:column}
/* align-items:stretch (no "start"): las tarjetas de una misma fila deben
   estirarse a la altura de la fila para que los encabezados y bordes
   inferiores cuadren entre sí (antes quedaban a su altura natural y se veían
   escalonadas). gap/margin reducidos de --sp-4 a --sp-3: filas y tarjetas más
   pegadas, sin quedar apretadas. */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hueco);align-items:stretch;margin-bottom:var(--hueco)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hueco);align-items:stretch;margin-bottom:var(--hueco)}
.grid-2-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--hueco);align-items:stretch;margin-bottom:var(--hueco)}

/* =====================================================================
   9. COMPONENTE — CHIP
   ===================================================================== */
/* inline-block, no flex: un inline-flex anidado dentro de un bloque que a su
   vez es hijo flex (.m2-header-info{flex:1}) se estira al ancho completo en
   algunos motores de render aunque tenga width:auto — inline-block es
   robusto en cualquier anidamiento (verificado). */
.chip{
  display:inline-block;width:auto;vertical-align:middle;
  border-radius:var(--r-pill);padding:4px 10px;
  font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;
}
.chip-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:5px}
/* Confirmado en verde azulado, no en verde hoja: el verde puro se peleaba
   con el índigo y el marino de la marca. Este tira al azul y convive. */
.chip-positivo{background:var(--verde-fondo);color:var(--verde-texto)}
.chip-positivo .chip-dot{background:var(--verde)}
.chip-aviso{background:var(--lavanda);color:var(--acento-tinte)}
.chip-aviso .chip-dot{background:var(--indigo)}
/* Vencido = hay dinero sin cobrar. Es el único uso de rojo del sistema. */
.chip-negativo{background:var(--naranja-fondo);color:var(--naranja-texto)}
.chip-negativo .chip-dot{background:var(--naranja)}
/* Un estado que además es la puerta a escribirle al paciente: si dice
   "Por confirmar", lo que falta es justamente un mensaje. */
/* Acciones del padrón, al final de la fila de filtros */
.filtros-acciones{display:flex;gap:var(--sp-2);margin-left:auto;flex-wrap:wrap}
/* Barra de selección: aparece sólo en modo editar, para que borrar nunca
   quede a un clic de distancia por accidente. */
.barra-seleccion{display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px;
  margin-bottom:var(--sp-3);border-radius:10px;background:var(--lavanda);
  border:1px solid var(--indigo);font-size:13px;color:var(--marino);flex-wrap:wrap}
.barra-seleccion span{flex:1;font-weight:600;min-width:180px}
.barra-seleccion .btn{font-family:inherit;cursor:pointer}
/* El bote de baja va en el encabezado, sobre las casillas: así se ve a quién
   afecta y no hace falta una barra aparte ocupando un renglón. */
.th-borrar{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:30px;height:30px;padding:0 6px;border-radius:999px;border:1px solid var(--gris-borde);
  background:var(--blanco);color:var(--texto-suave);transition:.16s}
.th-borrar svg{width:15px;height:15px}
.th-borrar:disabled{opacity:.45;cursor:not-allowed}
.th-borrar.con-seleccion{border-color:var(--rojo);color:var(--rojo);
  background:rgba(179,38,30,.07);width:auto;min-width:42px}
.th-borrar.con-seleccion:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.th-borrar .n{font-size:11.5px;font-weight:700;line-height:1}
.card-accion.activo{color:var(--marino);font-weight:700;text-decoration:underline}
.col-sel{width:34px;text-align:center}
.tabla th.col-sel{padding-top:6px;padding-bottom:6px}
.col-sel input{width:15px;height:15px;cursor:pointer;accent-color:#D3DD18}
.tabla tr.marcada{background:var(--lavanda)}
.chip-accion{cursor:pointer}
.chip-accion:hover{filter:brightness(.95);box-shadow:0 0 0 2px rgba(53,187,202,.40)}
/* Cuatro estados, cuatro lecturas: verde confirmada, ámbar por confirmar,
   rojo cancelada, marino realizada. Antes todo lo que no fuera confirmado
   ni cancelado compartía el mismo gris y no se distinguía una cita por
   confirmar de una ya atendida. */
.chip-aviso{background:var(--ambar-fondo);color:var(--ambar-texto)}
.chip-aviso .chip-dot{background:var(--ambar)}
.chip-hecho{background:rgba(11,95,116,.08);color:var(--marino)}
.chip-hecho .chip-dot{background:var(--marino)}

/* El detalle de la cita y las citas del día, mitad y mitad */
/* Mitades exactas: antes el detalle vivía dentro de la rejilla del
   calendario y sólo ocupaba una columna, por eso quedaba un hueco al
   lado. Ahora el dúo es su propia rejilla de dos y cada tarjeta llena
   su mitad de punta a punta. */
.m3-duo{align-items:stretch;gap:var(--sp-4)}
.m3-duo>.card{display:flex;flex-direction:column;min-width:0;width:100%;margin-bottom:0}
.m3-duo>.card>.tabla,.m3-duo>.card table{width:100%}
/* Citas del día cierra donde cierra el detalle. La tarjeta más alta es la
   que fija el alto del renglón, y con seis citas era siempre ésta; ahora
   su tabla vive en un marco que se recorta al alto del detalle y lo que
   no entra se desliza, con "Ver más" para el día completo. */
.m3-dia-env{overflow-y:auto;min-height:0;flex:1 1 auto}
.m3-dia-env thead th{position:sticky;top:0;background:var(--blanco);z-index:1}
.m3-duo .m3-detalle-tabs{flex:none}
.m3-duo #m3-dia-tb{min-width:0}
/* Editar sustituye al tache arriba a la derecha: es lo que se busca al
   abrir una cita, y cerrar se hace abriendo otra. */
.m3-editar{position:absolute;top:var(--sp-4);right:var(--sp-4);display:inline-flex;align-items:center;
  gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--gris-borde);background:var(--blanco);
  color:var(--marino);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.m3-editar:hover{border-color:var(--indigo);color:var(--acento-tinte);background:var(--lavanda)}
.m3-editar svg.icon{width:14px;height:14px}
/* Cinta de identidad: cuando la agenda es de una sola persona, se dice
   de quién es y cómo volver al equipo. Sin esto, las mismas cuatro
   tarjetas filtradas parecen las de la clínica entera. */
.m3-sin-cita{margin-top:var(--sp-4);padding:12px 14px;border-radius:10px;background:var(--humo);
  border:1px dashed var(--gris-borde);font-size:13px;color:var(--texto-suave);line-height:1.5}
.m3-marcar{margin-top:var(--sp-4)}
.m3-marcar .btn{width:100%;justify-content:center}
/* Los tres botones del pie se reparten el ancho: ninguno se sale */
.m3-detalle-acciones{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}
.m3-detalle-acciones .btn{flex:1 1 0;min-width:112px;justify-content:center;text-align:center;
  font-family:inherit;cursor:pointer}
/* Citas del día: cinco renglones y "Ver más", para cerrar al mismo alto */
.tabla-citas-dia td,.tabla-citas-dia th{padding-left:7px;padding-right:7px}
/* Siete columnas en media pantalla: se reparten a mano para que el chip de
   estado y el botón Ver no se queden sin espacio y salgan cortados. */
.tabla-citas-dia col.c-hora{width:17%}
.tabla-citas-dia col.c-pac{width:21%}
.tabla-citas-dia col.c-sv{width:17%}
.tabla-citas-dia col.c-esp{width:17%}
.tabla-citas-dia col.c-est{width:16%}
.tabla-citas-dia col.c-acc{width:12%}
.tabla-citas-dia .chip{white-space:nowrap;font-size:11px;padding:3px 8px}
.tabla-citas-dia .card-accion{white-space:nowrap;padding:4px 9px}
.tabla-citas-dia td{vertical-align:middle;overflow-wrap:anywhere}
.m3-tabla-espera{table-layout:fixed;width:100%}
.m3-tabla-espera th:last-child,.m3-tabla-espera td:last-child{width:62px;text-align:right}
.m3-tabla-espera td{overflow-wrap:anywhere;vertical-align:top}
.m3-tabla-espera .card-accion{white-space:nowrap}

/* =====================================================================
   10. COMPONENTE — TABLA
   ===================================================================== */
.tabla{width:100%;border-collapse:collapse}
.tabla thead th{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-suave);text-align:left;padding-bottom:8px;
  border-bottom:1px solid var(--gris-borde);
}
.tabla tbody td{padding:12px 0;border-bottom:1px solid var(--gris-borde);font-size:14px;vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla .num,.tabla .fecha{text-align:right;font-variant-numeric:tabular-nums}
.tabla th.num,.tabla th.fecha{text-align:right}
.tabla td + td,.tabla th + th{padding-left:var(--sp-3)}

/* =====================================================================
   11. COMPONENTE — BOTONES
   ===================================================================== */
.btn{
  display:inline-flex;flex:none;width:auto;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-md);padding:10px 16px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:opacity .12s,background .12s;white-space:nowrap;
}
.btn svg.icon{width:16px;height:16px}
.btn-primario{background:var(--lavanda);color:var(--marino)}
.btn-primario:hover{opacity:.9}
.btn-primario:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.btn-secundario{background:transparent;border-color:var(--marino);color:var(--marino)}
.btn-secundario:hover{background:rgba(11,95,116,.05)}
.btn-secundario:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--r-sm)}

/* =====================================================================
   12. COMPONENTE — KPI CARD
   ===================================================================== */
.kpi{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--sombra-card)}
.kpi .icon-cont{width:24px;height:24px;color:var(--marino);margin-bottom:var(--sp-3)}
.kpi .tipo-dato{color:var(--marino);display:flex;align-items:baseline;gap:6px}
.kpi .tipo-dato small{font-size:14px;font-weight:600;color:var(--texto-suave)}
.kpi .tipo-label{color:var(--texto-suave);margin-top:6px;display:block}
.kpi .kpi-delta{font-size:12px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:4px}
.kpi .kpi-delta.up{color:var(--indigo)}
.kpi .kpi-delta.down{color:var(--marino)}
.kpi-delta svg.icon{width:12px;height:12px;flex:none}

/* =====================================================================
   13. COMPONENTE — TABS
   ===================================================================== */
.tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);border-bottom:1px solid var(--gris-borde);flex-wrap:wrap}
.tab{
  display:inline-flex;align-items:center;width:auto;
  padding:10px 4px;margin-right:var(--sp-4);
  font-size:14px;font-weight:600;color:var(--texto-suave);
  border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;
  position:relative;top:1px;
}
.tab:hover{color:var(--marino)}
.tab.activo{color:var(--marino);border-bottom-color:var(--lavanda)}

/* =====================================================================
   14. COMPONENTE — CAMPO / FORM
   ===================================================================== */
.campo-fila{display:flex;align-items:flex-start;gap:var(--sp-3);padding:9px 0}
.campo-fila + .campo-fila{border-top:1px solid var(--gris-borde)}
.campo-fila svg.icon{width:16px;height:16px;color:var(--texto-suave);flex:none;margin-top:2px}
.campo-fila .campo-label{font-size:12px;color:var(--texto-suave);width:120px;flex:none}
.campo-fila .campo-valor{font-size:14px;color:var(--marino);font-weight:500;flex:1}

.input,.select{
  display:block;box-sizing:border-box;
  width:100%;padding:9px 12px;border:1px solid var(--gris-borde);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;color:var(--marino);background:var(--blanco);
}
.input:focus,.select:focus{outline:2px solid var(--lavanda);outline-offset:0;border-color:var(--lavanda)}
/* ===== LISTAS DESPLEGABLES =====================================
   El panel que abre un <select> lo dibuja el sistema operativo: fondo
   gris, resaltado azul, tipografía ajena. No hay CSS que lo alcance.
   Aquí se apaga esa piel y se dibuja la nuestra, y más abajo el panel
   abierto se sustituye por una lista propia. Mismo criterio que en
   Perritos House. */
:root{ --realce:rgba(1,123,153,.10); --realce-fuerte:rgba(1,123,153,.18); }
select,select.input,select.select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  display:block;box-sizing:border-box;width:100%;
  padding:9px 34px 9px 12px;border:1px solid var(--gris-borde);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;color:var(--marino);background-color:var(--blanco);
  cursor:pointer;line-height:1.4;
  background-image:url("data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2024%2024"%20fill="none"%20stroke="%2307566B"%20stroke-width="2.2"%20stroke-linecap="round"%20stroke-linejoin="round"><polyline%20points="6%209%2012%2015%2018%209"/></svg>");background-repeat:no-repeat;
  background-position:right 11px center;background-size:13px;
}
select:hover{border-color:var(--turquesa)}
select:focus{outline:2px solid var(--lavanda);outline-offset:0;border-color:var(--lavanda)}
select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--gris-piedra)}
select::-ms-expand{display:none}
select option{color:var(--marino);background:var(--blanco)}

/* la lista propia que sustituye al panel del sistema */
.lista-caja{position:relative}
.lista-nativa{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;left:0;top:0;margin:0}
.lista-btn{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  padding:9px 12px;border:1px solid var(--gris-borde);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;color:var(--marino);background:var(--blanco);
  cursor:pointer;text-align:left;transition:border-color .16s ease,background .16s ease}
.lista-btn:hover{border-color:var(--turquesa);background:var(--realce)}
.lista-btn[aria-expanded="true"]{border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(53,187,202,.25)}
.lista-btn .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-btn .v{width:13px;height:13px;flex:none;transition:transform .2s ease}
.lista-btn[aria-expanded="true"] .v{transform:rotate(180deg)}
.lista-btn:disabled{opacity:.55;cursor:not-allowed;background:var(--gris-piedra)}
.lista-panel{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 5px);
  background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-md);
  box-shadow:0 12px 30px rgba(7,86,107,.18);padding:5px;max-height:260px;overflow-y:auto}
.lista-panel[hidden]{display:none}
.lista-op{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  padding:9px 11px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;
  color:var(--marino);text-align:left;cursor:pointer;transition:background .12s ease}
.lista-op:hover,.lista-op:focus-visible{background:var(--realce);outline:none}
.lista-op.elegida{background:var(--realce-fuerte);font-weight:600}
.lista-op .pal{width:14px;flex:none;color:var(--indigo);opacity:0}
.lista-op.elegida .pal{opacity:1}
.campo-form{display:block}
.campo-form label{display:block;font-size:12px;font-weight:600;color:var(--texto-suave);margin-bottom:6px}
.campo-form .input,.campo-form .select{display:block;box-sizing:border-box}

/* =====================================================================
   15. GRID HELPERS ADICIONALES
   ===================================================================== */
.grid-kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hueco);margin-bottom:var(--hueco)}
/* El delta con ícono ("25% vs. mes anterior") es más largo que el texto
   plano de sus 4 vecinas ("39% del total") y envolvía a 2 líneas dentro de
   la misma tarjeta angosta de grid-kpi5 (verificado en render aislado) —
   se reduce el tamaño SOLO aquí (no toca .kpi-delta base, usado en
   otras pantallas) y se fuerza una sola línea. */
.grid-kpi5 .kpi-delta{font-size:11px;white-space:nowrap}
.filtros{display:flex;gap:8px;margin-bottom:var(--sp-4);flex-wrap:wrap}
.filtro-chip{
  display:inline-flex;align-items:center;width:auto;
  padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);
  font-size:12px;font-weight:600;color:var(--texto-suave);background:var(--blanco);
}
.filtro-chip.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.filtro-chip:not(.activo):hover{border-color:var(--marino);color:var(--marino)}
.filtro-chip.activo:hover{opacity:.9}
.buscador{display:flex;align-items:center;gap:8px;border:1px solid var(--gris-borde);border-radius:var(--r-md);
  padding:9px 12px;background:var(--blanco);flex:1;max-width:320px}
.buscador svg.icon{width:16px;height:16px;color:var(--texto-suave)}
.buscador input{border:none;outline:none;font-size:14px;flex:1;width:100%;min-width:0;font-family:inherit;color:var(--marino);background:transparent}

.barra-h{display:flex;flex-direction:column;gap:var(--sp-3)}
.barra-h-fila{display:grid;grid-template-columns:120px minmax(0,1fr) 56px;align-items:center;gap:10px}
.barra-h-label{font-size:13px;color:var(--marino)}
.barra-h-pista{height:8px;background:var(--gris-piedra);border-radius:var(--r-pill);overflow:hidden}
.barra-h-valor{height:100%;background:var(--lavanda);border-radius:var(--r-pill)}
.barra-h-num{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--marino)}

/* =====================================================================
   99. RESPONSIVE MÍNIMO (la maqueta se presenta en laptop; esto evita
       ruptura visible si la ventana no es 1440)
   ===================================================================== */
@media (max-width:1280px){
  .grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid-kpi4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-kpi5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =====================================================================
   17. MÓDULO 2 — EXPEDIENTE CLÍNICO
   ===================================================================== */
/* Lista/ficha dentro de la misma seccion, mismo patron que M1
   (.m1-panel/.m1-panel.activo + m1MostrarLista()/m1AbrirCliente()). */
.m2-panel{display:none}
.m2-panel.activo{display:block}
.m2-tabla-pacientes tbody tr{cursor:pointer}
.m2-header{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-5);flex-wrap:wrap}

/* Version generica del avatar (iniciales, para los 17 pacientes sin foto
   real) -- misma caja que .m2-avatar (aplicadas juntas en el HTML), solo
   agrega el centrado del texto y el tinte. */
.m2-gen-avatar-ini{display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--marino);background:rgba(11,95,116,.10)}
.m2-header-info{flex:1;min-width:200px}
.m2-header-info .tipo-h1{display:inline-block;margin-right:var(--sp-3);vertical-align:middle}
.m2-header-info .chip{vertical-align:middle}
.m2-header-info .suave{margin-top:4px;font-size:14px}
.m2-header .btn{margin-left:auto}

/* Proporción tras quitar la tarjeta vertical de foto (22-sep, tanda M2): la
   columna derecha ya no necesita sostener una foto grande, así que se
   angosta y el ancho recuperado se reparte entre izquierda (tabla de
   Valoraciones y evolución a 4 columnas + franja de 4 celdas, necesita más aire) y
   centro (algo más ancha también). 1.15 : 1 : 0.85 en vez de 1 : 1 : 1.5. */
.m2-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:var(--sp-4);align-items:start}

.m2-temperamento{line-height:1.55}

/* Franja de 4 celdas (Alergias/Medicamentos/Restricciones/Observaciones)
   debajo de la tabla de Valoraciones y evolución — antes eran campo-fila sueltas en
   gris, ahora con el mismo peso visual que la tabla de arriba (label chico
   en mayúsculas, valor en semibold morado) para que un cuidador lo vea de
   un golpe. Flexbox, no grid anidado (bug §4.2 del traspaso). */
/* Divisor como elemento propio (no border-right en el flex item): con
   border-right directo en una celda flex:1 el texto largo (MEDICAMENTOS,
   OBSERVACIONES) se desbordaba sobre la celda vecina en WeasyPrint en vez
   de encogerse/partirse — verificado, no es apreciación. .m2-salud-info
   además pasa de flex-column a bloque simple (label/valor apilados por
   default de bloque) para no anidar un tercer nivel de flex. */
.m2-salud-franja{display:flex;align-items:flex-start;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--gris-borde);flex-wrap:wrap;gap:var(--sp-3) 0}
.m2-salud-celda{flex:1;min-width:0;display:flex;align-items:flex-start;gap:6px}
.m2-salud-div{width:1px;align-self:stretch;background:var(--gris-borde);flex:none;margin:0 var(--sp-2)}
.m2-salud-celda svg.icon{width:15px;height:15px;color:var(--marino);flex:none;margin-top:2px}
.m2-salud-info{min-width:0}
.m2-salud-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:2px;overflow-wrap:break-word;white-space:nowrap}
.m2-salud-valor{display:block;font-size:13.5px;font-weight:600;color:var(--marino);overflow-wrap:break-word}

.m2-planter{
  display:flex;gap:var(--sp-3);align-items:flex-start;flex:1;min-width:0;
  background:rgba(151,209,10,.08);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.m2-planter svg.icon{width:18px;height:18px;color:var(--indigo);flex:none;margin-top:2px}
.m2-planter b{display:block;font-size:14px;color:var(--marino)}
.m2-planter span{font-size:13px;color:var(--texto-suave)}

/* Observaciones al lado de Indicaciones, mismo componente en gris neutro.
   Fila con flexbox (no grid anidado dentro de .grid-2-1 > .card). */
.m2-info-2col{display:flex;gap:var(--sp-3);margin-top:var(--sp-2)}
.m2-obs-caja{
  display:flex;gap:var(--sp-3);align-items:flex-start;flex:1;min-width:0;
  background:var(--gris-piedra);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.m2-obs-caja svg.icon{width:18px;height:18px;color:var(--texto-suave);flex:none;margin-top:2px}
.m2-obs-caja b{display:block;font-size:14px;color:var(--marino)}
.m2-obs-caja span{font-size:13px;color:var(--texto-suave)}

.m2-servicio-fila{display:flex;align-items:center;gap:var(--sp-3);padding:9px 0}
.m2-servicio-fila + .m2-servicio-fila{border-top:1px solid var(--gris-borde)}
.m2-servicio-fila svg.icon{width:17px;height:17px;color:var(--texto-suave);flex:none}
.m2-servicio-fila .nombre{flex:1;font-size:14px;color:var(--marino);font-weight:500}

.m2-col-der{display:flex;flex-direction:column;gap:var(--sp-4)}
/* .m2-acciones ya no comparte fila con una foto (se quitó la tarjeta
   vertical): ancho fijo de 150px cambiado por 100% para que se estire al
   ancho completo de la columna derecha (align-items:stretch heredado de
   .m2-col-der), igual que la tarjeta de Comunicación reciente debajo. */
.m2-acciones{display:flex;flex-direction:column;gap:8px}
.btn-accion{
  display:flex;align-items:center;gap:10px;
  background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-md);
  padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--marino);
  box-shadow:var(--sombra-card);text-align:left;
}
.btn-accion svg.icon{width:15px;height:15px;color:var(--marino);flex:none}
.btn-accion:hover{background:rgba(11,95,116,.05)}
.btn-accion:focus-visible{outline:2px solid var(--lavanda);outline-offset:1px}

/* =====================================================================
   18. MÓDULO 0 — DASHBOARD EJECUTIVO (específico)
   ===================================================================== */
/* Cobranza pendiente: columna Cliente demasiado angosta partia "X"
   a 2 lineas en 4 de 5 filas (varias filas) -- mismo
   remedio de siempre: table-layout:fixed + % explicito por columna. A diferencia de otras tablas, aqui ademas hace falta white-space:nowrap en la celda
   Cliente (el problema no es una palabra sin espacio que no cabe, es que
   "X" SI tiene un espacio natural para partir -- con solo el %
   de columna seguiria partiendose ahi). */

.fin-item .tipo-label{color:var(--texto-suave);display:block;margin-bottom:6px}
.fin-item .tipo-dato{font-size:22px}
.fin-item.neg .tipo-dato{color:var(--marino)}

.inc-fila svg.icon{width:17px;height:17px;color:var(--texto-suave);flex:none}

/* =====================================================================
   19. MÓDULO 1 — CLIENTES (específico)
   ===================================================================== */
/* Encabezado de la lista con CTA "Nuevo cliente" -- mismo patron que
   .m3-encabezado/.evt-encabezado (header + boton, header con margin-bottom:0).
   flex-wrap:nowrap desde el inicio (bug ya documentado 4 veces en
   TRASPASO-UX.md #4.4 -- flex anidado con hijos que no envuelven bien). */
.m1-lista-encabezado{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:nowrap;margin-bottom:var(--sp-4)}
.m1-header{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.m1-avatar{
  width:72px;height:72px;border-radius:50%;flex:none;
  background:var(--marino);color:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;letter-spacing:.02em;
  border:3px solid var(--blanco);box-shadow:var(--sombra-card);
}
.m1-header-info{flex:1;min-width:200px}
.m1-header-info .tipo-h1{display:inline-block;margin-right:var(--sp-3);vertical-align:middle}
.m1-header .btn{margin-left:auto}

.stat-box{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--gris-piedra);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
}
.stat-box svg.icon{width:20px;height:20px;color:var(--marino);flex:none}
.stat-box .stat-valor{font-size:20px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.stat-box .stat-valor.alerta{color:var(--marino)}
.stat-box .stat-label{font-size:11px;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.03em}

/* ---- 19b. M1 — lista de clientes / ficha (subvistas dentro de #m1) ---- */
.m1-panel{display:none}
.m1-panel.activo{display:block}
.breadcrumb-link{cursor:pointer}
.breadcrumb-link:hover{text-decoration:underline;color:var(--marino)}
.tabla-clicable tbody tr{cursor:pointer}
.tabla-clicable tbody tr:hover td{background:var(--gris-piedra)}

.m1-frase-italica{font-size:13px;font-style:italic;color:var(--texto-suave);margin-top:4px}
.m1-btn-mas{
  width:40px;height:40px;border-radius:50%;flex:none;
  border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1;
}
.m1-btn-mas:hover{border-color:var(--marino)}
.m1-estado-destacado{
  display:flex;align-items:center;gap:var(--sp-3);
  background:rgba(151,209,10,.15);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);
}
.m1-estado-destacado .icon-badge{margin-bottom:0}
.stat-label-mini{font-size:11px;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.stat-valor-grande{font-size:28px;font-weight:700;color:var(--marino);line-height:1;font-variant-numeric:tabular-nums}
.stat-fila-2{display:flex;gap:var(--sp-3)}
.stat-fila-2 .stat-box{flex:1}
.m1-al-corriente{
  display:flex;align-items:center;gap:6px;margin-top:var(--sp-3);
  font-size:12.5px;font-weight:600;color:var(--indigo);
}
.m1-al-corriente svg.icon{width:15px;height:15px;flex:none}
.m1-pacientes-fila{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.m1-paciente-card{
  flex:1 1 calc(25% - var(--sp-3));min-width:110px;text-align:left;cursor:pointer;
  border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:var(--sp-3);background:var(--blanco);
}
.m1-paciente-card:hover{border-color:var(--marino)}

.m1-paciente-avatar{
  width:100%;height:104px;aspect-ratio:1;border-radius:var(--r-sm);margin-bottom:var(--sp-3);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--marino);
}
.m1-paciente-avatar.tinte-verde{background:rgba(211,221,24,.22)}
.m1-paciente-avatar.tinte-amarillo{background:rgba(248,217,15,.22)}
.m1-paciente-nombre{font-size:14px;font-weight:700;color:var(--marino)}
.m1-paciente-agregar{
  flex:1 1 calc(25% - var(--sp-3));min-width:110px;min-height:150px;cursor:pointer;
  border:1px dashed var(--gris-borde);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--texto-suave);font-size:13px;font-weight:600;
}
.m1-paciente-agregar:hover{border-color:var(--marino);color:var(--marino)}
.m1-agregar-icono{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--gris-borde);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.m1-agregar-icono svg.icon{width:16px;height:16px}
.barra-h-label-icono{display:flex;align-items:center;gap:6px}
.barra-h-label-icono svg.icon{width:14px;height:14px;color:var(--texto-suave);flex:none}
.m1-canal{display:inline-flex;align-items:center;gap:6px}
.m1-canal svg.icon{width:15px;height:15px;flex:none;color:var(--texto-suave)}
/* El ícono de WhatsApp usa stroke="#017B99" como atributo XML literal (no
   var(--indigo) por CSS de clase ni por style= en línea): en este motor
   WeasyPrint el stroke="currentColor" de un <path> no resuelve un color
   puesto por selector de clase en su ancestro, y var() tampoco se evalúa
   dentro de un atributo style="" en línea — mismo bug de fondo que el de
   stroke ya documentado en TRASPASO-UX.md §4, aplicado aquí a "color".
   Verificado con render aislado antes de esta entrega. */
.m1-notas{background:rgba(254,200,0,.10)}
.m1-notas-cuerpo{display:flex;gap:var(--sp-3);align-items:flex-start}
.m1-notas-cuerpo svg.icon{width:22px;height:22px;color:var(--marino);flex:none;margin-top:2px}
.m1-notas-lista{list-style:disc;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--marino)}

/* =====================================================================
   20. MÓDULO 3 — AGENDA / CALENDARIO (reutilizado en M11 Marketing)
   ===================================================================== */
.cal-day.hoy{border-color:var(--lavanda);border-width:2px;font-weight:700}
.cal-leyenda .item{display:flex;align-items:center;gap:6px}

.evidencia-marcador{
  display:inline-flex;flex:none;width:auto;align-items:center;gap:6px;
  background:var(--gris-piedra);border:1px solid var(--gris-borde);border-radius:var(--r-sm);
  padding:5px 10px;font-size:12px;font-weight:600;color:var(--texto-suave);
}
.evidencia-marcador svg.icon{width:14px;height:14px}

/* =====================================================================
   22. MÓDULO 8 — COBRANZA: antigüedad de saldos
   ===================================================================== */
.aging-item .tipo-dato{font-size:20px}
.aging-item .tipo-label{color:var(--texto-suave);margin-top:4px;font-size:10px}
.cuenta-cliente .nombre{font-size:13.5px;font-weight:600;color:var(--marino)}

/* =====================================================================
   23. MÓDULO 9 — GASTOS: dona SVG
   ===================================================================== */

/* =====================================================================
   24. MÓDULO 10 — COMUNICACIÓN: plantillas WhatsApp
   ===================================================================== */
.plantilla .nombre{font-size:13px;font-weight:600;color:var(--marino);margin-bottom:6px}
{width:36px;height:36px;color:var(--lavanda)}
{font-size:16px;font-weight:700;color:var(--marino);margin-bottom:2px}
{font-size:12.5px;color:var(--texto-suave);margin-bottom:var(--sp-3)}
{width:100%}

{font-size:16px;font-weight:700;color:var(--marino);margin-bottom:2px}
{font-size:12.5px;color:var(--texto-suave);margin-bottom:12px}
{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
{display:flex;flex-wrap:nowrap;gap:var(--sp-5)}

.check-fila.hecho .check-box svg.icon{width:12px;height:12px;color:var(--blanco)}

/* flexbox, no CSS grid: un grid anidado dentro de una celda de otro grid
   (.grid-2-1 > .card > .form-grid) colapsa su ancho en algunos motores de
   render — flex es robusto en el mismo anidamiento y se ve idéntico. */
.form-grid{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.form-grid .campo-form{flex:1 1 calc(50% - var(--sp-4));min-width:160px}
.form-full{flex:1 1 100%}

/* =====================================================================
   27. CHIP DE RIESGO (rojo, uso restringido — ver comentario en :root)
   ===================================================================== */
.chip-riesgo{background:rgba(179,38,30,.13);color:var(--rojo)}
.chip-riesgo .chip-dot{background:var(--rojo)}

/* =====================================================================
   28. SALUDO — encabezado M0
   ===================================================================== */

/* =====================================================================
   29. INSIGNIA DE ÍCONO EN CÍRCULO DE TINTE
   ===================================================================== */
.icon-badge{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--sp-3);flex:none;background:var(--lavanda)}
/* Igual que en Perritos House: la regla mide el <svg>, nunca las formas de
   adentro, que también llevan class="icon". Ahí se rompían los dibujos. */
.icon-badge > svg{width:24px;height:24px;color:var(--acento-tinte);flex:none}
/* Un tinte por indicador, todos dentro de la paleta: el tablero se lee de
   un vistazo sin que ninguno grite más que el dato. */
.icon-badge.t-indigo{background:var(--lavanda)}
.icon-badge.t-indigo .icon{color:var(--acento-tinte)}
.icon-badge.t-marino{background:rgba(11,95,116,.09)}
.icon-badge.t-marino .icon{color:var(--marino)}
.icon-badge.t-verde{background:var(--verde-fondo)}
.icon-badge.t-verde .icon{color:var(--verde-texto,#4A5600)}
.icon-badge.t-claro{background:rgba(53,187,202,.22)}
.icon-badge.t-claro .icon{color:#0191B4}
.icon-badge.tinte-amarillo{background:var(--lavanda)}
.icon-badge.tinte-verde{background:var(--verde-fondo)}
.icon-badge.tinte-morado{background:rgba(11,95,116,.09)}

/* KPI con insignia: header en fila (ícono a la izq, contenido a la der. en tarjetas
   de Resumen financiero) o insignia arriba (tarjetas de KPI principales) */
.kpi-delta.bien{color:var(--indigo)}
.kpi-delta.mal{color:var(--rojo)}

.fin-tile .icon-badge{margin-bottom:0}
.fin-tile .fin-tile-body .tipo-dato{font-size:22px}
.fin-tile .fin-tile-body .tipo-label{display:block;margin-top:2px;color:var(--texto-suave)}
.fin-tile .fin-tile-body .kpi-delta{margin-top:6px;font-size:12px}

/* =====================================================================
   30. SPARKLINE — mini barras crecientes (CSS puro, sin librerías)
   ===================================================================== */

/* =====================================================================
   31. ANILLOS — Ocupación por servicio (SVG, stroke-dasharray)
   ===================================================================== */

/* Conmutador de periodo (Hoy/Semana/Mes/Año) — mismo lenguaje visual que
   .vista-pill del topbar (activa = fondo amarillo, texto morado), pero es una
   clase independiente: .vista-pill lo controla setVista() por selector global
   (document.querySelectorAll('.vista-pill')) y reusar esa clase aquí haría que
   cambiar de vista (vista actual) le quitara "activa" a
   este selector sin querer. Va en su propia fila (no dentro de .card-head):
   junto al título "Ocupación por servicio" las 4 opciones no caben en una
   sola línea sin partir el título — separarlo evita tocar el ancho de
   .card-head (compartida) y mantiene los 3 encabezados de la fila idénticos
   (solo título, misma altura que sus vecinos). */

/* =====================================================================
   32. PRÓXIMAS ACTIVIDADES
   ===================================================================== */
.actividad-fila .icon-badge{margin-bottom:0;width:36px;height:36px}
.actividad-fila .icon-badge svg.icon{width:17px;height:17px}

/* =====================================================================
   33. MODALES — mismo sistema (card blanca, radio 12, borde E8E5E0)
   ===================================================================== */
.modal-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,95,116,.45);
  display:none;align-items:center;justify-content:center;padding:32px;z-index:300;
}
.modal-backdrop.abierto{display:flex}
.modal-caja{
  background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-lg);
  max-width:680px;width:100%;max-height:82vh;overflow:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:18px 22px;border-bottom:1px solid var(--gris-borde);
  position:sticky;top:0;background:var(--blanco);z-index:20;
}
.modal-header .tipo-h2{margin:0}
.modal-cerrar{
  display:inline-flex;flex:none;width:28px;height:28px;align-items:center;justify-content:center;
  border-radius:50%;color:var(--marino);font-size:18px;line-height:1;cursor:pointer;
}
.modal-cerrar:hover{background:rgba(11,95,116,.07)}
.modal-body{padding:20px 22px}
.modal-body .card-vacio{padding:0}
body.modal-abierto{overflow:hidden}

/* =====================================================================
   34. LOGO (sidebar)
   ===================================================================== */
.sidebar-logo svg.icon{width:40px;height:40px;color:var(--lavanda);flex:none}
/* .sidebar-logo/svg.icon/.marca ya no se usan (reemplazados por el logo real
   abajo) pero se dejan sin tocar -- limpiar codigo muerto no vale el riesgo
   con el reloj corriendo. Logo real del cliente, JPEG incrustado como data
   URI, sobre placa blanca -- mismo --r-lg (12px) que .card, sin inventar
   un radio nuevo. */
.sidebar-logo-placa{
  width:160px;
  margin:0 auto var(--sp-3);
  background:#FFFFFF;
  border-radius:var(--r-lg);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =====================================================================
   35. PÍLDORA DE AYUDA
   ===================================================================== */
.sidebar-soporte{
  display:flex;align-items:center;gap:8px;
  margin-top:var(--sp-4);padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);
  font-size:12px;color:rgba(255,255,255,.75);
}
.sidebar-soporte svg.icon{width:15px;height:15px;flex:none}

/* =====================================================================
   36. MÓDULO 3 — AGENDA SEMANAL (específico)
   ===================================================================== */
.m3-encabezado,.m5-encabezado{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.m5-encabezado .periodo-sw,.m5-encabezado .btn{flex:none;margin-left:auto}
.m3-encabezado .btn{flex:none}

.m3-controles{display:flex;align-items:center;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
/* El rango (Día/Semana/Mes) y las flechas de semana, movidos a la cabecera del
   calendario (Fernando 3-nov): van juntos, a la derecha del título «Calendario
   semanal». La .card-head ya reparte con space-between, así que el grupo cae
   solo a la derecha; aquí sólo se agrupan y se les quita el margen que traían de
   la barra de arriba. */
.m3-cal-controles{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end}
.m3-cal-controles .m3-semana-nav{margin:0}
/* nowrap adentro de cada grupo: si no cabe, el grupo completo baja de línea
   (m3-controles sí es flex-wrap), en vez de partir un pill del otro. */
.m3-vistas{display:flex;gap:8px;flex-wrap:nowrap}
/* La navegación de fecha deja de tener ancho fijo y de pegarse al borde:
   con 225px duros, "Octubre 2026" empujaba contra Día/Semana/Mes. Ahora se
   centra entre las vistas y el conmutador, y los tres bloques respiran. */
.m3-semana-nav{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 auto;
  justify-content:center;min-width:200px}
.m3-semana-nav-texto{text-align:center;min-width:150px}
.m3-semana-nav-flecha{
  display:flex;flex:none;width:28px;height:28px;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);
}
/* display:flex, no inline-flex: en el motor de verificación (WeasyPrint), un
   inline-flex de tamaño fijo con border-radius:50% dentro de un padre flex se
   duplicaba en un círculo fantasma desalineado (aislado y confirmado con una
   prueba separada) — flex (blockificado igual como flex-item) da un solo
   círculo, centrado con el texto de la fecha. */
.m3-semana-nav-flecha:hover{border-color:var(--marino)}
.m3-semana-nav-flecha svg.icon{width:14px;height:14px}
.m3-semana-nav-texto{font-size:13.5px;font-weight:600;color:var(--marino);white-space:nowrap}
/* Ficha de especialista: la vista por especialista era una lista de tablas
   apiladas; ahora es un directorio, y cada quien abre su propio calendario. */
.m3-staff-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:var(--sp-4)}
.m3-staff-ficha{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  border:1px solid var(--gris-borde);border-radius:var(--r-lg);background:var(--blanco);
  cursor:pointer;text-align:left;font:inherit;color:inherit}
.m3-staff-ficha:hover{border-color:var(--indigo);box-shadow:0 6px 18px rgba(11,95,116,.08)}
.m3-staff-top{display:flex;align-items:center;gap:var(--sp-3)}
.m3-staff-foto{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--lavanda);color:var(--acento-tinte);font-size:17px;font-weight:700;letter-spacing:.02em;
  overflow:hidden}
.m3-staff-foto img{width:100%;height:100%;object-fit:cover}
.m3-staff-id{min-width:0}
.m3-staff-id b{display:block;font-size:14px;color:var(--marino);font-weight:600}
.m3-staff-id span{font-size:12px;color:var(--texto-suave)}
.m3-staff-datos{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.m3-staff-dato{display:flex;flex-direction:column}
.m3-staff-dato b{font-size:17px;color:var(--marino);font-variant-numeric:tabular-nums}
.m3-staff-dato span{font-size:11.5px;color:var(--texto-suave)}
.m3-staff-barra{height:7px;border-radius:999px;background:var(--lavanda);overflow:hidden}
.m3-staff-barra i{display:block;height:100%;background:var(--indigo);border-radius:999px;min-width:3px}
.m3-staff-pie{font-size:12px;color:var(--indigo);font-weight:600}
/* Vista de mes: una cuadrícula de días con su carga, no once renglones */
.m3-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.m3-mes-cab{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--texto-suave);
  text-align:center;padding-bottom:4px}
.m3-mes-dia{min-height:76px;border:1px solid var(--gris-borde);border-radius:8px;padding:6px;
  background:var(--blanco);cursor:pointer;font:inherit;text-align:left;display:flex;
  flex-direction:column;gap:4px}
.m3-mes-dia:hover{border-color:var(--indigo)}
.m3-mes-dia.vacia{border:0;background:none;cursor:default}
.m3-mes-dia.hoy .num{background:var(--marino);color:var(--blanco)}
.m3-mes-dia .num{align-self:flex-start;width:21px;height:21px;border-radius:50%;display:grid;
  place-items:center;font-size:11.5px;font-weight:700;color:var(--marino)}
.m3-mes-dia .carga{font-size:11px;color:var(--texto-suave)}
.m3-mes-dia .pastilla{font-size:10px;border-radius:5px;padding:2px 5px;background:var(--lavanda);
  color:var(--acento-tinte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m3-mes-dia.cerrada{background:repeating-linear-gradient(135deg,#F4FBFD,#F4FBFD 6px,#E4F4F9 6px,#E4F4F9 12px);cursor:default}

/* Calendario semanal: filas armadas con flexbox, no CSS Grid anidado.
   Motivo (TRASPASO-UX.md §4.2): un display:grid dentro de la celda de OTRO
   grid (.grid-2-1 > .col > .card) colapsa su ancho en este motor cuando
   además mezcla filas de altura variable. Aquí cada .m3-hora-fila tiene
   altura fija e idéntica (con o sin bloque adentro), así que ni siquiera
   entra en el escenario de riesgo — pero se usa flex de todos modos, ya
   verificado en el resto del archivo (.form-grid, etc). */
.m3-semana{display:flex;flex-direction:column}
.m3-semana-fila{display:flex;align-items:stretch}
.m3-semana-hora-col{width:44px;flex:none}
.m3-semana-dia-col{flex:1 1 0;min-width:0}
.m3-semana-head{padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--gris-borde)}
.m3-dia-cabeza{display:flex;flex-direction:column;align-items:center;gap:4px}
.m3-dia-nombre{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--texto-suave)}
.m3-dia-num{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--marino);
}
.m3-dia-num.hoy{background:var(--marino);color:var(--blanco)}

/* Con dos citas a la misma hora el reparto a lo ancho funciona; con tres o
   más quedaban ilegibles. El renglón pasa a alto MÍNIMO y las citas se
   envuelven a un segundo piso, igual que en Perritos House. */
.m3-hora-fila{min-height:46px;border-top:1px solid var(--gris-borde)}
/* La hora va EN MEDIO de su renglón, no pegada a la línea de arriba.
   Mismo arreglo que en la otra plataforma del núcleo. */
.m3-hora-label{
  height:100%;display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;font-size:10.5px;color:var(--texto-suave);line-height:1;
}
.m3-dia-celda{min-height:46px;padding:2px;border-left:1px solid var(--gris-borde);
  display:flex;gap:2px;align-items:stretch;flex-wrap:wrap}

.m3-bloque{
  min-height:40px;flex:1 1 72px;min-width:0;border-radius:5px;padding:3px 5px;overflow:hidden;
  cursor:pointer;color:var(--marino);box-sizing:border-box;
}
/* El resumen de las que no caben: abre la hora completa en lugar de
   comprimir seis citas hasta que ninguna se lea. */
.m3-mas{flex:0 0 26px;border-radius:5px;border:1px dashed var(--gris-borde);background:none;
  font-size:10.5px;font-weight:700;color:var(--texto-suave);cursor:pointer;font-family:inherit}
.m3-mas:hover{border-color:var(--indigo);color:var(--indigo);background:var(--lavanda)}
.m3-bloque b{display:block;font-size:10.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-bloque span{display:block;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-bloque:hover{opacity:.85}
.m3-bloque.activo{outline:2px solid var(--marino);outline-offset:1px}

/* Seis tipos de servicio — Decisión B del CMO (22-sep-2026): dentro de la
   paleta cerrada, sin azul/lila/rosa/gris de la referencia. */
.m3-tipo-fisioterapia{background:var(--lavanda)}
.m3-tipo-crioterapia{background:var(--indigo)}

.m3-leyenda{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-4);font-size:12px;color:var(--texto-suave)}
.m3-leyenda .item{display:flex;align-items:center;gap:6px;white-space:nowrap}
/* nowrap por entrada: si no cabe, toda la fila hace wrap como conjunto
   (m3-leyenda ya tiene flex-wrap:wrap) en vez de partir "Crioterapia" o
   "Presoterapia · sesión" a la mitad de una palabra. */
.m3-leyenda .sw{width:11px;height:11px;border-radius:3px;flex:none;box-sizing:border-box}

/* Panel de detalle */
.m3-detalle{position:relative}
.m3-cerrar{
  position:absolute;top:var(--sp-4);right:var(--sp-4);width:24px;height:24px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--texto-suave);
}
.m3-cerrar:hover{background:var(--gris-piedra);color:var(--marino)}
.m3-cerrar svg.icon{width:14px;height:14px}
.m3-detalle-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);padding-right:var(--sp-6)}
.m3-detalle-avatar,.m3-detalle-avatar-ini{
  width:60px;height:60px;border-radius:50%;flex:none;
  border:3px solid var(--blanco);box-shadow:var(--sombra-card);
}

.m3-detalle-avatar-ini{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--marino)}
.m3-detalle-id .tipo-h2{font-size:16px}
.m3-detalle-id .chip{margin-top:6px}
.m3-detalle-tabs{margin-bottom:var(--sp-3);flex-wrap:nowrap}
/* Variante angosta: 4 pestañas (Detalles/Cliente/Historial/Notas) en el panel
   de detalle de M3, que es más angosto que otros paneles con .tabs. Dos
   causas, aisladas por separado con pruebas mínimas:
   1. Con el padding/margen genérico de .tab no caben en una fila y "Notas"
      se parte a un segundo renglón — se reduce SOLO aquí (no se toca .tab
      global, que sigue sirviendo a M1/M2/etc.) el padding horizontal y el
      margen entre pestañas; tipografía y color intactos.
   2. Aun con las 4 cabiendo de sobra en el ancho real del panel (~377px de
      contenido, y las 4 pestañas miden ~316px con este padding — 60px de
      margen), .tabs hereda flex-wrap:wrap del sistema y el motor de
      verificación (WeasyPrint 67.0) fuerza igual un wrap del 4° elemento en
      este contexto de grid-item — reproducido en aislado, desaparece con
      flex-wrap:nowrap. Con las 4 pestañas fijas y cortas de este panel
      nowrap es además el comportamiento correcto (nunca deben partirse). */
.m3-detalle-tabs .tab{padding:10px 2px;margin-right:10px}
.m3-detalle-acciones{display:flex;gap:8px;margin-top:var(--sp-4);flex-wrap:wrap}
.m3-detalle-acciones .btn{flex:1 1 auto;justify-content:center;padding:9px 8px;font-size:12.5px}
.btn-riesgo{background:transparent;border-color:var(--rojo);color:var(--rojo)}
.btn-riesgo:hover{background:rgba(179,38,30,.06)}

/* Próximos servicios de hoy — fila con avatar mini de iniciales */
.m3-hoy-fila{display:flex;align-items:center;gap:var(--sp-3);padding:9px 0}
.m3-hoy-fila + .m3-hoy-fila{border-top:1px solid var(--gris-borde)}
.m3-hoy-hora{font-size:12px;color:var(--texto-suave);flex:none;width:44px}
.m3-avatar-mini{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--marino);
}
.m3-hoy-texto{flex:1;min-width:0}
.m3-hoy-texto b{display:block;font-size:13.5px;color:var(--marino);font-weight:600}
.m3-hoy-texto span{font-size:12px;color:var(--texto-suave)}

/* Solicitudes de reprogramación: table-layout fijo para que las columnas nunca empujen
   la tarjeta más allá de su ancho (la tabla base es table-layout:auto y
   el botón de acción la desbordaba en tarjetas angostas de grid-3). */
,{width:15%}
,{width:30%}
,{width:16%}
,{width:19%}
,{width:20%}
/* Nombres de paciente: siempre cortos y de una sola palabra — se fuerza una
   sola línea para que no se partan tipo "Rock/y" (feo e innecesario). */
{white-space:nowrap}

{font-size:8.5px;letter-spacing:0;overflow-wrap:break-word;padding-right:2px}
/* ".tabla tbody td" (base, sección 10) tiene más especificidad que un simple
   ".m3-tabla-espera td" (clase+elemento vs clase+elemento+elemento) — por
   eso el override tenía que repetir "tbody" para ganar el mismo nivel y
   luego ganar por orden de aparición (ya verificado con el render). */
{font-size:11px;line-height:1.35;padding-right:4px;overflow-wrap:break-word}
{padding-right:0}
{padding:6px 4px;font-size:10.5px;white-space:normal;text-align:center;width:100%}

/* Fila de controles (chips de filtro + buscador + botón de filtro +
   "Registrar entrada"): flexbox, no grid, y todo lo "clicable" es
   <span role="button"> — nunca <button> como hijo directo de un
   contenedor flex (bug documentado en TRASPASO-UX.md §4.3). */
/* .filtros (línea 316) es compartida y otros módulos sí necesitan que
   envuelva internamente; aquí vive anidada como UN solo hijo flex de
   .exp-controles (que también es flex-wrap:wrap) junto al buscador/botón de
   filtro/CTA — sin esto, a ancho de laptop (~1440px) el 4° pill ("Salidas
   hoy") se partía solo a una 2ª línea mientras sus hermanos se quedaban
   arriba (verificado con render aislado). Regla más específica, no toca la
   base: los 4 pills nunca se parten entre sí; si algún día no cupiera nada,
   es .exp-controles quien decide bajar el bloque completo, no .filtros por
   su cuenta. El buscador (línea 325, max-width:320px compartido con
   M1/M2/M8) se acota más aquí para dejar espacio real en la fila.*/
.exp-controles .filtros{flex-wrap:nowrap}
/* flex-wrap:nowrap por sí solo no basta: sin límite de encogimiento, cada
   pill se angosta hasta partir su propia etiqueta a 2 líneas ("En\nsesión")
   en vez de mantenerse como cápsula de una sola línea (visto en render a
   1440px). flex:none + white-space:nowrap fija el ancho natural de cada
   pill; si el bloque completo no cabe, es .exp-controles (flex-wrap:wrap)
   quien baja TODO .filtros a una 2ª línea, nunca un pill suelto. */
.exp-controles .filtro-chip{white-space:nowrap;flex:none}
.exp-controles .buscador{max-width:240px}
/* Alturas de caja desiguales en la fila (pills ~31px vs buscador ~40px vs
   botones ~42px, por padding/font-size distintos de cada componente base) --
   align-items:center centra cada caja pero no las iguala. Se sube el
   padding vertical del pill SOLO aqui (no toca .filtro-chip base, que
   sirve a M1/M8/etc. con su propia altura) hasta emparejar la altura real
   de .buscador/.btn, medido con PIL. */
.exp-controles .filtro-chip{padding:11px 16px}

/* Avatar circular mini (32px) para la columna Paciente de la tabla ancha —
   mismo criterio visual que .m1-paciente-avatar/.m3-avatar-mini, pero con
   las 3 variantes de tinte que esta pantalla necesita (M3 sólo declara 2). */
.exp-paciente-cell{display:flex;align-items:center;gap:8px}
.exp-avatar-mini.tinte-verde{background:rgba(211,221,24,.22)}
.exp-avatar-mini.tinte-amarillo{background:rgba(248,217,15,.22)}
.exp-avatar-mini.tinte-morado{background:rgba(11,95,116,.10)}

/* Tabla ancha "Entradas y salidas de hoy": 7 columnas de texto + 1 columna
   de sólo-ícono con avatar en la 2ª columna — exactamente el patrón que
   TRASPASO-UX.md marca como propenso a desalinear encabezado/filas o partir
   texto a 2 líneas en WeasyPrint. Mismo remedio ya verificado en
, no deben partirse nunca). */
,{width:10%}
,{width:15%}
,{width:15%}
,{width:13%}
,{width:10%}
,{width:15%}
,{width:13%}
,{width:9%}
{overflow-wrap:break-word;padding-right:2px}
{overflow-wrap:break-word;white-space:nowrap}
{padding-right:0;white-space:normal;text-align:right}

/* Ocupación en tiempo real: ícono + etiqueta + barra + fracción + %.
   Fila propia en flexbox (no reutiliza el grid interno de .barra-h-fila,
   que sólo trae espacio para un número final, no para "12/20" + "60%") —
   sí reutiliza .barra-h-pista/.barra-h-valor tal cual para la barra. */

/* Recordatorios y alertas: mismo look que .actividad-fila (M0) pero con
   botón de editar al final — se declara aparte en vez de extender la clase
   compartida para no arriesgar el render ya verificado de M0. */
.exp-recordatorio-fila .icon-badge{margin-bottom:0;width:36px;height:36px}
.exp-recordatorio-fila .icon-badge svg.icon{width:17px;height:17px}

/* Pacientes en sesión: NO reutiliza .m1-paciente-card tal cual — esa clase
   trae min-width:110px pensado para una fila ancha de 4 columnas (como en
   M1); aquí vive en la columna angosta de .grid-2-1, así que con 4 tarjetas
   de 110px mínimo el 4° elemento no cabía, se iba a su propia línea y, al
   quedar solo con flex-grow:1, se estiraba a todo el ancho de la tarjeta
   (verificado en render aislado). Fila propia sin min-width grande, más
   una altura de avatar reducida (por selector descendiente, sin tocar la
   regla base de .m1-paciente-foto/.m1-paciente-avatar que usa M1). */
.exp-sesión-item .m1-paciente-foto,.exp-sesión-item .m1-paciente-avatar{height:68px;margin-bottom:6px;font-size:15px}
.exp-sesión-item .m1-paciente-nombre{font-size:12.5px}

/* Encabezado con CTA: mismo patrón que .m3-encabezado — el botón "Registrar
   evento" vive pegado al modulo-header (no dentro de la fila de
   filtros), header con margin-bottom:0. Clase propia, se copia el patrón,
   no se reutiliza .m3-encabezado tal cual. */
/* Fila de controles (3 pills de tipo + selector de periodo + buscador):
   mismo remedio ya verificado (bug de flex
   anidado con white-space:nowrap) — flex, no grid, y flex-wrap:nowrap en
   los pills desde el inicio, para que si algo no cabe sea .evt-controles
   quien baje TODO el bloque a una 2ª línea, nunca un pill suelto. Clases
   propias (no se reutiliza .m3- / .exp- tal cual, se copia el patrón). */
.evt-controles .filtros{flex-wrap:nowrap}
.evt-controles .filtro-chip{white-space:nowrap;flex:none}
.evt-controles .buscador{max-width:240px}

,{width:7%}
,{width:13%}
,{width:10%}
,{width:21%}
,{width:16%}
,{width:13%}
,{width:20%}
{overflow-wrap:break-word;padding-right:2px}
{overflow-wrap:break-word}
/* SEVERIDAD/ESTADO son chips de texto largo ("En seguimiento") dentro de
   columnas angostas — .chip tiene white-space:nowrap (sección 9, base
   compartida), así que overflow-wrap en la celda no basta para evitar que
   el pill se desborde de su columna (verificado en render aislado). Se
   reduce SOLO aquí el tamaño del chip, no la clase base .chip. */
{font-size:11px;padding:4px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
{background:var(--gris-piedra)}

/* Panel de detalle — mismo patrón que .m3-detalle (crece a la altura de la
   columna vía .grid-2-1{align-items:stretch}, no se toca la regla base). */

/* padding-right SOLO en el nombre (1ª línea), no en todo el bloque: el chip
   absoluto solo ocupa el alto de esa línea — reservar el espacio en el
   contenedor completo apretaba también diagnóstico/familia en líneas de abajo sin
   necesidad (verificado en render aislado). */

/* Evidencia: fila de marcadores FUERA del flex icono+etiqueta+valor de
   .campo-fila (no anidada como "valor"), para que reciba el ancho completo
   de la tarjeta en vez de competir por espacio dentro de esa fila — con el
   patrón anidado los 3 marcadores se apilaban uno por línea en vez de ir
   lado a lado (verificado en render aislado), inflando la altura del panel
   más de lo necesario. */
/* display:block, NO flex: .evidencia-marcador ya es inline-flex por su cuenta
   (sección 21) — dejarlos fluir como cajas inline dentro de un bloque normal
   evita el motor de flex-wrap por completo. Con flex-wrap:wrap en el
   contenedor los 3 marcadores se apilaban uno por línea con un borde
   duplicado (fragmentación de caja de WeasyPrint, mismo síntoma que el bug
   de los botones de acciones) en vez de ir lado a lado — reproducido y
   confirmado en render aislado. margin en vez de gap: gap no aplica sin
   contenedor flex/grid. */

/* float, NO flex: flex-wrap:wrap fragmentaba la caja (borde duplicado) y
   flex-wrap:nowrap encogía los marcadores por debajo de su contenido (el
   texto se partía "1" / "foto" en 2 líneas dentro de su propia caja) y aun
   así el conjunto se salía por el borde derecho de la tarjeta — la caja de
   flex de este motor no respeta flex:none/flex-shrink:0 en este contexto
   (verificado en 3 intentos distintos, todos aislados y confirmados con
   render). float:left es la técnica más básica de CSS, sin motor de flex
   de por medio, y sí coloca los 3 marcadores lado a lado sin encimarse. */
.evt-evidencia-fila .evidencia-marcador{float:left;margin:0 8px 8px 0}

.nav-item{white-space:normal;align-items:flex-start;line-height:1.3}
.nav-item .icon{margin-top:1px}
.nav-item svg{flex:none}

/* 32. MÓDULO 6 — INVENTARIOS (específico)
   Pestañas de categoría: mismo .filtro-chip de siempre, con ícono — igual
   que .evt-controles, flex-wrap:wrap en el contenedor (no nowrap forzado,
   aquí SÍ queremos que las 8 pestañas envuelvan a 2 líneas si no caben,
   no que se corten ni se encimen con nada). */
/* Encabezado de M6 — causa raíz real, encontrada por aislamiento binario,
   no por la hipótesis original del coordinador (flex anidado): CUALQUIER
   .btn-secundario (borde+fondo transparente) que sea ITEM DIRECTO de un
   contenedor flex O grid, sin importar cuántos niveles ni qué tan simple
   el contenedor, sale con un borde fantasma duplicado en este motor —
   reproducido en aislamiento mínimo de una sola línea, y confirmado que
   YA le pasaba también a "Reabastecer" (.btn-secundario.btn-sm) dentro de
   .m2-servicio-fila, algo que nadie había notado porque nunca se hizo zoom
   suficiente — no es nuevo de esta ronda, es preexistente en todo el
   archivo. Además: envolver 2 botones juntos en un solo contenedor con
   ancho automático (flex O grid) subcalcula el ancho combinado (mide solo
   1 de los 2) y produce overflow fuera de la página — probado con
   inline-block, float, y grid con una sola celda "auto"; los tres fallan
   igual. Única combinación que resuelve AMBOS problemas a la vez: grid de
   3 columnas (1fr para el título, auto para cada botón) con CADA botón
   envuelto en su propio <div> plano (ni flex ni grid) que es el que
   participa como item del grid — el <div> absorbe el "ser item de layout"
   (así el motor no le duplica el borde a nada, porque un <div> sin borde
   no tiene borde que duplicar) y el grid mide cada columna auto por
   separado (1 botón por columna, no 2 juntos), evitando el subcálculo.
   No toca `.evt-encabezado` compartida — este bloque ya no la usa. */
.m6-tabs .filtro-chip{gap:6px;white-space:nowrap}
.m6-tabs .filtro-chip svg.icon{width:14px;height:14px;flex:none}

/* Mismo patrón de tabla angosta
, para que "Vendaje neuromuscular" o "Toalla desechable"
   no partan la columna Producto ni empujen el resto. */

/* 33. MÓDULO 7 — VENTAS Y FACTURACIÓN (específico)
   "Ventas por servicio" reusa .barra-h-fila (ya usado en M0/M1) pero con
   una columna más (% además de monto) — modificador local, no toca la
   base de 3 columnas que usan M0/M1. */
/* Gráfica "Ventas mensuales": envoltura eje+área en flex (nivel 1), el área
   es un bloque normal (position:relative, NO flex) que contiene .meses-grid
   (flex, nivel 2) — flex>bloque>flex, no flex anidado directo en flex, para
   no repetir el bug ya documentado de huérfanos en WeasyPrint. */
.m7-nota-verde svg.icon{width:16px;height:16px;color:var(--indigo);flex:none}
/* .icon-badge.tinte-* está definido, no .m7-rank-badge.tinte-* — se
   confirmó con render que sin esto el círculo queda sin fondo (bug
   encontrado y corregido antes de reportar). */
.m7-rank-badge.tinte-amarillo{background:rgba(248,217,15,.22)}
.m7-rank-badge.tinte-verde{background:rgba(211,221,24,.22)}
.m7-rank-badge.tinte-morado{background:rgba(11,95,116,.10)}
.exp-paciente-ini{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;font-size:10px;font-weight:700;margin-right:8px;flex:0 0 26px;letter-spacing:.02em}
.pm-wordmark{font-size:23px;font-weight:700;letter-spacing:-.02em;color:#07566B;display:block;text-align:center;line-height:1}
.sidebar-brand .sidebar-logo-placa{background:#fff;border-radius:12px;padding:12px 10px}
.reuso{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:9px 13px;border-radius:7px;font-size:12.5px;line-height:1.45;border:1px solid #CFE6EE;background:#fff}
.reuso b{font-weight:600}
.reuso .sello{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:3px 8px;border-radius:3px;white-space:nowrap;flex:none}
.reuso.listo{border-left:3px solid #D3DD18}
.reuso.listo .sello{background:#EDF7A8;color:#4A5600}
.reuso.falta{border-left:3px solid #017B99}
.reuso.falta .sello{background:#D6F1F8;color:#016E88}
.m3-tipo-fisioterapia{background:#017B991F;border-left:3px solid #017B99}
.m3-leyenda .sw.m3-tipo-fisioterapia{background:#017B99;border-left:none}
.m3-tipo-camara{background:#07566B1F;border-left:3px solid #07566B}
.m3-leyenda .sw.m3-tipo-camara{background:#07566B;border-left:none}
.m3-tipo-crioterapia{background:#22CBE01F;border-left:3px solid #22CBE0}
.m3-leyenda .sw.m3-tipo-crioterapia{background:#22CBE0;border-left:none}
.m3-tipo-presoterapia{background:#35BBCA1F;border-left:3px solid #35BBCA}
.m3-leyenda .sw.m3-tipo-presoterapia{background:#35BBCA;border-left:none}
.m3-tipo-descarga{background:#016E881F;border-left:3px solid #016E88}
.m3-leyenda .sw.m3-tipo-descarga{background:#016E88;border-left:none}
.m3-tipo-cavitacion{background:#8CE6F21F;border-left:3px solid #8CE6F2}
.m3-leyenda .sw.m3-tipo-cavitacion{background:#8CE6F2;border-left:none}
.m3-tipo-radiofrecuencia{background:#0191B41F;border-left:3px solid #0191B4}
.m3-leyenda .sw.m3-tipo-radiofrecuencia{background:#0191B4;border-left:none}
.m3-tipo-cosmetologia{background:#015C731F;border-left:3px solid #015C73}
.m3-leyenda .sw.m3-tipo-cosmetologia{background:#015C73;border-left:none}
.m3-col-cerrada .m3-dia-cabeza{opacity:.45}
.m3-cerrado{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-texto,#5A6672);margin-top:2px}
.m3-celda-cerrada{background:repeating-linear-gradient(135deg,#F4FBFD,#F4FBFD 6px,#E4F4F9 6px,#E4F4F9 12px)}
.m3-leyenda .dur{color:#5A6672;font-size:11px;margin-left:4px}
.m3-bloque[hidden]{display:none!important}

/* =====================================================================
   FICHA DE PACIENTE — referencia de Edna, 30 sep 2026
   ===================================================================== */
.m1-panel.pf{display:none}
.m1-panel.pf.activo{display:flex;flex-direction:column;gap:var(--sp-5)}
.pf:not(.m1-panel){display:flex;flex-direction:column;gap:var(--sp-5)}
.pf-cab{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
.pf-avatar{width:72px;height:72px;border-radius:50%;background:var(--lavanda);color:var(--acento-tinte);
  display:grid;place-items:center;font-size:24px;font-weight:700;letter-spacing:.02em;flex:none}
.pf-ident{flex:1 1 260px;min-width:0;padding-top:var(--sp-2)}
.pf-nombre-fila{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.pf-nombre-fila h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--marino);line-height:1.1}
.pf-meta{margin-top:var(--sp-2);font-size:14px;color:var(--texto-suave)}
.pf-acciones{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;padding-top:var(--sp-2)}
.pf-btn{padding:10px 18px;border-radius:var(--r-md);font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.pf-btn-pri{background:var(--indigo);color:#fff}
.pf-btn-pri:hover{filter:brightness(1.06)}
.pf-btn-sec{background:var(--blanco);color:var(--marino);border-color:var(--gris-borde)}
.pf-btn-sec:hover{border-color:var(--indigo);color:var(--indigo)}
.pf-btn-mas{width:36px;height:36px;border-radius:var(--r-md);color:var(--texto-suave);font-size:18px;
  background:none;border:none;cursor:pointer}
.pf-btn-mas:hover{background:var(--lavanda);color:var(--acento-tinte)}

.pf-tabs{display:flex;gap:var(--sp-6);border-bottom:1px solid var(--gris-borde);overflow-x:auto}
.pf-tab{padding:0 0 12px;font-size:14px;font-weight:600;color:var(--texto-suave);
  background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.pf-tab:hover{color:var(--marino)}
.pf-tab.activo{color:var(--indigo);border-bottom-color:var(--indigo)}

.pf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.pf-grid2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
@media(max-width:1180px){.pf-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.pf-grid3,.pf-grid2{grid-template-columns:minmax(0,1fr)}}

.pf-card{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sombra-card)}
.pf-card-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.pf-card-cab h3{margin:0;font-size:16px;font-weight:700;color:var(--marino)}
.pf-link{font-size:13px;font-weight:600;color:var(--indigo);background:none;border:none;cursor:pointer;padding:0}
.pf-link:hover{text-decoration:underline}

.pf-fila{display:grid;grid-template-columns:20px minmax(90px,1fr) minmax(0,1.5fr);align-items:start;
  gap:var(--sp-3);padding:11px 0;border-bottom:1px solid #E4F4F9}
.pf-fila:last-child{border-bottom:none;padding-bottom:0}
.pf-ico{width:18px;height:18px;color:var(--texto-suave);flex:none;margin-top:1px}
.pf-et{font-size:13px;color:var(--texto-suave);line-height:1.45}
.pf-val{font-size:13.5px;font-weight:500;color:var(--marino);line-height:1.45;word-break:break-word}

.pf-hist{display:grid;grid-template-columns:20px 1fr auto 16px;align-items:center;gap:var(--sp-3);
  width:100%;padding:11px 0;border:none;border-bottom:1px solid #E4F4F9;background:none;
  cursor:pointer;text-align:left}
.pf-hist:last-child{border-bottom:none;padding-bottom:0}
.pf-hist:hover .pf-et{color:var(--marino)}
.pf-hist:hover .pf-chev{color:var(--indigo)}
.pf-num{font-size:14px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.pf-hist[data-alerta="1"] .pf-ico,.pf-hist[data-alerta="1"] .pf-num{color:var(--rojo)}
.pf-chev{width:15px;height:15px;color:#8CE6F2}

.pf-tabla-env{overflow-x:auto}
.pf-tabla{width:100%;border-collapse:collapse}
.pf-tabla th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-suave);padding:0 var(--sp-3) 10px 0;border-bottom:1px solid var(--gris-borde);white-space:nowrap}
.pf-tabla td{padding:11px var(--sp-3) 11px 0;border-bottom:1px solid #E4F4F9;font-size:13px;
  color:var(--marino);vertical-align:middle}
.pf-tabla tr:last-child td{border-bottom:none}
.pf-fecha{color:var(--texto-suave);white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-usuario{color:var(--texto-suave);white-space:nowrap}
.pf-canal-td{white-space:nowrap}
.pf-canal{width:16px;height:16px;display:block}
.pf-canal-placa{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;
  margin-right:9px;vertical-align:-8px;flex:none}

.pf-cita{background:var(--lavanda);border-radius:var(--r-md);padding:var(--sp-3)}
.pf-cita-cab{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.pf-cita-cab .pf-ico{width:22px;height:22px;color:var(--indigo);margin-top:2px}
.pf-cita-fecha{display:flex;flex-direction:column;gap:2px;flex:1}
.pf-cita-fecha .dia{font-size:12.5px;color:var(--texto-suave)}
.pf-cita-fecha .fecha{font-size:19px;font-weight:700;color:var(--marino);letter-spacing:-.01em}
.pf-cita-fecha .hora{font-size:13px;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.pf-cita-detalle{background:var(--blanco);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.pf-cita-detalle .pf-fila{grid-template-columns:20px minmax(80px,auto) minmax(0,1fr)}
.pf-cita-acciones{display:flex;gap:var(--sp-2)}
.pf-cita-acciones .pf-btn{flex:1;text-align:center}
/* Sin próxima cita: en vez de la tarjeta llena de «—» —que se lee como datos
   que fallaron al cargar—, un bloque centrado con el estado y el boton para
   agendar. La tarjeta es flex-column; este bloque toma el alto para quedar al
   centro. */
.pf-cita-vacia{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-3);text-align:center}
.pf-cita-vacia-txt{color:var(--texto-suave);font-size:14px}

/* barra superior — sucursal, fecha y usuario */
.topbar-der{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.tb-sel,.tb-fecha,.tb-user{display:flex;align-items:center;gap:var(--sp-2);
  border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:7px 12px;
  background:var(--blanco);font-size:13px;font-weight:500;color:var(--marino);white-space:nowrap}
.tb-user{padding:5px 8px 5px 5px}
.tb-ico{width:16px;height:16px;color:var(--texto-suave);flex:none}
.tb-chev{width:14px;height:14px;color:var(--texto-suave);flex:none}
.tb-ini{width:28px;height:28px;border-radius:50%;background:var(--lavanda);color:var(--acento-tinte);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em}
@media(max-width:820px){.tb-sel,.tb-fecha{display:none}}

/* formularios de edición */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.form-grid .campo-form.ancho{grid-column:1 / -1}
@media(max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.campo-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:6px}
.campo-form .input{width:100%;padding:9px 12px;border:1px solid var(--gris-borde);
  border-radius:var(--r-md);font-size:13.5px;color:var(--marino);background:var(--blanco);font-family:inherit}
/* El foco era un cuadro con esquina viva y, al picar la etiqueta, el texto
   del rótulo se seleccionaba y dejaba otro rectángulo largo encima del campo.
   Ahora el campo enfocado se llena como pastilla del mismo azul, y la
   etiqueta ya no es seleccionable. */
.campo-form label{user-select:none;-webkit-user-select:none}
.campo-form .input,.campo-form .select{border-radius:999px}
.campo-form .input:focus,.campo-form .select:focus{outline:none;border-color:var(--indigo);
  background:rgba(53,187,202,.09);box-shadow:0 0 0 3px rgba(53,187,202,.18)}
.modal-pie{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);position:sticky;bottom:0;background:var(--blanco);z-index:20;
  border-top:1px solid var(--gris-borde)}

/* perfil de acceso — recepción / médico */
.rol-sw{display:flex;gap:8px;flex-wrap:wrap;background:none;border:0;padding:0}
.rol-op{display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .16s ease,color .16s ease,border-color .16s ease}
.rol-op:not(.activo):hover{border-color:var(--marino);background:var(--realce)}
.rol-op.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.rol-op.activo:hover{filter:brightness(.97)}
.pf-tab[hidden],.nav-item[hidden]{display:none!important}
.rol-aviso{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--lavanda);
  border-left:3px solid var(--indigo);border-radius:var(--r-md);padding:12px 15px;
  font-size:13px;line-height:1.5;color:var(--marino);margin-bottom:var(--sp-4)}
.rol-aviso b{font-weight:600}

/* ===== Motor de agenda — núcleo compartido, configuración de PMedic ===== */
/* Agendar es una secuencia, no un formulario largo: primero quién, qué y
   cuándo; luego la hora, que sólo tiene sentido una vez fijado lo anterior;
   al final las observaciones. Separado en pasos, nadie tiene que deslizar
   para encontrar el botón ni ve horas de un día que todavía no escogió. */
.cita-pasos{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.cita-paso{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--texto-suave);background:var(--humo);
  border:1px solid var(--gris-borde)}
.cita-paso i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--gris-borde);color:var(--blanco);font-size:11px;font-style:normal}
.cita-paso.activo{color:var(--acento-tinte);background:var(--lavanda);border-color:var(--acento-tinte)}
.cita-paso.activo i{background:var(--indigo)}
.cita-paso.hecho i{background:var(--verde)}
.cita-resumen{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding:11px 14px;
  border-radius:10px;background:var(--lavanda);font-size:13px;color:var(--marino)}
.cita-resumen span{display:flex;align-items:center;gap:6px}
.cita-resumen .et{color:var(--texto-suave);font-size:12px}
.cita-resumen b{font-weight:600}
/* El campo que abre una lista se ve y se comporta como el buscador de
   paciente: misma caja, misma lista, mismos renglones. Un desplegable del
   sistema operativo rompía el formato en medio del formulario. */
.input-lista{cursor:pointer;background-image:none;padding-right:34px}
.busca-caja .input-lista + input + .busca-lista{margin-top:4px}
.busca-caja{position:relative}
.busca-flecha{position:absolute;right:12px;top:50%;margin-top:-4px;width:9px;height:9px;
  border-right:2px solid var(--texto-suave);border-bottom:2px solid var(--texto-suave);
  transform:rotate(45deg);pointer-events:none}
.busca-op.elegida{background:var(--lavanda);color:var(--acento-tinte)}
.busca-op .fam{margin-left:auto;font-size:12px;color:var(--texto-suave)}
.cita-flujo{display:flex;flex-direction:column;gap:var(--sp-4)}
.cita-flujo .campo-form{margin-bottom:0}
.cita-par{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.cita-par .campo-form{flex:1 1 180px;margin-bottom:0}
.cita-flujo label{display:flex;align-items:center;gap:8px}
.cita-flujo .paso{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--indigo,#017B99);color:#fff;font-size:11px;font-weight:700;flex:none}
.busca-caja{position:relative}
.busca-lista{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:4px;max-height:208px;
  overflow-y:auto;background:#fff;border:1px solid var(--gris-borde);border-radius:10px;
  box-shadow:0 8px 20px rgba(11,95,116,.12)}
.busca-op{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 12px;
  font:inherit;text-align:left;cursor:pointer;color:var(--texto,#07566B)}
.busca-op:hover,.busca-op:focus-visible,.busca-op.marcada{background:var(--realce);outline:none}
.busca-op .fam{margin-left:auto;font-size:12px;color:var(--texto-suave)}
.busca-vacio{padding:10px 12px;font-size:13px;color:var(--texto-suave)}
.cal-chico{border:1px solid var(--gris-borde);border-radius:12px;background:#fff;padding:12px}
.cal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-mes{font-weight:600;font-size:14px;text-transform:capitalize}
.cal-flecha{width:30px;height:30px;border:1px solid var(--gris-borde);border-radius:8px;background:#fff;
  cursor:pointer;font:inherit;line-height:1}
.cal-flecha:hover{border-color:var(--indigo,#017B99)}
.cal-flecha:disabled{opacity:.35;cursor:not-allowed}
.cal-dias,.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dias div{text-align:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-suave);font-weight:600;padding:3px 0}
.cal-dia{aspect-ratio:1/1;border:1px solid transparent;border-radius:9px;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--marino);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:0}
.cal-dia:hover:not(:disabled){background:var(--lavanda,#D6F1F8);border-color:var(--indigo,#017B99)}
.cal-dia:disabled{color:var(--gris-borde);cursor:not-allowed}
.cal-dia.elegido{background:var(--indigo,#017B99);color:#fff;border-color:var(--indigo,#017B99)}
.cal-dia .punto{width:4px;height:4px;border-radius:50%;background:#D3DD18}
.cal-dia.elegido .punto{background:#fff}
.cal-dia.pocos .punto{background:#35BBCA}
.cal-nota{margin-top:8px;font-size:12px;color:var(--texto-suave);line-height:1.45}
.cal-leyenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--texto-suave)}
.cal-leyenda span{display:flex;align-items:center;gap:5px}
.cal-leyenda i{width:7px;height:7px;border-radius:50%;display:block}
.horas-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.hora-btn{border:1px solid var(--gris-borde);border-radius:10px;background:#fff;padding:9px 6px;
  cursor:pointer;font:inherit;text-align:center;line-height:1.3}
.hora-btn:hover:not(:disabled){border-color:var(--indigo,#017B99);background:var(--lavanda,#D6F1F8)}
.hora-btn.elegida{background:var(--indigo,#017B99);border-color:var(--indigo,#017B99);color:#fff}
.hora-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--humo,#F4FBFD)}
.hora-btn b{display:block;font-size:14px}
.hora-btn span{display:block;font-size:10.5px;color:var(--texto-suave)}
.hora-btn.elegida span{color:rgba(255,255,255,.8)}
.horas-vacio{grid-column:1/-1;padding:14px;text-align:center;font-size:13px;color:var(--texto-suave);
  border:1px dashed var(--gris-borde);border-radius:10px}
.m3-vista-alterna{margin-bottom:var(--sp-4)}
.m3-bloque.cancelada{opacity:.45;text-decoration:line-through}
.m3-staff-grupo{margin-bottom:var(--sp-4)}
.m3-staff-cab{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-2)}
.m3-staff-cab .nom{font-weight:600;font-size:14.5px}
.m3-staff-grupo .tabla{table-layout:fixed;width:100%}
.m3-staff-grupo .tabla td{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m3-staff-grupo .tabla tbody tr{cursor:pointer}
.m3-det-panel{margin-top:var(--sp-2)}
.m3-libre{display:block;width:100%;height:100%;min-height:26px;border:1px dashed transparent;
  border-radius:8px;background:none;cursor:pointer}
.m3-libre:hover{border-color:var(--indigo,#017B99);background:var(--lavanda,#D6F1F8)}
.modal-caja.modal-angosto{max-width:520px}
.campo-ayuda{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:var(--texto-suave)}
.modal-aviso{margin-top:var(--sp-3);padding:10px 12px;border-radius:10px;background:var(--lavanda,#D6F1F8);
  border:1px solid var(--indigo,#017B99);font-size:13px}

.btn-pri{background:var(--indigo,#017B99);color:#fff;border:1px solid var(--indigo,#017B99);
  border-radius:10px;padding:9px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn-pri:hover{opacity:.9}
.btn-sec{background:#fff;color:var(--marino,#07566B);border:1px solid var(--borde,#CFE6EE);
  border-radius:10px;padding:9px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn-sec:hover{background:var(--lavanda,#D6F1F8)}
.modal-backdrop.modal-encima{z-index:320}

/* ===== Expediente clínico — mismo molde de ficha del núcleo ============ */
/* Seis columnas, no tres: la fila de arriba va de dos en dos (tercios
   exactos) y Evolución/Evidencias de tres en tres (mitades exactas). Sin
   align-items:start, así las tarjetas de un mismo renglón cierran a la
   misma altura y no quedan desfasadas. */
.exp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-4)}
.exp-grid>.card{grid-column:span 2}
.exp-grid>.card{min-width:0;display:flex;flex-direction:column}
/* El card-head de las tarjetas del expediente ENVUELVE. Edna cambia en runtime
   el botón de «Editar» (corto, de la maqueta) a «Levantar antecedentes» (largo)
   en el estado vacío, y `.card-accion` es `flex:none;white-space:nowrap` —no
   encoge—, así que en la tarjeta angosta (1/3 del grid) se salía ~6px. Con
   flex-wrap el botón baja a su propia línea, donde sí cabe. Los botones cortos
   («Ver completa», «Ver detalle») siguen en la misma línea que su título. */
.exp-grid>.card>.card-head{flex-wrap:wrap}
.exp-grid>.exp-ancho{grid-column:1 / -1}
/* Evolución y Evidencias, mitad y mitad: ninguna se amontona. */
.exp-grid>.exp-mitad{grid-column:span 3}
.exp-grid>.card[hidden]{display:none !important}
@media (max-width:1180px){ .exp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .exp-grid>.exp-mitad{grid-column:1 / -1} }
@media (max-width:820px){ .exp-grid{grid-template-columns:minmax(0,1fr)}
  .exp-grid>.card,.exp-grid>.exp-ancho,.exp-grid>.exp-mitad{grid-column:auto} }
.exp-vi{display:flex;flex-direction:column;border:1px solid var(--borde,#CFE6EE);border-radius:10px;overflow:hidden}
.exp-vi-fila{display:flex;gap:var(--sp-3);padding:10px 14px;border-bottom:1px solid var(--borde,#CFE6EE);font-size:13px}
.exp-vi-fila:last-child{border-bottom:0}
.exp-vi-fila .et{min-width:124px;flex:none;color:var(--gris,#5A6672)}
.exp-vi-fila .vl{flex:1 1 auto;color:var(--marino,#07566B);font-weight:600;overflow-wrap:anywhere}
.exp-ant-fila{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--borde,#CFE6EE)}
.exp-ant-fila:last-child{border-bottom:0}
.exp-ant-fila .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.exp-ant-fila .txt b{font-size:13px;color:var(--marino,#07566B)}
.exp-ant-fila .txt span{font-size:12.5px;color:var(--gris,#5A6672);overflow-wrap:anywhere}
.exp-select{min-width:0;font-size:12.5px;padding:6px 10px}
/* Los dos de «Evolución del paciente» se miden por su contenido en vez de
   estirarse al ancho completo, y se ven apagados porque lo están. */
.card-head-apilada>.exp-select-corto{flex:0 0 auto;width:auto;min-width:9.5em}
.exp-select-corto:disabled{opacity:.6;cursor:not-allowed;background:var(--gris-piedra,#F4FBFD)}
.exp-fase{margin-left:var(--sp-2);flex:none;align-self:center}
.exp-ant-txt{font-size:13.5px;color:var(--marino,#07566B);line-height:1.55;margin:0;
  white-space:pre-wrap;overflow-wrap:anywhere}
.exp-ant-pie{font-size:12px;color:var(--gris,#5A6672);margin:var(--sp-3) 0 0;
  padding-top:var(--sp-2);border-top:1px solid var(--gris-borde,#CFE6EE)}
/* Cuatro columnas no caben en un tercio de pantalla: el especialista se
   consulta en "Ver detalle" y aquí manda el chip de estado, que es lo que
   se busca de un vistazo. Sin nowrap los chips se salían del marco. */
.tabla-dx{table-layout:fixed;width:100%}
.tabla-dx th:first-child,.tabla-dx td:first-child{width:76px}
.tabla-dx th:last-child,.tabla-dx td:last-child{width:92px;text-align:right}
.tabla-dx td{vertical-align:top;overflow-wrap:anywhere}
.tabla-dx .chip{white-space:nowrap}
/* Las tres tarjetas del renglón cierran parejas y cortas. */
.exp-vi-fila{padding:8px 12px}
.exp-ant-fila{padding:7px 0}
/* El lienzo se dibuja angosto a propósito: al escalarlo al ancho de la
   tarjeta, su texto crece con él y las etiquetas de los meses se leen. */
.exp-chart{width:100%}
.exp-svg{width:100%;height:auto;display:block}
.exp-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp-3)}
.exp-doc{display:flex;flex-direction:column;gap:3px;cursor:pointer}
.exp-doc-mini{width:100%;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--borde,#CFE6EE);
  background:var(--humo,#F4FBFD);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--gris,#5A6672);overflow:hidden}
.exp-doc-mini img{width:100%;height:100%;object-fit:cover}
.exp-doc-mini.pdf{background:var(--lavanda,#D6F1F8);color:var(--indigo,#017B99)}
.exp-doc-mini.sube{background:var(--lavanda,#D6F1F8);color:var(--indigo,#017B99);
  border-style:dashed;border-color:var(--indigo,#017B99)}
.exp-doc-mini.sube svg{width:26px;height:26px}
.exp-doc-sube:hover .exp-doc-mini.sube{border-style:solid}
.exp-doc-sube b{color:var(--indigo,#017B99)}
/* El PDF ya está en el navegador: se muestra, no se promete. */
.exp-pdf{width:100%;height:60vh;min-height:320px;border:1px solid var(--gris-borde);
  border-radius:10px;background:var(--humo)}
.exp-doc b{font-size:12.5px;color:var(--marino,#07566B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-doc span{font-size:11px;color:var(--gris,#5A6672)}
.tabla-valoraciones{table-layout:fixed;width:100%}
.tabla-valoraciones th:nth-child(1),.tabla-valoraciones td:nth-child(1){width:13%}
.tabla-valoraciones th:nth-child(2),.tabla-valoraciones td:nth-child(2){width:16%}
.tabla-valoraciones th:nth-child(3),.tabla-valoraciones td:nth-child(3){width:33%}
.tabla-valoraciones th:nth-child(4),.tabla-valoraciones td:nth-child(4){width:19%}
.tabla-valoraciones th:nth-child(5),.tabla-valoraciones td:nth-child(5){width:12%}
.tabla-valoraciones th:nth-child(6),.tabla-valoraciones td:nth-child(6){width:7%}
.tabla-valoraciones td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.m2-header{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.m2-header-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.m2-header-info .tipo-h1{display:inline-flex;align-items:center;gap:10px}
.m2-header-acciones{display:flex;gap:var(--sp-3);margin-left:auto;flex-wrap:wrap}
.m2-avatar{width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--lavanda,#D6F1F8);color:var(--indigo,#017B99);
  font-weight:700;font-size:20px}

/* ---- Módulos de fases posteriores: se ven, y dicen cuándo entran ----- */
.fase-card{text-align:center;padding:var(--sp-6) var(--sp-5);max-width:640px}
.fase-sello{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--lavanda,#D6F1F8);
  color:var(--indigo,#017B99);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:var(--sp-3)}
.fase-txt{font-size:13.5px;color:var(--gris,#5A6672);line-height:1.6;margin:var(--sp-3) auto var(--sp-4);max-width:520px}
.fase-acciones{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}

/* ---- Topbar: vista, sucursal y fecha, como la referencia ------------- */
/* UNA SOLA PASTILLA: igual que .filtro-chip de Gestión de pacientes.
   Estos conmutadores vivían dentro de una caja con las opciones pegadas
   y un solo borde alrededor, así que leían como UN control partido en
   varios y no como varias pastillas. Sin la caja y con el hueco de
   .filtros, cada opción es su propia pastilla, con su borde y su fondo
   blanco; la activa va en marino, como en el padrón. */
.vista-sw{display:flex;gap:8px;flex-wrap:wrap;border:0;background:none;flex:none}
.vista-op{display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .16s ease,color .16s ease,border-color .16s ease}
.vista-op.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.vista-op:not(.activo):hover{border-color:var(--marino);background:var(--realce)}
.vista-op.activo:hover{filter:brightness(.97)}
.topbar-suc,.topbar-fecha{display:flex;align-items:center;gap:7px;border:1px solid var(--borde,#CFE6EE);
  border-radius:10px;padding:5px 12px;background:#fff;font-size:13px;color:var(--marino,#07566B);
  white-space:nowrap;flex:none}
.topbar-suc svg.icon,.topbar-fecha svg.icon{width:16px;height:16px;color:var(--gris,#5A6672)}
.topbar-suc .select{border:0;background:none;padding:2px 0;font:inherit;font-weight:600;
  color:var(--marino,#07566B);min-width:124px}
.topbar-der{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}

/* ---- Agenda: rango, filtros y citas del día -------------------------- */
.periodo-sw{display:flex;gap:8px;flex-wrap:wrap;border:0;background:none;flex:none;margin-left:auto}
.periodo-op{display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .16s ease,color .16s ease,border-color .16s ease}
.periodo-op.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.periodo-op:not(.activo):hover{border-color:var(--marino);background:var(--realce)}
.periodo-op.activo:hover{filter:brightness(.97)}
.m3-filtros .campo-form{margin-bottom:var(--sp-3)}
.m3-filtros label{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris,#5A6672)}
.m3-leyenda-titulo{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris,#5A6672);
  margin:var(--sp-4) 0 var(--sp-2)}
.m3-leyenda-lista{display:flex;flex-direction:column;gap:7px}
.m3-leyenda-lista .it{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--marino,#07566B)}
.m3-leyenda-lista .it i{width:10px;height:10px;border-radius:50%;flex:none;display:block}
.m3-leyenda-lista .it .dur{margin-left:auto;font-size:11.5px;color:var(--gris,#5A6672)}
.tabla-citas-dia{table-layout:fixed;width:100%}
.tabla-citas-dia th,.tabla-citas-dia td{font-size:12.5px}
.tabla-citas-dia th:nth-child(1),.tabla-citas-dia td:nth-child(1){width:12%}
.tabla-citas-dia th:nth-child(2),.tabla-citas-dia td:nth-child(2){width:19%}
.tabla-citas-dia th:nth-child(3),.tabla-citas-dia td:nth-child(3){width:17%}
.tabla-citas-dia th:nth-child(4),.tabla-citas-dia td:nth-child(4){width:18%}
.tabla-citas-dia th:nth-child(5),.tabla-citas-dia td:nth-child(5){width:13%}
.tabla-citas-dia th:nth-child(6),.tabla-citas-dia td:nth-child(6){width:12%}
.tabla-citas-dia th:nth-child(7),.tabla-citas-dia td:nth-child(7){width:9%}
.tabla-citas-dia td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* ---- Un solo grupo de perfiles: panel, médico, recepción y paciente --
   Antes eran dos conmutadores con estilos distintos (Cliente/Panel y
   Médico/Recepción) que además se pisaban: cambiar uno no decía nada del
   otro. Es una sola decisión —con qué ojos estás viendo la plataforma—,
   así que es un solo control. */
.perfil-sw{display:flex;gap:8px;flex-wrap:wrap;border:0;background:none;flex:none}
/* La sucursal manda sobre todo el tablero: panel comercial, agenda y
   padrón de pacientes leen de aquí, así que una sola palanca cambia las
   tres pantallas y nunca pueden contar sucursales distintas. */
.suc-sw{display:flex;gap:8px;flex-wrap:wrap;border:0;background:none;flex:none}
.suc-op{display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .16s ease,color .16s ease,border-color .16s ease}

.suc-op.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.suc-op:not(.activo):hover{border-color:var(--marino);background:var(--realce)}
.suc-op.activo:hover{filter:brightness(.97)}
/* Editor de la leyenda: color, nombre y duración de cada servicio */
.lg-fila{display:flex;align-items:center;gap:var(--sp-2);padding:9px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--gris-borde)}
.lg-fila:last-child{border-bottom:0}
.lg-fila.nueva{background:var(--lavanda);border-radius:10px;padding:10px;border-bottom:0;
  margin-top:var(--sp-2)}
.lg-color{width:34px;height:34px;flex:none;padding:0;border:1px solid var(--gris-borde);
  border-radius:9px;background:none;cursor:pointer}
.lg-nombre{flex:1 1 150px;min-width:0}
.lg-dur,.lg-precio{flex:0 0 82px}
.lg-staff{flex:1 1 150px;min-width:0}
.lg-quitar{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--gris-borde);
  background:var(--blanco);color:var(--texto-suave);font:inherit;cursor:pointer;line-height:1}
.lg-quitar:hover{border-color:var(--rojo);color:var(--rojo)}
.m3-filtros-acciones{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.m3-filtros-acciones .card-accion{flex:1 1 auto;text-align:center}
.av-regla{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--gris-borde)}
.av-regla:last-of-type{border-bottom:0}
.av-regla input{width:16px;height:16px;margin-top:2px;flex:none;cursor:pointer;accent-color:#D3DD18}
.av-regla b{display:block;font-size:13.5px;color:var(--marino)}
.av-regla span{font-size:12.5px;color:var(--texto-suave);line-height:1.45}
.lg-pie{display:flex;justify-content:flex-start;margin-top:var(--sp-3)}
.lg-pie .btn{font-family:inherit;cursor:pointer}
.lg-cab{display:flex;gap:var(--sp-2);padding-bottom:6px;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--texto-suave)}
.lg-cab span:nth-child(1){flex:none;width:34px}
.lg-cab span:nth-child(2){flex:1 1 150px}
.lg-cab span:nth-child(3),.lg-cab span:nth-child(4){flex:0 0 82px}
.lg-cab span:nth-child(5){flex:1 1 150px}
.lg-cab span:nth-child(6){flex:none;width:30px}
.perfil-op{display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--gris-borde);background:var(--blanco);color:var(--marino);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .16s ease,color .16s ease,border-color .16s ease}

.perfil-op.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.perfil-op:not(.activo):hover{border-color:var(--marino);background:var(--realce)}
.perfil-op.activo:hover{filter:brightness(.97)}

/* ---- Tablero: tarjetas de la misma altura --------------------------- */
.m0-trio,.m0-duo{align-items:stretch}
.m0-trio>.card,.m0-duo>.card{display:flex;flex-direction:column}
.m0-trio>.card>div:last-child,.m0-duo>.card>div:last-child{flex:1 1 auto}

/* ---- Ficha del paciente: tres tarjetas de la misma altura ------------ */
.pf-grid3{align-items:stretch}
.pf-grid3>.pf-card{display:flex;flex-direction:column}
.pf-grid3>.pf-card>.pf-fila:last-of-type{margin-bottom:auto}
.pf-hist.sin-acceso{opacity:.4;cursor:not-allowed}
.pf-hist.sin-acceso svg:last-child{display:none}
/* Renglón de Historial general SIN acción (Fernando 3-nov): sin flecha, sin
   cursor de clic ni resaltado. Tres columnas, ya sin la del chevron. */
.pf-hist-estatico{grid-template-columns:20px 1fr auto;cursor:default}
.pf-hist-estatico:hover{background:none}
.pf-hist-estatico:hover .pf-et{color:inherit}
.pf-hist:not(.sin-acceso):not(.pf-hist-estatico){cursor:pointer}
.pf-hist:not(.sin-acceso):not(.pf-hist-estatico):hover{background:var(--lavanda,#D6F1F8)}
/* Las dos rejillas de la ficha eran hermanas sin separación: la de abajo
   se pegaba a las tarjetas de arriba. El panel ahora reparte el mismo
   hueco que usan las rejillas por dentro, así que todo respira igual. */
.pf-panel{display:flex;flex-direction:column;gap:var(--sp-4)}
.pf-panel[hidden]{display:none !important}
/* Próxima cita y Comunicación reciente cierran al mismo alto: la cita
   ocupaba más por su acolchado, no por su contenido. */
.pf-grid2{align-items:stretch}
.pf-grid2>.pf-card{display:flex;flex-direction:column}
.pf-grid2>.pf-card>.pf-tabla-env,.pf-grid2>.pf-card>.pf-cita{flex:1 1 auto}
.pf-cita{display:flex;flex-direction:column}
.pf-cita-detalle{flex:1 1 auto}
.comp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--sp-3)}

/* ---- Verde de PMedic, no el de la otra marca ------------------------- */
.kpi-delta.bien{color:#4A5600}
.barra-h-valor.verde{background:var(--verde)}

/* ---- Panel comercial -------------------------------------------------- */
.m0-total{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);padding:12px 14px;
  border-radius:10px;background:var(--gris-piedra);border:1px solid var(--gris-borde);font-size:13px}
.m0-total .et{color:var(--texto-suave)}
.m0-total .vl{font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.m0-total .delta{margin-left:auto;font-size:12.5px;font-weight:600;color:#4A5600}
.barra-h-fila .barra-h-monto{min-width:84px;text-align:right;font-weight:600;color:var(--marino);
  font-variant-numeric:tabular-nums;font-size:12.5px}

/* ---- Ventas por sucursal: una tarjeta por sede, con su barra --------- */
/* Dos sucursales contra ocho servicios: si cada bloque conserva su alto
   natural, la tarjeta de sucursal queda medio vacía al estirarse junto a
   la de servicio. Los bloques se reparten el alto en partes iguales. */
.suc-grid{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.suc-item{flex:1 1 0;display:flex;flex-direction:column;justify-content:center}
.suc-item{border:1px solid var(--gris-borde);border-radius:12px;padding:13px 15px;background:#fff}
.suc-cab{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.suc-cab .nom{font-size:13.5px;font-weight:600;color:var(--marino)}
.suc-cab .pct{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--indigo);
  font-variant-numeric:tabular-nums;flex:none}
.suc-cab .monto{font-size:17px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums;
  width:100%;order:3}
.suc-barra{height:9px;border-radius:999px;background:var(--lavanda);overflow:hidden}
.suc-barra i{display:block;height:100%;border-radius:999px;background:var(--indigo);
  min-width:3px;max-width:100%}
.suc-pie{display:flex;gap:var(--sp-3);margin-top:8px;font-size:11.5px;color:var(--texto-suave);flex-wrap:wrap}
.suc-pie b{color:var(--marino);font-variant-numeric:tabular-nums}

/* ---- Gráfica mensual: dos barras por mes, una por sucursal ----------
   Referencia de Edna (02 oct 2026): eje con marcas redondas, retícula
   tenue, par de barras por mes, línea punteada de meta y el valor del mes
   en curso rotulado con guía hacia su barra. Los colores son los del
   sistema: índigo = Santa Teresa, índigo claro = San Jerónimo, marino
   punteado = meta. Las posiciones verticales (eje, retícula, meta, guía)
   se calculan todas contra la MISMA escala, así que ninguna etiqueta
   nombra un valor que la gráfica no alcanza.
   Estructura: envoltura flex (nivel 1) > área en bloque position:relative
   > .meses-grid flex (nivel 2). Flex > bloque > flex, nunca flex anidado
   directo, y sin `inset` — los dos bugs ya documentados de WeasyPrint. */
.m7-chart-wrap{display:flex;gap:12px;margin-top:var(--sp-4);margin-bottom:30px}
.m7-chart-eje{position:relative;width:42px;height:190px;flex:none}
.m7-chart-eje span{position:absolute;right:0;line-height:1;font-size:11px;color:var(--texto-suave);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.m7-chart-area{position:relative;flex:1 1 auto;min-width:0;height:190px;
  border-left:1px solid var(--gris-borde);border-bottom:1px solid var(--gris-borde)}
.m0-reticula{position:absolute;left:0;right:0;height:1px;background:var(--gris-borde);opacity:.6}
.m0-meta{position:absolute;left:0;right:0;height:0;border-top:2px dotted var(--marino);z-index:2}
.meses-grid{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:flex-end;z-index:1}
.mes-col{flex:1 1 0;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.mes-par{display:flex;gap:4px;align-items:flex-end;width:100%;height:100%;justify-content:center}
.mes-par i{display:block;width:11px;border-radius:3px 3px 0 0;min-height:2px}
.mes-label{position:absolute;left:0;right:0;bottom:-23px;text-align:center;font-size:11.5px;
  color:var(--texto-suave)}
.m0-rotulo{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;
  transform:translateX(-50%)}
.m0-rotulo b{font-size:14.5px;font-weight:700;color:var(--marino);line-height:1.2;white-space:nowrap;
  background:var(--blanco);padding:0 4px;font-variant-numeric:tabular-nums}
.m0-rotulo i{display:block;width:0;height:15px;border-left:1px dashed var(--marino)}
.m0-leyenda{display:flex;gap:18px;align-items:center;margin-top:var(--sp-3);font-size:12px;
  color:var(--texto-suave);flex-wrap:wrap}
.m0-leyenda span{display:flex;align-items:center;gap:7px}
.m0-leyenda i{width:11px;height:11px;border-radius:50%;display:block;flex:none}
.m0-leyenda i.guion{width:18px;height:0;border-radius:0;border-top:2px dotted var(--marino)}
.m0-leyenda .tot{margin-left:auto;font-weight:600;color:var(--marino)}
.tabla tr.fila-total td{border-top:2px dotted var(--marino);font-weight:600;color:var(--marino)}

.pg-firma{display:flex;align-items:center;gap:10px;margin-top:var(--sp-3);padding:10px 13px;
  border-radius:10px;background:var(--lavanda);border:1px solid var(--indigo)}
.pg-firma .et{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave)}
.pg-firma .vl{font-weight:700;color:var(--marino);font-size:13px}
/* =====================================================================
   VISTA DEL PACIENTE
   Misma agenda, otra piel. Lo que aquí se ofrece sale del mismo motor de
   disponibilidad del panel, así que un paciente no puede apartar un
   horario que no existe. Pantallas grandes, un paso a la vez y el precio
   siempre a la vista: quien agenda desde su teléfono no debería tener que
   adivinar cuánto va a pagar.
   ===================================================================== */
.mc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.mc-pasos{display:flex;gap:6px;margin-bottom:var(--sp-4);flex-wrap:wrap}
.mc-pasos span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--texto-suave);background:var(--humo);border:1px solid var(--gris-borde);
  border-radius:999px;padding:5px 11px}
.mc-pasos span.activo{color:var(--acento-tinte);background:var(--lavanda);border-color:var(--acento-tinte)}
.mc-pasos span.hecho{color:#4A5600;background:#EDF7A8;border-color:#D3DD18}
.mc-ticket{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);
  padding:12px 16px;border-radius:12px;background:var(--lavanda);border:1px solid var(--indigo);
  margin-bottom:var(--sp-4);font-size:13.5px;color:var(--marino)}
.mc-ticket .et{font-size:11.5px;color:var(--texto-suave);display:block}
.mc-ticket b{font-weight:600}
.mc-ticket .total{margin-left:auto;font-size:19px;font-weight:700;color:var(--indigo);
  font-variant-numeric:tabular-nums}
.mc-tarjeta{padding:var(--sp-5)}
/* Tres por renglón y el bloque centrado: con el ancho libre, la cuarta
   opción se iba a una fila suelta pegada a la izquierda. */
.mc-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:var(--sp-3)}
.mc-opciones.mc-tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px;margin:0 auto}
.mc-opciones.mc-dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin:0 auto}
@media (max-width:760px){ .mc-opciones.mc-tres{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .mc-opciones.mc-tres,.mc-opciones.mc-dos{grid-template-columns:minmax(0,1fr)} }
.mc-op-dir{display:block;font-size:12px;color:var(--texto-suave);line-height:1.45;margin-top:2px}
/* El mensaje se lee entero: en una sola línea se cortaba por la mitad. */
.cm-campo{margin-top:var(--sp-4)}
.cm-texto{width:100%;min-height:76px;resize:vertical;line-height:1.5;font-family:inherit}
.mc-op{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);text-align:left;
  border:1px solid var(--gris-borde);border-radius:var(--r-lg);background:var(--blanco);
  cursor:pointer;font:inherit;color:inherit}
.mc-op:hover{border-color:var(--indigo);box-shadow:0 6px 18px rgba(11,95,116,.08)}
.mc-op.elegida{border-color:var(--indigo);background:var(--lavanda)}
.mc-op-ini{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--lavanda);color:var(--acento-tinte);font-size:13px;font-weight:700}
.mc-op-ini.verde{background:#EDF7A8;color:#4A5600}
.mc-op-txt{min-width:0}
.mc-op-txt b{display:block;font-size:14.5px;color:var(--marino);font-weight:600;margin-bottom:3px}
.mc-op-txt span{display:block;font-size:12.5px;color:var(--texto-suave);line-height:1.45}
.mc-op-precio{margin-left:auto;flex:none;font-size:14px;font-weight:700;color:var(--indigo);
  font-variant-numeric:tabular-nums}
.mc-acciones{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.mc-listo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-5) 0}
.mc-listo-sello{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:#EDF7A8;color:#4A5600}
.mc-listo-sello svg{width:30px;height:30px}
.mc-listo-detalle{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--marino)}
.mc-listo-detalle b{font-size:18px;font-weight:700}
.mc-cita-fila{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0}
.mc-cita-fila + .mc-cita-fila{border-top:1px solid var(--gris-borde)}
.mc-cita-fecha{flex:none;width:74px;text-align:center}
.mc-cita-fecha b{display:block;font-size:19px;font-weight:700;color:var(--marino);line-height:1.1}
.mc-cita-fecha span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-suave)}
.mc-cita-txt{flex:1;min-width:0}
.mc-cita-txt b{display:block;font-size:14px;color:var(--marino);font-weight:600}
.mc-cita-txt span{font-size:12.5px;color:var(--texto-suave)}


/* =====================================================================
   SEÑAL DE "ESTO SE PUEDE TOCAR"
   Dos cosas distintas que antes resolvía el navegador por su cuenta y en
   gris: el resaltado al arrastrar el cursor sobre un texto, y el aviso de
   que algo es picable. Las dos pasan al turquesa del sistema —el mismo
   verde azulado de "confirmado"—, que es el único color libre para esto:
   el índigo ya significa "elegido" y el rojo, riesgo.
   El halo se suma al hover que cada pieza ya tenía; no lo reemplaza.
   ===================================================================== */
html::selection,body::selection,*::selection{background:var(--turquesa);color:#FFFFFF}
html::-moz-selection,body::-moz-selection,*::-moz-selection{background:var(--turquesa);color:#FFFFFF}
::selection{background:var(--turquesa);color:#FFFFFF}

button,[role="button"],a,summary,label[for],select,.tabla-clicable tbody tr,
.m2-tabla-pacientes tbody tr,.mc-op,.m3-staff-ficha,.exp-doc,.pf-hist,
.m3-bloque,.cal-dia,.hora-btn,.busca-op,.filtro-chip,.nav-item,.periodo-op,
.suc-op,.perfil-op,.tab,.pf-tab,.card-accion,.chip-accion,.input-lista{
  transition:box-shadow .12s ease,border-color .12s ease,background-color .12s ease;
}

button:hover:not(:disabled),[role="button"]:hover,a:hover,summary:hover,
label[for]:hover,select:hover,.tabla-clicable tbody tr:hover,
.m2-tabla-pacientes tbody tr:hover,.mc-op:hover:not(:disabled),
.m3-staff-ficha:hover,.exp-doc:hover,.pf-hist:hover,
.m3-bloque:hover,.cal-dia:hover:not(:disabled),.hora-btn:hover:not(:disabled),
.busca-op:hover,.filtro-chip:hover,.nav-item:hover,.periodo-op:hover,
.suc-op:hover,.perfil-op:hover,.tab:hover,.pf-tab:hover,.card-accion:hover,
.chip-accion:hover,.input-lista:hover,.m3-mes-dia:hover:not(:disabled),
.m3-libre:hover,.m3-editar:hover,.lg-quitar:hover,.modal-cerrar:hover{
  box-shadow:0 0 0 2px rgba(53,187,202,.55);
}

/* El teclado ve lo mismo que el ratón */
:focus-visible{outline:2px solid var(--turquesa);outline-offset:2px}
button:focus-visible,[role="button"]:focus-visible,.busca-op:focus-visible{
  box-shadow:0 0 0 3px rgba(53,187,202,.45);
}

/* Lo que no se puede tocar no se ilumina */
button:disabled,.mc-op:disabled,.cal-dia:disabled,.hora-btn:disabled,
.m3-mes-dia:disabled,.m3-mes-dia.vacia{box-shadow:none}

/* =====================================================================
   MÓDULOS 5 Y 6 — VENTAS Y COBRANZA
   Portados del mismo núcleo que ya opera en la otra plataforma: el libro
   de ventas, el plazo de crédito, la antigüedad de saldos y la dona son
   los mismos; cambian la piel y el catálogo. Nada de esto inventa cifras:
   toda venta nace de una cita atendida o de una venta registrada a mano,
   y la cobranza no es otra tabla, es ese mismo libro visto por lo que
   falta por cobrar.
   ===================================================================== */
.kpi-sucursales{justify-content:flex-start}
.m5-suc-fila{display:flex;align-items:baseline;gap:8px;font-size:12.5px;margin-top:6px}
.m5-suc-fila .nom{color:var(--texto-suave)}
.m5-suc-fila .mt{margin-left:auto;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.m5-suc-fila .pc{width:34px;text-align:right;color:var(--texto-suave)}
.m5-suc-barra{height:6px;border-radius:999px;background:var(--lavanda);overflow:hidden;margin-top:5px}
.m5-suc-barra i{display:block;height:100%;border-radius:999px;background:var(--indigo)}

.m5-cab-acciones{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-left:auto}
.m5-cab-acciones .btn{font-family:inherit;cursor:pointer}
.m5-fuente{align-self:flex-start;margin-top:var(--sp-3)}
.m5-origen{margin-top:var(--sp-4);padding:10px 13px;border-radius:10px;background:var(--humo);
  font-size:12.5px;line-height:1.5;color:var(--texto-suave)}
.m5-origen b{color:var(--marino)}
/* La gráfica de sucursal, pero por tipo de venta: seis grupos de dos
   barras. El renglón de etiquetas necesita más aire que el de los meses
   porque "Programas terapéuticos" no cabe en una línea. */
.m5-filtro-tipo{width:188px;flex:none;margin-left:auto}
.m5-filtro-tipo .input-lista{font-size:12.5px;padding:7px 28px 7px 11px}
.m5-chart{margin-bottom:34px}
.m5-chart .m7-chart-eje,.m5-chart .m7-chart-area{height:210px}
.m5-chart .mes-label{bottom:-26px;font-size:11.5px;line-height:1.25}
.m5-chart .mes-par{gap:6px}
.m5-chart .mes-par i{width:16px}
.m5-chart .m5-valor{position:absolute;left:0;right:0;text-align:center;font-size:11px;
  font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.m5-tipos{display:flex;flex-direction:column;gap:var(--sp-3)}
.m5-tipo{display:grid;grid-template-columns:26px minmax(90px,1.1fr) minmax(0,1.3fr) 86px 54px;
  align-items:center;gap:10px}
.m5-tipo .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--lavanda);color:var(--acento-tinte);font-size:11px;font-weight:700}
.m5-tipo .nom{font-size:13px;color:var(--marino);overflow-wrap:anywhere}
.m5-tipo .pista{height:9px;border-radius:999px;background:var(--lavanda);overflow:hidden}
.m5-tipo .pista i{display:block;height:100%;border-radius:999px;background:var(--indigo);min-width:3px}
.m5-tipo .mt{text-align:right;font-weight:600;color:var(--marino);font-variant-numeric:tabular-nums;font-size:13px}
.m5-tipo .pc{text-align:right;color:var(--texto-suave);font-size:12.5px;font-variant-numeric:tabular-nums}
.m5-tipo.vacio .nom,.m5-tipo.vacio .mt,.m5-tipo.vacio .pc{color:var(--texto-suave);opacity:.75}
.m5-total-periodo{display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px;border-radius:10px;
  background:var(--humo);font-size:13px;color:var(--marino);flex-wrap:wrap}
.m5-total-periodo b{font-weight:700;font-variant-numeric:tabular-nums}
.m5-total-periodo .delta{margin-left:auto;font-weight:600;color:var(--verde-texto,#4A5600)}
.m5-total-periodo .delta.mal{color:#9A3A00}
.tabla-ventas td,.tabla-pagos-rec td{vertical-align:middle}

/* La dona: un anillo SVG, sin librerías ni imágenes */
.dona-wrap{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.dona-vertical{flex-direction:column;align-items:stretch}
.anillo{position:relative;width:148px;height:148px;flex:none;margin:0 auto}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo .centro{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.anillo .centro b{font-size:18px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.anillo .centro span{font-size:10.5px;color:var(--texto-suave);text-align:center;line-height:1.3}
.dona-leyenda{display:flex;flex-direction:column;gap:10px;flex:1 1 180px;min-width:0}
.dona-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--marino)}
.dona-punto{width:10px;height:10px;border-radius:50%;flex:none}
.dona-item .pc{margin-left:auto;color:var(--texto-suave);font-size:12.5px}
.dona-item .mt{width:100%;order:3;margin-left:19px;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums}
.dona-vertical .dona-leyenda{margin-top:var(--sp-4)}

/* Cuentas por cobrar: siete columnas en 2/3 de pantalla */
.tabla-cxc{table-layout:fixed;width:100%}
.tabla-cxc col.c-pac{width:22%}
.tabla-cxc col.c-con{width:22%}
.tabla-cxc col.c-mon{width:11%}
.tabla-cxc col.c-ven{width:14%}
.tabla-cxc col.c-dia{width:6%}
.tabla-cxc col.c-est{width:12%}
.tabla-cxc col.c-acc{width:13%}
.tabla-cxc col.c-acc,.tabla-cxc td:last-child{text-align:right}
.tabla-cxc td{vertical-align:middle;overflow-wrap:anywhere}
.tabla-cxc .chip{white-space:nowrap;font-size:11px;padding:3px 8px}
.tabla-cxc .card-accion{white-space:nowrap;padding:5px 11px}
/* Una cuenta vigente no se persigue: su estado ocupa también la columna
   de la acción, en vez de dejar un botón que invita a cobrar un plazo que
   todavía corre. */
.tabla-cxc td.cxc-vigente{text-align:left}
.cxc-pac{display:flex;align-items:center;gap:8px;min-width:0}
/* No hay foto del paciente ni la va a haber: una silueta basta para
   distinguir el renglón sin ocupar el ancho que necesita el botón. */
.cxc-ini{width:20px;height:20px;flex:none;color:var(--petroleo)}
.cxc-ini svg{width:100%;height:100%;display:block}
.cxc-pac span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Paquetes prepagados: cuántas sesiones van de cuántas */
.paq-fila{display:flex;flex-direction:column;gap:5px;padding:10px 0}
.paq-fila + .paq-fila{border-top:1px solid var(--gris-borde)}
.paq-cab{display:flex;align-items:baseline;gap:8px;font-size:13px}
.paq-cab b{color:var(--marino);font-weight:600}
.paq-cab .tr{color:var(--texto-suave);font-size:12.5px}
.paq-cab .ses{margin-left:auto;font-weight:700;color:var(--indigo);font-variant-numeric:tabular-nums}
.paq-barra{height:7px;border-radius:999px;background:var(--lavanda);overflow:hidden}
.paq-barra i{display:block;height:100%;border-radius:999px;background:var(--indigo);min-width:3px}

/* Antigüedad de saldos */
.aging-fila{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;
  padding:9px 0}
.aging-fila + .aging-fila{border-top:1px solid var(--gris-borde)}
.aging-fila .et{font-size:12.5px;color:var(--texto-suave)}
.aging-der{display:flex;flex-direction:column;gap:5px;min-width:0}
.aging-der .lin{display:flex;align-items:baseline;gap:8px}
.aging-der b{font-size:14px;color:var(--marino);font-variant-numeric:tabular-nums}
.aging-der .pc{margin-left:auto;font-size:12.5px;color:var(--texto-suave)}
.aging-barra{height:7px;border-radius:999px;background:var(--lavanda);overflow:hidden}
.aging-barra i{display:block;height:100%;border-radius:999px;min-width:3px}
.m6-pie{align-items:stretch}
.m6-pie>.card{display:flex;flex-direction:column;min-width:0}
.m6-fila{align-items:stretch}
.m6-fila>.card{display:flex;flex-direction:column;min-width:0}
@media (max-width:1100px){ .m5-tipo{grid-template-columns:26px minmax(80px,1fr) 80px 48px}
  .m5-tipo .pista{display:none} }


/* ═══ CELDAS A LA PAR · regla definitiva ═══════════════════════════════
   Este problema ha vuelto tres veces, y siempre por lo mismo: la regla
   anterior sólo alcanzaba a los contenedores que se llamaban "grid-algo".
   Cada módulo nuevo trajo su propio nombre —.m8-fila1, .m9-fila2, .mk-fila3,
   .cm-grid, .m7-cuerpo— y quedó fuera, así que el hueco en blanco reapareció.

   Esta no depende del nombre del contenedor. Toda tarjeta reparte su
   contenido en el alto que la fila le dio: la rejilla ya las estira a la
   misma altura, lo que se veía disparejo era el contenido apelotonado
   arriba dejando un bloque vacío abajo.

   Va al final de la hoja, así que gana por orden a cualquier regla previa,
   y lo que no debe estirarse (un botón, un aviso, un pie) queda excluido. */
.card{display:flex;flex-direction:column}
.card > :last-child{flex:1 1 auto;min-height:0}
.card > .card-head{flex:none}
.card > .btn:last-child,
.card > .boton:last-child,
.card > .aviso:last-child,
.card > .nota:last-child,
.card > .ayuda:last-child,
.card > p:last-child,
.card > .acciones:last-child,
.card > .pie:last-child{flex:0 0 auto}
.card[hidden]{display:none!important}

/* ── control de accesos ── */
.acc-barra{background:#0F2742;color:#E8EEF6;border-radius:12px;padding:14px 18px;
  margin:0 0 18px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.acc-sel{display:flex;flex-direction:column;gap:6px;flex:none}
.acc-sel label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9FB3CC;
  font-weight:600}
.acc-sel select{background:#163355;color:#fff;border:1px solid #2B4D78;border-radius:8px;
  padding:8px 12px;font-size:14px;font-weight:600;min-width:260px}
.acc-info{flex:1;min-width:240px;font-size:13px;line-height:1.5}
.acc-info b{font-size:15px}
.acc-l{display:block;color:#A9BFD8;font-size:12.5px;margin-top:3px}
.acc-l.acc-ojo{color:#FFC98A;font-weight:600}
.acc-bloqueado{opacity:.4;cursor:not-allowed!important;pointer-events:none}
section[data-acc="consultar"] .card-head::after{content:'Solo consulta';margin-left:auto;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:#7A8CA6;border:1px solid #CBD6E4;border-radius:999px;padding:2px 9px}
section[data-clinico="propios"] #m2 .card-head::after,
section[data-clinico="ninguno"] .card-head::after{}

/* ═══ AJUSTES DEL 10 DE OCTUBRE DE 2026 ════════════════════════════════
   Van al final de la hoja a propósito: ganan por orden a cualquier regla
   anterior, y así cada arreglo se lee junto al problema que resuelve. */

/* 2 · Las sucursales bajaron de la barra superior al encabezado del
   módulo, pegadas a la derecha, a la altura del título. El nodo es uno
   solo y viaja al módulo activo (ver pmAnclarSucursales). */
#suc-sw{flex:none;margin-left:auto;align-self:center}
#suc-sw[hidden]{display:none!important}
/* Sólo un DIV, nunca una <section>: .modulo{display:none} se decide por
   esta misma especificidad y la de más abajo gana por orden. */
div.pm-cab-fila{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}
.modulo:not(.activo){display:none!important}

/* 5 · Ni los rótulos ni los títulos se seleccionan: seleccionar texto es
   para copiar un dato, no para pintar de azul la palabra "MONTO". El dato
   —el valor de un campo, una celda— sí se deja copiar.
   Y el realce de foco deja de ser un cuadro: es una pastilla del mismo
   azul, que sigue la forma del control en vez de encajonarlo. */
label,.pf-et,.campo-label,.tipo-label,.tipo-h1,.tipo-h2,.card-head,
.lg-cab,.m3-leyenda-titulo,.tabla thead th,.acc-sel label,
button,.btn,[role="button"],.tab,.pf-tab,.filtro-chip,.suc-op,.perfil-op,
.nav-item,.chip,.card-accion,.m3-semana-nav-texto,.m3-dia-cabeza{
  -webkit-user-select:none;-moz-user-select:none;user-select:none}
::selection{background:var(--lavanda);color:var(--marino)}
html::selection,body::selection,*::selection{background:var(--lavanda);color:var(--marino)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(1,123,153,.28)}
.card-accion:focus-visible,.btn-primario:focus-visible,.btn-secundario:focus-visible,
.btn-accion:focus-visible,button:focus-visible,[role="button"]:focus-visible,
.busca-op:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(1,123,153,.28)}
.input:focus,.select:focus,select:focus,.campo-form .input:focus,.campo-form .select:focus{
  outline:none;border-color:var(--indigo);background:rgba(214,241,248,.55);
  box-shadow:0 0 0 3px rgba(1,123,153,.22)}

/* 6 · Los filtros del expediente son pastillas, como en el resto de la
   plataforma. Eran subrayados y no se leían como filtros. */
#m2-ficha .tabs{border-bottom:0;gap:8px;margin-bottom:var(--sp-4)}
#m2-ficha .tabs .tab{padding:6px 14px;margin-right:0;border:1px solid var(--gris-borde);
  border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--texto-suave);
  background:var(--blanco)}
#m2-ficha .tabs .tab.activo{background:var(--marino);border-color:var(--marino);color:#fff}
#m2-ficha .tabs .tab:not(.activo):hover{border-color:var(--marino);color:var(--marino)}

/* 8 · El calendario semanal era más alto que la pantalla. El renglón de
   hora baja de 46 a 34 px y la semana entera cabe sin arrastrar la barra. */
.m3-hora-fila{min-height:34px}
.m3-bloque{min-height:30px}
.m3-bloque b{font-size:10px}
.m3-bloque span{font-size:8.5px}

/* 9 y 10 · La tarjeta de filtros se estiraba hasta el alto del calendario:
   de ahí que los filtros quedaran despegados y la leyenda se fuera hasta
   abajo. Ahora la tarjeta mide lo que mide su contenido y la leyenda va
   pegada a los filtros. */
.grid-2-1{align-items:start}
.m3-filtros{align-self:start}
.m3-filtros>*{flex:none!important}
.m3-filtros .campo-form{margin-bottom:var(--sp-2)}
.m3-filtros-acciones{margin:var(--sp-2) 0 0}
.m3-leyenda-titulo{margin:var(--sp-3) 0 var(--sp-2)}
.m3-leyenda-lista{gap:6px}

/* 12 · El chip de estado se cortaba ("Confir…"). Con la hora sin rango,
   la columna de estado tiene el ancho que necesita. */
.tabla-citas-dia col.c-hora{width:11%}
.tabla-citas-dia col.c-pac{width:25%}
.tabla-citas-dia col.c-sv{width:20%}
.tabla-citas-dia col.c-esp{width:22%}
.tabla-citas-dia col.c-est{width:22%}
.tabla-citas-dia th:nth-child(1),.tabla-citas-dia td:nth-child(1){width:11%}
.tabla-citas-dia th:nth-child(2),.tabla-citas-dia td:nth-child(2){width:25%}
.tabla-citas-dia th:nth-child(3),.tabla-citas-dia td:nth-child(3){width:20%}
.tabla-citas-dia th:nth-child(4),.tabla-citas-dia td:nth-child(4){width:22%}
.tabla-citas-dia th:nth-child(5),.tabla-citas-dia td:nth-child(5){width:22%}
.tabla-citas-dia th:nth-child(6),.tabla-citas-dia td:nth-child(6){width:auto}
.tabla-citas-dia .chip{white-space:nowrap;font-size:11px;padding:3px 9px;overflow:visible}
.tabla-citas-dia td:nth-child(5){overflow:visible}
.tabla-citas-dia tbody tr{cursor:pointer}
.tabla-citas-dia tbody tr:hover td{background:var(--gris-piedra)}

/* 15 · Qué mide "Evolución del paciente": la pregunta salió en revisión y
   la gráfica no la contestaba por ningún lado. */
.exp-comomide{font-size:12px;color:var(--texto-suave);line-height:1.5;
  margin:0 0 var(--sp-3);padding:9px 12px;border-radius:9px;
  background:var(--gris-piedra);border:1px solid var(--gris-borde)}
.exp-comomide b{color:var(--marino)}

/* 17 · Integraciones */
.in-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--hueco)}
.in-card{border:1px solid var(--gris-borde);border-radius:12px;padding:15px 16px;background:#fff;
  display:flex;flex-direction:column;gap:9px}
.in-cab{display:flex;align-items:center;gap:10px}
.in-logo{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--lavanda);color:var(--acento-tinte);font-weight:800;
  font-size:13px;letter-spacing:.02em}
.in-nom{font-size:14px;font-weight:700;color:var(--marino);line-height:1.25}
.in-tipo{font-size:11.5px;color:var(--texto-suave)}
.in-desc{font-size:12.5px;color:var(--texto-suave);line-height:1.5;flex:1 1 auto}
.in-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ═══ CORRECCIÓN DEL 10 DE OCTUBRE · SEGUNDA VUELTA ════════════════════
   Tres cosas que di por hechas y no lo estaban. */

/* 5 · EL CUADRITO AZUL. No era la selección de texto: eran siete reglas
   de :focus-visible con `outline` que seguían vivas más arriba en la
   hoja y dibujan un rectángulo con separación alrededor del control.
   Aquí se apagan TODAS por su propio nombre —no basta el :focus-visible
   genérico, porque una regla con clase le gana— y el realce pasa a ser
   un halo que sigue la forma del control, pastilla donde es pastilla. */
*:focus,*:focus-visible{outline:none!important}
.card-accion:focus-visible,.btn-primario:focus-visible,.btn-secundario:focus-visible,
.btn-accion:focus-visible,.btn-pri:focus-visible,.btn-sec:focus-visible,
.pf-btn:focus-visible,.pf-tab:focus-visible,.filtro-chip:focus-visible,
.suc-op:focus-visible,.perfil-op:focus-visible,.periodo-op:focus-visible,
.nav-item:focus-visible,.tab:focus-visible,button:focus-visible,
[role="button"]:focus-visible{box-shadow:0 0 0 3px rgba(1,123,153,.30)}
.input:focus,.select:focus,select:focus,textarea:focus,
.campo-form .input:focus,.campo-form .select:focus,.lista-btn:focus-visible{
  border-color:var(--indigo);background:rgba(214,241,248,.5);
  box-shadow:0 0 0 3px rgba(1,123,153,.22)}

/* Y nada de la interfaz se selecciona al arrastrar o al picar dos veces.
   Lo que SÍ se selecciona es el dato —un teléfono, un RFC, una celda—,
   que es para lo que uno selecciona: para copiarlo. */
.app{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.pf-val,.campo-valor,.tabla tbody td,.exp-vi-fila .vl,.m2-salud-valor,
.tipo-dato,.pf-tabla td,input,textarea,select,.cm-texto,#m1-export-txt,
.in-desc,.in-tipo,.exp-comomide{
  -webkit-user-select:text;-moz-user-select:text;user-select:text}

/* 6 · LAS PESTAÑAS DEL EXPEDIENTE DEL PACIENTE. Convertí las de la ficha
   clínica y no las de la ficha del paciente, que son las de la foto:
   General · Historial · Tratamientos · Pagos · Observaciones. Van las
   dos, con la misma pastilla que el resto de la plataforma. */
.pf-tabs{border-bottom:0;gap:8px;overflow-x:auto;padding-bottom:2px}
.pf-tabs .pf-tab{padding:6px 14px;border:1px solid var(--gris-borde);
  border-radius:var(--r-pill);background:var(--blanco);color:var(--texto-suave);
  font-size:12px;font-weight:600;border-bottom:1px solid var(--gris-borde);flex:none}
.pf-tabs .pf-tab.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.pf-tabs .pf-tab:not(.activo):hover{border-color:var(--marino);color:var(--marino);background:var(--blanco)}

/* 12 · EL CHIP DE ESTADO, CON SITIO DE SOBRA. La columna de estado pasa
   de 22 a 27 % y el chip deja de poder recortarse: "Confirmado" entero. */
.tabla-citas-dia col.c-hora{width:11%}
.tabla-citas-dia col.c-pac{width:27%}
.tabla-citas-dia col.c-sv{width:18%}
.tabla-citas-dia col.c-esp{width:17%}
.tabla-citas-dia col.c-est{width:27%}
.tabla-citas-dia th:nth-child(2),.tabla-citas-dia td:nth-child(2){width:27%}
.tabla-citas-dia th:nth-child(3),.tabla-citas-dia td:nth-child(3){width:18%}
.tabla-citas-dia th:nth-child(4),.tabla-citas-dia td:nth-child(4){width:17%}
.tabla-citas-dia th:nth-child(5),.tabla-citas-dia td:nth-child(5){width:27%;
  overflow:visible;text-overflow:clip}
.tabla-citas-dia td:nth-child(5) .chip{white-space:nowrap;overflow:visible;
  text-overflow:clip;max-width:none;font-size:11px;padding:3px 9px}

/* La tabla de «Tratamientos y servicios» de la ficha. Seis columnas en el
   ancho de una pestaña: sin reparto fijo, «Tratamiento o servicio» se comía
   el espacio y «Próxima cita» salía partida en tres renglones. La emite
   m1-perfil.js, que es de los dos negocios, así que vive en las dos hojas. */
.tabla-tratamientos{table-layout:fixed;width:100%}
.tabla-tratamientos td{vertical-align:middle;overflow-wrap:anywhere}
.tabla-tratamientos th:nth-child(1),.tabla-tratamientos td:nth-child(1){width:26%}
.tabla-tratamientos th:nth-child(2),.tabla-tratamientos td:nth-child(2){width:20%}
.tabla-tratamientos th:nth-child(3),.tabla-tratamientos td:nth-child(3){width:13%}
.tabla-tratamientos th:nth-child(4),.tabla-tratamientos td:nth-child(4){width:10%}
.tabla-tratamientos th:nth-child(5),.tabla-tratamientos td:nth-child(5){width:15%}
.tabla-tratamientos th:nth-child(6),.tabla-tratamientos td:nth-child(6){width:16%}

/* Pagos de la ficha: la lista a la izquierda, el detalle del pago elegido a la
   derecha. Los renglones se pican, así que se ven picables y el elegido se
   queda marcado — sin eso no se sabe cuál detalle se está mirando. */
.fila-pago{cursor:pointer}
.fila-pago:hover td{background:var(--gris-piedra,#F4FBFD)}
.fila-pago.elegida td{background:var(--lavanda,#D6F1F8)}
.fila-pago:focus-visible{outline:2px solid var(--indigo,#017B99);outline-offset:-2px}
.tabla-pagos-ficha{table-layout:fixed;width:100%}
.tabla-pagos-ficha td{vertical-align:middle;overflow-wrap:anywhere}
/* Sin reparto fijo, «Transferencia» se partía en «Transferenci/a» y el folio
   en «R-/10400»: media tarjeta se la llevaba el concepto. Las columnas cortas
   no se parten; la única que puede crecer es el concepto. */
.tabla-pagos-ficha th:nth-child(1),.tabla-pagos-ficha td:nth-child(1){width:15%;white-space:nowrap}
.tabla-pagos-ficha th:nth-child(2),.tabla-pagos-ficha td:nth-child(2){width:15%;white-space:nowrap}
.tabla-pagos-ficha th:nth-child(3),.tabla-pagos-ficha td:nth-child(3){width:28%}
.tabla-pagos-ficha th:nth-child(4),.tabla-pagos-ficha td:nth-child(4){width:17%;white-space:nowrap}
.tabla-pagos-ficha th:nth-child(5),.tabla-pagos-ficha td:nth-child(5){width:12%;white-space:nowrap}
.tabla-pagos-ficha th:nth-child(6),.tabla-pagos-ficha td:nth-child(6){width:13%}
.tabla-pagos-ficha .chip{font-size:11px;padding:3px 8px;white-space:nowrap}
.pf-detalle-pago{display:flex;flex-direction:column}
/* Un dato de muestra se declara donde está, no en una nota al pie que nadie
   lee: si parece dinero de la clínica, alguien lo va a cobrar. */
.aviso-muestra{margin-top:var(--sp-3);padding:8px 11px;border-radius:8px;
  background:var(--ambar-fondo,#FEF0A0);color:var(--ambar-texto,#7A5E00);
  font-size:12px;line-height:1.45}


/* ===== MÓDULOS NUEVOS · armonía de tarjetas (Fernando, 3-nov) =====
   Las tarjetas lado a lado son del MISMO alto. El grid ya las estira; esto
   asegura que su contenido se distribuya y que el listado capado + «Ver más»
   deje a todas parejas. La tabla de la tarjeta no empuja: lo que no cabe ya se
   cortó en el JS y se fue al modal. */
.m6-fila, .m5-fila, .m0-fila, .grid-2-1, .grid-3 { align-items: stretch; }
.m6-fila > .card, .m5-fila > .card, .m0-fila > .card,
.grid-2-1 > .card, .grid-3 > .card { display:flex; flex-direction:column; }
.m6-fila > .card > .tabla-desliza, .grid-2-1 > .card > .tabla-desliza,
.grid-3 > .card > :last-child { flex:1 1 auto; }