/* ArgentKinesis — Sistema · colores de la marca (azul #1268a0 + malva/plata #8a8fac) */
:root{
  --marca:#1268a0; --marca-d:#0e5182; --marca-l:#e7eff6; --navy:#123a5c; --plata:#8a8fac;
  --accent:#3f6ea8; --accent-d:#33598a;
  --wa:#25D366; --bg:#f5f7fa; --card:#ffffff; --line:#e4e9f0;
  --ink:#1f2937; --muted:#5f6b7a; --danger:#c0392b; --ok:#1e8f5a; --warn:#b8860b;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.07),0 6px 18px rgba(0,0,0,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45}
a{color:var(--marca)}
button{font-family:inherit;font-size:14px;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#1268a0,#123a5c)}
.login-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:30px 32px 32px;
  width:min(360px,calc(100vw - 32px));text-align:center}
/* El logo ya viene recortado a su tinta (sin borde ni blanco sobrante), así que
   no hace falta recortarlo por CSS: basta con darle su altura. */
.login-card .logo{margin:2px auto 10px;display:flex;justify-content:center}
.login-card .logo img{height:74px;width:auto;display:block}
.login-card h1{font-size:20px;margin:6px 0 2px;color:var(--marca-d)}
.login-card .sub{color:var(--muted);font-size:12.5px;margin-bottom:20px}
.login-card label{display:block;text-align:left;font-size:12px;color:var(--muted);margin:12px 0 4px;font-weight:600}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px}
.login-card input:focus{outline:none;border-color:var(--marca)}
.login-card .err{color:var(--danger);font-size:12.5px;min-height:18px;margin-top:10px}
.btn-primary{background:var(--marca);color:#fff;border:none;padding:11px 16px;border-radius:9px;font-weight:600;width:100%;margin-top:16px}
.btn-primary:hover{background:var(--marca-d)}
.demo-creds{background:var(--marca-l);border-radius:10px;padding:12px 10px 10px;margin-top:8px;text-align:left}
.demo-creds .titulo{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:#7d93ad;padding:0 6px;margin-bottom:6px}
/* Dos columnas: izquierda flexible (rol + persona), derecha fija sin partirse. */
.demo-creds .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:7px 6px;border-radius:8px;cursor:pointer;transition:background .12s}
.demo-creds .row:hover{background:#fff}
.demo-creds .quien{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.demo-creds .quien b{font-size:12.5px;color:var(--marca-d)}
.demo-creds .quien span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-creds code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--marca);background:#fff;border:1px solid #d5e2ee;border-radius:6px;padding:3px 8px;white-space:nowrap}

/* ---------- App shell ---------- */
#app{display:none;min-height:100vh}
#app.on{display:grid;grid-template-columns:224px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"side top" "side main"}
.topbar{grid-area:top;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
/* El título de la barra solo existe cuando el de la página ya no se ve. Se mueve un
   poco al entrar para que se lea como que sube desde el contenido, no como que
   parpadea. */
.topbar .title{font-weight:700;color:var(--marca-d);font-size:15px;
  transition:opacity .18s ease,transform .18s ease;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .title.oculto{opacity:0;transform:translateY(6px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.topbar .title{transition:none}}
.topbar .user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.topbar .user b{color:var(--ink)}
.demo-badge{background:var(--accent);color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.03em}
.link-btn{background:none;border:none;color:var(--muted);font-size:13px;text-decoration:underline}
.link-btn:hover{color:var(--danger)}

.sidebar{grid-area:side;background:var(--navy);color:#c3d4e6;display:flex;flex-direction:column;padding:16px 0;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 16px 16px;color:#fff;font-weight:700;font-size:15px}
/* El chip sigue la proporción del logo (apaisado), si no quedan franjas blancas. */
.sidebar .brand img{height:30px;width:auto;border-radius:7px;background:#fff;padding:3px 6px;flex:0 0 auto}
.sidebar nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.sidebar .nav-sep{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6f8bab;padding:14px 14px 5px;font-weight:700}
.sidebar nav a{display:flex;align-items:center;gap:11px;color:#b3c6dc;text-decoration:none;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar nav a.active{background:var(--marca);color:#fff}
.sidebar nav a svg{width:18px;height:18px;flex:0 0 18px}
.sidebar nav a .badge-n{margin-left:auto;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 7px}
.sidebar .foot{margin-top:auto;padding:14px 18px 2px;font-size:11px;color:#7d97b5}

/* Botón de menú: solo aparece cuando la barra lateral se esconde. */
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;margin-right:12px;color:var(--marca-d);line-height:0}
.menu-btn svg{width:20px;height:20px}
.velo{display:none}

/* En teléfono la barra lateral ocupaba 224 de 375 px y no quedaba pantalla para
   trabajar. Pasa a ser un panel que entra por el lado y se cierra al elegir. */
@media (max-width:900px){
  #app.on{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:264px;z-index:60;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.abierta{transform:none}
  .menu-btn{display:inline-flex;align-items:center}
  .velo.on{display:block;position:fixed;inset:0;background:rgba(12,28,45,.45);z-index:55}
  .topbar{padding:0 14px}
  .topbar .user{gap:8px;font-size:12px}
  .main{padding:18px 14px 40px}
  .page-head h2{font-size:18px}
}
/* En pantallas muy angostas, el nombre y el rol del usuario sobran en la barra. */
@media (max-width:560px){
  .topbar .user .pill,.topbar .user b{display:none}
  /* Cifras más contenidas: si no, "RD$ 409,900" parte en dos renglones. */
  .stat{padding:14px 15px}
  .stat .n{font-size:20px}
  .seccion{margin:22px 0 10px}
}

.main{grid-area:main;padding:24px 26px 40px;overflow-y:auto;height:calc(100vh - 56px)}
/* Ancho cómodo de lectura: sin esto, en pantalla ancha las líneas se vuelven
   larguísimas y cuesta seguir el renglón. */
.main > *{max-width:1180px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.page-head h2{margin:0;font-size:20px;color:var(--marca-d)}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- Componentes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input[type=search],.toolbar input[type=text],.toolbar input[type=date],.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.toolbar input[type=search]{min-width:260px}
.toolbar .spacer{flex:1}
.btn{background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-weight:600;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  line-height:1.2;white-space:nowrap}
.btn:hover{border-color:var(--marca);color:var(--marca)}
.btn.primary{background:var(--marca);color:#fff;border-color:var(--marca)}
.btn.primary:hover{background:var(--marca-d)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.accent:hover{background:var(--accent-d)}
.btn.danger{color:var(--danger);border-color:#e6c9c5}
.btn.danger:hover{background:#fdecea}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn.wa:hover{filter:brightness(.95)}

table.grid{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
table.grid th{background:#fafbfb;text-align:left;padding:11px 14px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--line)}
table.grid td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:last-child td{border-bottom:none}
table.grid tr:hover td{background:#fafcfc}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
.tag.seg{background:#eef4ff;color:#2b5ca8}
.tag.cat{background:var(--marca-l);color:var(--marca-d)}
.tag.off{background:#f0eeee;color:#8a7a7a}
.tag.warn{background:#fdf0dc;color:#9a6a12}
.tag.ok{background:#dcf3e7;color:#1e7d4c}
/* En pantalla angosta una tabla ancha empujaba TODA la página hacia los lados.
   Que se desplace dentro de sí misma: la página no se mueve y no se esconde
   ninguna columna (recortarlas sin avisar sería peor que el desbordamiento). */
@media (max-width:820px){
  table.grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.nota-item{color:#8a6d1a;background:#fdf6e0;border:1px solid #f0e2b6;border-radius:6px;padding:3px 8px;font-size:11.5px;margin-top:4px;display:inline-block;font-weight:500}
.muted{color:var(--muted)}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.count{color:var(--muted);font-size:12.5px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,30,28,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.3);width:min(520px,92vw);max-height:90vh;overflow-y:auto}
.modal h3{margin:0;padding:20px 22px 6px;color:var(--marca-d);font-size:17px}
.modal .body{padding:12px 22px 4px}
.modal .foot{padding:16px 22px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);margin-top:12px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
/* Las casillas y los botones de opción NO son campos de texto: si heredan el
   `width:100%` se estiran a todo el ancho y empujan su etiqueta lejos, que era
   justo lo que rompía la ventana de banderas clínicas. */
.field input[type=checkbox],.field input[type=radio]{width:auto;flex:0 0 auto;padding:0;margin:0;
  accent-color:var(--marca);inline-size:17px;block-size:17px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--marca)}

/* Lista de opciones (casillas) en dos columnas, con toda la fila clicable. */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 10px;margin-top:2px}
.opciones label{display:flex!important;gap:9px;align-items:center;padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;margin:0;line-height:1.35;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.opciones label:hover{background:#f4f8fc;border-color:var(--line)}
.opciones label:has(input:checked){background:var(--marca-l);border-color:#c6dcee;color:var(--marca-d);font-weight:600}
.field.row{display:flex;gap:12px}.field.row>div{flex:1}

/* toast */
#toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--marca-d);color:#fff;padding:12px 16px;border-radius:9px;box-shadow:var(--shadow);font-size:13px;animation:pop .2s}
.toast.ok{background:var(--ok)}.toast.err{background:var(--danger)}.toast.warn{background:var(--warn)}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-size:24px;font-weight:700;color:var(--marca-d)}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;font-size:13px;color:var(--muted)}
.pill{padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700}
.pill.admin{background:#e9d8fd;color:#6b46c1}.pill.kinesiologo{background:#dbeafe;color:#1e63c9}.pill.recepcion{background:#d1f0e0;color:#1e8f5a}
.pill.desarrollador{background:#e2e8f0;color:#334155}

/* ---------- Expediente / ficha ---------- */
.ficha-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:none;padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--marca-d)}
.tab.on{color:var(--marca-d);border-bottom-color:var(--marca)}

/* línea de tiempo de sesiones (evolución) */
.timeline{position:relative;margin-left:6px;padding-left:20px}
.timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px 0}
.tl-item::before{content:"";position:absolute;left:-19px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--marca);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.dolor-bar{height:8px;border-radius:5px;background:linear-gradient(90deg,#1e8f5a,#e6b800,#c0392b);position:relative;width:120px}
.dolor-bar .dot{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--marca-d);transform:translateX(-50%)}

/* ---------- Ayuda por sección ---------- */
/* Oculta, pero presente en la página: así el botón "?" la devuelve al instante. */
.ayuda.oculta{display:none}
/* Botón "?" del encabezado: discreto cuando la ayuda está oculta, marcado cuando
   se está mostrando, para que se entienda que es un interruptor. */
.ayuda-btn{width:34px;height:34px;padding:0;border-radius:50%;font-size:15px;font-weight:800;
  color:#6b86a3;flex:0 0 auto}
.ayuda-btn:hover{border-color:var(--marca);color:var(--marca);background:#f2f7fc}
.ayuda-btn.activo{background:var(--marca-l);border-color:#c6dcee;color:var(--marca-d)}
.ayuda-btn.senal{animation:senal-ayuda 1.1s ease-out 2}
@keyframes senal-ayuda{
  0%{box-shadow:0 0 0 0 rgba(18,104,160,.45);border-color:var(--marca);color:var(--marca)}
  70%{box-shadow:0 0 0 9px rgba(18,104,160,0)}
  100%{box-shadow:0 0 0 0 rgba(18,104,160,0)}}
@media (prefers-reduced-motion:reduce){.ayuda-btn.senal{animation:none}}
/* Fila de pestañas del expediente, con su botón de ayuda al final. */
.tabs-fila{display:flex;align-items:center;gap:12px;justify-content:space-between;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs-fila .tabs{border-bottom:none;flex:1;min-width:0}

.ayuda{display:flex;gap:12px;align-items:flex-start;background:#f2f7fc;border:1px solid #d7e6f3;
  border-radius:10px;padding:13px 15px;margin-bottom:16px;font-size:13px;line-height:1.6;color:#33475b}
.ayuda .icono{font-size:15px;line-height:1.4;flex:0 0 auto}
.ayuda .cuerpo{flex:1;min-width:0}
.ayuda .ejemplo{margin-top:6px;color:#4a6076;background:#fff;border-radius:7px;padding:7px 10px;font-size:12.5px}
.ayuda .ejemplo b{color:var(--marca-d)}
.ayuda .pasos{margin:7px 0 0;padding-left:20px}
.ayuda .pasos li{margin:3px 0}
.ayuda .cerrar{flex:0 0 auto;background:none;border:none;color:#6b86a3;font-size:12px;font-weight:600;
  text-decoration:underline;padding:0;align-self:flex-start;white-space:nowrap}
.ayuda .cerrar:hover{color:var(--marca-d)}
/* Estado vacío con instrucción: el texto guía qué hacer, no solo dice que no hay nada. */
.empty b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:5px}
.empty .como{margin-top:8px;font-size:12.5px;color:var(--muted)}

/* ---------- Reportes ---------- */
/* Encabezado de sección: separa bloques y da ritmo vertical a una página larga. */
.seccion{margin:28px 0 12px}
.seccion:first-child{margin-top:6px}
.seccion h3{margin:0;font-size:15.5px;color:var(--marca-d);font-weight:700}
.seccion p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}

/* La comparación vive dentro de la tarjeta del número que califica. */
.stat .delta{font-size:11.5px;margin-top:7px;padding-top:7px;border-top:1px solid #eef1f5;line-height:1.4}

/* Tira de cifras: un solo panel dividido, en vez de N tarjetas sueltas.
   Número de columnas fijo por ancho, no `auto-fit`: con auto-fit la quinta cifra se
   iba sola a una segunda fila y el resto de esa fila quedaba como una franja vacía.
   Los separadores son bordes sobre fondo blanco (no un gap de color) justamente para
   que una celda que sobre no se vea como un bloque gris. */
.tira-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding:0;overflow:hidden;margin-bottom:22px}
/* Las etiquetas se alinean todas abajo. Si en una celda el porcentaje no cabe al lado
   del número y baja de renglón, sin esto su etiqueta quedaba un escalón por debajo de
   las otras cuatro y la fila se veía desnivelada. */
.tira-stats .m{padding:15px 16px;border-left:1px solid var(--line);min-width:0;
  display:flex;flex-direction:column}
.tira-stats .m .l{margin-top:auto;padding-top:3px}
.tira-stats .m:nth-child(5n+1){border-left:none}
.tira-stats .n-fila{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
/* `nowrap` porque el número es una unidad: partido en "RD$" / "342,400" deja de
   leerse de un golpe. Si no cabe con el porcentaje al lado, el que baja de renglón
   es el porcentaje, que sí puede ir solo. */
.tira-stats .n{font-size:clamp(14px,1.6vw,20px);font-weight:700;color:var(--marca-d);
  line-height:1.2;white-space:nowrap;flex:0 0 auto}
.tira-stats .l{font-size:12px;color:var(--muted);margin-top:3px}
@media (max-width:760px){
  .tira-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tira-stats .m:nth-child(5n+1){border-left:1px solid var(--line)}
  .tira-stats .m:nth-child(3n+1){border-left:none}
  .tira-stats .m:nth-child(n+4){border-top:1px solid var(--line)}
  .tira-stats .n{font-size:19px}
}
/* El porcentaje va al lado del número, no en un bloque debajo: así una cifra sin
   comparación no deja un hueco ni descuadra la altura de las demás. */
.chip-delta{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.chip-delta.sube{background:#e8f6ed;color:#16713f}
.chip-delta.baja{background:#fdeceb;color:#b3261e}
@media (max-width:560px){
  .tira-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tira-stats .m{padding:13px 14px}
  .tira-stats .m:nth-child(3n+1){border-left:1px solid var(--line)}
  .tira-stats .m:nth-child(odd){border-left:none}
  .tira-stats .m:nth-child(n+3){border-top:1px solid var(--line)}
  .tira-stats .n{font-size:18px}
}

/* Columna ancha para nombres largos + dos listas cortas apiladas al lado. */
.desglose{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:960px){ .desglose{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr)} }
.desglose .apiladas{display:grid;gap:16px;align-items:start}

/* Desglose con barra: el monto no se parte y la proporción se ve de verdad. */
.ranking .fila{padding:11px 0;border-bottom:1px solid #f0f3f7}
.ranking .fila:first-child{padding-top:2px}
.ranking .fila:last-child{border-bottom:none;padding-bottom:2px}
.ranking .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px}
.ranking .nom{font-size:13.5px;font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking .val{display:flex;align-items:baseline;gap:9px;white-space:nowrap;flex:0 0 auto}
.ranking .veces{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ranking .barra-fila{display:flex;align-items:center;gap:10px}
.ranking .barra{flex:1;height:7px;background:#eef2f7;border-radius:4px;overflow:hidden}
.ranking .barra > div{height:100%;background:var(--marca);border-radius:4px}
.ranking .pct{font-size:11.5px;color:var(--muted);width:32px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* Proyección de cierre */
/* `.card` no trae relleno propio (cada uso pone el suyo), y a este panel se le quedó
   sin poner: el texto salía pegado al borde del recuadro. */
.proyeccion{padding:18px 20px}
.proyeccion .proy-cifra{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;margin-top:12px}
/* 26px, no 30: es la cifra principal del panel, pero por encima de eso aplasta al
   resto de la página y el número deja de leerse como parte de un informe. */
.proyeccion .proy-cifra .n{font-size:26px;font-weight:800;color:var(--marca-d);line-height:1.15;font-variant-numeric:tabular-nums}
.proyeccion .proy-cifra .meta{margin:0;min-width:250px}
.proyeccion .proy-barra-fila{display:flex;align-items:center;gap:12px;margin-top:18px}
.proyeccion .proy-pct{font-size:11.5px;color:var(--muted);white-space:nowrap}
.proyeccion .proy-barra{flex:1;height:9px;background:#e4ebf3;border-radius:5px;overflow:hidden}
.proyeccion .proy-barra > div{height:100%;background:var(--marca);border-radius:5px}
.proyeccion .proy-metodo{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.6}
.proyeccion .proy-metodo b{color:var(--marca-d)}

/* Histograma por hora (insumo de capacidad). */
.histograma{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:4px}
.histograma .hora{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.histograma .col{flex:1;width:100%;display:flex;align-items:flex-end}
.histograma .col > div{width:100%;background:var(--marca);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.histograma .hora:hover .col > div{opacity:1}
.histograma .et{font-size:10px;color:var(--muted);padding-top:4px}

/* Pares etiqueta/valor compactos dentro de una tarjeta. */
.meta{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:10px 0 0;font-size:13px;align-items:baseline}
.meta dt{color:#8496a8;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;white-space:nowrap}
.meta dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.servicio-pedido{margin:10px 0 2px;font-weight:600;color:var(--ink);line-height:1.35}

/* ---------- Composición de contenido ---------- */
/* Contenido principal + panel lateral. Se apila solo cuando no cabe. */
.col-principal{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1080px){ .col-principal{grid-template-columns:minmax(0,1fr) 330px} }

.card-titulo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-weight:700;color:var(--marca-d);font-size:15px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}

/* Pares etiqueta/valor para leer, no para editar. */
.lectura{margin:0}
.lectura .campo-lectura{padding:12px 0;border-bottom:1px solid #f0f3f7}
.lectura .campo-lectura:last-child{border-bottom:none;padding-bottom:2px}
.lectura dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#8496a8;margin-bottom:3px}
.lectura dd{margin:0;white-space:pre-wrap;line-height:1.55}

/* Botonera al pie de una tarjeta, separada del contenido. */
.acciones-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- Expediente clínico ---------- */
/* banderas rojas */
.alerta-clinica{display:flex;gap:12px;align-items:flex-start;background:#fdecea;border:1px solid #f2c4bd;
  color:#8d2e22;border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:13px;line-height:1.6}
.alerta-clinica b{color:#7a2519}
/* avisos del plan */
.aviso-clinico{background:#fdf6e3;border:1px solid #f0e2b6;color:#8a6d1a;border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600}
.aviso-clinico.ok{background:#e6f6ed;border-color:#bfe3ce;color:#1e7d4c}
/* barra de progreso del plan */
.plan-bar{height:10px;background:#e4e9f0;border-radius:6px;overflow:hidden}
.plan-bar>div{height:100%;background:var(--marca);border-radius:6px;transition:width .3s}
/* mapa corporal */
.bodymap{width:230px;height:520px;display:block;margin:0 auto}
.bodymap .region{stroke:#8fa3b8;stroke-width:2;cursor:pointer;transition:filter .12s}
.bodymap .region:hover{filter:brightness(.86)}
.leyenda-dolor{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--muted)}
.leyenda-dolor span{display:flex;align-items:center;gap:4px}
.leyenda-dolor i{width:12px;height:12px;border-radius:3px;border:1px solid #c6d3e2;display:inline-block}
.chip-dolor{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;color:#3d2b17;border:1px solid rgba(0,0,0,.08)}
/* nota SOAP */
.soap{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.soap-row{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.soap-tag{flex:0 0 20px;height:20px;border-radius:5px;background:var(--marca-l);color:var(--marca-d);
  font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* estrellas de reseñas */
.stars{color:#f5b301;letter-spacing:1px;font-size:15px}
.stars .off{color:#dfe3df}

/* switch (automatizaciones) */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#cdd6d2;border-radius:24px;transition:.2s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--marca)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.auto-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}
.auto-row:last-child{border-bottom:none}
.auto-row .txt{flex:1}
.auto-row .txt b{color:var(--ink)}

/* slots de reservas online */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.slot{border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;font-weight:600;cursor:pointer;background:#fff;font-size:13px}
.slot:hover{border-color:var(--marca);color:var(--marca)}
.slot.sel{background:var(--marca);color:#fff;border-color:var(--marca)}
.slot.taken{background:#f4f2f2;color:#b7bcb8;cursor:not-allowed;text-decoration:line-through}