/* Sistema visual del artefacto «Cambio a Invisalign», tal cual. */
:root{
  --bg:#EDF1F7; --surface:#FFFFFF; --surface-2:#F6F8FC; --surface-3:#E5EBF4;
  --line:#DBE3ED; --line-2:#C1CDDE;
  --ink:#111A26; --ink-2:#3F4D61; --ink-3:#4C5A70;
  --accent:#0B5FC0; --accent-2:#084A96; --accent-soft:#E3EDFB; --on-accent:#FFFFFF;
  --pos:#07684C; --pos-soft:#DEF0EA; --neg:#B0281F; --neg-soft:#FAE6E4;
  --warn:#8A5A00; --warn-soft:#FAF0DA;
  /* La escala de volumen: no es un semáforo, es un termómetro. Maciza y con
     la cifra en blanco, para que se lea el tramo antes que el número. */
  --v-azul:#0B5FC0; --v-verde:#0A7557; --v-amar:#9A6400; --v-naran:#B54D05; --v-rojo:#BE2419;
  --shadow:0 1px 2px rgba(17,26,38,.05), 0 12px 30px -14px rgba(17,26,38,.22);
  --shadow-lg:0 24px 60px -20px rgba(17,26,38,.45);
  --r:12px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:"Archivo", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* nombres que usa la app, sobre el sistema de arriba */
  --inv:var(--pos); --inv-soft:var(--pos-soft);
  --now:var(--neg); --now-soft:var(--neg-soft);
  --est:var(--warn); --est-soft:var(--warn-soft);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0B1017; --surface:#131B25; --surface-2:#18212D; --surface-3:#1E2936;
  --line:#25313F; --line-2:#36465A; --ink:#E7EDF5; --ink-2:#AFBCCC; --ink-3:#93A4B8;
  --accent:#4A93E6; --accent-2:#93C2FA; --accent-soft:#152840; --on-accent:#07121F;
  --pos:#3BB48C; --pos-soft:#0F2E27; --neg:#E67268; --neg-soft:#351A18;
  --warn:#E0A83E; --warn-soft:#33270F;
  --v-azul:#1268CB; --v-verde:#0B7E5D; --v-amar:#9A6400; --v-naran:#C25508; --v-rojo:#C92E23;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.7);
  --shadow-lg:0 26px 64px -18px rgba(0,0,0,.85);
}}
:root[data-theme="dark"]{
  --bg:#0B1017; --surface:#131B25; --surface-2:#18212D; --surface-3:#1E2936;
  --line:#25313F; --line-2:#36465A; --ink:#E7EDF5; --ink-2:#AFBCCC; --ink-3:#93A4B8;
  --accent:#4A93E6; --accent-2:#93C2FA; --accent-soft:#152840; --on-accent:#07121F;
  --pos:#3BB48C; --pos-soft:#0F2E27; --neg:#E67268; --neg-soft:#351A18;
  --warn:#E0A83E; --warn-soft:#33270F;
  --v-azul:#1268CB; --v-verde:#0B7E5D; --v-amar:#9A6400; --v-naran:#C25508; --v-rojo:#C92E23;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.7);
  --shadow-lg:0 26px 64px -18px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------------- marco de la aplicación ---------------- */
.app{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh}
.rail{display:flex;flex-direction:column;gap:2px;padding:20px 12px;background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:2px;padding:4px 10px 18px;background:transparent;border:0;text-align:left;cursor:pointer;font-family:var(--sans)}
.brand:hover b{color:var(--accent)}
.brand b{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.03em}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.nav{display:flex;align-items:center;gap:9px;padding:9px 12px;border:0;border-radius:999px;background:transparent;font-size:13.5px;font-weight:500;color:var(--ink-2);text-align:left;cursor:pointer;width:100%}
.nav:hover{background:var(--surface-2);color:var(--ink)}
.nav.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.nav i{flex:none;width:16px;text-align:center;font-style:normal;font-size:13px}
.nav.lupa{margin-bottom:6px}
.nav.lupa kbd{font-family:var(--mono);font-size:10px;color:var(--ink-3);background:var(--surface-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.nav.lupa:hover kbd{border-color:var(--line-2)}
.nav-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:18px 12px 6px}
.rail-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.who{display:flex;flex-direction:column}
.who b{font-size:13.5px;font-weight:600}
.who span{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.guardado{display:flex;flex-direction:column;gap:1px}
.guardado #estado{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.guardado #estado[data-s="ok"]{color:var(--pos)}
.guardado #estado[data-s="warn"]{color:var(--warn)}
.guardado #estado[data-s="err"]{color:var(--neg)}
@media (max-width:900px){.guardado{display:none}}
.main{min-width:0;display:flex;flex-direction:column}
.wrap{max-width:1160px;width:100%;margin:0 auto;padding:30px 24px 72px;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.rail{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:4px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 14px 0 2px}.nav{width:auto}.nav-k{display:none}.rail-foot{margin:0 0 0 auto;border:0;padding:0;flex-direction:row;align-items:center;gap:8px}.who span{display:none}.wrap{padding:20px 16px 56px}}

/* ---------------- cabecera de la propuesta ---------------- */
.masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.masthead h1{font-size:clamp(24px,3.4vw,32px);font-weight:600;line-height:1.1}
.lede{margin:8px 0 0;max-width:60ch;color:var(--ink-2);font-size:14px}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
/* El de la barra, a la medida de los botones que tiene al lado. */
.switch.sm{padding:5px 12px 5px 10px;font-size:12.5px;gap:8px}
.switch.sm .track{width:28px;height:17px}
.switch.sm .track::after{width:11px}
.switch.sm input:checked + .track::after{transform:translateX(11px)}
.switch .track{width:34px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;transition:background .16s,border-color .16s;flex:none}
.switch .track::after{content:"";position:absolute;inset:2px auto 2px 2px;width:14px;border-radius:50%;background:var(--ink-3);transition:transform .16s,background .16s}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track::after{transform:translateX(14px);background:var(--on-accent)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------- piezas base ---------------- */
/* Columna: se venía usando desde la agenda y el panel con un «gap» en
   línea, pero la clase no estaba definida, así que los textos sueltos salían
   seguidos en vez de apilados. */
.col{display:flex;flex-direction:column;gap:8px;min-width:0}
.k{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.k.larga{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
h2.k-tit{font-family:var(--display);letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.btn:hover{color:var(--ink);border-color:var(--line-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{border-color:var(--line-2)}
.txt.mal{border-color:var(--neg);background:var(--neg-soft)}
.campo-mal{font-size:11.5px;color:var(--neg);font-weight:500}
.txt.mal:focus{border-color:var(--neg)}
.ex-d.heredado input{border-style:dashed}
.hero2.sinbase{border-style:dashed;border-color:var(--line-2);background:var(--surface-2)}
/* ── columnas: doce meses de un vistazo ── */
.cols{display:flex;align-items:flex-end;gap:6px;height:118px;padding:2px 0}
.col-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%}
.col-v{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;line-height:1;min-height:11px}
.col-p{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.col-p i{display:block;width:100%;max-width:34px;border-radius:3px 3px 0 0;background:var(--surface-3)}
.cols .col-b i{background:var(--pos-soft)}
.cols.t-acc .col-b i{background:var(--accent-soft)}
.cols .col-b.on i{background:var(--pos)}
.cols.t-acc .col-b.on i{background:var(--accent)}
.col-t{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.col-b.on .col-t,.col-b.on .col-v{color:var(--ink);font-weight:600}
.ojea{background:var(--surface);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 96px auto;
  gap:12px;align-items:center;padding:9px 13px}
.ojea b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ojea .sub2{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.ojea{grid-template-columns:minmax(0,1fr) auto}.ojea > *:nth-child(n+3){grid-column:auto}}
.firma-f{background:var(--surface);display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) 84px 92px 96px auto auto;
  gap:10px;align-items:center;padding:10px 13px}
.firma-f b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.firma-f .sub2{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .firma-f{grid-template-columns:minmax(0,1fr) 92px auto}
  .firma-f > *:nth-child(n+4){grid-column:1/-1}
  .cols{height:96px}
}
/* ── la torre de control y la sala de máquinas ── */
.alertas{display:flex;flex-direction:column;gap:8px}
.alerta{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 13px 10px 0;overflow:hidden}
.alerta > i{display:block;align-self:stretch;background:var(--neg);min-height:34px}
.alerta.tibia > i{background:var(--warn)}
.alerta.fria > i{background:var(--ink-3)}
.alerta b{font-size:13.5px;font-weight:600}
.alerta span{font-size:12px;color:var(--ink-3);line-height:1.35}
.paradas{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.parada{background:var(--surface);display:grid;grid-template-columns:minmax(0,1.3fr) 82px 96px minmax(0,1.5fr) 78px;
  gap:12px;align-items:center;padding:10px 13px}
.parada b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parada .sub2{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parada-n{font-family:var(--mono);font-size:13px;text-align:right}
.nota-j{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;background:var(--est-soft);
  border-left:2px solid var(--est);border-radius:0 6px 6px 0;padding:6px 9px}
.nota-t{font-size:12.5px;color:var(--ink-2);font-style:italic;line-height:1.35;min-width:0}
.nota-f{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--est)}
.fila-doc.con-nota td:first-child{box-shadow:inset 3px 0 0 var(--est)}
.fila.con-nota{box-shadow:inset 3px 0 0 var(--est)}
.tiene-nota{font-size:11.5px;font-weight:600;color:var(--est)}
.sin-valorar{font-size:11.5px;font-weight:600;color:var(--warn)}
/* El acuse de guardado: aparece, se lee y se va. Arriba a la derecha, que es
   donde no tapa nada de lo que se está escribiendo. */
.flash-g{position:fixed;top:14px;right:18px;z-index:130;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--pos);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;
  box-shadow:var(--shadow);opacity:0;transform:translateY(-6px);
  transition:opacity .18s,transform .18s}
.flash-g.se-ve{opacity:1;transform:none}
/* Las respuestas que se eligen, en el asistente: botones grandes, uno al
   lado de otro, que se tocan sin apuntar. */
.elige{display:flex;flex-wrap:wrap;gap:8px}
.eli{padding:13px 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);
  color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer}
.eli:hover{border-color:var(--accent);background:var(--surface-2)}
.eli.on{border-color:var(--accent);background:var(--accent);color:#fff}
@media (pointer:coarse){.eli{padding:16px 20px;font-size:16px}}
/* El acuse de guardado que vive dentro del cuadro, al lado del botón. */
.acuse{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.acuse.va{color:var(--ink-3)}
.acuse.ok{color:var(--pos)}
.acuse.ok::before{content:"✓ "}
.acuse.mal{color:var(--neg)}
.acuse.mal::before{content:"! "}
.flash-g.mal{background:var(--neg)}
.flash-g::before{content:"✓";font-size:12px}
.flash-g.mal::before{content:"!"}
body.doctor .flash-g,body.presentando .flash-g{display:none}
@media (prefers-reduced-motion:reduce){.flash-g{transition:none}}
.hist-l{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.hist-f{background:var(--surface);display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 12px}
.hist-c{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.hist-f b{font-size:13px;font-weight:600}
.hist-v{font-size:11.5px;color:var(--ink-3)}
.hist-q{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:640px){.hist-f{grid-template-columns:minmax(0,1fr) auto}.hist-c{grid-column:1/-1}}
.fila.sin-val{box-shadow:inset 3px 0 0 var(--warn)}
.pend{background:var(--surface);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:11px 14px;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.pend:hover{background:var(--surface-2)}
.pend b{font-size:13.5px;font-weight:600}
.pend .sub2{font-size:12px;color:var(--warn);font-weight:500}
.palancas{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.palanca{background:var(--surface);display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 13px}
.pal-p{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.palanca b{font-size:13.5px;font-weight:600}
.palanca span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.pal-n{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--pos)}
.maqs{display:flex;flex-wrap:wrap;gap:10px}
.maqs > *{flex:1 1 230px;min-width:0}
.maq{display:flex;flex-direction:column;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.maq-n{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.maq.ok .maq-n{color:var(--pos)}
.maq.mal .maq-n{color:var(--neg)}
@media (max-width:900px){
  .parada{grid-template-columns:minmax(0,1fr) 82px 96px}
  .parada > *:nth-child(n+4){grid-column:1/-1}
}
/* ══ en pantalla táctil: campos que no hacen zoom y blancos para el dedo ══ */
/* ── la escala cortada y las horas ── */
/* El zigzag de siempre: dice que la regla no empieza en cero sin gastar una
   frase en decirlo. */
.bc-b.cortada{position:relative}
.bc-b.cortada::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-1px;height:9px;
  background:
    linear-gradient(135deg,var(--surface) 25%,transparent 25%) 0 0/10px 9px,
    linear-gradient(-135deg,var(--surface) 25%,transparent 25%) 0 0/10px 9px,
    linear-gradient(45deg,var(--surface) 25%,transparent 25%) 0 5px/10px 9px,
    linear-gradient(-45deg,var(--surface) 25%,transparent 25%) 0 5px/10px 9px;
  pointer-events:none}
.horas{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin-top:4px}
.horas-c{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:16px 22px;background:var(--est-soft);border-right:1px solid var(--line)}
.horas-c .k{color:var(--est)}
.horas-n{font-family:var(--display);font-size:clamp(32px,5.6vw,50px);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--est)}
.horas-s{font-size:13px;color:var(--ink-2)}
/* Los renglones, centrados en su hueco: con el desglose en una sola línea
   cada uno, pegados a la izquierda dejaban medio panel vacío. En rejilla se
   centran como bloque, no uno a uno, y así las horas siguen cayendo todas
   en la misma vertical. */
.horas-l{display:grid;align-content:center;justify-content:center;gap:1px;padding:10px 14px}
.horas-v{display:flex;flex-direction:column;justify-content:center;gap:2px;max-width:260px;
  padding:16px 22px;background:var(--pos-soft);border-left:1px solid var(--line)}
.horas-v .k{color:var(--pos)}
.horas-v .horas-n{color:var(--pos)}
.hora-f{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:baseline;padding:4px 0}
.hora-f b{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;color:var(--ink)}
.hora-t{font-size:13.5px;font-weight:500}
.hora-s{font-size:11.5px;color:var(--ink-3);line-height:1.3}
/* Las dos cifras de los lados, a la misma altura. Cada panel se centraba
   por su cuenta, y como el pie de la derecha ocupa dos renglones y el de la
   izquierda uno, la cifra de la derecha caía más abajo. Empezando los dos
   arriba caen siempre en la misma línea, ocupe lo que ocupe su pie. */
@media (min-width:901px){
  .horas-c,.horas-v{justify-content:flex-start}
}
@media (max-width:900px){
  .horas{grid-template-columns:auto minmax(0,1fr)}
  .horas-v{grid-column:1/-1;max-width:none;border-left:0;border-top:1px solid var(--line);
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:12px 16px}
}
@media (max-width:640px){
  .horas{grid-template-columns:minmax(0,1fr)}
  .horas-c{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
}
/* ── el marcador del comercial ── */
.bravo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  background:var(--est-soft);border:1px solid var(--est);border-radius:var(--r);padding:13px 16px}
.bravo-i{font-family:var(--display);font-size:26px;font-weight:700;color:var(--est);line-height:1}
.bravo b{font-size:15px}
.bravo span{font-size:13px;color:var(--ink-2)}
.bien{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bien-f{background:var(--surface);display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 13px}
.bien-f i{font-style:normal;color:var(--pos);font-weight:700;font-size:14px}
.bien-f b{font-size:13.5px;font-weight:600}
.bien-f span{font-size:12px;color:var(--ink-3);line-height:1.35}
.bien-n{font-family:var(--mono);font-size:12.5px;color:var(--pos);font-weight:600;white-space:nowrap}
.record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.esc-m{display:flex;align-items:flex-end;gap:4px;height:52px;flex:none}
.esc-m i{width:12px;border-radius:2px 2px 0 0;background:var(--surface-3);display:block;min-height:4px}
.esc-m i.top{background:var(--est)}
.esc-m i.hoy{background:var(--accent)}
.retos{display:flex;flex-wrap:wrap;gap:10px}
.retos > *{flex:1 1 240px;min-width:0}
.reto{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--est);
  border-radius:0 8px 8px 0;padding:12px 14px;font-family:var(--sans);cursor:default}
button.reto{cursor:pointer}
button.reto:hover{border-color:var(--line-2);border-left-color:var(--est)}
.reto b{font-size:13.5px;font-weight:600}
.reto span{font-size:12px;color:var(--ink-3);line-height:1.4}
.reto .reto-p{font-family:var(--mono);font-size:11px;color:var(--est);font-weight:600}
.reto.hecho{border-left-color:var(--pos)}
.reto.hecho .reto-p{color:var(--pos)}
@media (max-width:560px){.record{grid-template-columns:minmax(0,1fr)}}
.btn.en-obras{border-style:dashed}
.obra-p{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--est);background:var(--est-soft);border-radius:999px;padding:1px 6px;margin-left:1px}
.btn.pri.off{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink-2)}
/* barra de pasos del alta */
.pasos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.paso-p{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;font-family:var(--sans);font-size:12.5px;color:var(--ink-3);background:transparent;border:0;border-radius:999px;cursor:default}
.paso-p:not(:disabled){cursor:pointer}
.paso-p i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;background:var(--surface-3);color:var(--ink-3)}
.paso-p.on{color:var(--ink);font-weight:600}
.paso-p.on i{background:var(--accent);color:var(--on-accent)}
.paso-p.ok i{background:var(--pos-soft);color:var(--pos)}
.paso-p.ok:hover{background:var(--surface-2)}
.pasos u{flex:1;min-width:12px;height:1px;background:var(--line-2);text-decoration:none}
/* Con ocho pasos no caben ocho nombres: se lee el del que toca y los demás
   son su número, que es lo que hace falta para saber por dónde vas. */
.pasos.ocho .paso-p:not(.on) span{display:none}
.pasos.ocho{gap:3px}
.pasos.ocho u{min-width:6px}
/* El cierre también es largo, pero ahí no todos los pasos valen lo mismo. */
.pasos.larga{gap:4px 6px}
.pasos.larga u{min-width:8px}
.pasos.larga .paso-p.num:not(.on) span{display:none}
.lapiz{margin-left:6px;font-size:.62em;vertical-align:middle}
.ayuda-toca{margin:0 0 10px;font-size:14px;color:var(--accent-2);background:var(--accent-soft);padding:8px 13px;border-radius:8px;display:inline-block}
.pos{display:flex;align-items:center;gap:12px}
.pos-t{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
@media (max-width:640px){.pos-t{display:none}}
/* barra inferior en tablet: la cifra y presentar siempre al alcance del pulgar */
.barra-movil{display:none}
.rail-x{display:inline-flex;align-items:center;gap:8px;flex:none;margin:0 0 10px;padding:6px 11px;
  font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-3);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;cursor:pointer;align-self:flex-start}
.rail-x:hover{border-color:var(--line-2);color:var(--ink)}
.rx-f{font-family:var(--mono);font-size:13px;line-height:1}
body.rail-plegado .rail-x{padding:6px;gap:0;align-self:center}
body.rail-plegado .rx-t{display:none}
@media (max-width:900px){.rx-t{display:none}.rail-x{padding:6px 8px}}
/* Plegado: quedan los iconos, que es lo que se reconoce de un vistazo. El
   nombre de cada sitio sigue estando en el title, y en el ancho de siempre en
   cuanto se vuelve a abrir. */
body.rail-plegado .app{grid-template-columns:58px minmax(0,1fr)}
body.rail-plegado .rail{padding:16px 8px}
body.rail-plegado .brand{display:none}
body.rail-plegado .nav{justify-content:center;padding:9px 0;gap:0}
body.rail-plegado .nav span,body.rail-plegado .nav kbd{display:none}
body.rail-plegado .nav-k{display:none}
body.rail-plegado .rail-foot{padding:12px 0 0;gap:6px;align-items:center}
body.rail-plegado .rail-foot .who,body.rail-plegado .rail-foot .guardado,
body.rail-plegado .rail-foot .seg,body.rail-plegado .rail-foot .row,
body.rail-plegado .rail-foot .btn{display:none}
@media (max-width:900px){
  .top{position:sticky;top:var(--h-avisos,0px);z-index:30}
  .barra-movil{position:fixed;left:0;right:0;bottom:var(--h-aviso,0px);z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(0,0,0,.5)}
  body.doctor .barra-movil,body.presentando .barra-movil{display:none}
  .wrap{padding-bottom:calc(84px + var(--h-aviso,0px))}
  /* T-10 · la cifra y «Presentar» viven abajo, al alcance del pulgar: en la
     cabecera sobran, y eran 48 px en el sitio donde menos sobran. */
  .top .solo-ancho{display:none}
  /* T-14 · el menú se pliega a la sección actual; el resto, tras el botón. */
  .rail::-webkit-scrollbar{display:none}
  .rail .nav,.rail .brand,.rail-foot{flex:none}
  .rail-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;order:-1;margin-right:2px;font-size:15px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;cursor:pointer}
  .rail-x:hover{border-color:var(--accent);color:var(--accent-2)}
  body:not(.menu-abierto) .rail .nav:not(.on){display:none}
  body:not(.menu-abierto) .rail .nav-k{display:none}
  /* Abierto, el menú era la misma fila que se arrastra de lado: en un iPad
     vertical se veían tres secciones de seis y en un teléfono dos y media, y
     nada decía que hubiera más a la derecha. Un menú que hay que arrastrar a
     ciegas para saber qué tiene no es un menú. Abierto pasa a ser una lista
     de arriba abajo, que es lo que es. Cerrado no cambia nada. */
  body.menu-abierto .rail{flex-wrap:wrap;overflow:visible;padding-bottom:12px;row-gap:3px}
  body.menu-abierto .rail .nav{display:flex;flex:1 0 100%;width:100%;min-height:48px;
    border-radius:10px;font-size:15px;padding:11px 14px}
  body.menu-abierto .rail .nav i{width:20px;font-size:15px}
  /* El subtítulo de la ficha se va al globo del nombre. */
  .top .sub.internal{display:none}
}
.res-g{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-height:46vh;overflow:auto}
.res-l{display:flex;flex-direction:column;gap:1px;text-align:left;padding:8px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-family:var(--sans)}
.res-l:hover{border-color:var(--accent)}
.res-l b{font-size:14px;color:var(--ink)}
.res-l span{font-size:12.5px;color:var(--ink-3)}
.atajos{display:flex;flex-direction:column;gap:8px}
.at{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}
.at kbd{font-family:var(--mono);font-size:11.5px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;min-width:78px;text-align:center;color:var(--ink)}
.lnk{font:inherit;font-weight:600;color:var(--accent-2);background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
tr.detalle td{background:var(--surface-2)}
.th-b{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;letter-spacing:inherit;text-transform:inherit}
.th-b:hover{color:var(--ink)}
.th-b.on{color:var(--accent)}
.fila-doc{cursor:pointer}
.fila-doc:hover td{background:var(--surface-2)}
.faltan{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.falta{font-family:var(--sans);font-size:12px;color:var(--warn);background:var(--warn-soft);border:1px solid transparent;border-radius:999px;padding:3px 10px;cursor:pointer}
.falta:hover{border-color:var(--warn)}
.movs{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.mv{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2);padding:3px 0;border-bottom:1px solid var(--line)}
.mv .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.sub{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sub .hist,.sub.hist{background:transparent;border:0;padding:0;font:inherit;color:var(--ink-3);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.sub .hist:hover,.sub.hist:hover{color:var(--accent)}
.cambios{display:flex;flex-direction:column;gap:6px}
.cb{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--ink-2);padding:5px 0;border-bottom:1px solid var(--line)}
.cb:last-child{border-bottom:0}
.cb .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.con-ojo{display:flex;gap:6px;align-items:stretch}
.con-ojo .txt{flex:1;min-width:0}
.ojo{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:0 11px;cursor:pointer}
.ojo:hover{color:var(--ink);border-color:var(--ink-3)}
#avisos{position:sticky;top:0;z-index:60;display:flex;flex-direction:column}
.aviso-fijo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;font-size:13px;font-weight:500;background:var(--neg);color:#fff}
.aviso-fijo .aviso-t{font-weight:700}
.aviso-fijo .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.ic{width:17px;height:17px;flex:none}
.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--surface-3);color:var(--ink-2)}
.nav .cnt.tarde{background:var(--neg-soft);color:var(--neg)}
.nav.on .cnt{background:var(--on-accent);color:var(--accent)}
.tema{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tema .seg{padding:3px}
.tema .seg button{font-size:11.5px;padding:4px 9px}
@media (max-width:900px){.tema{display:none}}
/* tarjeta de doctor con el seguimiento vencido */
.doc.tarde{border-left-color:var(--neg)}
.doc-fi{display:flex;align-items:center;gap:8px}
.doc-fb{flex:1;height:4px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.doc-fb i{display:block;height:100%;background:var(--pos);border-radius:999px}
.doc-ft{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.doc .vence{color:var(--neg);font-weight:600}
.filtros-cfg{display:flex;flex-direction:column;gap:10px}
.roles{display:flex;flex-wrap:wrap;gap:10px}
.roles > *{flex:1 1 200px;min-width:0}
.rol{text-align:left;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;cursor:pointer;font-family:var(--sans)}
.rol:hover{border-color:var(--ink-3)}
.rol.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.rol b{display:block;font-family:var(--display);font-size:14.5px;color:var(--ink)}
.rol ul{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.rol li{font-size:12.5px;color:var(--ink-2);padding-left:15px;position:relative;line-height:1.35}
.rol li::before{position:absolute;left:0;top:0}
.rol li.si::before{content:"✓";color:var(--pos)}
.rol li.no::before{content:"✕";color:var(--ink-3)}
.rol li.no{color:var(--ink-3)}
/* U-01 · la probabilidad, al lado de la cifra del euro. */
/* ═══ la hoja: cabecera y pie que sólo salen en papel ═══
   Un documento que tiene que sobrevivir dos semanas encima de una mesa y
   llegar hasta quien decide necesita destinatario, fecha y un teléfono. */
.hoja-cab,.hoja-pie{display:none}
@media print{
  .hoja-cab{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid #111}
  .hoja-cab b{font-family:var(--display);font-size:17px;font-weight:600}
  .hoja-cab .hoja-f{font-size:12px;color:#555}
  .hoja-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:16px;padding-top:9px;border-top:1px solid #ccc;font-size:11px;color:#555}
}
/* Mientras se prepara la hoja, la pantalla no salta delante del doctor. */
.tapa-imprimir{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--bg);color:var(--ink-2);font-size:14px}
.tapa-imprimir b{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink)}
@media print{.tapa-imprimir{display:none!important}}

/* ═══ los extras, cuando los mira él ═══
   En su vista dejan de ser interruptores y pasan a ser marcas de estado: el
   argumento de «esto ni lo he contado» se conserva entero, y la cifra deja de
   ser algo que se pueda mover con el dedo. */
.marca-e{display:inline-flex;align-items:center;gap:9px;min-width:0;font-family:var(--sans);font-size:13.5px;color:var(--ink-3)}
.marca-e i{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;font-style:normal;font-size:11px;font-weight:700;line-height:1;border-radius:6px;border:1px solid var(--line-2);background:var(--surface-3);color:var(--ink-3)}
.marca-e.on{color:var(--ink);font-weight:500}
.marca-e.on i{background:var(--inv-soft);border-color:transparent;color:var(--inv)}

/* ═══ dónde lo dejamos ═══
   Lo que dijo la última vez, devuelto donde se decide qué contarle hoy. */
.card.acc{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--shadow)}
.dejamos{display:flex;flex-direction:column;gap:7px;min-width:0}
.dj{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 10px}
.dj > span:first-child{align-self:start}
.dj b{font-weight:600}
.dj .note{color:var(--ink-3)}
@media (max-width:560px){.dj{grid-template-columns:minmax(0,1fr)}}

/* ═══ enviarle esto ═══ */
.pieza{display:flex;flex-direction:column;gap:8px;padding:13px 15px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;min-width:0}
.pieza textarea{width:100%;min-height:132px;resize:vertical;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;outline:0}
.pieza-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.pieza-t b{font-family:var(--display);font-size:14.5px;font-weight:600}

/* ═══ las herramientas de la visita, por momento ═══
   Las cuatro llevaban su explicación en el atributo title, que en la tableta
   de una clínica no existe. La app ya tenía el recurso —showtip, la línea de
   ayuda visible— usado en más de cien sitios. */
.herramientas{margin-bottom:14px}
.momentos{display:flex;flex-wrap:wrap;gap:10px}
.momentos > *{flex:1 1 216px;min-width:0}
.momento{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;
  padding:11px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.momento > .k{color:var(--accent-2)}
.momento .btn{width:100%;justify-content:flex-start}
.momento .showtip{padding-left:2px}

/* ═══ los tres iconos de la cabecera de la presentación ═══
   «Dejarle la propuesta» hablaba del doctor en tercera persona a diez
   centímetros del titular «Propuesta para Dra. Ruiz». Un icono no habla de
   nadie. */
.ico-b{flex:none;width:34px;height:34px;display:grid;place-items:center;font-size:14px;line-height:1;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.ico-b:hover{border-color:var(--line-2);color:var(--ink)}

/* ═══ el índice, vertical y en el margen ═══ */
.prop-w{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1120px){.prop-w{grid-template-columns:minmax(0,1fr) 216px}}
.indice-v{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;min-width:0}
@media (min-width:1120px){.indice-v{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow-y:auto}}
@media (max-width:1119px){.prop-w > .indice-v{display:none}}
.ix-g{display:flex;flex-direction:column;gap:3px;min-width:0}
.ix-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);padding:0 2px 2px}
.indice-v .ix{width:100%;text-align:left;border:0;background:transparent;border-radius:7px;padding:4px 8px;white-space:normal;line-height:1.3}
.indice-v .ix:hover{background:var(--surface-3);color:var(--ink)}
.indice-v .ix.aqui{background:var(--accent-soft);color:var(--accent-2);font-weight:600}

/* ═══ configuración: cada fila dice lo que tiene dentro ═══ */
.cfg-h{cursor:pointer;gap:11px}
.cfg-h:hover{background:var(--surface-2)}
.cfg-ic{flex:none;width:28px;height:28px;display:grid;place-items:center;font-size:13px;line-height:1;
  border-radius:8px;background:var(--surface-3);color:var(--ink-2)}
.cfg-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cfg-est{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.cfg-h .hint{font-size:12px}

/* ═══ el rol no es ni bueno ni dudoso ni apagado ═══ */
.pill.rol{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);font-weight:500}

/* ═══ el cierre: lo que falta, arriba y pegado abajo ═══ */
.cierre-pie{position:sticky;bottom:0;z-index:12;display:flex;align-items:center;gap:10px;
  padding:10px 0;background:linear-gradient(to top,var(--bg) 62%,transparent)}
body.con-aviso .cierre-pie{bottom:var(--h-aviso,0px)}
.lista-pierde{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--ink-2)}
.lista-pierde li b{color:var(--ink)}

/* ═══ la cuarta pasada comercial ═══ */

/* AA-09 · los siete pasos, con su nombre. Eran siete círculos de nueve
   píxeles cuyos nombres vivían sólo en el aria-label: invisibles para quien
   mira y, en una tableta, inalcanzables. */
.dots.con-nombre{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.dots.con-nombre button{width:auto;height:auto;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  font-family:var(--sans);font-size:11.5px;line-height:1.2;white-space:nowrap;cursor:pointer}
.dots.con-nombre button:hover{border-color:var(--line-2);color:var(--ink)}
.dots.con-nombre button.visto{color:var(--ink-2);background:var(--surface-2)}
/* Con la misma especificidad que «.dots button.on{width:24px}», que es de
   los puntos sin nombre y le estaba dejando la pastilla activa en 26 px con
   el título recortado a «Tu». */
.dots.con-nombre button.on{width:auto;background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
/* Antes esto encogía las pastillas de paso justo cuando se pasan con el
   dedo. En táctil crecen: el texto se recorta solo con ellipsis si hace
   falta, pero la zona de toque no baja de 44 px. */
@media (max-width:820px){
  .dots.con-nombre button{font-size:12px;padding:0 12px;min-height:44px;
    max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
  .dots.con-nombre button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* ── RR-02 · lo que se toca con el dedo en la visita ──
   44 px es la medida de Apple y de Android, y esta pantalla se usa de pie,
   en una clínica, con el doctor mirando. Ni una de estas reglas cambia el
   tamaño de la letra: crece la zona, no el texto. */
@media (pointer:coarse),(max-width:820px){
  .dv,.ix{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  .indice-v .ix{min-height:40px}
  .ico-b{width:44px;height:44px}
  /* El número que se corrige delante del doctor. La cifra se queda igual: lo
     que crece es el sitio donde cabe el dedo. */
  .tapv{position:relative;padding:0 4px}
  .tapv::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:44px}
  .hueco-b,.mes-d,.cierre-b{min-height:44px}
  .conmuta{min-height:44px}
  .seg b,.seg button{min-height:40px;display:inline-flex;align-items:center}
  /* Lo que se pulsa, a 44. En el iPad es donde más se trabaja, y un botón de
     33 px se falla: se acierta con la uña, no con el dedo. Sólo crece el
     sitio donde cabe el dedo; la letra y los colores no cambian. */
  .btn{min-height:44px}
  .btn.sm{min-height:44px;padding:9px 14px}
  .fase-b{min-height:44px}
  .x{width:44px;height:44px}
  .fila-mas{width:44px;height:44px}
  .rail-x{min-height:44px}
  .q-src{min-height:44px;display:inline-flex;align-items:center}
  input.txt,textarea.txt,select.sel,.sel,.inp,.inp input{min-height:44px}
}

/* AA-09 · y la pantalla en negro, para escuchar. */

/* AA-04 · la segunda línea de desvíos, con la misma cara que la primera. */
.desvios.segunda{margin-top:-4px}

/* AA-05 · su línea de la tarifa, antes de la tarifa. */
.tu-precio{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 34px;
  padding:15px 18px;background:var(--pos-soft);border:1px solid var(--pos);border-radius:var(--r)}
.tp-n{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--pos)}
.tp-h{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink)}
.tp-d{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--pos)}
.tp-d.neg{color:var(--neg)}

/* AA-06 · así te llega un paciente. */
.viaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.vp{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px}
.vp u{text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vp b{font-size:13px;font-weight:600;line-height:1.3}
.vp span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.vp .cif{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--pos)}
.vp.fin{border-color:var(--pos);background:var(--pos-soft)}
.vp.fin span{color:var(--ink-2)}

/* AA-07 · el dinero encima de la línea de tiempo. */
.linea-t{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px}
.linea-t .lp{display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--line-2);border-radius:0 0 10px 10px}
.linea-t .lp.acc{border-top-color:var(--accent)}
.linea-t .lp.pos{border-top-color:var(--pos)}
.linea-t .lp u{text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.linea-t .lp b{font-size:12.5px;font-weight:600}
.linea-t .lp .cif{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--pos)}

/* AA-03 · la prueba, dentro del relato. */
.refs{display:flex;flex-wrap:wrap;gap:8px}
.refs > *{flex:1 1 190px;min-width:0}
.ref{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px}
.ref.mismo{border-color:var(--accent);background:var(--accent-soft)}
.ref .de{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ref .n{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.02em}
.ref .q{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.ref.mismo .de,.ref.mismo .q{color:var(--accent-2)}

/* AA-02 · el código que se lleva en el móvil. */
.llevar{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.qr-caja{flex:none;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;line-height:0}
.qr{display:block}

/* AA-01 · los tres huecos del sí. */
.huecos{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.hueco-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 12px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;cursor:pointer;
  font-family:var(--sans);color:inherit;text-align:center}
.hueco-b:hover,.hueco-b:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.hueco-b u{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hueco-b b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.hueco-b span{font-family:var(--mono);font-size:14px;color:var(--ink-2)}

/* AA-08 · el icono de trazo, y la cifra que sostiene la tarjeta. */
.noe-i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent-2)}
.noe-i .ic{width:15px;height:15px}
.noe-d{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--pos)}

/* ═══ la vuelta comercial ═══ */

/* Dónde trabaja: nombre de la clínica, dirección y quitar. */
.sede{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr) auto;gap:8px;align-items:center}
@media (max-width:720px){.sede{grid-template-columns:minmax(0,1fr)}}

/* Los medios de contacto de más. */
.contacto{display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr) auto;gap:8px;align-items:center}
@media (max-width:560px){.contacto{grid-template-columns:minmax(0,1fr)}}

/* El reparto de casos, editable a mano en el alta. */
.reparto{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.rep-f{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
  padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px}
.rep-n{font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* C-13 · los tres pasos de después del sí. */
.arr-tic{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface-2);font-size:11px;color:var(--pos);vertical-align:-3px}
.arr-tic.on{background:var(--pos-soft);border-color:transparent;font-weight:700}

/* C-14 · quién le está contando esto, en la propia presentación. */
.quien-lo-trae{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-top:2px}

/* M-8 · los pacientes que hoy dicen que no, con sus propios números. */
.no-dicen{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.no-dicen b{font-family:var(--display);font-size:clamp(34px,6vw,56px);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--neg);font-variant-numeric:tabular-nums}
.no-dicen span{font-size:15px;color:var(--ink-2);max-width:34ch}

/* M-2 · el doctor ha pedido que le llamen: se ve sin leer. */
.fila .nm span.pide-llamada{color:var(--pos);font-weight:600}
.fila-paso{margin-left:6px;color:var(--ink-2);font-weight:500}
.fila-paso.tarde{color:var(--neg);font-weight:600}

/* M-6 · la cifra se mueve cuando el doctor corrige un número suyo. */
.stage .big.moviendose{color:var(--accent)}
.stage .big{transition:color .25s}
.contados{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:10px 15px;border-radius:var(--r);
  background:var(--accent-soft);color:var(--accent-2);font-size:14px}
.contados b{font-weight:600}
@media (prefers-reduced-motion:reduce){.stage .big{transition:none}}

/* M-5 · en la presentación, esta lista no es una tabla interna: es la
   pantalla donde el doctor reconoce sus propios números. Con su tamaño. */
body.doctor .bars,body.presentando .bars{gap:9px}
body.doctor .brow,body.presentando .brow{min-height:34px;grid-template-columns:minmax(160px,34%) 1fr minmax(104px,auto);gap:14px}
body.doctor .blab,body.presentando .blab{font-size:16px;color:var(--ink)}
body.doctor .blab small,body.presentando .blab small{font-size:13px;color:var(--ink-2)}
body.doctor .bval,body.presentando .bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:20px;font-weight:500}
body.doctor .brow.cur .bval,body.presentando .brow.cur .bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}
body.doctor .btrack,body.presentando .btrack{height:18px}
body.doctor .bfill,body.presentando .bfill{height:18px}
@media (max-width:820px){
  body.doctor .brow,body.presentando .brow{grid-template-columns:minmax(120px,40%) 1fr minmax(88px,auto);gap:10px}
  body.doctor .blab,body.presentando .blab{font-size:14.5px}
  body.doctor .bval,body.presentando .bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:17px}
}

/* M-1 · los dos escalones de la cifra: el suelo y lo que traemos. */
.escalones{display:flex;flex-wrap:wrap;gap:10px}
.escalones > *{flex:1 1 230px;min-width:0}
.esc-p{display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-3)}
.esc-p.mas{border-left-color:var(--pos);background:var(--pos-soft)}
.esc-p u{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.esc-p b{font-family:var(--display);font-size:clamp(22px,3.4vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.esc-p.mas u{color:var(--pos)}
.esc-p.mas b{color:var(--pos)}
.esc-p span{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.vs-c .s.mas-casos{color:var(--pos)}

/* C-08 · en qué se te parece esa referencia. */
.parecido{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--accent-2);background:var(--accent-soft);border-radius:6px;padding:3px 8px;margin-top:4px}

/* C-05 · la frase que coloca la conversación, y lo que es evitable. */
.encuadre{font-family:var(--sans);font-size:14px;color:var(--ink-3);margin:0 0 4px}
.evitable{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 15px;border-radius:999px;
  background:var(--pos-soft);color:var(--pos);align-self:flex-start;margin:2px 0 0}
.evitable b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.evitable span{font-size:13.5px}

/* C-03 · cuándo empieza a contar, debajo de las tres salidas. */
.cierre-pie-c{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.mes-cuesta{font-family:var(--mono);font-size:12.5px;color:var(--warn);font-weight:600}

/* C-02 · los gráficos de la presentación. Divs con alturas calculadas, con
   los colores de la casa: gris lo de hoy, verde lo nuestro. */
.bcomp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end}
.bc-c{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;min-width:0}
.bc-n{font-family:var(--display);font-size:clamp(20px,3.4vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.bc-c.hoy .bc-n{color:var(--ink-2)}
.bc-c.inv .bc-n{color:var(--pos)}
.bc-b{width:100%;height:clamp(90px,14vh,150px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--surface-3);border-radius:10px;overflow:hidden}
.bc-x{display:block;width:100%;text-decoration:none;border-radius:10px 10px 0 0;min-height:4px;
  background:repeating-linear-gradient(45deg,var(--pos) 0 6px,var(--pos-soft) 6px 12px)}
.bc-c.hoy .bc-x{background:repeating-linear-gradient(45deg,var(--ink-3) 0 6px,var(--surface-3) 6px 12px)}
.bc-b i{display:block;width:100%;min-height:5px}
.bc-b > i:first-child{border-radius:10px 10px 0 0}
.bc-c.hoy .bc-b i{background:var(--ink-3)}
.bc-c.inv .bc-b i{background:var(--pos)}
.bc-dif{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--pos-soft);color:var(--pos);align-self:center}
.bc-dif b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.bc-dif span{font-size:13px}
.bc-dif.neg{background:var(--neg-soft);color:var(--neg)}

.embudo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.em-e{display:flex;flex-direction:column;gap:7px;min-width:0}
.em-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.em-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-items:end}
.em-t{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0}
.em-b{width:100%;height:clamp(64px,10vh,104px);display:flex;align-items:flex-end;background:var(--surface-3);border-radius:8px;overflow:hidden}
.em-b i{display:block;width:100%;border-radius:8px 8px 0 0;min-height:4px}
.em-b.hoy i{background:var(--ink-3)}
.em-b.inv i{background:var(--pos)}
.em-v{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.em-e:first-child .em-v{color:var(--ink-2)}
.em-e:last-child .em-v{color:var(--pos)}
@media (max-width:640px){.bcomp,.embudo{grid-template-columns:minmax(0,1fr)}}


/* C-01 · la objeción que ya te puso, arriba y con su fecha. */
.objecion.ya{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.obj-ya{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2);margin-bottom:3px}
.ico-b.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}

/* ═══ la sexta vuelta: la sala de máquinas ═══ */

/* CC-01 · la tarifa. La primera columna se queda quieta al desplazar —al
   llegar al escalón 4 ya no se veía de qué producto era la fila— y el pie
   dice, en euros de un doctor de verdad, qué significa cada columna. */
table.tarifa td.pega,table.tarifa tfoot td.pega{position:sticky;left:0;z-index:2;background:var(--surface)}
table.tarifa thead th.pega{position:sticky;left:0;z-index:3;background:var(--surface-2)}
table.tarifa thead th.pega::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}
table.tarifa tbody tr:nth-child(even) td.pega{background:var(--surface-2)}
table.tarifa tfoot td.pega{background:var(--surface-3)}
table.tarifa td.pega::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}
.cel-prod{display:flex;align-items:center;gap:8px;min-width:210px}
.cel-prod .txt{flex:1;min-width:110px}
.inp.tocada{border-color:var(--accent);background:var(--accent-soft)}
.inp.tocada input{color:var(--accent-2)}
.pie-k{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);white-space:normal;display:block;max-width:210px}
td.pie-col{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--pos)}

.orden-l{gap:8px;padding:0 2px 4px}
.orden-k{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* El color de la cifra dice cuánto deja, no lo firme que es la cuenta: de
   5.000 € para arriba verde, entre 0 y 5.000 ámbar, y rojo si le cuesta
   dinero. Lo firme se sigue leyendo debajo, en su renglón. */
.gain.g-bien,.fila .cl b.gain.g-bien,.doc-f .gain.g-bien{color:var(--pos);font-weight:600}
.gain.g-justo,.fila .cl b.gain.g-justo,.doc-f .gain.g-justo{color:var(--warn);font-weight:600}
.gain.g-mal,.fila .cl b.gain.g-mal,.doc-f .gain.g-mal{color:var(--neg);font-weight:600}
/* Y cuando todavía no tenemos su ahorro directo, la cifra no se colorea: sería
   pintar de verde o de rojo un número que mide otra cosa. */
.gain.g-nd,.fila .cl b.gain.g-nd,.doc-f .gain.g-nd{color:var(--ink-2);font-weight:500}
.fila .cl u.nd{color:var(--ink-3);font-style:italic}
.fila .cl u.firme{color:var(--pos)}

/* CC-03 · la pregunta cerrada: una línea. */
.pregf{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.pregf.off{opacity:.7}
.pregf.moviendo{opacity:.4;border-style:dashed}
.pregf.hueco-p{box-shadow:0 -2px 0 var(--accent)}
.pregf .num{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center}
.pregf-b{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left;
  background:transparent;border:0;padding:2px 0;font:inherit;color:inherit;cursor:pointer}
.pregf-b b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pregf-b .pq-t{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pregf-b:hover b{color:var(--accent-2)}
.pregf .mandos{display:flex;gap:4px}
.mando{width:26px;height:26px;flex:none;display:grid;place-items:center;font-size:12px;color:var(--ink-3);
  background:var(--surface);border:1px solid var(--line);border-radius:7px;cursor:pointer;padding:0}
.mando:hover{border-color:var(--line-2);color:var(--ink)}
.mando:disabled{opacity:.35;cursor:default}
.mando.tirador{cursor:grab;touch-action:none}
.mando.tirador:active{cursor:grabbing}
button.preg-n{background:transparent;border:0;padding:2px 4px;border-radius:6px;cursor:pointer}
button.preg-n:hover{background:var(--surface-3);color:var(--ink)}

/* CC-06 · de qué apartado es cada ajuste, mientras se busca. */
.cfg-ap{display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
body.buscando-cfg .cfg-ap{display:block}
.res-cfg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-basis:100%;font-size:13px;color:var(--ink-3)}
.res-cfg .res-n{min-width:0;text-align:left;color:var(--ink-2);font-weight:600}

/* ═══ la quinta pasada comercial ═══ */

/* BB-01 · el conmutador de conceder, y las líneas que se caen tachadas: que
   se vean tachadas es justo el argumento. */
.conmuta{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.conmuta:hover{border-color:var(--ink-3);color:var(--ink)}
.conmuta .tr{position:relative;flex:none;width:32px;height:19px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--line-2);font-style:normal;transition:background .14s}
.conmuta .tr::after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .14s}
.conmuta.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.conmuta.on .tr{background:var(--accent);border-color:var(--accent)}
.conmuta.on .tr::after{left:16px}
.brow.fuera{opacity:.65}
.brow.fuera .blab,.brow.fuera .bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:line-through}
.brow.fuera .bfill{opacity:.35}

/* BB-02 · cada estimación, pulsable. */
.fac-b{width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer}
.fac-b:hover{background:var(--surface-3)}
.fac-b:hover .pill.est{background:var(--warn);color:var(--bg)}

/* BB-04 · los dos bloques de la comparación, y los empates. */
table.cara tr.grupo-cara td{background:var(--surface-2);padding-top:11px}
table.cara tr.empate td{color:var(--ink-3)}
table.cara tr.empate td:not(:first-child){text-align:center}

/* BB-05 · el mes dentro de la presentación. */
.mes-d.lleno{opacity:.58;cursor:default}
.mes-d.libre{border-color:var(--line-2)}
.mes-d.libre:hover{border-color:var(--accent);background:var(--accent-soft)}
.mes-d.elegido{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.mes-h{font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.mes-d.libre .mes-h{color:var(--accent-2)}

/* ═══ antes de entrar ═══ */
.prep{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.prep b{font-size:14px;font-weight:600}
.prep.mala{border-color:var(--neg)}

/* ═══ hagamos tus números ═══ */
.numeros{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.numeros > *{flex:1 1 238px;min-width:0}
.num-q{display:flex;flex-direction:column;gap:5px;padding:15px 17px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.num-p{font-size:15px;color:var(--ink-2);line-height:1.35}
.num-v{font-family:var(--display);font-size:29px;font-weight:600;letter-spacing:-.02em}
.num-res{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;width:100%}

/* ═══ la hoja compartida, para quien abre el enlace ═══ */
body.compartida .rail,body.compartida .top,body.compartida #avisos{display:none}
/* QQ-02 · con el doctor delante no se pinta la banda de conexión: en su
   lugar va una marca pequeña que el comercial reconoce y que a él no le
   dice nada. El aviso entero vuelve al salir de la visita. */
body.doctor #avisos,body.presentando #avisos{display:none}
.sin-guardar{position:fixed;left:12px;bottom:12px;z-index:130;display:flex;align-items:center;gap:7px;
  padding:5px 11px 5px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.sin-guardar i{width:7px;height:7px;border-radius:50%;background:var(--warn);font-style:normal;flex:none}
@media print{.sin-guardar{display:none}}
.hoja-web{max-width:760px;margin:0 auto;padding:26px 20px 60px;display:flex;flex-direction:column;gap:16px}
.hoja-web .hoja-cab{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.hoja-web .hoja-cab b{font-family:var(--display);font-size:20px;font-weight:600}
.hoja-web .hoja-cab .hoja-f{font-size:13px;color:var(--ink-3)}
.hoja-web .hoja-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
/* En la hoja compartida cada línea lleva su nombre y su explicación: en una
   sola línea se leían pegadas. */
.hoja-web .fac-t{display:flex;flex-direction:column;gap:1px}
.hoja-acc{display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.hoja-cont{gap:8px;flex-wrap:wrap}
.hoja-cont a.btn{text-decoration:none}
@media print{.hoja-acc{display:none}}
.hoja-cifra{font-family:var(--display);font-size:clamp(38px,8vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--pos);font-variant-numeric:tabular-nums}
.hoja-cifra.neg{color:var(--neg)}

/* ═══ lo que se le enseña al doctor ═══ */
/* V-01 · el resumen, escrito para él y no sobre él */
.resumen{display:flex;flex-direction:column;gap:9px}
/* Cada frase del resumen habla de una cosa distinta: su color la nombra sin
   tener que leerla, y la cifra sale del párrafo para poder mirarla sola. */
.res-frase{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0;
  padding:10px 14px;border-radius:0 8px 8px 0;border-left:3px solid var(--line-2);background:var(--surface-2)}
.res-frase p{margin:0;flex:1 1 260px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.res-frase b{color:var(--ink);font-weight:600}
.res-cif{font-family:var(--mono);font-size:16px;font-weight:600;white-space:nowrap;min-width:88px}
.res-frase.lab{border-left-color:var(--pos);background:var(--pos-soft)}
.res-frase.lab .res-cif{color:var(--pos)}
.res-frase.precio{border-left-color:var(--accent);background:var(--accent-soft)}
.res-frase.precio .res-cif{color:var(--accent-2)}
.res-frase.pacientes{border-left-color:var(--inv);background:var(--inv-soft)}
.res-frase.pacientes .res-cif{color:var(--inv)}
.res-frase.suyo{border-left-color:var(--warn);background:var(--warn-soft)}
.res-frase.suyo .res-cif{color:var(--warn)}
.res-frase.sillon{border-left-color:var(--warn);background:var(--warn-soft)}
.res-frase.sillon .res-cif{color:var(--warn)}
.res-frase.ajustada{border-left-color:var(--line-2)}

/* V-02 · los argumentos que no son dinero */
.noes{display:flex;flex-wrap:wrap;gap:10px}
.noes > *{flex:1 1 210px;min-width:0}
.noe{display:flex;flex-direction:column;gap:3px;padding:13px 15px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.noe b{font-size:14px;font-weight:600}
.noe-t{font-size:13px;color:var(--ink-2);line-height:1.45}
.noe-q{font-size:13.5px;color:var(--accent-2);font-style:italic;quotes:"«" "»"}

/* V-04 · las tres salidas cuando la cuenta no sale */
.salida{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font-family:var(--sans)}
.salida:hover{border-color:var(--accent)}
.salida b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--accent-2)}
.salida span{font-size:13px;color:var(--ink-2)}
.salida.mia{border-color:var(--accent);background:var(--accent-soft)}

/* V-05 · la línea de tiempo del cambio */
.no-cambia{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2)}
.no-cambia span:first-child{color:var(--pos);font-weight:700;flex:none}
.paso-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}

/* V-08 · las tres barras de los tres años */
.anios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;margin-bottom:12px}
/* Todas las columnas con el mismo suelo: la barra crece hacia arriba desde
   la misma línea, que es lo que hace que se vea el salto. */
.anio{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;min-width:0;justify-content:flex-end}
.anio-sube:empty{visibility:hidden}
.anio-n{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--pos)}
.anio-b{width:100%;height:150px;display:flex;align-items:flex-end;background:var(--surface-3);border-radius:8px;overflow:hidden}
.anio-b i{display:block;width:100%;background:var(--pos);border-radius:8px 8px 0 0;min-height:4px}
.anio .note{line-height:1.35}
/* M-4 · el año en que sube de nivel, que es lo que explica el salto. */
.anio.sube .anio-b i{background:linear-gradient(to bottom,var(--accent),var(--pos))}
.anio-sube{min-height:18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border-radius:6px;padding:2px 7px}

/* V-12 · el frente a frente, con las casillas que ganamos marcadas */
table.cara td.gana span{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--pos-soft);color:var(--pos);font-weight:600}

/* V-09 · una respuesta por objeción */
.objecion{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.objecion q{font-family:var(--display);font-size:15.5px;font-weight:600;quotes:"«" "»"}
.objecion p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* V-07 · la barra de desvíos del Modo Visita */
.desvios{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px 16px 0}
.dv{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;white-space:nowrap}
.dv:hover{border-color:var(--accent);color:var(--accent-2)}
.dv.mas{border-style:dashed}

/* V-13 · los tres compromisos del cierre */
.cierres{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;width:100%}
.cierres > *{flex:1 1 216px;min-width:0}
.cierre-b{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;padding:18px 20px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font-family:var(--sans)}
.cierre-b:hover{border-color:var(--accent)}
.cierre-b b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.cierre-b span{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.cierre-b.si{border-color:var(--accent);background:var(--accent-soft)}
.cierre-b.si b{color:var(--accent-2)}


.barra-prob{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.barra-prob i{display:block;height:100%;background:var(--accent);border-radius:3px}
/* U-04 · qué tipo de línea es cada una de «lo que tienes por delante». */
.marca-fila{display:inline-block;margin-right:7px;font-style:normal;color:var(--ink-3)}
.marca-fila.cita{color:var(--accent-2)}
/* U-06 · el hueco que alinea la última fila de una rejilla incompleta. */
.hueco-rejilla{min-height:0}
.cerrar-x{flex:none;width:22px;height:22px;display:grid;place-items:center;font-size:12px;line-height:1;color:inherit;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;opacity:.7}
.cerrar-x:hover{opacity:1;border-color:currentColor}
/* T-18 · el índice se queda a la vista y marca dónde estás. */
.indice{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;align-items:center;gap:6px 8px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.indice.pegado{position:sticky;top:62px;z-index:25;box-shadow:0 6px 18px -14px rgba(0,0,0,.6)}
.indice .k{flex:none}
.ix.aqui{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.indice .k{margin-right:4px}
.ix{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap}
.ix:hover{border-color:var(--accent);color:var(--accent)}
.pista{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;padding:0;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--surface-3);border:0;border-radius:50%;cursor:pointer;vertical-align:middle;line-height:1}
.pista:hover{background:var(--accent);color:var(--on-accent)}
.glosario{display:flex;flex-direction:column;gap:14px}
.gl b{display:block;font-family:var(--display);font-size:15px}
.gl span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.gl small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.bienv{gap:20px}
.bienv-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 24px}
.bienv-l{display:flex;gap:11px;align-items:flex-start}
.bienv-l i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent-2)}
.bienv-l b{display:block;font-size:14px;color:var(--ink);line-height:1.35}
.bienv-l span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.acciones{display:flex;flex-direction:column;gap:5px}
.acciones .btn{align-self:flex-start}
.acciones .showtip{margin:0 0 8px}
.lista-estado{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.pe{cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;gap:6px;color:var(--ink-3)}
.pe b{font-size:12px;line-height:1}
.pe.si{color:var(--pos)} .pe.no{color:var(--neg);font-weight:600} .pe.op{color:var(--ink-3)}
.señalado{animation:senala 1.6s ease}
@keyframes senala{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}12%,66%{box-shadow:0 0 0 3px var(--warn-soft),0 0 0 4px var(--warn)}}
.btn.est{color:var(--est);background:var(--est-soft);border-color:var(--est)}
.btn.est:hover{color:var(--bg);background:var(--est);border-color:var(--est)}
.btn.dgr{color:var(--neg)}
.btn.dgr:hover{background:var(--neg-soft);border-color:var(--neg)}
.btn.warn{color:var(--neg);border-color:var(--line-2)}
.btn.warn:hover{background:var(--neg-soft);border-color:var(--neg)}
.btn:disabled{opacity:1;color:var(--ink-3);background:var(--surface-2);border-color:var(--line);cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:12.5px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
/* Tres niveles de caja para un dato de tres cifras es demasiado bulto: la de
   dentro pierde su sombra y su fondo, y separa con una línea. */
.card .card{box-shadow:none}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding:14px 20px;border-bottom:1px solid var(--line)}
.card-h h2{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.card-h .hint{font-size:13px;color:var(--ink-3)}
.card-b{padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.grow{flex:1 1 auto;min-width:0}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* Al lado de un nombre: dice lo mismo en dos palabras y no gana altura. */
.pill.mini{font-size:10px;letter-spacing:.02em;padding:1px 7px;font-weight:600}
.pill.inv{background:var(--pos-soft);color:var(--pos)}
.pill.now{background:var(--neg-soft);color:var(--neg)}
.pill.est{background:var(--warn-soft);color:var(--warn)}
.pill.mute{background:var(--surface-3);color:var(--ink-2)}
.pill.acc{background:var(--accent-soft);color:var(--accent-2)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--line);border:0;margin:0}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:46px 20px;text-align:center;color:var(--ink-3)}
.empty b{font-family:var(--display);font-size:16px;color:var(--ink-2);font-weight:600}
.scroll-w{position:relative}
.scroll{overflow-x:auto}
.scroll.hay-mas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15))}
.mas-col{position:absolute;top:50%;right:4px;transform:translateY(-50%);z-index:3;display:none;align-items:center;gap:5px;padding:5px 10px 5px 8px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;box-shadow:var(--shadow);cursor:pointer}
.scroll-w.hay-mas .mas-col{display:inline-flex}
.mas-col:hover{border-color:var(--ink-3);color:var(--ink)}
.scroll table{min-width:720px}
.sub,.note{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.showtip{font-size:12.5px;color:var(--ink-3)}

/* campos */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f > .lbl{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.f .note{font-family:var(--sans);font-size:12px}
.inp{display:inline-flex;align-items:center;gap:2px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:5px 9px 5px 7px;width:fit-content}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp input{font-family:var(--mono);font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);background:transparent;border:0;outline:0;text-align:right;width:70px;padding:0;-moz-appearance:textfield}
.inp input::-webkit-outer-spin-button,.inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp .u{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.inp.est{border-color:var(--warn);border-style:dashed;background:var(--warn-soft)}
.inp.real{border-color:var(--pos);background:var(--pos-soft)}
.inp.edit{border-color:var(--accent);background:var(--accent-soft)}
/* de dónde sale cada dato, escrito al lado del dato */
.con-fuente{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.fuente{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-family:var(--sans);font-size:11px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.fuente.est{background:var(--warn-soft);color:var(--warn)}
.fuente.edit{background:var(--accent-soft);color:var(--accent-2)}
.fuente.real{background:var(--pos-soft);color:var(--pos)}
.fuente:hover{border-color:currentColor}
span.fuente{cursor:default}
.banda{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:8px;font-size:12.5px;background:var(--surface-2);color:var(--ink-2)}
.banda.info{background:var(--accent-soft);color:var(--accent-2)}
.calc{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;font-family:var(--mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface-3);border-radius:8px}
.calc::before{content:"=";color:var(--ink-3);font-weight:500}
.txt,.sel{width:100%;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:7px 9px;outline:0}
select.sel{max-width:260px}
.txt:focus,.sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.txt{resize:vertical;min-height:74px;line-height:1.5;font-weight:400}
.txt::placeholder{color:var(--ink-3);opacity:1}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-3);border-radius:16px;max-width:100%}
.seg button{font-family:var(--sans);font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:8px 16px;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.seg.plain button.on{background:var(--surface);color:var(--ink);font-weight:600}
/* Las pestañas son tres cápsulas en la misma línea: lo que sabes de él, lo
   que le enseñas y lo que apuntas al salir. Mismo alto y mismos botones:
   lo único que cambia es dónde está el aire. */
.tabs-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.seg.tabs button{font-size:14px;padding:9px 18px}
.seg.tabs button.on{box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* En un móvil no caben las tres en una línea. Con el aire justo y el botón
   un poco más estrecho, la línea se parte entre grupos —que es de lo que iba
   todo esto— en vez de por cualquier sitio. El alto no se toca. */
@media (max-width:700px){.tabs-g{gap:5px 8px}.seg.tabs button{padding:9px 12px}}
.seg button .aviso{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--warn);vertical-align:middle}
.seg button.on .aviso{background:var(--on-accent)}
/* Apuntar la visita se hace al salir de la clínica, cuando la cabeza ya está
   en la siguiente: es lo que más se olvida. Así que esa pestaña no se pinta
   como las otras dos —va en el color de acordarse, y se ve de lejos aunque no
   estés dentro de ella—. Encendida se llena del mismo color, igual que las
   demás: lo que cambia es el color, no la manera de decir dónde estás. */
.seg.tabs-apunta{background:var(--warn-soft);box-shadow:inset 0 0 0 1.5px var(--warn)}
.seg.tabs-apunta button{color:var(--warn);font-weight:600}
.seg.tabs-apunta button.on{background:var(--warn);color:var(--on-accent)}
/* El punto de «la tienes a medias» ya no destaca sobre un fondo de su mismo
   color, así que se le pone un filo del color de la barra para recortarlo. */
.seg.tabs-apunta button .aviso{box-shadow:0 0 0 2px var(--surface)}
.seg.tabs-apunta button.on .aviso{box-shadow:none}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}

/* ---------------- listado de doctores ---------------- */
/* Los 300 px eran un mínimo duro: en un móvil de 375 la tarjeta salía 15 px
   por fuera y la pantalla se iba de lado. Con min() la columna nunca es más
   ancha que el sitio que hay, y por encima de 300 se comporta igual. */
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
/* La lista: un doctor por fila y cada dato en su columna. Las columnas se
   van cayendo por la derecha según se estrecha, empezando por las que menos
   deciden; el nombre y la cifra no se caen nunca. */
.fh-cab,.fila{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1.15fr) 108px 94px 116px;gap:12px}
.fh-cab{padding:0 18px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fh-cab .r{text-align:right}
.flist{display:flex;flex-direction:column;gap:8px}
.fila{align-items:center;min-width:0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);
  text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .14s,transform .14s}
.fila:hover{border-color:var(--line-2);transform:translateX(1px)}
/* Un menú por fila, dentro de la tarjeta y pegado a su derecha. La fila entera
   es un botón, así que el ⋮ no puede ir dentro de ella: va encima, en un hueco
   que se le reserva por la derecha. La cabecera se reserva el mismo, para que
   las columnas sigan cuadrando. */
.fila-w{position:relative;display:flex}
.fila-w > .fila{flex:1 1 auto;min-width:0}
.fh-cab,.fila{padding-right:50px}
.fila-mas{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;padding:0;
  font-family:var(--sans);font-size:18px;line-height:1;color:var(--ink-3);
  background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer}
.fila-mas:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.fila-mas:focus-visible{border-color:var(--accent)}
/* Un menú que se mira en vez de leerse: cada cosa, su dibujo y dos palabras. */
.acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.acc-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px 10px;min-height:104px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;text-align:center;line-height:1.25;text-decoration:none}
.acc-b .ic{width:26px;height:26px;color:var(--ink-3);flex:none}
.acc-b u{font-size:11px;font-weight:500;color:var(--ink-3);text-decoration:none;line-height:1.2}
.acc-b:hover{border-color:var(--accent);background:var(--accent-soft)}
.acc-b:hover .ic{color:var(--accent)}
.acc-b.pri{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.acc-b.pri .ic,.acc-b.pri u{color:var(--on-accent)}
.acc-b u.avisa{color:var(--warn)}
/* Un pie sin botones no pinta una banda vacía. */
.modal-f:empty{display:none}
.acc-b.pri u.avisa{color:var(--on-accent)}
/* El filo de la izquierda, por el tono de la fase. Los cuatro nombres de
   abajo son de fases que ya no existen; se quedan por si alguien tiene una
   configuración vieja. */
.fila.t-acc{border-left-color:var(--accent)}
.fila.t-inv{border-left-color:var(--pos)}
.fila.t-est{border-left-color:var(--warn)}
.fila.t-now{border-left-color:var(--neg)}
.fila.t-mute{border-left-color:var(--line-2)}
.fila.s-caliente{border-left-color:var(--pos)}
.fila.s-piensa{border-left-color:var(--warn)}
.fila.s-frio{border-left-color:var(--neg)}
.fila.s-cliente{border-left-color:var(--accent)}
.fila.tarde{border-left-color:var(--neg)}
.fila .nm,.fila .cl{min-width:0}
.fila .nm b{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.02em;min-width:0;flex-wrap:wrap}
.fila .fase,.fila .dif{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.fila .dif u{text-decoration:none;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fila .fase .pill{font-size:12.5px;font-weight:600;padding:5px 13px;letter-spacing:0}
.fila .fase u{text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase}
/* El volumen, en su tramo. La cifra manda, así que va en la letra de los
   títulos y con dígitos tabulares para que las píldoras se alineen. */
.pill.vol{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:5px 13px;font-variant-numeric:tabular-nums;color:#fff;border:0}
.pill.vol.v-azul{background:var(--v-azul)}
.pill.vol.v-verde{background:var(--v-verde)}
.pill.vol.v-amar{background:var(--v-amar)}
.pill.vol.v-naran{background:var(--v-naran)}
.pill.vol.v-rojo{background:var(--v-rojo)}
.pill.vol.mute{background:var(--surface-3);color:var(--ink-3);font-weight:600}
.fila .cl.casos{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.fila .nm span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Las pastillas van dentro del nombre, no debajo: ni margen ni renglón. */
.fila .nm b span.pill{display:inline-flex;margin-top:0}
/* Una línea y sólo una: el nombre se recorta antes que partirse en dos. */
.fila .nm b{flex-wrap:nowrap}
/* El nombre y la clínica, del mismo ancho y con tope: así los círculos
   quedan en columna sin irse a la otra punta en una pantalla ancha. */
.fila .nm{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;
  align-content:center;min-width:0;max-width:330px}
.fila .nm > b{grid-column:2}
.fila .nm > span{grid-column:2}
.fila .nm b .nm-n{font-style:normal;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .nm b .pill.mini{flex:none}
/* Lo que le falta a la ficha, en un círculo al final de la línea del nombre.
   Rojo casi vacío, ámbar a medias, verde cuando ya queda poco, y un ✓ hueco
   cuando no falta nada: el premio de haberla rellenado. */
.fila .nm > .pend-c{grid-column:1;grid-row:1 / span 2;align-self:center;margin-top:0;
  display:inline-grid;place-items:center;overflow:visible;
  width:26px;height:26px;border-radius:50%;font-family:var(--mono);font-size:12px;
  font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;
  color:var(--surface);background:var(--neg);cursor:pointer}
.fila .nm > .pend-c.p-medio{background:var(--warn)}
.fila .nm > .pend-c.p-bien{background:var(--pos)}
.fila .nm > .pend-c.p-ok{background:transparent;color:var(--pos);box-shadow:inset 0 0 0 1.5px var(--pos)}
.fila .nm > .pend-c:hover{filter:brightness(1.14)}
/* Con el dedo, un círculo de 26 px no se acierta. */
@media (pointer:coarse){.fila .nm > .pend-c{width:44px;height:44px;font-size:15px}}
/* Y el renglón del próximo paso se reserva aunque esté vacío, y no se sale
   de su columna: hasta donde llegue y puntos suspensivos. */
.fila .cl.fase u{min-height:13px;max-width:100%}
.fila .cl b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .cl.casos b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.fila .cl u{display:block;text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .cl.r{text-align:right}
.fila .cl.marca b{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.fila .cl b.gain{font-family:var(--sans);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--pos)}
.fila .cl b.gain.neg{color:var(--neg)}
.fila .cl u.vence{color:var(--neg);font-weight:600}
@media (max-width:1160px){
  .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 104px minmax(0,1.1fr) 92px 108px;gap:10px}
  .fh-cab > .dif-h,.fila .cl.dif{display:none}
  .fh-cab > .nivel,.fila > .nivel{display:none}
}
@media (max-width:1010px){
  .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 118px 84px;gap:10px}
  .fh-cab > .dif-h,.fila .cl.dif{display:none}
  .fh-cab > .marca,.fila > .marca{display:none}
  .fh-cab > .op4,.fila > .op4{display:none}
}
@media (max-width:620px){
  .fh-cab,.fila{grid-template-columns:minmax(0,1.6fr) 104px;gap:9px}
  .fh-cab > .marca,.fila > .cl.marca,.fh-cab > .casos,.fila > .cl.casos{display:none}
}
.doc{display:flex;flex-direction:column;gap:9px;padding:15px 17px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .14s,border-color .14s}
.doc:hover{transform:translateY(-1px);border-color:var(--line-2)}
.doc.s-caliente{border-left-color:var(--pos)}
.doc.s-piensa{border-left-color:var(--warn)}
.doc.s-frio{border-left-color:var(--neg)}
.doc.s-cliente{border-left-color:var(--accent)}
.doc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.doc-n{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.doc-c{font-size:12.5px;color:var(--ink-3)}
.doc-m{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2)}
.doc-m b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.doc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.doc-f .gain{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--pos)}

/* ---------------- barra superior de la ficha ---------------- */
/* «top» no es cero sino lo que ocupe la banda de avisos: las dos se pegan
   arriba y la banda va por encima, así que con un aviso puesto la cabecera se
   quedaba debajo y sin poder tocarse. */
.top{position:sticky;top:var(--h-avisos,0px);z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
/* Los mandos van juntos y a la derecha: al partirse la barra bajan enteros
   en vez de repartirse por el hueco que quede. */
.top-acc{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:8px 10px;margin-left:auto;min-width:0}
@media (max-width:760px){.top-acc{justify-content:flex-start;margin-left:0;width:100%}}
@media (max-width:900px){.top{padding:9px 16px}}
.top h1{font-family:var(--display);font-size:17px;font-weight:600}
/* Las fases, una tarjeta cada una: con su filo de color y lo que significa
   debajo se eligen de un vistazo, sin leer una lista de arriba abajo. La que
   tiene puesta va marcada; las demás se pulsan para llevarla ahí. */
.fases{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.fase-c{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
  padding:11px 13px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:10px;cursor:pointer}
.fase-c:hover{border-color:var(--line-2);background:var(--surface-2)}
.fase-c b{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink)}
.fase-c span{font-size:12px;line-height:1.35;color:var(--ink-3)}
.fase-c.inv{border-left-color:var(--pos)}
.fase-c.acc{border-left-color:var(--accent)}
.fase-c.est{border-left-color:var(--est)}
.fase-c.now{border-left-color:var(--neg)}
.fase-c.mute{border-left-color:var(--ink-3)}
/* La que tiene puesta: se ve sin tener que leer. */
.fase-c.on{background:var(--accent-soft);border-color:var(--accent)}
.fase-c.on:hover{background:var(--accent-soft)}
@media (pointer:coarse){.fase-c{padding:13px 14px}}

/* El bloque del nombre: ya no se estira, para que la fase le quede pegada a
   su derecha en vez de irse al otro extremo de la barra. */
.top .nm-b{min-width:0;max-width:100%}
/* La fase, con la misma forma que «Presentar»: es un botón, no una etiqueta,
   y con el color entero se lee de lejos, que es lo primero que se mira de
   una ficha. El texto usa el mismo par que los botones de acción, así que se
   lee igual en claro y en oscuro. */
.fase-b{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 16px;
  border:1px solid transparent;border-radius:9px;color:var(--on-accent);
  cursor:pointer;white-space:nowrap}
.fase-b.inv{background:var(--pos);border-color:var(--pos)}
.fase-b.now{background:var(--neg);border-color:var(--neg)}
.fase-b.est{background:var(--est);border-color:var(--est)}
.fase-b.acc{background:var(--accent);border-color:var(--accent)}
.fase-b.mute{background:var(--ink-2);border-color:var(--ink-2)}
.fase-b:hover{filter:brightness(1.07)}
.top .sub{font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
.ws{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);gap:20px;align-items:start}
@media (max-width:1080px){.ws{grid-template-columns:minmax(0,1fr)}}
.sim{position:sticky;top:78px;display:flex;flex-direction:column;gap:12px}
@media (max-width:1080px){.sim{position:static}}
.hero{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.hero .fig{font-family:var(--display);font-size:clamp(32px,5vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--pos);font-variant-numeric:tabular-nums}
.hero.neg .fig{color:var(--neg)}
.hero .cap{font-size:13px;color:var(--ink-2);max-width:34ch}
.wf{display:flex;flex-direction:column;gap:3px}
.wf-r{display:grid;grid-template-columns:minmax(94px,40%) 1fr minmax(76px,auto);align-items:center;gap:9px;min-height:26px;padding:2px 4px;border-radius:6px;border:0;background:transparent;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.wf-r:hover{background:var(--surface-2)}
/* «Refinamientos de pago» pide 128 px en una columna de 120 y se quedaba en
   «Refinamientos de pag…», también en el ordenador. Cabe en dos líneas. */
.wf-l{font-size:12.5px;color:var(--ink-2);line-height:1.25;overflow-wrap:anywhere}
.wf-t{position:relative;height:13px}
.wf-t::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
.wf-f{position:absolute;top:0;height:13px;border-radius:3px}
.wf-f.p{left:50%;background:var(--pos)}
.wf-f.n{right:50%;background:var(--neg)}
.wf-v{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.wf-v.p{color:var(--pos)} .wf-v.n{color:var(--neg)} .wf-v.z{color:var(--ink-3)}
.conf{display:flex;flex-direction:column;gap:6px;padding:13px 15px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.conf-bar{position:relative;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.conf-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:999px;transition:width .25s}
.conf-t{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-2)}
@media (min-width:441px){.fila .nm span.conf-t{display:none}}

/* lista de preguntas */
.q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q.done{background:var(--surface-2)}
.q-ask{font-size:14px;color:var(--ink);line-height:1.45}
.q-ask small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.q-in{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.q-src{border:0;background:transparent;padding:2px 4px;cursor:pointer;border-radius:6px}
.q-src:hover{background:var(--surface-3)}

/* tablas */
table{border-collapse:separate;border-spacing:0;width:100%;min-width:620px}
th,td{text-align:right;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{background:var(--surface-2);vertical-align:bottom;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
th.l,td.l{text-align:left}
.th-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:normal}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tfoot td{padding:12px 14px;background:var(--surface-3);border-top:1px solid var(--line-2);border-bottom:0;font-weight:500}
table.mini{min-width:0}

/* ---------------- ventana ---------------- */
.veil{position:fixed;inset:0;z-index:100;background:rgba(17,26,38,.45);display:grid;place-items:center;padding:20px}
.modal{width:min(680px,100%);max-height:88vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.modal.wide{width:min(1080px,100%);max-height:92vh;background:var(--bg)}
.modal-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.modal.wide .modal-h,.modal.wide .modal-f{background:var(--surface)}
.modal-h h2{font-family:var(--display);font-size:16px;font-weight:600}
.modal-b{padding:20px;display:flex;flex-direction:column;gap:16px}
.modal-f{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;background:var(--surface);border-top:1px solid var(--line)}
.x{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer}
.x:hover{border-color:var(--line-2);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:9px;padding:10px 18px;background:var(--ink);color:var(--surface);border-radius:999px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg)}
.tipos{display:flex;flex-wrap:wrap;gap:10px}
.tipos > *{flex:1 1 215px;min-width:0}
.tipo{display:flex;flex-direction:column;gap:6px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.tipo:hover{border-color:var(--line-2)}
.tipo.on{background:var(--accent-soft);border-color:var(--accent);border-left-color:var(--accent)}
.tipo b{font-family:var(--display);font-size:14px;font-weight:600}
.tipo-m{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--ink-2)}
.tipo-m span{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tipo-mix{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.tipo-mix i{display:block;height:6px}

/* ---------------- presentación a pantalla completa ---------------- */
.show{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.show-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 30px;border-bottom:1px solid var(--line);background:var(--surface)}
.show-b{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;padding:26px 30px}
.show-f{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 30px;border-top:1px solid var(--line);background:var(--surface)}
.dots{display:flex;gap:7px}
.dots button{width:9px;height:9px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer}
.dots button.on{background:var(--accent);border-color:var(--accent);width:24px}
/* El recorrido con el doctor: la tarjeta de la que se está hablando, centrada
   y sola, y el paso siguiente siempre a mano por abajo. Las tarjetas no
   cambian: lo único que hace esto es darles el ancho de la vista y pegar el
   pie al borde inferior para no tener que buscarlo. */
.recorrido{max-width:880px;margin:0 auto;width:100%}
.rec-f{display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:sticky;bottom:0;z-index:5;padding:12px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.rec-f .dots i{display:block;width:9px;height:9px;border-radius:999px;border:1px solid var(--line-2)}
.rec-f .dots i.visto{background:var(--line-2)}
.rec-f .dots i.on{width:24px;background:var(--accent);border-color:var(--accent)}
.rec-hueco{width:1px}
.stage{max-width:1000px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.stage h2{font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:600}
.stage .lede{font-size:15px;color:var(--ink-2);max-width:56ch}
.stage .big{font-family:var(--display);font-size:clamp(44px,9vw,96px);font-weight:600;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--pos)}
.stage .big.neg{color:var(--neg)}
/* La cifra de partida es lo que le cuesta hoy: no es una ganancia y no va
   en el verde de las ganancias. */
.stage .big.neutro{color:var(--ink)}
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.vs-c{display:flex;flex-direction:column;gap:5px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.vs-c.a{border-left:3px solid var(--neg)}
.vs-c.b{border-left:3px solid var(--pos)}
.vs-c .n{font-family:var(--display);font-size:clamp(28px,4.4vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.vs-c.a .n{color:var(--neg)} .vs-c.b .n{color:var(--pos)}
.vs-c.ini{border-left:3px solid var(--line-2)}
.vs-c.fin{border-left:3px solid var(--accent)}
.vs-c.ini .n{color:var(--ink-2)} .vs-c.fin .n{color:var(--accent)}
.vs-c .s{font-size:13px;color:var(--ink-2)}
.tapv{border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;border-bottom:2px dotted currentColor;line-height:1.05}
.tapv:hover{opacity:.75}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{padding:16px 0;font-family:var(--mono);font-size:19px;font-weight:500;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.pad button:active{background:var(--surface-3)}
.padv{font-family:var(--mono);font-size:32px;font-weight:600;text-align:right;padding:12px 16px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:10px;font-variant-numeric:tabular-nums}

/* ---------------- acceso ---------------- */
/* Con el pie debajo, la entrada tiene dos piezas: se centran juntas y con
   aire entre ellas, en vez de repartirse la pantalla a medias. */
.login{min-height:100vh;display:grid;place-items:center;align-content:center;gap:22px;padding:24px}
/* Quién opera el sitio. Pequeño, pero con la tinta de un texto de verdad: un
   pie que no se lee no cumple para lo que está. */
.quien-es{width:min(420px,100%);display:flex;flex-direction:column;gap:3px;
  font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.quien-es a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.login-c{width:min(420px,100%);display:flex;flex-direction:column;gap:16px}
.login-h{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.login-h b{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.03em}
.login-h span{font-size:13.5px;color:var(--ink-2)}
.ulist{display:flex;flex-direction:column;gap:6px}
.usr{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.usr:hover{border-color:var(--line-2)}
.usr.on{border-color:var(--accent);background:var(--accent-soft)}
.av{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-3);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2)}
.usr.on .av{background:var(--accent);color:var(--on-accent)}
.usr-t{display:flex;flex-direction:column;min-width:0;flex:1}
.usr-t b{font-size:14px;font-weight:600}
.usr-t span{font-size:12px;color:var(--ink-3)}
.pin{display:flex;gap:8px;justify-content:center}
.pin input{width:52px;height:58px;text-align:center;font-family:var(--mono);font-size:24px;font-weight:600;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;outline:0}
.pin input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.err{font-size:13px;color:var(--neg);text-align:center}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:7px 16px;text-align:center;font-size:12.5px;background:var(--warn-soft);color:var(--warn);border-top:1px solid var(--warn)}

/* ================= piezas de la propuesta ================= */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:18px 20px}
@media (max-width:860px){.funnel{grid-template-columns:minmax(0,1fr)}}
.fcol{display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:10px;min-width:0}
.fcol.hoy{border-left-color:var(--line-2);padding:18px 20px}
.fcol.hoy .fbig{font-size:clamp(26px,3.9vw,38px);color:var(--ink-2)}

.fcol.inv{border-left-color:var(--accent);padding:18px 20px}
.fcol.inv .fbig{font-size:clamp(26px,3.9vw,38px);color:var(--accent)}
.fcol.inv .fstep:last-child .fbig{color:var(--pos)}
.fsteps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.fstep{display:flex;flex-direction:column;gap:2px;min-width:0}
.fbig{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.farrow{color:var(--ink-3);font-size:18px}
.fnote{font-size:12px;color:var(--ink-3)}
.fdelta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2)}
.fdelta b{font-family:var(--mono);font-weight:600}
.fdelta b.up{color:var(--pos)} .fdelta b.down{color:var(--neg)}

/* Eran cuatro fichas y son dos: con auto-fit ocupan la fila entera en vez
   de dejar medio renglón vacío, y siguen cabiendo si algún día vuelven. */
.stats{display:flex;flex-wrap:wrap;gap:12px}
.stats > *{flex:1 1 240px;min-width:0}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat{display:flex;flex-direction:column;gap:5px;min-width:0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
/* Un concepto que esta vista no cuenta se dice en gris, con el mismo tono que
   los interruptores apagados: nunca una cifra en verde que contradiga el total. */
.stat.apagado .stat-v{color:var(--ink-3);font-weight:500}
.fdelta .apagado{color:var(--ink-3)}
.fdelta .apagado b{color:var(--ink-3);font-weight:500}
.stat-v{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink)}
.stat-n{font-size:12.5px;color:var(--ink-3)}
.stat.pos .stat-v{color:var(--pos)} .stat.neg .stat-v{color:var(--neg)} .stat.warnv .stat-v{color:var(--warn)}
.stat.acc .stat-v{color:var(--accent);font-size:18px}

.tier-strip{display:flex;align-items:stretch;gap:8px}
/* La tira y sus dos flechas. Sin barra de desplazamiento: se mueve con
   ellas, con el dedo o con la rueda. */
.tira-w{display:flex;align-items:stretch;gap:7px}
.tira{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tira::-webkit-scrollbar{display:none}
.tira-f{flex:none;width:30px;display:grid;place-items:center;padding:0;
  font-family:var(--sans);font-size:19px;line-height:1;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:9px;cursor:pointer}
.tira-f:hover{border-color:var(--accent);color:var(--accent)}
.tira-f.off{opacity:.28;pointer-events:none}
.tira-w.sin-flechas .tira-f{display:none}
@media (pointer:coarse){.tira-f{width:44px;font-size:22px}}
.tchip{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 176px;min-width:0;padding:9px 13px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:9px;cursor:pointer;font-family:var(--sans);color:inherit;text-align:left}
.tchip:hover{background:var(--surface-3)}
.tchip.win{border-left-color:var(--pos)} .tchip.lose{border-left-color:var(--neg)}
.tchip.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.tchip.on .tchip-k,.tchip.on .tchip-pct,.tchip.on .tchip-v,.tchip.on .tchip-r{color:var(--accent-2)}
.tchip.on.win{border-left-color:var(--pos)} .tchip.on.lose{border-left-color:var(--neg)}
.tchip-k{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink)}
/* El último renglón: los productos que le ganamos y, si es el suyo por
   volumen, su marca al lado. Ahí cabe sin ensanchar la tarjeta. */
.tchip-pie{display:flex;align-items:center;gap:6px;max-width:100%}
.tchip-r{font-size:11px;color:var(--ink-3);white-space:nowrap}
/* El descuento manda en la tarjeta: es por lo que se elige un escalón. */
.tchip-d{display:flex;align-items:baseline;gap:6px;max-width:100%;min-width:0}
.tchip-d .tchip-r{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tchip-pct{font-family:var(--display);font-size:20px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.tchip-v{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-2)}

.disclose{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 2px;background:transparent;border:1px solid transparent;border-radius:7px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.disclose:hover{border-color:var(--line-2)}
.chev{flex:none;width:12px;color:var(--accent);font-size:10px;transition:transform .15s}
.disclose[aria-expanded="true"] .chev{transform:rotate(90deg)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 24px;padding:12px 14px;background:var(--surface-2);border-radius:8px;white-space:normal}
.spec-col{display:flex;flex-direction:column;gap:7px}
.spec-t{font-family:var(--display);font-size:13.5px;font-weight:600}
.spec-v{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.spec-src{display:inline-flex;align-self:flex-start;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:500}
.src-fab{background:var(--pos-soft);color:var(--pos)}
.src-dist{background:var(--accent-soft);color:var(--accent-2)}
.src-falta{background:var(--warn-soft);color:var(--warn)}
/* El precio de tarifa y el de una sola arcada, en la cabecera de la ficha:
   es el único sitio donde el comercial está mirando ese producto concreto. */
.spec-p{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:-3px}
/* Al pie, de dónde sale el dato y de qué tarifa. Una tarifa vencida se dice,
   porque un dato correcto de una tarifa caducada sigue siendo un error. */
.spec-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spec-tar{font-size:11px;color:var(--ink-3)}
.spec-tar.vieja{color:var(--warn);font-weight:500}
/* Y la ficha, del otro lado: escribiéndose, desplegada desde su fila en
   Configuración. */
.spec-ed{display:flex;flex-direction:column;gap:12px;padding:12px 0 4px}
.spec-ed textarea.txt{min-height:56px;resize:vertical}
.aviso-gest:empty{display:none}
tr.detail td{padding:0 14px 12px;background:var(--surface-2);text-align:left;white-space:normal}
.diff{display:inline-block;min-width:78px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.diff.win{color:var(--pos);background:var(--pos-soft)}
.diff.lose{color:var(--neg);background:var(--neg-soft)}
.diff.tie{color:var(--ink-3);background:var(--surface-3)}
.mix-cell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px}

/* rejilla de la tarifa: una columna por escalón */
.tier-edit{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:150px}
.tier-edit-top{display:flex;align-items:center;gap:4px}
.tier-edit .txt{text-align:right;font-size:12.5px;padding:5px 8px}
.tier-edit .note{display:flex;align-items:center;gap:5px;justify-content:flex-end;font-family:var(--sans);font-size:11.5px}
.tier-edit .inp{padding:3px 7px}
.tier-edit .inp input{width:48px;font-size:12px}
.tier-pct{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent-2);background:var(--accent-soft);border-radius:999px;padding:3px 9px}
.tier-x{width:20px;height:20px;display:grid;place-items:center;padding:0;font-size:15px;line-height:1;color:var(--ink-3);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer}
.tier-x:hover{color:var(--neg);border-color:var(--neg)}
.add-tier{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--accent);background:transparent;border:1px dashed var(--line-2);border-radius:8px;padding:9px 12px;cursor:pointer}
.add-tier:hover{border-color:var(--accent);background:var(--accent-soft)}
.col-add{width:1%}

.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.group{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
@media (min-width:720px){.group.wide{grid-column:span 2}}
.group-t{font-family:var(--display);font-size:13.5px;font-weight:600}
.group-ex{font-size:12.5px;color:var(--ink-3);margin:-4px 0 2px}
.group .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 20px}
.std{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-2)}
.std b{font-family:var(--mono);font-size:15px;color:var(--ink)}
.std.big{grid-column:1/-1;flex-wrap:wrap;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line);font-size:15px}
.std.big b{font-family:var(--display);font-size:clamp(24px,4vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1}
.std.big b.up{color:var(--pos)}

.attack{display:flex;flex-wrap:wrap;gap:10px}
.attack > *{flex:1 1 230px;min-width:0}
.atk{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px}
.atk .k{color:var(--accent)}
.atk-v{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--pos)}
.atk.neg{border-left-color:var(--neg)}
.atk.neg .k{color:var(--neg)}
.atk.neg .atk-v{color:var(--neg)}
.atk-ex{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.chart{display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;min-width:0}
.chart-t{font-family:var(--display);font-size:13.5px;font-weight:600}
.chart-s{font-size:12px;color:var(--ink-3);margin-top:-6px}

/* Un <details> cerrado esconde lo suyo por una regla del propio navegador,
   pero esa regla es la más débil que hay: cualquier «display» que pongamos
   nosotros —y a estas barras les ponemos «flex»— le gana, y el contenido se
   sigue dibujando aunque el desplegable esté cerrado y mida lo que su título.
   Resultado: 353 px de barras pintados encima de la tarjeta de debajo. Se
   repite la regla del navegador con puntería suficiente para que mande.
   Vale para los dos desplegables de la aplicación y para cualquier ancho. */
details:not([open]) > *:not(summary){display:none}
.bars{display:flex;flex-direction:column;gap:6px}
.brow{display:grid;grid-template-columns:minmax(112px,38%) 1fr minmax(78px,auto);align-items:center;gap:10px;min-height:26px;border-radius:6px;padding:2px 3px}
.brow:hover{background:var(--surface-3)}
.blab{font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.blab small{display:block;font-size:10.5px;line-height:1.3;color:var(--ink-3);white-space:normal;overflow-wrap:anywhere}
.brow.cur .blab{color:var(--ink);font-weight:600}
.btrack{position:relative;height:14px}
.btrack::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
/* Sin negativos no hay eje que marcar en el centro: la pista empieza donde
   empieza y las cifras pequeñas dejan de dibujarse todas iguales. */
.bars.solo-mas .btrack::before{left:0}
.bars.solo-mas .bfill.p{left:0}
.bfill{position:absolute;top:0;height:14px}
.bfill.p{left:50%;background:var(--pos);border-radius:0 4px 4px 0}
.bfill.n{right:50%;background:var(--neg);border-radius:4px 0 0 4px}
.bfill.dim{opacity:.38}
.bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;white-space:nowrap}
.brow.cur .bval{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-weight:600}

.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
@media (max-width:820px){.hero2{grid-template-columns:minmax(0,1fr)}.hero2 .h2-main{border-right:0;border-bottom:1px solid var(--line)}}
.h2-main{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
.h2-big{font-family:var(--display);font-size:clamp(34px,5vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--pos)}
.hero2.lose .h2-big{color:var(--neg)}
.h2-say{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:44ch;margin:0}
.h2-say b{color:var(--ink);font-weight:600}
.h2-side{padding:16px 20px 18px}
/* Lo que no entra en la cifra segura pero está contado: debajo, separado por
   una línea, para que se lea como lo que es —lo de al lado, no lo de arriba—. */
.h2-mas{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.h2-mas .k{color:var(--ink-3)}
.h2-mas-n{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--inv)}
.h2-mas-d > summary{list-style:none;cursor:pointer}
.h2-mas-d > summary::-webkit-details-marker{display:none}
.h2-mas-d .chev{margin-left:auto;color:var(--ink-3);transition:transform .15s}
.h2-mas-d[open] .chev{transform:rotate(180deg)}
.h2-mas-d .bars{margin-top:8px}
/* En el atributo «style» no: un display escrito ahí le gana hasta a la regla
   del navegador que esconde lo que hay dentro de un <details> cerrado, y esta
   línea se seguía pintando por debajo del desplegable. */
.h2-mas-d[open] > .nota-mas{display:block;margin:4px 0 2px}
/* Indirecto, directo y total: cada grupo con su rótulo, su suma y su color. */
.h2-gr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.h2-gr:first-child{margin-top:0;padding-top:0;border-top:0}
.h2-gr-n{font-family:var(--mono);font-size:15px;font-weight:600;margin-left:auto}
.h2-gr.t-ind .k,.h2-gr.t-ind .h2-gr-n{color:var(--accent-2)}
.h2-gr.t-dir .k,.h2-gr.t-dir .h2-gr-n{color:var(--pos)}
.bars.t-ind .bfill.p{background:var(--accent)}
.bars.t-dir .bfill.p{background:var(--pos)}
.bars.t-tot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.bars.t-tot .bfill.p{background:var(--ink)}
/* Las tres cifras de la izquierda, cada una con su color y su tamaño. */
.h2-cif{display:flex;flex-direction:column;gap:2px}
.h2-cif + .h2-cif{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.h2-med{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.h2-cif.ind .k,.h2-cif.ind .h2-big{color:var(--accent-2)}
.h2-cif.dir .k,.h2-cif.dir .h2-med{color:var(--pos)}
.h2-cif.tot .h2-big{color:var(--ink)}
body.doctor .h2-big{font-size:clamp(48px,7.5vw,84px)}
body.doctor .h2-main{padding:30px 26px 28px}
/* Los rellenables de cada palanca, en el hueco que dejó la explicación. */
/* Dos huecos fijos: los rótulos y las casillas caen en la misma columna en
   todas las filas, aunque una sólo tenga un dato. */
/* Los mandos de cada palanca, en dos columnas fijas. En fila cada casilla
   medía lo que medía su rótulo, así que ninguna caía debajo de la de arriba.
   Las que sólo tienen una casilla ocupan la primera y dejan la segunda. */
.extra-x{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;align-items:end;min-width:0}
.ex-d{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ex-k{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);
  line-height:1.2;white-space:nowrap}
.ex-d .inp,.ex-d input{width:86px}
/* Las dos columnas se quedan también en el teléfono: medido a 390 px, en
   una sola columna la tarjeta crece 170 px y las filas quedan desiguales. */
.ex-d .inp{padding:2px 6px}
.ex-d .inp{width:100%}
.ex-d .inp input{font-size:12.5px;width:100%;min-width:0}
.pe.aqui{outline:2px solid var(--accent);outline-offset:1px}
/* Las cuatro decisiones del primer paso: tarjetas grandes, no un
   desplegable. Lo que ha decidido el doctor es la pregunta, no un campo. */
/* El acumulado de los tres años, que es la cifra de quedarse. */
.anios-tot{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.anios-n{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--pos);line-height:1}
body.doctor .anios-n{font-size:clamp(34px,5vw,52px)}
.decs{display:flex;flex-wrap:wrap;gap:9px}
.decs > *{flex:1 1 190px;min-width:0}
.dec{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--line-2);border-left:4px solid var(--line-2);
  border-radius:10px;padding:12px 13px;cursor:pointer;font-family:var(--sans)}
.dec b{font-size:14.5px;font-weight:600;color:var(--ink)}
.dec span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.dec.v-si{border-left-color:var(--pos)}
.dec.v-quiza{border-left-color:var(--warn)}
.dec.v-no{border-left-color:var(--neg)}
.dec.on{box-shadow:0 0 0 1px var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.dec.v-si.on{box-shadow:0 0 0 1px var(--pos);border-color:var(--pos);background:var(--pos-soft)}
/* Lo que se marca de una lista, con su hueco para lo que no está en ella. */
.ops{display:flex;flex-wrap:wrap;gap:6px}
.op{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap}
.op:hover{border-color:var(--line-2);color:var(--ink)}
.op.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);font-weight:600}
/* La firma: el lienzo ocupa lo que haga falta para firmar con el dedo. */
.entrega{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 16px 10px}
.entrega-ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--pos-soft);color:var(--pos);font-size:26px;font-weight:600}
.firma-c{width:100%;max-width:560px;height:150px;border:1px dashed var(--line-2);border-radius:10px;
  background:var(--surface-2);touch-action:none;cursor:crosshair}
.firma-hecha{max-width:360px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.firma-cif{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--pos);line-height:1}
.acepta{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.4;cursor:pointer;max-width:62ch}
.acepta input{accent-color:var(--accent);width:17px;height:17px;margin:2px 0 0;flex:none}
.pad-n{font-family:var(--mono);font-size:30px;font-weight:600;text-align:center;max-width:220px;padding:10px 14px}
.con-gest{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);cursor:help}
.ex-fijo{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding:2px 6px}
/* Ya no es un dibujo con cursor de «ayuda»: es un botón de verdad, así que se
   le quita el aspecto de botón y se le deja el de icono. */
.ex-i{margin-left:6px;color:var(--ink-3);font-size:12px;flex:none;
  background:transparent;border:0;padding:0;cursor:pointer;line-height:1}
.ex-i:hover{color:var(--accent)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pb{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.pb.win{border-left-color:var(--pos)} .pb.lose{border-left-color:var(--neg)}
.pb-big{font-family:var(--display);font-size:clamp(22px,3.4vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.pb.win .pb-big{color:var(--pos)} .pb.lose .pb-big{color:var(--neg)} .pb.tie .pb-big{color:var(--ink-3)}
.pb-say{font-size:13px;line-height:1.45;color:var(--ink-2)}

.script{display:flex;flex-direction:column;counter-reset:paso}
.line{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:11px 20px;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line::before{counter-increment:paso;content:counter(paso);font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent);width:26px;height:26px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center}
.line p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:66ch}
.line p b{color:var(--ink);font-weight:600}
.line p b.hi{font-family:var(--mono);font-size:13.5px}
.line.pos p b.hi{color:var(--pos)}
.line.neg p b.hi{color:var(--neg)}
/* El guion se lee de pie y a saltos: cada frase dice si ahí se gana o se
   pierde antes de leerla. Verde suma, rojo resta. */
.line.pos{border-left:3px solid var(--pos);background:var(--pos-soft)}
.line.neg{border-left:3px solid var(--neg);background:var(--neg-soft)}
.line.pos p,.line.neg p{color:var(--ink)}
.line.dicho{opacity:.72}

.ideas{display:flex;flex-wrap:wrap;gap:10px}
.ideas > *{flex:1 1 240px;min-width:0}
.idea{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.idea b{color:var(--ink);font-weight:600;font-size:13.5px}

/* ---- formularios configurables ---- */
.col-cierre{display:flex;flex-direction:column;gap:14px}
/* El texto libre sí tiene medida: una línea de 900 px no se lee, se recorre. */
.col-cierre textarea.txt{max-width:80ch}
.campos{display:flex;flex-direction:column}
.campo{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:10px 24px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){.campo{grid-template-columns:minmax(0,1fr)}}
.campo:last-child{border-bottom:0}
@media (max-width:760px){.campo{grid-template-columns:minmax(0,1fr)}}
/* Una pregunta sola en su paso: el rótulo ya lo dice el título de la tarjeta,
   así que aquí sólo quedan la ayuda y el control, y se les da todo el ancho. */
.campo.sola{grid-template-columns:minmax(0,1fr);gap:8px;border-bottom:0;padding:2px 0 0}
.campo-t{display:flex;flex-direction:column;gap:3px}
.campo-et{font-size:14px;color:var(--ink);line-height:1.4}
.campo-req{color:var(--neg);font-weight:600}
.campo-ay{font-size:12.5px;color:var(--ink-3)}
.campo-c{min-width:0}
/* Rejilla, no pastillas sueltas: con largos distintos la columna queda
   dentada y no se lee en diagonal. */
.opciones{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.opciones > *{flex:1 1 210px;min-width:0}
.opcion{display:flex;align-items:center;gap:8px;padding:9px 13px;min-height:40px;line-height:1.3;font-family:var(--sans);font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;cursor:pointer}
.opcion:hover{border-color:var(--ink-3)}
.vs-med{display:block;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--ink-3);margin-top:1px}
.vs-med.mas{color:var(--pos)}
.vs-med.menos{color:var(--warn)}
.op-n{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--surface-3);border-radius:999px;padding:1px 7px;margin-left:2px}
.opcion.on .op-n{background:var(--accent);color:var(--on-accent)}
.opcion.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);font-weight:600}
.opcion .tic{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:4px;border:1px solid var(--line-2);font-size:10px;line-height:1}
.opcion.on .tic{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.opcion.uni .tic{border-radius:50%}
.preg{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.preg.off{opacity:.7}
.preg-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preg-n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3)}
.preg .txt{background:var(--surface)}

/* plegar una tarjeta de configuracion: con todas las marcas abiertas no se ve nada */
.card-x{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;cursor:pointer}
.card-x:hover{border-color:var(--ink-3);color:var(--ink)}
.card-x .car{font-size:10px;line-height:1}
.card.plegada .card-h{border-bottom:0}
[hidden]{display:none!important}
.card-h .der{display:flex;align-items:center;gap:10px;margin-left:auto}

/* editor de opciones: una fila por opcion, como en Google Forms */
.ops{display:flex;flex-direction:column;gap:6px}
.op-fila{display:flex;align-items:center;gap:8px;max-width:540px}
.op-fila .marca{flex:0 0 auto;width:14px;height:14px;border:1.5px solid var(--line-2);background:var(--surface)}
.op-fila .marca.circ{border-radius:50%}
.op-fila .marca.cuad{border-radius:4px}
.op-fila .txt{flex:1 1 auto;min-width:0}
.op-x{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;font-size:15px;color:var(--ink-3);background:transparent;border:0;border-radius:6px;cursor:pointer}
.op-x:hover{background:var(--neg-soft);color:var(--neg)}
.op-add{display:inline-flex;align-items:center;gap:6px;padding:5px 0;font-family:var(--sans);font-size:13px;color:var(--accent);background:transparent;border:0;cursor:pointer}
.op-add:hover{text-decoration:underline}
.vista{padding:11px 13px;background:var(--surface);border:1px dashed var(--line-2);border-radius:8px;display:flex;flex-direction:column;gap:7px}
.vista-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* escala lineal, como la de Forms */
.escala{display:flex;flex-direction:column;gap:6px}
.escala-p{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.escala-b{min-width:34px;height:34px;padding:0 8px;display:inline-grid;place-items:center;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;cursor:pointer}
.escala-b:hover{border-color:var(--ink-3)}
.escala-b.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.escala-e{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-3)}
.otra-in{margin-top:6px;max-width:340px}
/* separador de bloque dentro de un formulario */
.campo-sec{padding:16px 0 6px;border-bottom:0}
.campo-sec b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}
.campo-sec span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* resumen visual de respuestas */
.res-q{padding:14px 0;border-bottom:1px solid var(--line)}
.res-q:last-child{border-bottom:0}
.res-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.res-t b{font-size:14px;font-weight:600;color:var(--ink)}
.res-t span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.res-fila{display:grid;grid-template-columns:minmax(90px,190px) 1fr auto;align-items:center;gap:10px;padding:2.5px 0;font-size:13px}
.res-lab{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-tr{height:16px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.res-fi{display:block;height:100%;background:var(--accent);border-radius:5px}
.res-n{font-family:var(--mono);font-size:12px;color:var(--ink-2);min-width:62px;text-align:right}
.res-txt{display:flex;flex-direction:column;gap:6px}
.res-cita{padding:8px 11px;background:var(--surface-2);border-left:2px solid var(--line-2);border-radius:0 6px 6px 0;font-size:13px;color:var(--ink-2)}
.res-cita small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}

.filtros{display:flex;flex-direction:column;gap:9px}
.filtro-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* El buscador de la lista, con su atajo al borde: es el único sitio donde
   se escribe en pantalla desde que la lupa se fue del menú. */
.busca-caja{position:relative;display:flex;align-items:center;max-width:320px;flex:1 1 220px}
.busca-caja .txt{width:100%;padding-right:46px}
.busca-k{position:absolute;right:9px;font-family:var(--mono);font-size:10px;color:var(--ink-3);background:var(--surface-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;pointer-events:none}
@media (max-width:900px){.busca-k{display:none}.busca-caja .txt{padding-right:12px}}
.filtro-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);min-width:96px}
/* el número de cada filtro, con su propio fondo: es un número, no parte del nombre */
/* A quién le hablamos: un dato de dos palabras que se toca para cambiarlo,
   en vez de tres piezas —etiqueta, valor y enlace— ocupando una línea. */
/* Una pastilla que además se pulsa —la fase se cambia desde donde se lee—.
   El realce va en «outline» y no en el borde para que no crezca 2 px y deje
   las pastillas de al lado descolocadas. */
button.pill{cursor:pointer;font-family:var(--sans)}
button.pill:hover{outline:1.5px solid currentColor;outline-offset:1px}
.captamos{border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.captamos:hover{border-color:var(--line-2);color:var(--ink)}
.cuenta-seg{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-family:var(--mono);font-size:10.5px;font-weight:600;background:var(--surface-3);color:var(--ink-3);vertical-align:middle}
/* Blanco sobre un blanco al 24 % encima del acento se queda en 3,8:1, y el
   contador es texto pequeño. Se invierte: fondo sólido y letra del acento. */
.seg button.on .cuenta-seg{background:var(--on-accent);color:var(--accent)}
.seg.plain button.on .cuenta-seg{background:var(--surface-3);color:var(--ink-2)}
/* la segunda fila se cruza con la primera: mismo acento, más ligero */
.seg.cruce{background:transparent;padding:0;gap:6px}
.seg.cruce button{border:1px solid var(--line-2);background:var(--surface)}
.seg.cruce button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.seg.cruce button.on .cuenta-seg{background:var(--accent);color:var(--on-accent)}
/* renglón de resumen: está siempre, así la lista no salta al filtrar */
.resumen-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:30px;font-size:13px;color:var(--ink-3)}
.resumen-f .res-n{color:var(--ink-2);font-weight:600}
/* Los avisos de la lista: botones cortos de su color, que se abren al tocarlos. */
.avisos-w{display:flex;flex-direction:column;gap:10px}
.avisos-w:not(:has(.aviso-c)){display:none}
.avisos-l{display:flex;flex-wrap:wrap;gap:8px}
.aviso-c{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid currentColor;font:600 13.5px/1.2 var(--sans);cursor:pointer}
.aviso-c.ok{background:var(--pos-soft);color:var(--pos)}
.aviso-c.warn{background:var(--warn-soft);color:var(--warn)}
.aviso-c.urge{background:var(--neg-soft);color:var(--neg)}
.aviso-c > span{font-size:16px;line-height:1}
@media (pointer:coarse){.aviso-c{min-height:44px}}
/* El orden de la lista, en la fila del buscador. Para que quepa en el iPad
   con el buscador y las tres vistas, el buscador arranca más estrecho. */
.orden-in{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--sans);color:var(--ink-2);white-space:nowrap}
.orden-in select{width:auto;max-width:215px}
.filtros .filtro-f .busca-caja{flex-basis:120px}
/* «Ctrl K» no significa nada en una pantalla que se toca. */
@media (pointer:coarse){.busca-k{display:none}.busca-caja .txt{padding-right:12px}}
.filtros .filtro-f .seg.plain button{padding-left:12px;padding-right:12px}
/* muestras de color de las fases: se elige viendo, no leyendo */
/* el guion, agrupado por momentos y con lo ya dicho tachado */
/* interruptores de los extras */
/* selector de escalón: se ve el precio antes de darlo */
/* El escalón que le aplicamos: una decisión, un desplegable. La línea es
   larga porque lleva dentro el precio, el margen y en cuántos le ganamos. */
.esc-sel{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
/* El desplegable de los escalones. Cerrado enseña la línea del que está
   puesto; abierto, una línea por escalón. Flota, para no empujar la tabla
   que va justo debajo. */
.esc-d{position:relative;flex:1 1 100%;min-width:0}
.esc-d > summary{list-style:none;cursor:pointer;border:1px solid var(--line-2);border-radius:10px;background:var(--surface)}
.esc-d > summary::-webkit-details-marker{display:none}
.esc-d > summary:hover{border-color:var(--accent)}
.esc-d[open] > summary{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.esc-d > summary{position:relative}
.esc-d > summary .chev{position:absolute;right:12px;top:50%;margin:0;
  transform:translateY(-50%);transition:transform .15s}
.esc-d[open] > summary .chev{transform:translateY(-50%) rotate(180deg)}
.esc-op{position:absolute;z-index:25;left:0;right:0;top:calc(100% + 5px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.38);overflow:auto;max-height:min(58vh,340px);padding:4px}
/* Una línea y seis columnas, en la misma vertical en todos los escalones.
   Los anchos son fijos a propósito: con «auto», cada fila se mide sola y las
   columnas bailan de una a otra. */
.esc-fila{display:grid;
  grid-template-columns:minmax(0,124px) minmax(0,88px) minmax(0,58px) minmax(0,146px) minmax(0,1fr);
  align-items:center;gap:14px;width:100%;min-height:46px;
  padding:11px 32px 11px 14px;font-family:var(--sans);font-size:13px;color:var(--ink);
  background:transparent;border:0;border-radius:8px;text-align:left}
.esc-fila > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esc-tag{display:flex;align-items:center}
.pill.salto{color:#fff;border:0;font-weight:600}
.pill.salto.s-azul{background:var(--v-azul)}
.pill.salto.s-verde{background:var(--v-verde)}
.pill.salto.s-amar{background:var(--v-amar)}
.pill.salto.s-naran{background:var(--v-naran)}
.pill.salto.s-rojo{background:var(--v-rojo)}
.esc-tag .pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.esc-op .esc-fila{cursor:pointer}
.esc-op .esc-fila:hover{background:var(--surface-2)}
.esc-op .esc-fila.on{background:var(--accent-soft);color:var(--accent-2)}
.esc-op .esc-fila.peor{opacity:1}
.esc-n{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em}
.esc-pr{font-family:var(--mono);font-size:13.5px;font-weight:600}
.esc-mg{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.esc-g{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.esc-g .bola{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3);font-style:normal}
.esc-g.ninguno .bola{background:var(--neg)}
.esc-g.algunos .bola{background:var(--warn)}
.esc-g.todos .bola{background:var(--pos)}
.esc-ah{justify-self:end;font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap}
.esc-ah.bien{color:var(--pos)}
.esc-op .esc-fila.on .esc-ah.bien,.esc-op .esc-fila.on .esc-ah.mal{color:inherit}
.esc-ah.mal{color:var(--neg)}
@media (max-width:700px){
  .esc-fila{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .esc-ah{justify-self:auto;margin-left:auto}
  .esc-tag:empty{display:none}
}
.esc-strip{display:flex;gap:8px;padding:2px}
.esc{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:10px 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;cursor:pointer;font-family:var(--sans);text-align:left;box-shadow:var(--shadow)}
.esc:hover{border-color:var(--accent)}
.esc.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.esc.peor{opacity:.85}
.esc-k{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2)}
.esc-p{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.esc.on .esc-p{color:var(--accent-2)}
/* En cuántos de sus productos le ganamos con este escalón nuestro. Es la
   misma pregunta que responde la tira de su marca, hecha del otro lado. */
.esc-w{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.esc-w.todos{color:var(--pos)}
.esc-w.ninguno{color:var(--neg)}
.esc.on .esc-w,.esc.on .esc-w.todos,.esc.on .esc-w.ninguno{color:inherit;opacity:.85}
.esc-m{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.concedido-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
/* --- el calendario ---
   Colores: los de la fase del doctor, los mismos de las pastillas, para que
   una semana se lea sin leyenda. Lo hecho pierde fuerza; lo propuesto va a
   rayas, porque todavía no está puesto. */
.banda.ok{background:var(--pos-soft);color:var(--pos)}
.banda.warn{background:var(--warn-soft);color:var(--warn)}
.banda.est{background:var(--est-soft);color:var(--est)}
.banda.ok b,.banda.warn b,.banda.est b{color:inherit}
.banda.urge{background:var(--neg-soft);color:var(--neg)}
/* Y «fuerte» para lo que lleva días sin que nadie lo toque: borde del color
   del aviso y un punto más de cuerpo. El ámbar suelto se mira y se deja para
   luego; con borde, no. */
.banda.fuerte{box-shadow:inset 0 0 0 1.5px currentColor;padding:11px 14px;font-size:13px}
.banda.fuerte b{color:inherit;font-size:13.5px}
.banda.urge .btn.pri{background:var(--neg);border-color:var(--neg);color:var(--surface)}
.banda.urge .btn.pri:hover{filter:brightness(1.12);background:var(--neg);border-color:var(--neg)}
.banda.ok .btn.pri{background:var(--pos);border-color:var(--pos);color:var(--surface)}
.banda.ok .btn.pri:hover{filter:brightness(1.12);background:var(--pos);border-color:var(--pos)}
.cit{display:flex;flex-direction:column;gap:1px;text-align:left;padding:6px 8px;border:0;border-left:3px solid currentColor;border-radius:6px;cursor:pointer;font-family:var(--sans);font-size:12px;min-width:0}
.cit b{font-family:var(--mono);font-size:11px;font-weight:600}
.cit span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.cit i,.cit u{font-style:normal;text-decoration:none;font-size:11px;font-family:var(--mono);line-height:1.3}
.cit.inv{background:var(--pos-soft);color:var(--pos)}
.cit.now{background:var(--neg-soft);color:var(--neg)}
.cit.est{background:var(--warn-soft);color:var(--warn)}
.cit.acc{background:var(--accent-soft);color:var(--accent-2)}
.cit.mute{background:var(--surface-3);color:var(--ink-2)}
.cit.hecha{opacity:.72}
.cit.prop{border-left-style:dashed}
.cit.fallo span{text-decoration:line-through}
`/* ═══ la rejilla de horas ═══ */
.calen{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:560px}
.cal-h{display:grid;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cal-h > div{display:flex;flex-direction:column;gap:1px;min-width:0;padding:7px 9px;border-left:1px solid var(--line)}
.cal-h > div:first-child{border-left:0}
.cal-h b{font-size:12.5px;font-weight:600;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-h span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.cal-h .hoy b{color:var(--accent-2)}
.cal-g{display:grid;position:relative}
.cal-r{position:relative;border-right:1px solid var(--line);background:var(--surface-2)}
.cal-r i{position:absolute;right:6px;padding-top:2px;font-style:normal;font-family:var(--mono);font-size:10px;line-height:1;color:var(--ink-3)}
.cal-r i.fin{padding:0 0 2px;transform:translateY(-100%)}
.cal-d{position:relative;min-width:0;border-left:1px solid var(--line)}
.cal-d:first-of-type{border-left:0}
.cal-d.finde{background:var(--surface-2)}
.cal-d.hoy{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.cal-f{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:copy;width:100%}
.cal-f:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ev{position:absolute;overflow:hidden;display:flex;flex-direction:column;gap:0;
  padding:3px 6px;border:0;border-left:3px solid currentColor;border-radius:6px;
  font-family:var(--sans);font-size:11.5px;line-height:1.25;text-align:left;cursor:pointer}
.ev b{font-family:var(--mono);font-size:10px;font-weight:600}
.ev span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev i,.ev u{font-style:normal;text-decoration:none;font-family:var(--mono);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.corta{flex-direction:row;align-items:center;gap:5px;padding:1px 6px}
.ev.apretada i,.ev.apretada u{display:none}
.ev.corta i,.ev.corta u{display:none}
.ev.inv{background:var(--pos-soft);color:var(--pos)}
.ev.now{background:var(--neg-soft);color:var(--neg)}
.ev.est{background:var(--warn-soft);color:var(--warn)}
.ev.acc{background:var(--accent-soft);color:var(--accent-2)}
.ev.mute{background:var(--surface-3);color:var(--ink-2)}
.ev.hecha{opacity:.72}
.ev.prop{border-left-style:dashed}
.ev.fallo span{text-decoration:line-through}
.ev.mia{cursor:grab}
.ev.moviendo{cursor:grabbing;opacity:.85;box-shadow:var(--shadow-lg);z-index:6}
.ev-r{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize;background:transparent}
.ev-r::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.45;transform:translateX(-50%)}
.hueco{position:absolute;display:grid;place-items:center;border:1px dashed var(--line-2);border-radius:6px;
  background:transparent;color:var(--ink-3);font-family:var(--sans);font-size:11.5px;cursor:copy;transition:color .12s,border-color .12s}
.hueco:hover,.hueco:focus-visible{opacity:1;border-color:var(--accent);color:var(--accent-2)}
.ahora{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--neg);z-index:5;pointer-events:none}
.ahora::before{content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--neg)}
.cal-fantasma{position:absolute;z-index:7;pointer-events:none;font-family:var(--mono);font-size:10.5px;font-weight:600;
  background:var(--ink);color:var(--bg);padding:2px 7px;border-radius:5px;transform:translateY(-120%)}
@media (max-width:700px){.cal-h b{font-size:11.5px}.cal-h > div{padding:6px}}

.mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mes-th{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center;padding:2px 0}
.mes-d{display:flex;flex-direction:column;gap:3px;align-items:stretch;min-height:76px;padding:5px 6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer;text-align:left;font-family:var(--sans)}
.mes-d.finde{background:var(--surface-2)}
.mes-d.fuera{opacity:.58}
.mes-d.hoy{border-color:var(--accent)}
.mes-d:hover{border-color:var(--accent)}
.mes-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.mes-p{font-size:10.5px;padding:1px 5px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mes-p.inv{background:var(--pos-soft);color:var(--pos)}
.mes-p.now{background:var(--neg-soft);color:var(--neg)}
.mes-p.est{background:var(--warn-soft);color:var(--warn)}
.mes-p.acc{background:var(--accent-soft);color:var(--accent-2)}
.mes-p.mute{background:var(--surface-3);color:var(--ink-2)}
.mes-mas{font-size:10.5px;color:var(--ink-3)}
.mio{display:flex;flex-direction:column;gap:4px;padding:15px 17px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow)}
.mio.acc{border-left-color:var(--accent)}
.mio-n{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.mio-d{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.mio-d.up{color:var(--pos)} .mio-d.down{color:var(--neg)}
.mio .note{line-height:1.4}
tr.yo td{background:var(--accent-soft)}
tr.yo td:first-child,tr.yo .l{font-weight:600;color:var(--accent-2)}
td.pos{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
tr.podio td.pos{color:var(--ink);font-weight:600}
.extras-cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px}
.extras{display:flex;flex-direction:column;gap:2px;padding:4px 0}
/* El nombre, a lo ancho del más largo y siempre igual: con «auto» cada fila
   se medía sola y los mandos empezaban cada uno en un sitio. */
.extra{display:grid;grid-template-columns:minmax(0,224px) minmax(0,1fr) 96px;align-items:center;gap:10px 28px;padding:8px 4px;min-height:52px;border-bottom:1px solid var(--line)}
.extra-n{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.extra:last-child{border-bottom:0}
@media (max-width:700px){.extra{grid-template-columns:minmax(0,1fr) auto}.extra-x{grid-column:1/-1;order:3}}
/* de qué está hecha la probabilidad: una línea por factor, con su signo */
.factores{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fac{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface);font-size:13.5px}
.fac-t{flex:1;min-width:0;color:var(--ink-2)}
.fac-v{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-3);flex:none}
.fac.base{background:var(--surface-2)} .fac.base .fac-t{color:var(--ink);font-weight:600}
.fac.up .fac-v{color:var(--pos)} .fac.down .fac-v{color:var(--neg)}
.sw{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;color:var(--ink-3);background:transparent;border:0;padding:0;cursor:pointer;text-align:left}
.sw i{width:34px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;flex:none;transition:background .14s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-3);transition:left .14s}
.sw.on{color:var(--ink);font-weight:600}
.sw.on i{background:var(--accent);border-color:var(--accent)}
.sw.on i::after{left:16px;background:var(--on-accent)}
.extra-x{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.extra-v{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--pos);white-space:nowrap;text-align:right}
/* «+2.188 € si la enciendes» pide 166 px en una columna de 96: es el único
   texto que se sale en un iPad. La cifra sigue sin partirse; lo que puede
   pasar de línea es la coletilla. */
.extra-v.off{font-weight:500;color:var(--ink-3);font-size:11.5px;white-space:normal;line-height:1.3}
.extra.nulo{opacity:1}
.extra.nulo .extra-n,.extra.nulo .extra-x{color:var(--ink-3)}
.extra.nulo .sw{cursor:not-allowed}
.sw[disabled]{cursor:not-allowed}
.sw[disabled] i{opacity:.5}
.fecha-p{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.fecha-p.tarde{color:var(--neg);font-weight:600}
/* SS-02 · una fecha de próximo paso que ya pasó, al retomar un borrador. */
input.txt.vencida{border-color:var(--warn);background:var(--warn-soft)}
.aviso-fecha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--warn)}
.fecha-p .cal{font-size:10px}
.marbete{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:3px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.02em;text-transform:none;background:var(--accent-soft);color:var(--accent-2)}
.brow.mot{width:100%;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit}
.brow.mot:hover{background:var(--surface-2)}
.brow.mot.cur .blab{color:var(--accent);font-weight:600}
.guion-g{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.guion-g:first-child{margin-top:0}
.guion-g > .k{padding-bottom:2px;border-bottom:1px solid var(--line)}
.script .line{display:flex;gap:9px;align-items:flex-start}
.script .line.dicho{opacity:.72}
.script .line.dicho p{text-decoration:line-through;text-decoration-color:var(--line-2)}
.tic-guion{flex:none;width:18px;height:18px;margin-top:2px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--pos);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;cursor:pointer}
.tic-guion:hover{border-color:var(--pos)}
.auto-off{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;font-family:var(--sans);font-size:11.5px;color:var(--warn);background:var(--warn-soft);border:1px solid transparent;border-radius:999px;cursor:pointer}
.auto-off b{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auto-off:hover{border-color:var(--warn)}
.tchip-auto{display:inline-block;padding:0 6px;border-radius:999px;font-family:var(--mono);font-size:9.5px;font-weight:600;background:var(--surface-3);color:var(--ink-3);text-transform:none;letter-spacing:0}
/* El color de la marca es el del salto: azul si el escalón elegido es el
   suyo, verde si le has puesto menos, y de amarillo a rojo según lo que le
   des de más. */
.tchip-auto.s-azul,.tchip-auto.s-verde,.tchip-auto.s-amar,.tchip-auto.s-naran,.tchip-auto.s-rojo{color:#fff}
.tchip-auto.s-azul{background:var(--v-azul)}
.tchip-auto.s-verde{background:var(--v-verde)}
.tchip-auto.s-amar{background:var(--v-amar)}
.tchip-auto.s-naran{background:var(--v-naran)}
.tchip-auto.s-rojo{background:var(--v-rojo)}
.tonos{display:flex;gap:5px}
.tono{width:20px;height:20px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0}
.tono.on{outline:2px solid currentColor;outline-offset:2px}
.tono.t-acc{background:var(--accent);color:var(--accent)}
.tono.t-inv{background:var(--pos);color:var(--pos)}
.tono.t-est{background:var(--warn);color:var(--warn)}
.tono.t-now{background:var(--neg);color:var(--neg)}
.tono.t-mute{background:var(--ink-3);color:var(--ink-3)}
@media (max-width:640px){.filtro-k{min-width:0;flex-basis:100%}}

.legend{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:12.5px;color:var(--ink-3)}
.legend p{margin:0;max-width:72ch}
.legend b{color:var(--ink-2);font-weight:500}

/* resumen que sólo se ve con el doctor delante */
.summary{display:none;flex-wrap:wrap;flex-basis:100%;gap:8px 22px;padding:14px 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.summary b{color:var(--ink);font-weight:600}
body.doctor .internal{display:none!important}
/* Con el doctor delante desaparece el marco entero: menú, pestañas y tu nombre. */
body.doctor .rail{display:none}
body.doctor .app{grid-template-columns:minmax(0,1fr)}
body.doctor .wrap{max-width:none;padding:24px clamp(20px,3.5vw,52px) 64px;gap:18px}
body.doctor .prop-w{display:block}
body.doctor .prop-w > .indice-v{display:none}
body.doctor .hero2{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
body.doctor .anios{gap:18px}
body.doctor .extra{grid-template-columns:minmax(0,248px) minmax(0,1fr) 120px}
body.doctor .extra-x{grid-template-columns:repeat(2,minmax(0,240px))}
@media (min-width:1500px){body.doctor .wrap{max-width:1500px}}
body.doctor .top{position:static}
.solo-doctor{display:none}
body.doctor .solo-doctor{display:inline-flex}
body.doctor .sub.solo-doctor{display:block}
body.doctor .hint.solo-doctor{display:block}
body.doctor h2.solo-doctor{display:block}
/* Lo que sólo aparece cuando no hay sitio: el revés de .solo-ancho. */
.solo-corto{display:none}
.n-corto{display:none}
@media (max-width:900px){
  .solo-corto{display:inline-flex}
  .top .solo-corto{display:inline-flex}
}
@media (max-width:700px){
  .n-largo{display:none}
  .n-corto{display:inline}
}
body.presentando .bar{display:none}
body.doctor .summary{display:flex}
body.doctor .masthead{order:-40}
body.doctor .b-fuentes{order:-36}   /* de dónde sale: una cifra sin fuente se rechaza */
body.doctor .b-regen{order:-33}      /* volver a elegir lo que le encaja */
body.doctor .b-verdict{order:-32}   /* la cifra */
body.doctor .b-supuestos{order:-31}  /* y lo que aún es estimación nuestra */
body.doctor .b-falta{order:-30}     /* si no sale, la salida va pegada a la cifra */
/* La fila de tres tarjetas se fue: repetía el veredicto y el embudo. */
body.doctor .b-extras{order:-26}    /* lo que la hace subir, al lado de ella */
body.doctor .b-anios{order:-31}     /* pegado a la cifra: es la misma cuenta, a tres años */
body.doctor .b-patients{order:-30}  /* detrás de los tres años: los explica */
body.doctor .b-horas{order:-32}     /* el tiempo, pegado a la cifra del año */
body.doctor .b-paciente{order:-20}
body.doctor .b-noes{order:-18}
body.doctor .b-cara{order:-16}
body.doctor .b-cambio{order:-14}
body.doctor .b-refs{order:-12}
body.doctor .b-resumen{order:-10}   /* el último: es lo que se lleva */

/* ══════════════════════════════════════════════════════════════════════
   EL DEDO · cualquier aparato que se toque, iPad incluido
   ─────────────────────────────────────────────────────────────────────
   Va aquí, y no arriba del todo donde estaba, porque el orden manda: con dos
   reglas igual de específicas gana la última, y estando arriba perdía contra
   las reglas normales de más abajo. Por eso el «?» de ayuda seguía midiendo
   16 px y la ✕ de cerrar 22, aunque aquí pusiera otra cosa.

   Después de las normales, para ganarles. Antes de las de teléfono, que son
   las que más mandan.
   ══════════════════════════════════════════════════════════════════════ */
/* Lo que sólo hace falta cuando no hay ratón: los carteles que sustituyen a
   un texto que sólo salía al pasar por encima. */
@media (pointer: fine){.solo-dedo{display:none}}

@media (pointer: coarse){
  /* 16 px es el umbral exacto a partir del cual iOS deja de hacer zoom. */
  .txt,.sel,textarea,textarea.txt,input[type="text"],input[type="number"],
  input[type="tel"],input[type="email"],input[type="date"],input[type="time"],
  input[type="password"],input[type="search"],select{font-size:16px !important}
  .inp input,.switch input,input{font-size:16px !important}
  /* Con el dedo el campo se estira a lo que ocupe el número, y en la ficha
     vive dentro de una rejilla de cuatro columnas de 164 px: sin techo se iba
     a 265 y se montaba encima del campo de al lado. El alto es intocable —es
     lo que se pulsa—; lo que cede es el ancho. */
  .inp{min-height:46px;padding:1px 10px;max-width:100%}
  .inp input{width:auto;min-width:0;min-height:44px;max-width:100%}
  .pill{min-height:34px}
  button.pill,.paso-p,button.paso-p{min-height:44px}
  /* Los campos compactos —los escalones de Configuración y los de las
     palancas— llevan su propio relleno, más estrecho. Al bajar este bloque en
     la hoja pasó a pisarles el genérico y las tablas de escalones se salían
     de su celda: se les devuelve el suyo. */
  .tier-edit .inp{padding:1px 7px}
  .ex-d .inp{padding:1px 6px}
  .fl2 .inp,.ex-d .inp,.ex-d input{width:96px}

  /* Lo que se pulsa, del tamaño de un dedo. */
  .btn{min-height:44px}
  .btn.sm{min-height:44px;padding:8px 14px}
  .txt,.sel,select,textarea.txt{min-height:44px}
  .brand{min-height:44px}
  .mas-col{min-height:44px}
  .switch,.switch.sm{min-height:44px}
  .cerrar-x,.x{width:44px;height:44px}
  /* El «?» de ayuda vive dentro de un rótulo, y en un móvil pequeño esos
     rótulos van en columnas de 166 px: cada píxel que engorde se lo quita al
     texto de al lado. Así que el dibujo casi no cambia y lo que crece hasta
     los 44 px es la zona de toque, que no ocupa sitio. */
  .pista{width:22px;height:22px;font-size:12px;position:relative}
  .pista::after{content:"";position:absolute;inset:-11px}
  .nav{min-height:44px}
  .seg button{min-height:44px}
  .opcion{min-height:48px}
  .dec{min-height:64px}

  /* Las casillas eran de 13 px: imposible acertar sin uña. */
  input[type="checkbox"],input[type="radio"]{width:22px;height:22px;flex:none}
  .acepta{font-size:14.5px;gap:12px;align-items:center}

  /* Interruptores, desplegables y cabeceras de tabla: cuerpo suficiente
     para el dedo aunque el dibujo siga siendo el mismo. */
  /* Estos iban a 40 px, que es lo justo para fallar de vez en cuando. Apple y
     Google piden 44 y tienen razón: los campos de cifras —los que se tocan con
     el doctor delante— medían 34, la mitad de lo que abarca un dedo. Todo se
     gana con relleno, nunca con tamaño de letra, así que ninguna línea se
     recoloca y el dibujo queda igual: sólo con más aire.

     Y esto es de PUNTERO, no de ancho, a propósito. Lo de «nunca
     pointer:coarse» vale para el ESPACIO —la barra de abajo sale en iPad, y
     por ancho se le colaría el diseño de teléfono—, pero para el TAMAÑO DE LO
     QUE SE PULSA el ancho es la señal equivocada: un iPad de 1.024 px se toca
     con el dedo igual que uno de 768. Un ordenador con ratón declara
     «pointer: fine» y no entra aquí. */
  .sw,.disclose,.th-b,.hist,.card-x,.ix,.fuente,.falta,.rail-x,.lnk,.ojo{
    min-height:44px;display:inline-flex;align-items:center}
  .th-b{padding:6px 2px}
  .card-x,.rail-x{min-width:44px;justify-content:center}
  .esc-fila{min-height:52px}
  .mando{min-height:44px;min-width:44px}
  .fila-mas{width:44px;height:44px;right:5px}
  .fh-cab,.fila{padding-right:56px}
  .wf-r,.q-src,.add-tier{min-height:44px}
  /* La ✕ de borrar un escalón vive en una celda estrecha: el dibujo se queda
     y la zona de toque crece por dentro. */
  .tier-x{position:relative}
  .tier-x::after{content:"";position:absolute;inset:-12px}
  /* Lo que no puede crecer sin descolocar la línea en la que vive —el ✓ del
     guion mide 18 px y hay uno por frase— crece sólo por dentro: el dibujo
     sigue igual y lo que se agranda es el sitio donde vale tocar. */
  .tic-guion,.ex-i{position:relative}
  .tic-guion::after{content:"";position:absolute;inset:-13px}
  .ex-i{font-size:13px}
  .ex-i::after{content:"";position:absolute;inset:-14px -10px}

  /* Y nada de menús que sólo existen al pasar por encima. */
  .showtip{-webkit-tap-highlight-color:transparent}
}
/* En un iPad apaisado con el menú abierto el sitio justo está en la ficha:
   el carril se pliega solo por debajo de 1200 px y se despliega al tocarlo. */
@media (pointer: coarse) and (max-width:1200px){
  .fh-cab,.fila{gap:12px}
}

/* ══════════════════════════════════════════════════════════════════════
   EL TELÉFONO · de 440 px hacia abajo
   ─────────────────────────────────────────────────────────────────────
   Hasta hoy el corte más pequeño de esta hoja era 520 px, así que un iPhone
   de 390 recibía el mismo diseño que una ventana estrecha de ordenador, que
   es otra cosa. Aquí abajo vive todo lo que es sólo de teléfono.

   La regla que manda: NADA de esto puede entrar en el iPad. El iPad vertical
   mide 768 px y el apaisado 1.024, así que un corte de ancho —y no
   «pointer:coarse», que también es el iPad— es la frontera segura. Ojo con
   esto porque la barra de abajo .barra-movil sale desde 900 px: también en
   iPad.

   Dos interruptores para todo el bloque:
     .no-tel    lo que desaparece en el teléfono
     .solo-tel  lo que sólo existe en el teléfono
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:441px){.solo-tel{display:none}}

/* La zona segura del iPhone: el hueco del indicador de inicio y, en apaisado,
   el del notch. Fuera de un iPhone estos valores son cero, así que esto no
   suma un píxel en iPad ni en el ordenador. */
.barra-movil{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.bar{padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))}
.app{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

@media (max-width:440px){
  .no-tel{display:none}

  /* ── el suelo de la letra ──
     Nada por debajo de 12 px en lo que hay que leer. Sube el tamaño, no la
     caja: son rótulos de una línea que ya tenían sitio de sobra, y las
     versalitas conservan su espaciado, que es lo que les da carácter. Se
     quedan fuera a propósito los glifos y las rejillas de calendario y de
     gráfico, donde el número pequeño es el dibujo. */
  .k,.sub,.note,.eyebrow,.filtro-k,.orden-k,.paso-n,.doc-ft,.vista-k,.em-k,
  .esc-p u,.hueco-b u,.nota-f,.obj-ya,.ix-k,.anio-sube,.col-t,
  .fila .cl u,.fila .fase u,.fila .dif u,.vp u,.ref .de,.esc-w,.cfg-ap,
  .blab small,.ex-k,.vs-med,.op-n,.mes-h{font-size:12px}
  .fh-cab,thead th,.th-k{font-size:11.5px}
  .fila .nm span.conf-t{font-size:12px;color:var(--ink-3)}
  .pill,.campo-mal{font-size:12.5px}
  .sin-valorar,.tiene-nota,.hist-c,.hist-v,.hist-q,.palanca span,.hora-s,
  .ojea .sub2,.firma-f .sub2,.parada .sub2,.reto .reto-p,.noe-d,
  .quien-lo-trae,.cfg-est,.mv .mono,.spec-p,.spec-tar,.spec-src,.tchip-r,
  .tchip-v,.esc-k,.esc-m,.esc-mg,.dec span,.vp span,.ref .q,.pie-k,
  .res-t span,.res-cita small,.preg-n,.pregf .num,.fuente,.tier-edit .note,
  .extra-v.off,.fecha-p,.auto-off,.cit b,.cit i,.cit u,td.pos,.line::before,
  .tema .seg button,.nav .cnt,.brand span{font-size:12px}
  .marbete,.tchip-auto,.obra-p,.parecido,.con-gest,.cuenta-seg{font-size:11.5px}

  /* ── el dedo ──
     44 px es lo que piden Apple y Google, y se ganan con relleno: así ninguna
     línea se recoloca y sólo cambia el aire. */
  .btn,.btn.sm,.seg button,.nav,.th-b,.hist,.card-x,.ix,.fuente,.falta,
  .lnk,.ojo,.disclose,.sw,.mando{min-height:44px}
  .card-x,.rail-x,.mando{min-width:44px}
  .row{gap:8px}
  .filtros{gap:8px}
  .pista{width:30px;height:30px;font-size:14px;margin-left:7px}

  /* La ✕ de cerrar estaba a media tinta y sólo se aclaraba al pasar el ratón:
     en un teléfono no hay ratón, así que se quedaba apagada para siempre. */
  .cerrar-x{width:44px;height:44px;font-size:17px;opacity:1}
  /* Y la de las ventanas, igual: 30 px en gris claro, aclarándose sólo al
     pasar el ratón, es el dibujo exacto de «no encuentro cómo salir». */
  .x{width:44px;height:44px;font-size:19px;color:var(--ink);border-color:var(--line-2)}

  /* Los huecos libres de la agenda, por lo mismo. */
  .hueco{opacity:1}

  /* ── los campos de cifras ──
     Es el control que más se toca de toda la herramienta: la conversación
     entera con el doctor pasa por aquí. */
  /* Ancho ya tenían; alto, 34 px. Es el control que más se toca de toda la
     herramienta, así que el dedo va contra el campo, no contra su marco. */
  .inp{min-height:46px;width:100%;justify-content:space-between;padding:1px 10px}
  /* Menos en las tablas de escalones de Configuración, donde el campo vive en
     una celda estrecha y a ancho completo se sale de ella. */
  .tier-edit .inp{width:auto;padding:1px 7px}
  .inp input{flex:1 1 auto;min-width:0;width:100%;min-height:44px}
  .fl2 .inp,.ex-d .inp,.ex-d input{width:100%}

  /* ── la cabecera de la ficha ──
     Medía 282 px en un iPhone de 390 y 332 en uno pequeño: el 58 % de la
     pantalla antes de ver un dato. Pasa a dos filas: una con el atrás, el
     nombre y el ⋯, y otra con las pestañas. Lo que se va —la clínica, la
     marca, las visitas y los casos— no se pierde: vive en el ▾ del nombre. */
  .top{gap:6px 8px;padding:6px 10px}
  .top > .grow{flex:1 1 0;display:flex;align-items:center;gap:4px;min-width:0}
  /* La chapa de la ficha de ejemplo y la de «obras» se leen en el ▾ y dentro
     del propio ⋯: aquí arriba se comen la fila. */
  .top > .pill,.top .badge-casos{display:none}
  .top .btn .obra-p{display:none}
  /* El interruptor de la vista del doctor bajó a la barra del pulgar. */
  /* En el teléfono, enseñársela se hace desde la barra de abajo, que es
     donde llega el pulgar: arriba sobra. */
  .top-acc > .switch,.top-acc > .pres-w{display:none}
  .top h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .sub{display:none}
  .top-acc{flex-basis:100%;justify-content:flex-start;gap:6px;margin-left:0}
  .tabs-g{flex-wrap:nowrap;overflow-x:auto;gap:5px;width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs-g::-webkit-scrollbar{display:none}
  .seg.tabs{flex-wrap:nowrap}
  .seg.tabs button{padding:9px 13px;font-size:13.5px}
  /* El ▾ del nombre: abre la ficha de identidad que antes estaba desplegada. */
  .tel-mas{flex:none;width:34px;min-height:34px;padding:0;display:inline-grid;
    place-items:center;font-size:13px;color:var(--ink-2);background:var(--surface-3);
    border:1px solid var(--line);border-radius:9px;cursor:pointer}

  /* ── la barra de abajo ──
     Ya estaba bien pensada: la cifra y «Presentar» en la zona del pulgar.
     Ahora se le da el resto del trabajo de una visita — enseñar la pantalla y
     registrar cómo ha ido— para no tener que subir a por ellos. */
  /* Tres filas eran 121 px de los 844 de un iPhone. Con la cabecera se
     comían 236 px de pantalla, y «Registrar» ya está en las pestañas, a un
     toque de distancia: en la barra sobraba. Queda lo que de verdad se usa
     sin soltar el teléfono: cuánto gana, quién lo está viendo y presentar. */
  .barra-movil{flex-wrap:wrap;gap:6px 10px;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px))}
  .barra-movil > .f{flex:1 1 auto;min-width:0}
  .tel-ir{flex:none;min-width:54px;justify-content:center;font-size:17px;padding:8px 12px}
  /* Y deja de llamarse por el modo: dice qué está pasando. */
  .tel-ve{flex:none;padding:6px 12px 6px 10px}
  .tel-ve.on{color:var(--pos);border-color:var(--pos)}
  .tel-ve.on .track{background:var(--pos);border-color:var(--pos)}

  /* ── las tablas, en tarjetas ──
     «Visitas registradas» mide 1.112 px de ancho, 10 columnas y 17 filas, y
     leerla arrastrándola sobre una ventanilla de 390 px es adivinar: se
     pierde de vista a qué fila pertenece la celda. Cada fila pasa a ser una
     tarjeta con su rótulo al lado de cada dato. Es el mismo dato pintado de
     otra manera; la <table> sigue intacta a partir de 441 px. */
  .scroll-w.hay-tarj .scroll,.scroll.hay-tarj{overflow:visible}
  .scroll-w.hay-tarj .mas-col{display:none !important}
  /* La <table> se quita de en medio del todo: «display:contents» la borra como
     caja y deja a sus filas colgando del contenedor, que ya mide lo que la
     pantalla. Es la única forma limpia de librarse del «min-width:720px» que
     «.scroll table» le pone para que las columnas respiren: en tarjetas no hay
     columnas, pero ese ancho mínimo seguía empujando cada tarjeta 364 px fuera
     de una caja de 356, con la mitad derecha cortada. */
  table.tarj-tel{display:contents}
  table.tarj-tel tbody,table.tarj-tel tfoot,table.tarj-tel tr,table.tarj-tel td{display:block;width:auto}
  table.tarj-tel thead{display:none}
  table.tarj-tel tr{background:var(--surface);border:1px solid var(--line);
    border-radius:10px;padding:9px 12px;margin-bottom:8px}
  table.tarj-tel tr:nth-child(even){background:var(--surface)}
  table.tarj-tel td{border:0;padding:4px 0;text-align:left;white-space:normal;
    display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:10px;align-items:baseline}
  table.tarj-tel td::before{content:attr(data-l);font-family:var(--mono);font-size:11.5px;
    font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
    overflow-wrap:anywhere}
  table.tarj-tel td[data-l=""]::before,table.tarj-tel td:not([data-l])::before{content:none}
  table.tarj-tel td[data-l=""],table.tarj-tel td:not([data-l]){grid-template-columns:minmax(0,1fr)}
  table.tarj-tel td.tel-tit{grid-template-columns:minmax(0,1fr);font-size:15.5px;font-weight:600;
    padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  table.tarj-tel td.tel-tit::before{content:none}
  table.tarj-tel tr:not(.abierta) td.tel-fold{display:none}
  table.tarj-tel td.tel-ver{grid-template-columns:minmax(0,1fr);padding:0;margin-top:5px}
  table.tarj-tel td.tel-ver button{width:100%;min-height:40px;font-family:var(--sans);
    font-size:13.5px;font-weight:600;color:var(--accent);background:transparent;
    border:1px dashed var(--line-2);border-radius:8px;cursor:pointer}

  /* ══ tercera vuelta: texto que no cabe en su propia caja ══
     Las dos medidas anteriores miraban si algo se salía de la PANTALLA, y por
     eso daban cero. Lo que faltaba era mirar dentro de cada caja. ══ */

  /* ── el nombre del doctor ──
     Iba en una línea con la tijera puesta: «Dr spark marcha» necesitaba 121 px
     y tenía 98, y en la pantalla que se le enseña A ÉL faltaba el 44 % de su
     propio nombre. Ahora cabe en dos líneas, y sólo si tampoco caben se
     recorta. */
  .top h1{white-space:normal;overflow-wrap:anywhere;line-height:1.15;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ── la pantalla del doctor, a una columna ──
     La cifra por la que existe esto se salía 64 px de su caja en un iPhone y
     97 en uno pequeño, y las barras de al lado se quedaban sin carril: la
     barra medía CERO. El motivo estaba a la vista en una sola línea:
     «body.doctor .hero2» volvía a poner dos columnas y, al no tener regla de
     pantalla, le ganaba a la de 820 px que las junta. En un iPad —768 px— las
     dos columnas siguen cabiendo de sobra, así que se corrige sólo aquí. */
  body.doctor .hero2{grid-template-columns:minmax(0,1fr)}
  body.doctor .hero2 .h2-main{border-right:0;border-bottom:1px solid var(--line)}
  /* Y que el tamaño de la cifra lo mande el número, no al revés. */
  body.doctor .h2-big{font-size:clamp(32px,11vw,48px)}
  body.doctor .brow,body.presentando .brow{grid-template-columns:minmax(96px,42%) 1fr minmax(74px,auto);gap:9px}
  body.doctor .blab,body.presentando .blab{overflow-wrap:anywhere}

  /* ── Configuración ──
     La cabecera de cada tarjeta es una fila con el icono, el título, una
     chapa, un botón y el desplegable. Entre los cuatro fijos y los cuatro
     huecos de 24 px se quedaban con los 316 px de ancho, y al título le
     sobraban TRES. No es texto que no cabe: es una columna aplastada, y como
     no recorta, el título se pintaba fuera. El título se lleva su línea. */
  .card-h.cfg-h{column-gap:12px}
  .card-h.cfg-h .cfg-t{flex:1 0 100%}

  /* ── el cuadro de mando ──
     Estas filas son rejillas de columnas fijas pensadas para el escritorio:
     en 390 px al nombre de un doctor le quedaban 39 px y a «Clínica 3 · Otra
     marca / genérico · Comercial 1», 86 para 246. Como las tablas, cada fila
     pasa a ser una tarjeta: el nombre en su línea y lo demás debajo. */
  .firma-f,.parada,.ojea{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .firma-f > .col,.parada > .col,.ojea > .col{flex:1 0 100%;min-width:0}
  .firma-f b,.parada b,.ojea b{white-space:normal;overflow:visible;text-overflow:clip}
  .firma-f .sub2,.parada .sub2,.ojea .sub2{white-space:normal;overflow:visible;
    text-overflow:clip;line-height:1.35}

  /* ── las filas de pregunta y respuesta ──
     El mismo bloque en tres pantallas —Agenda, Usuarios y Registrar seguimiento—:
     el texto de debajo («super@demo · 0 doctores») tenía 26 px para 75 porque
     los mandos de la derecha se quedaban con la fila. Bajan a su propia
     línea. */
  .q{grid-template-columns:minmax(0,1fr);gap:8px}
  .q-in{justify-content:flex-start;flex-wrap:wrap}

  /* ── las palancas del ahorro indirecto ──
     Tres columnas, una de ellas de 150 px mínimo: la cifra se quedaba sin
     sitio. El nombre se lleva su línea y la cifra va debajo. */
  .extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .extra-n{flex:1 1 100%;white-space:normal}

  /* ── los tres años ──
     Tres columnas de 67 px en un móvil pequeño, y «+105.563 €» pide 74. Que
     la cifra se ajuste al hueco en vez de salirse por la derecha. */
  .anio-n{font-size:clamp(14px,5vw,19px)}
  .anios{gap:8px}

  /* ── el botón de «completar con él» ──
     Es el único de la app cuyo texto es una frase entera: en 320 px pedía 333
     px en una caja de 280 y empujaba la página seis píxeles de lado. Que parta
     la frase en vez de empujar. */
  .b-supuestos .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}

  /* ── el embudo y la chapa del año ──
     Tres sitios donde el suelo de 12 px que se puso para poder leer se volvió
     en contra: son rótulos dentro de cajas de 46 y 67 px, y ahí un punto de
     más es un texto cortado. Ahí manda el hueco. */
  .anio-sube{font-size:10.5px;letter-spacing:0;padding:2px 4px;white-space:normal;line-height:1.25}
  .fcol.inv .fbig{font-size:clamp(15px,5.6vw,26px)}
  .fstep .fnote{font-size:11.5px}

  /* ── la línea gris de la lista ──
     «Clínica de ejemplo · Valencia · Spark» pedía 194 px y tenía 135: en un
     móvil pequeño se veía el 70 %. Dos líneas antes que media. */
  .fila .nm > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;line-height:1.3}

  /* ── la gráfica de doce meses ──
     A 320 px cada mes tiene quince píxeles y «oct» necesita diecinueve: no es
     que quepa mal, es que no cabe. Antes que dejar las etiquetas a medias, la
     gráfica se arrastra de lado, que es lo que se espera de una gráfica. */
  .cols{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cols::-webkit-scrollbar{display:none}
  .col-b{flex:0 0 28px}

  /* ── la chapa de la fase, en la lista ──
     «Decisión aplazada» pide 131 px y la columna da 104. Se lee en dos
     líneas antes que a medias. */
  .fila .cl.fase .pill{white-space:normal;border-radius:9px;line-height:1.2;padding:4px 9px}

  /* ── «Con el doctor» ──
     El atajo de la visita: la cifra en grande, los cuatro números que él
     corrige y poco más. Sólo existe aquí abajo. */
  .con-doc{display:flex;flex-direction:column;gap:14px}
  .cd-cifra{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:20px 16px;box-shadow:var(--shadow)}
  .cd-cifra b{font-family:var(--display);font-size:clamp(34px,12vw,52px);font-weight:600;
    letter-spacing:-.03em;line-height:1;color:var(--pos)}
  .cd-cifra b.neg{color:var(--neg)}
  .cd-datos{display:flex;flex-direction:column;gap:10px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
  .cd-datos .f{display:flex;flex-direction:column;gap:5px;align-items:stretch}
  .cd-datos .lbl{font-size:14px;font-weight:500;color:var(--ink-2)}
  .cd-pie{display:flex;flex-direction:column;gap:10px}
  .cd-pie .switch{justify-content:center;min-height:48px}
  .rec-f{padding:10px 12px;gap:8px}
  .rec-f .pos-t{display:none}
  .cd-pie .btn{justify-content:center}
  /* La cifra de la barra, cuando además es una puerta. */
  .cd-abre{background:transparent;border:0;padding:0;text-align:left;cursor:pointer;
    display:flex;flex-direction:column;gap:1px;align-items:flex-start;min-height:44px;justify-content:center}

  /* ── el menú ──
     Plegado está bien: una fila con [☰], la marca y dónde estás. El problema
     era abrirlo. Al pulsar ☰, las seis secciones aparecían dentro del MISMO
     carril que se arrastra de lado, así que en 390 px se veían dos y media y
     nada decía que hubiera más a la derecha. Un menú que hay que arrastrar a
     ciegas no es un menú.

     Abierto pasa a ser lo que es en cualquier teléfono: una lista de arriba
     abajo, cada sección de ancho completo y de 48 px, y debajo quién eres,
     «Cómo funciona» y «Salir», que plegados no caben en la fila. */
  .rail{flex-wrap:wrap;gap:6px;padding:8px 12px}
  .rail-x{width:44px;height:44px;font-size:18px;margin-right:4px}
  /* Es la diana más pequeña de la aplicación y sale en las quince
     pantallas: lleva a la lista de doctores. 44 px, ganados con relleno. */
  .brand{padding:0 8px;min-width:0;min-height:44px;justify-content:center}
  .brand b{font-size:14px}
  .brand span{display:none}
  /* Plegado, el pie del menú no cabe en la fila: se entra por el ☰. */
  body:not(.menu-abierto) .rail-foot{display:none}

  body.menu-abierto .rail-foot{flex:1 0 100%;width:100%;margin:6px 0 0;
    padding-top:10px;border-top:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:10px}
  body.menu-abierto .rail-foot .who span{display:block}
  body.menu-abierto .rail-foot .row{width:100%}
  body.menu-abierto .rail-foot .btn{width:100%;justify-content:center}

  /* ── el botón de «más columnas», cuando la tabla sigue siendo tabla ── */
  .mas-col{position:static;transform:none;width:100%;min-height:44px;justify-content:center;
    border-radius:9px;font-size:13.5px;margin-top:8px}
  .scroll-w{display:flex;flex-direction:column}

  /* ── los pasos del alta ──
     Nueve círculos numerados en una ventana de 350 px son una tira de puntos
     ilegibles, y tres de ellos ni siquiera son obligatorios. Lo que se
     pregunta uno es dónde está y cuánto queda. */
  .pasos.ocho,.pasos.larga{display:none}
  .tel-pasos{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
  .tel-pasos b{font-size:15px}
  .tel-pasos .k{font-size:11.5px}
  .tel-pasos u{display:block;text-decoration:none;height:5px;border-radius:999px;
    background:var(--surface-3);overflow:hidden}
  .tel-pasos u i{display:block;height:100%;background:var(--accent);border-radius:999px;
    transition:width .2s}

  /* ── dar de alta desde donde está el pulgar ──
     La lista mide 2,8 pantallas y el botón de crear vive arriba del todo. */
  .tel-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
    z-index:34;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    font-size:26px;line-height:1;color:var(--on-accent);background:var(--accent);
    border:0;box-shadow:var(--shadow-lg);cursor:pointer}
  .tel-fab:active{background:var(--accent-2)}

  /* La agenda de la semana, día por día en vertical. */
  .sem-lista{display:flex;flex-direction:column;gap:10px}
  .sem-d{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
  .sem-d > .row{padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);gap:8px}
  .sem-d.es-hoy{border-color:var(--accent)}
  .sem-d.es-hoy > .row{background:var(--accent-soft)}
  .sem-v{padding:11px 12px;font-size:13px;color:var(--ink-3)}
}

/* ── el teléfono tumbado ──
   Girar el móvil es lo que hace uno para ver mejor una tabla, y lo que
   conseguía era ver menos: quedaban 204 px de ficha entre la cabecera y la
   barra. La regla pide ALTO menor de 450 px, no ancho: un iPad apaisado
   tiene 768 de alto y un portátil más, así que ninguno entra. */
@media (max-height:450px) and (orientation:landscape){
  .top{position:static}
  .top-acc{position:sticky;top:0;z-index:30;background:var(--surface)}
  .wrap{padding-top:14px}
}

/* Al imprimir sólo sale la propuesta del doctor, en blanco sobre papel. */
@media print{
  /* Con la misma forma que usa el tema, para ganarle en especificidad, y
     fijando también las tintas: el papel es blanco siempre. */
  :root,:root[data-theme="dark"],:root[data-theme="light"],:root:not([data-theme="light"]){
    --bg:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#f2f4f8;
    --line:#dbe3ed;--line-2:#c1cdde;
    --ink:#111a26;--ink-2:#3f4d61;--ink-3:#4c5a70;
    --accent:#0b5fc0;--accent-2:#084a96;--accent-soft:#e3edfb;--on-accent:#fff;
    --pos:#0a7557;--pos-soft:#def0ea;--neg:#b0281f;--neg-soft:#fae6e4;
    --warn:#8a5a00;--warn-soft:#faf0da;
    --shadow:none;--shadow-lg:none;
  }
  .rail,.top,#avisos,.bar,.barra-movil,.internal,.indice,.filtros,.mas-col{display:none!important}
  body{background:#fff}
  .app{display:block}
  .wrap{padding:0}
  .card{break-inside:avoid;box-shadow:none;border-color:#d5dbe4}
  .scroll{overflow:visible}
  .scroll.hay-mas{-webkit-mask-image:none;mask-image:none}
}

/* ── el dedo, al final del todo ─────────────────────────────────────────
   Estas reglas van aquí abajo a propósito. El CSS de la app es un solo saco
   y, a igualdad de peso, gana la última: puestas arriba, cualquier regla
   posterior con el mismo peso las deja sin efecto —que es justo lo que le
   pasaba al ⋮ de las filas, que seguía midiendo 32—.

   En el iPad, que es donde más se trabaja, lo que se pulsa tiene que medir
   44. Lo que crece es el sitio donde cabe el dedo: ni la letra ni los
   colores cambian, y en el ordenador no se mueve nada. */
@media (pointer:coarse){
  .fila-mas{width:44px;height:44px}
  .tel-mas{width:44px;height:44px}
  .card-x{min-width:44px;min-height:44px}
  .disclose{min-height:44px}
  .sw{min-height:44px}
  .mas-col{min-height:44px}
  .q-src{min-height:44px}
  /* Los botones de ayuda no crecen por fuera —descuadrarían la línea donde
     viven—: se les pone la zona de toque por detrás, como ya se hace con las
     cifras que se corrigen de pie. */
  .pista,.ex-i,.fuente,.tic-guion{position:relative}
  .pista::after,.ex-i::after,.fuente::after,.tic-guion::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
}
@media (min-width:1161px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 112px 152px 108px 94px 116px} }
@media (max-width:1160px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 104px 152px 92px 108px} }
@media (max-width:1010px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 152px 84px} }
.fase-b{border-radius:999px;padding:7px 14px;font-size:13px}
.fase-b.inv{background:var(--pos-soft);border-color:var(--pos-soft);color:var(--pos)}
.fase-b.now{background:var(--neg-soft);border-color:var(--neg-soft);color:var(--neg)}
.fase-b.est{background:var(--warn-soft);border-color:var(--warn-soft);color:var(--warn)}
.fase-b.acc{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-2)}
.fase-b.mute{background:var(--surface-3);border-color:var(--surface-3);color:var(--ink-2)}
.fase-b::after{content:"▾";font-size:10px;opacity:.7}
@media (min-width:1161px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 112px 140px 108px 94px 116px} }
@media (max-width:1160px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 104px 140px 92px 108px} }
.dec{min-height:0!important;padding-top:14px;padding-bottom:14px}
.fila .nm span.pill{display:inline-flex;margin-top:0;vertical-align:1px;font-size:10px;color:inherit}
.fila .nm span.pill.inv{color:var(--pos)} .fila .nm span.pill.est{color:var(--warn)}
.txt::placeholder{font-weight:400}
/* Y el teléfono vuelve a su lista de dos columnas: las reglas del iPad de arriba no son para él. */
@media (max-width:620px){ .fh-cab,.fila{grid-template-columns:minmax(0,1.6fr) 104px} }
/* ══ Piel nueva, en la línea del ERP Dental ═══════════════════════════════
   Lo que se toma del ERP: fondo hueso y tarjetas blancas planas (sin sombra,
   con un filo fino), botones principales en píldora, chips suaves de 12 px,
   títulos en Manrope de peso medio y todo lo demás en Public Sans, sin
   mayúsculas ni letra de máquina. Lo que no se copia: el verde azulado del
   ERP. Aquí el color de la casa es un azul petróleo propio. Los colores que
   dicen algo (fase, casos, tramo, avisos) se quedan con su significado. */
:root{
  --bg:#F4F3F1; --surface:#FFFFFF; --surface-2:#F8F7F5; --surface-3:#EFEDEA;
  --line:#E6E3DF; --line-2:#D6D2CC;
  --ink:#1D1C1A; --ink-2:#4B4844; --ink-3:#6F6B66;
  --accent:#245F86; --accent-2:#1A4A6B; --accent-soft:#E2ECF2; --on-accent:#FFFFFF;
  --pos:#17603A; --pos-soft:#DCEFE3; --neg:#B3261E; --neg-soft:#FBE7E5;
  --warn:#8A5A00; --warn-soft:#FBF0D6;
  --v-azul:#245F86; --v-verde:#17603A; --v-amar:#9A6400; --v-naran:#B04F12; --v-rojo:#B3261E;
  --shadow:none;
  --shadow-lg:0 18px 50px -24px rgba(29,28,26,.35);
  --r:14px;
  --sans:"Public Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:"Manrope", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"Public Sans", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#171615; --surface:#201F1D; --surface-2:#1B1A18; --surface-3:#2A2826;
  --line:#33302D; --line-2:#45413D; --ink:#F1EFEC; --ink-2:#CFCAC4; --ink-3:#A39E97;
  --accent:#7FB3D6; --accent-2:#A9CDE6; --accent-soft:#1E2E3A; --on-accent:#10202B;
} }
body{font-family:var(--sans);background:var(--bg)}
/* Sin mayúsculas espaciadas: los rótulos se leen como texto, en gris. */
body *{text-transform:none !important}
body *:not(input):not(textarea){letter-spacing:normal}
h1,h2,h3,.h1,.card-h h2{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
h1{font-weight:500}
/* Números con cifras de ancho fijo, en la letra de siempre. */
.num,.mio-n,.maq-n,.gain,.bval{font-variant-numeric:tabular-nums}
/* Tarjetas planas con su filo. */
.card,.fila,.doc,.mio,.maq,.tarj,.modal,.dialog,.acc-b,.tipo,.dec{box-shadow:none !important}
.card,.fila,.doc{border:1px solid var(--line)}
/* Botones: el principal en píldora; los demás, suaves. */
.btn{border-radius:999px}
.btn.pri{background:var(--accent);border-color:var(--accent)}
.btn:not(.pri):not(.ghost){background:var(--surface);border-color:var(--line-2)}
/* El raíl, en blanco y con la opción elegida en suave, como el ERP. */
.rail{background:var(--surface)}
.nav.on{background:var(--accent-soft) !important;color:var(--accent) !important}
.nav.on svg{color:var(--accent)}

/* ── Segunda pasada: los detalles de «Los números» del ERP ── */
/* Tarjetas: blancas, sin filo, muy redondeadas. Las filas de la lista
   conservan la raya de color de su fase a la izquierda. */
.card{border:0;border-radius:20px}
.fila{border-color:transparent;border-radius:16px}
.doc{border-color:transparent;border-radius:18px}
/* Títulos de página en Manrope, sin negrita, como «Los números». */
.wrap h1,.main h1{font-size:28px;font-weight:500;letter-spacing:-.015em}
.card-h h2{font-weight:500;font-size:16px}
/* Rótulos: gris cálido, letra normal. */
.k,.lbl,.fh-cab span,.col-t,.th-k{color:var(--ink-3);font-weight:500;font-size:12.5px}
/* Cifras grandes: peso medio y en tinta, no en negrita de color. */
.mio,.maq{background:var(--surface);border:0 !important;border-radius:20px;padding:16px 18px}
.maqs{gap:12px}
.mio-n,.maq-n{font-family:var(--sans);font-weight:500;font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.maq.ok .maq-n{color:var(--ink)}
.maq.mal .maq-n{color:var(--neg)}
/* La primera cifra, destacada con el color de la casa. */
.maqs > .maq:first-child,.grid > .mio:first-child{background:var(--accent)}
.maqs > .maq:first-child *,.grid > .mio:first-child *{color:var(--on-accent) !important}
.maqs > .maq:first-child .k,.grid > .mio:first-child .k,.grid > .mio:first-child .note{opacity:.8}
/* Lo que sube o baja, en etiqueta suave. */
.mio-d{display:inline-flex;align-self:flex-start;align-items:center;padding:2px 10px;border-radius:9px;font-size:12.5px;font-weight:500;background:var(--surface-3);color:var(--ink-2)}
.mio-d.up{background:var(--pos-soft);color:var(--pos)}
.mio-d.down{background:var(--neg-soft);color:var(--neg)}
.grid > .mio:first-child .mio-d{background:rgba(255,255,255,.18)}
/* Gráficos de barras en el azul de la casa, como las líneas del ERP. */
.cols .col-b i,.cols.t-acc .col-b i{background:var(--accent-soft)}
.cols .col-b.on i,.cols.t-acc .col-b.on i{background:var(--accent)}
.col-v{font-family:var(--sans)}
/* Filtros y opciones: píldoras grises sueltas; la elegida, en azul. */
.seg{background:transparent;padding:0;gap:6px}
.seg button{background:var(--surface-3);border-radius:12px;color:var(--ink)}
.seg button.on{background:var(--accent);color:var(--on-accent)}
/* Las pestañas de la ficha, subrayadas como las del ERP. */
.tabs-g .seg:not(.tabs-apunta){background:transparent;border-bottom:1px solid var(--line);border-radius:0;gap:20px}
.tabs-g .seg:not(.tabs-apunta) button{background:transparent;border-radius:0;padding:10px 2px;color:var(--ink-2)}
.tabs-g .seg:not(.tabs-apunta) button.on{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
/* Campos blancos con su filo. */
.txt,.sel{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;font-weight:400}
.txt:focus,.sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Etiquetas, un poco menos redondas. */
.pill{border-radius:10px;font-weight:500}

/* «Apuntar» se queda como botón, al lado de las pestañas. */
.tabs-g .seg.tabs-apunta{background:transparent;padding:0}
.tabs-g .seg.tabs-apunta button{border-radius:999px;padding:9px 18px}
/* El nombre del doctor en la cabecera, a su tamaño. */
.nm-b h1{font-size:22px}
/* Dentro de una tarjeta, las cifras van sobre hueso para que se separen. */
.card .maq{background:var(--bg)}
.card .maqs > .maq:first-child{background:var(--accent)}
/* En el cuadro de mando, también las barras en el azul de la casa. */
.card:has(.maqs) .bfill.p{background:var(--accent)}

/* ── Tercera pasada: la paleta de seis colores ──
   El azul petróleo sigue siendo el color de la casa (botones, elegido,
   gráficos). Los seis colores de la paleta pasan a ser los que dicen algo:
   verde lo que se gana, rojo lo que urge, amarillo lo que espera, y la escala
   de casos por nivel va de azul a rojo pasando por turquesa, amarillo y
   naranja. Para texto se usan en su tono hondo; de fondo, en su tono claro. */
:root{
  --k-verde:#70B301; --k-naranja:#EF801B; --k-rojo:#DC1E25; --k-azul:#0099E3; --k-turquesa:#00B5A9; --k-amarillo:#FFB902;
  --pos:#3F7A00; --pos-soft:#EDF6DF; --neg:#C41A21; --neg-soft:#FCE5E5; --warn:#8F6200; --warn-soft:#FFF3D3;
  --v-azul:#0A8ACD; --v-verde:#00A296; --v-amar:#E3A000; --v-naran:#E2711A; --v-rojo:#D21C23;
}
/* La marca: la tira de seis colores encima del nombre. */
.brand::before{content:"";display:block;width:54px;height:6px;margin:0 0 10px;border-radius:3px;
  background:linear-gradient(90deg,var(--k-verde) 0 16.66%,var(--k-naranja) 0 33.33%,var(--k-rojo) 0 50%,var(--k-azul) 0 66.66%,var(--k-turquesa) 0 83.33%,var(--k-amarillo) 0)}
.brand span{font-family:var(--sans);font-size:12px;letter-spacing:normal;color:var(--ink-3)}
/* La raya de la fase en la lista, otra vez con su grosor. */
.fila{border-left-width:4px !important}
/* La bolita de lo que falta, en el rojo de la paleta. */
.fila .nm > .pend-c{background:var(--k-rojo)}
.fila .nm > .pend-c.p-medio{background:var(--k-amarillo);color:#3A2A00}
.fila .nm > .pend-c.p-bien{background:var(--k-verde)}
/* Las cifras de dinero, en el verde hondo. */
.fila .cl b.gain{color:var(--pos)}
/* Lo que se gana, en aguamarina (el turquesa de la paleta, en su tono hondo para leerse). */
:root{--pos:#007068;--pos-soft:#DDF3F1}
/* Barras del cuadro de mando: color lleno, como «Los números»; el mes en curso, un punto más hondo. */
.cols .col-b i,.cols.t-acc .col-b i{background:var(--accent);border-radius:6px 6px 0 0}
.cols .col-b.on i,.cols.t-acc .col-b.on i{background:var(--accent-2)}

/* ── Pasadas 4, 5 y 6 sobre la piel ── */
/* Pestañas: sin la raya a trozos; sólo la elegida lleva su línea. */
.tabs-g .seg:not(.tabs-apunta){border-bottom:0 !important}
/* Ningún rótulo con letras separadas (había reglas más fuertes que la general). */
body *:not(input):not(textarea){letter-spacing:normal !important}
h1,h2,.main h1,.wrap h1{letter-spacing:-.015em !important}
/* Los campos de Indirecto, blancos como los demás. */
.inp{background:var(--surface) !important;border:1px solid var(--line-2);border-radius:10px}
/* «Y además» y «Con qué marca»: el mismo filtro que el de arriba, en suave. */
.seg.cruce button{background:var(--surface-3);border:0 !important;box-shadow:none}
.seg.cruce button.on{background:var(--accent-soft);color:var(--accent)}
/* El pie de la presentación, sin filo, como las demás tarjetas. */
.rec-f{border-color:transparent !important}
/* Visitas registradas: las cifras como en «Números». */
.grid.g4 > .card{border-radius:20px;padding:16px 18px}
.grid.g4 > .card .num{font-family:var(--sans);font-weight:500;font-size:28px;letter-spacing:-.02em !important}
.grid.g4 > .card:first-child{background:var(--accent)}
.grid.g4 > .card:first-child *{color:var(--on-accent) !important}

/* ── Lenguaje del ERP: menos cosas, menos líneas ── */
/* El menú, fundido con el fondo: sin panel blanco ni raya. */
.rail{background:var(--bg) !important;border-right:0 !important}
.rail-x{background:transparent;border:0;color:var(--ink-3)}
.rail-x:hover{background:var(--surface-3)}
/* Plegado (como nace ahora): sólo iconos, el elegido en un cuadro suave, y
   arriba la marca de seis colores en pequeño. */
@media (min-width:901px){
body.rail-plegado .app{grid-template-columns:64px minmax(0,1fr)}
body.rail-plegado .rail{padding:18px 10px;align-items:center}
body.rail-plegado .brand{display:flex;padding:2px 0 10px;align-items:center}
body.rail-plegado .brand b,body.rail-plegado .brand span{display:none}
body.rail-plegado .brand::before{width:26px;height:26px;margin:0;border-radius:7px;
  background:conic-gradient(var(--k-verde) 0 60deg,var(--k-naranja) 0 120deg,var(--k-rojo) 0 180deg,var(--k-azul) 0 240deg,var(--k-turquesa) 0 300deg,var(--k-amarillo) 0)}
body.rail-plegado .nav{width:42px;height:42px;padding:0;border-radius:12px}
body.rail-plegado .rail-sep,body.rail-plegado .nav-k{display:none}
}
/* Tarjetas sin raya bajo el título: las separa el aire. */
.card-h{border-bottom:0;padding-bottom:4px}
/* La cabecera de la ficha, sobre el fondo y sin raya, como la barra del ERP. */
.top{background:var(--bg);border-bottom:0}
/* Una sola raya encima de los botones de cada paso, no dos. */
hr.sep + .row.modal-f{border-top:0 !important;padding-top:4px}
/* El menú en blanco y con los iconos en tinta: fundido con el fondo parecía
   apagado. La opción elegida, en azul petróleo lleno. */
.rail{background:var(--surface) !important;border-right:1px solid var(--line) !important}
.nav,.nav .ic{color:var(--ink) !important}
.rail-x{color:var(--ink-2)}
@media (min-width:901px){
body.rail-plegado .nav.on{background:var(--accent) !important}
body.rail-plegado .nav.on,body.rail-plegado .nav.on .ic{color:var(--on-accent) !important}
}
/* Con el doctor delante no hay menú: la pantalla entera para él. */
body.doctor.rail-plegado .app,body.doctor .app{grid-template-columns:minmax(0,1fr) !important}
/* Las cifras grandes, en una sola línea y con el ajuste fino de siempre. */
.h2-big,.mio-n,.maq-n,.big-n{white-space:nowrap;letter-spacing:-.03em !important}

/* ── Lo que se aprende de las listas del ERP ── */
/* La lista, una sola tarjeta blanca; las filas, separadas por una línea fina.
   La raya de la fase se queda a la izquierda de cada fila. */
.flist{gap:0;background:var(--surface);border-radius:20px;overflow:hidden}
.flist .fila{border-radius:0 !important;border-top:0 !important;border-right:0 !important;
  border-bottom:1px solid var(--line-soft,#EFEDEA) !important;box-shadow:none !important}
.flist .fila-w:last-child .fila{border-bottom:0 !important}
/* El nombre del doctor en el color de la casa, como un enlace: se toca para abrirlo. */
.fila .nm-n{color:var(--accent);font-weight:600}
/* Las fases, como las pestañas del ERP: subrayadas y con su número. */
.filtro-f > .seg:not(.plain):not(.cruce){gap:22px;padding:0 2px;border-bottom:1px solid var(--line);border-radius:0}
.filtro-f > .seg:not(.plain):not(.cruce) button{background:transparent !important;color:var(--ink-2);border-radius:0;padding:10px 0 12px}
.filtro-f > .seg:not(.plain):not(.cruce) button.on{color:var(--ink) !important;box-shadow:inset 0 -2px 0 var(--accent)}
.filtro-f > .seg:not(.plain):not(.cruce) button.on *{color:var(--accent) !important}
/* Filtros secundarios en píldora desplegable, como «Cuándo: El mes cerrado ▾» del ERP. */
.pild-sel{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 4px 0 14px;background:var(--surface-3);border-radius:12px;cursor:pointer}
.pild-sel > span{font-size:12.5px;color:var(--ink-3)}
.pild-sel .sel{background:transparent !important;border:0 !important;box-shadow:none !important;font-weight:600;padding:6px 8px;width:auto;max-width:220px}
.pild-sel.on{background:var(--accent-soft)}
.pild-sel.on .sel{color:var(--accent)}
/* Cabecera de la ficha como la del ERP: las pestañas a la izquierda, bajo el
   nombre; «Apuntar» y «Presentar» a la derecha de la misma línea. */
.top-acc{flex-basis:100%;display:flex;align-items:center;gap:10px}
.top-acc > .tabs-g{margin-right:auto}
/* «Orden» en la misma píldora gris que los filtros, sin caja blanca. */
.filtro-f .sel{background:var(--surface-3) !important;border:0 !important;border-radius:12px;font-weight:600}

/* ── Colores que encajan, con la calma del ERP ──
   Regla: macizo sólo lo que se toca o lo que urge (botón principal, opción
   elegida, la bolita roja). Todo lo demás, en tinte suave con su texto hondo. */
/* «Apuntar»: en aguamarina, que es «lo que suma», en vez del dorado. */
.seg.tabs-apunta{background:var(--pos-soft) !important;box-shadow:none !important;border-radius:999px}
.seg.tabs-apunta button{color:var(--pos) !important;font-weight:600}
.seg.tabs-apunta button.on{background:var(--pos) !important;color:#fff !important}
/* Casos por nivel: el mismo color, en tinte. Se sigue leyendo el tramo de un vistazo. */
.pill.vol.v-azul{background:#DFF0FA !important;color:#086A9E !important}
.pill.vol.v-verde{background:#D9F2EF !important;color:#007A70 !important}
.pill.vol.v-amar{background:#FFF0C9 !important;color:#7E5800 !important}
.pill.vol.v-naran{background:#FDE6D3 !important;color:#A84D08 !important}
.pill.vol.v-rojo{background:#FBE0E1 !important;color:#A8161C !important}
/* Avisos de arriba: etiqueta suave sin filo, como las del ERP. */
.aviso-c{border:0 !important}
.aviso-c.ok{background:var(--pos-soft)}
.aviso-c.urge{background:var(--neg-soft)}
.aviso-c.on{box-shadow:inset 0 0 0 1.5px currentColor}
/* El botón de abrir y plegar el menú, que se vea y se toque: un cuadro de
   44 px con su icono, en tinta. */
.rail-x{min-width:44px;min-height:44px;justify-content:center;border-radius:12px;background:var(--surface-3) !important;color:var(--ink) !important}
.rail-x .rx-f{font-size:18px;font-family:var(--sans)}
@media (min-width:901px){
body.rail-plegado .rail-x{width:44px;height:44px;padding:0}
}
/* «En qué quedaron»: el color de cada resultado. */
.bfill.f-inv{background:var(--pos) !important}
.bfill.f-acc{background:var(--accent) !important}
.bfill.f-est{background:var(--k-amarillo) !important}
.bfill.f-now{background:var(--neg) !important}
.bfill.f-mute{background:var(--ink-3) !important}
/* Sin la raya del medio, que aquí no hay negativos. */
.card-b > .brow .btrack::before{display:none}

/* ── Una sola regla de colores de estado en toda la app ──
   Aguamarina lo bueno · azul petróleo lo abierto · amarillo lo que espera ·
   rojo lo malo · gris lo neutro. Las rayas, barras y puntos usan el amarillo
   de la paleta (el ocre sólo queda para texto, que es donde se lee mejor). */
.fila.t-est,.fase-c.est,.dec.v-quiza{border-left-color:var(--k-amarillo) !important}
.fila.t-acc,.fase-c.acc,.dec.v-corto{border-left-color:var(--accent) !important}
.tono.t-est,.alerta.tibia > i{background:var(--k-amarillo) !important;color:var(--k-amarillo) !important}
/* Lo elegido en «Apuntar» y en la fase, con el tinte de su significado. */
.dec.v-quiza.on{box-shadow:0 0 0 1px var(--k-amarillo);border-color:var(--k-amarillo);background:var(--warn-soft)}
.dec.v-no.on{box-shadow:0 0 0 1px var(--neg);border-color:var(--neg);background:var(--neg-soft)}
.fase-c.on.inv{background:var(--pos-soft);border-color:var(--pos)}
.fase-c.on.est{background:var(--warn-soft);border-color:var(--k-amarillo)}
.fase-c.on.now{background:var(--neg-soft);border-color:var(--neg)}
/* La bolita completa, en aguamarina (era el verde de la paleta). */
.fila .nm > .pend-c.p-bien{background:var(--pos) !important}
/* El tramo de escalón concedido y las tarjetas de escalón, en lo bueno. */
.banda.warn,.banda.est{background:var(--warn-soft);color:var(--warn)}
/* «tramitado» es algo bueno: aguamarina. */
.firma-f .pill.mute{background:var(--pos-soft);color:var(--pos)}
/* «Sin tramitar» está a la espera: amarillo. */
.maq.mal .maq-n{color:var(--warn) !important}
/* Las líneas entre doctores, con el color de línea del tema (en oscuro, oscuras). */
.flist .fila{border-bottom-color:var(--line) !important}
/* Modo oscuro: los tintes, oscuros; el texto, claro. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --pos:#4FD1C5; --pos-soft:#14332F; --neg:#F07C7F; --neg-soft:#3A1C1D; --warn:#F2C35B; --warn-soft:#3A2E14; } }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pill.vol.v-azul{background:#123447 !important;color:#8FD0F2 !important}
  :root:not([data-theme="light"]) .pill.vol.v-verde{background:#0F3532 !important;color:#6FE0D4 !important}
  :root:not([data-theme="light"]) .pill.vol.v-amar{background:#3A2F12 !important;color:#FFD066 !important}
  :root:not([data-theme="light"]) .pill.vol.v-naran{background:#3D2412 !important;color:#FFB07A !important}
  :root:not([data-theme="light"]) .pill.vol.v-rojo{background:#3D1A1C !important;color:#FF9A9D !important}
}
/* En el teléfono, las fases en una sola línea que se desliza, no en tres filas. */
@media (max-width:620px){
  .filtro-f > .seg:not(.plain):not(.cruce){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .filtro-f > .seg:not(.plain):not(.cruce) button{flex:none}
}
/* Las pestañas subrayadas, con su ancho mínimo para el dedo. */
.tabs-g .seg:not(.tabs-apunta) button{min-width:44px;padding-left:6px !important;padding-right:6px !important}

/* El oscuro elegido a mano en Configuración, igual que el del sistema. */
:root[data-theme="dark"]{
  --bg:#171615; --surface:#201F1D; --surface-2:#1B1A18; --surface-3:#2A2826;
  --line:#33302D; --line-2:#45413D; --ink:#F1EFEC; --ink-2:#CFCAC4; --ink-3:#A39E97;
  --accent:#7FB3D6; --accent-2:#A9CDE6; --accent-soft:#1E2E3A; --on-accent:#10202B;
}
:root[data-theme="dark"]{
  --pos:#4FD1C5; --pos-soft:#14332F; --neg:#F07C7F; --neg-soft:#3A1C1D; --warn:#F2C35B; --warn-soft:#3A2E14; }
:root[data-theme="dark"] .pill.vol.v-azul{background:#123447 !important;color:#8FD0F2 !important}
  :root[data-theme="dark"] .pill.vol.v-verde{background:#0F3532 !important;color:#6FE0D4 !important}
  :root[data-theme="dark"] .pill.vol.v-amar{background:#3A2F12 !important;color:#FFD066 !important}
  :root[data-theme="dark"] .pill.vol.v-naran{background:#3D2412 !important;color:#FFB07A !important}
  :root[data-theme="dark"] .pill.vol.v-rojo{background:#3D1A1C !important;color:#FF9A9D !important}
/* Repaso: que todo se lea. Las chapas con letra blanca, sobre un tono que la
   aguante; amarillo y naranja, con letra oscura. */
.pill.salto.s-azul,.tchip-auto.s-azul{background:#0077B6}
.pill.salto.s-verde,.tchip-auto.s-verde{background:var(--pos)}
.pill.salto.s-amar,.tchip-auto.s-amar,.pill.salto.s-naran,.tchip-auto.s-naran{color:var(--ink)}
/* El cuadro de colores del menú plegado, con su zona de dedo entera. */
@media (min-width:901px){ body.rail-plegado .brand{min-width:44px;justify-content:center} }
/* El iPad en vertical: el nombre del doctor se lleva el sitio que sobraba a la derecha. */
@media (min-width:621px) and (max-width:1010px){ .fh-cab,.fila{grid-template-columns:minmax(0,1fr) 140px 88px 100px} }
/* Modo oscuro: «Apuntar» elegido y el círculo rojo de lo que falta, con letra que se lea. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .seg.tabs-apunta button.on{color:#14332F !important}
  :root:not([data-theme="light"]) .fila .nm > .pend-c.p-poco{color:#fff}
}
:root[data-theme="dark"] .seg.tabs-apunta button.on{color:#14332F !important}
:root[data-theme="dark"] .fila .nm > .pend-c.p-poco{color:#fff}
/* En oscuro la aguamarina es clara: su chapa, con letra oscura. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pill.salto.s-verde,:root:not([data-theme="light"]) .tchip-auto.s-verde{color:#14332F} }
:root[data-theme="dark"] .pill.salto.s-verde,:root[data-theme="dark"] .tchip-auto.s-verde{color:#14332F}
/* ══ Quinta ronda ══ */
/* 26 · La flecha de plegar, que se vea; sin círculo alrededor. */
.card-x{background:transparent !important;border:0 !important;box-shadow:none !important}
.card-x:hover{background:var(--surface-3) !important}
.card-h:has(.card-x){align-items:center}
.card-x .car{font-size:0 !important;display:block;width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .15s}
.card-x[aria-expanded="false"] .car{transform:rotate(-45deg);margin-top:0;margin-left:-4px}
/* 29 · El periodo en la línea del título. */
.main > div > .row:first-child > .seg{flex:none}
@media (max-width:620px){ .main > div > .row:first-child{flex-wrap:wrap} }
/* 30 · Las cuatro cifras del cuadro de mando, en una fila. */
.maqs > *{flex-basis:160px}
/* 33 · Tablas blancas con su raya fina, como la lista de doctores. */
tbody td,tbody tr:nth-child(even) td{background:var(--surface)}
tbody tr.yo td{background:var(--accent-soft)}
thead th{background:var(--surface)}
table.tarifa tbody tr:nth-child(even) td.pega{background:var(--surface)}
/* La posición del ranking es una celda, no una fila flexible (la clase «pos» es también la del bloque de posición). */
td.pos{display:table-cell}
/* 34 · Apuntar, del mismo color en el menú del doctor que en su ficha. */
.acciones .acc-b.pri{background:var(--pos);border-color:var(--pos)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .acciones .acc-b.pri,:root:not([data-theme="light"]) .acciones .acc-b.pri .ic,:root:not([data-theme="light"]) .acciones .acc-b.pri u{color:#14332F} }
:root[data-theme="dark"] .acciones .acc-b.pri,:root[data-theme="dark"] .acciones .acc-b.pri .ic,:root[data-theme="dark"] .acciones .acc-b.pri u{color:#14332F}
/* 37 · El rol, como texto: con borde parecía un botón al lado de «Editar». */
.pill.rol{border:0 !important;background:transparent !important;color:var(--ink-3) !important;padding-left:6px;padding-right:6px}
/* 37 · Usuarios en columnas: estado de la clave, rol y «Editar», siempre en el mismo sitio. */
.usuarios .q-in{display:grid;grid-template-columns:150px 110px auto;align-items:center;justify-items:start;gap:10px}
.usuarios .q-in > .btn{justify-self:end}
@media (max-width:620px){ .usuarios .q-in{grid-template-columns:118px 96px auto;width:100%} }
.u-est{display:inline-flex;gap:6px;flex-wrap:wrap}
/* 38 · El icono de cada ajuste era el mismo en toda la lista. */
.cfg-ic{display:none !important}
/* 39 · En el teléfono, el ▾ va pegado al nombre. */
@media (max-width:620px){
  .top .nm-b{display:flex;align-items:center;gap:2px;min-width:0;flex:1 1 auto}
  .top .nm-b h1{min-width:0}
  .tel-mas{background:transparent !important;border:0 !important;width:44px !important;color:var(--ink-2)}
}
/* 40 · En la primera cifra (la rellena), la diferencia sigue en rojo o aguamarina. */
.grid > .mio:first-child .mio-d.up{background:#DDF3F1 !important;color:#00675F !important}
.grid > .mio:first-child .mio-d.down{background:#FBE3E4 !important;color:#B3161C !important}
/* ══ Sexta ronda ══ */
/* 41 · En pantalla ancha caben los nombres de todos los pasos de Apuntar. */
@media (min-width:1000px){ .pasos.larga .paso-p.num:not(.on) span{display:inline} .pasos .paso-p span{white-space:nowrap} }
/* 42 · Las cajas de texto de Apuntar, a todo lo ancho, como los campos de encima. */
.col-cierre textarea.txt{max-width:none}
/* 44 · «Uno a uno» en columnas: cada dato cae en el mismo sitio en todas las filas. */
@media (min-width:901px){
  .firma-f{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) 84px 84px 96px 96px 64px}
  .firma-f > .parada-n{text-align:right}
  .firma-f > .pill,.firma-f > .btn.pri{justify-self:center}
}
/* 45 · En el teléfono, la cabecera de la lista se partía («Al año» en otra línea) y no se puede tocar. */
@media (max-width:620px){ .fh-cab{display:none} }
/* 46 · En el teléfono, las cuatro cifras del cuadro de mando de dos en dos. */
@media (max-width:620px){ .maqs > *{flex-basis:130px} }
/* ══ Séptima ronda ══ */
/* 47 · En una tarjeta blanca, la opción elegida de los botones claros era blanca: no se veía. */
.card .seg.plain button.on,.modal .seg.plain button.on{background:var(--accent) !important;color:var(--on-accent) !important;border-color:var(--accent) !important}
/* 49 · En «Lo que viene», la segunda fila en las mismas tres columnas que la primera. */
.grid.g4 > .hueco-rejilla{display:none}
/* ══ Octava ronda ══ */
/* 50 · El «Deshacer» del aviso. */
.toast .toast-b{background:transparent;border:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0 0 0 6px;min-height:32px}
@media (pointer:coarse){ .toast .toast-b{min-height:44px} }
/* 53 · En las tablas de Configuración, la casilla del nombre con su ancho. */
td.l > input.txt{min-width:150px}

/* Novena ronda · con el iPad en manos del doctor sólo vale la caja de firma */
body.en-sus-manos .rail, body.en-sus-manos .rail-x, body.en-sus-manos .solo-doctor, body.en-sus-manos .top .internal { display: none !important; }
body.en-sus-manos .main { pointer-events: none; }
body.en-sus-manos .main .firma-viva { pointer-events: auto; }
/* Undécima ronda · ranking del jefe frente a la media */
.vs-num.mas{color:var(--pos);font-weight:600}
.vs-num.menos{color:var(--warn);font-weight:600}

/* Duodécima ronda · imprimir desde la presentación: sale la hoja, no la diapositiva */
@media print { .show, #showlayer { display: none !important; } }

/* Ronda 14 · teléfono (sólo ≤ 440 px: el iPad y el PC no cambian) */
@media (max-width:440px){
  /* Las ventanas con tres botones: el primero arriba, los otros dos debajo (se cortaba «Crear la ficha…») */
  .modal-f{flex-wrap:wrap}
  .modal-f > .grow{flex:1 0 100%;height:0}
  /* Las gráficas por mes: los doce meses en el ancho, sin esconder los últimos */
  /* (La gráfica por mes ya se desliza con columnas de 28 px: ver más arriba en este mismo corte.) */
  /* Campos de número dentro de tablas que se deslizan: que se lea la cifra */
  td .inp{min-width:76px}
  /* El nombre del doctor entero, en dos líneas si hace falta */
  .fila .nm b .nm-n{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  /* Configuración: la flecha y «Sólo yo» en la esquina, sin una fila para ellos */
  .card-h.cfg-h{position:relative;padding-right:60px}
  .card-h.cfg-h .der{position:absolute;top:10px;right:10px}
  /* Filtros: la pastilla del alto del desplegable, todas del mismo ancho */
  .pild-sel{min-height:44px;flex:1 1 100%}
  /* Botones que se tocan con el dedo, de 44 px */
  table.tarj-tel td.tel-ver button{min-height:44px}
  .plegable-ret summary{min-height:44px;display:flex;align-items:center}
}

/* Ronda 15 · la presentación y Apuntar en el teléfono (sólo ≤ 440 px) */
@media (max-width:440px){
  /* Arriba del todo, no centrado: lo que no cabía se salía por arriba y no se llegaba (ni al interruptor) */
  .show-b{justify-content:flex-start;padding:16px}
  .show-h{padding:10px 16px}
  /* El pie: los pasos en una fila que se desliza, y debajo Atrás y Siguiente (ocupaba casi media pantalla) */
  .show-f{flex-wrap:wrap;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .show-f > .pos{order:-1;flex:1 0 100%;min-width:0}
  .show-f .dots.con-nombre{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;width:100%}
  .show-f .dots.con-nombre::-webkit-scrollbar{display:none}
  .show-f .dots.con-nombre button{flex:none;max-width:none}
  .show-f > .btn{flex:1 1 0;min-width:0;justify-content:center}
  .show-f > .btn.pri{flex-grow:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* «A tres años»: la cifra y su € en la misma línea */
  .anio-n{font-size:16px;white-space:nowrap}
  /* El mes de la cita: «huecos» dentro de su casilla */
  .mes-d{padding:5px 3px}
  .mes-h{font-size:10.5px}
  /* La cabecera de la ficha sube con el contenido; sólo se queda la fila de pestañas */
  .top{top:calc(var(--h-avisos,0px) - 100px)}
}