@font-face { font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jbmono-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
html, body { margin: 0; height: 100%; }
[hidden] { display: none !important; }
.app { padding-top: env(safe-area-inset-top, 0px); }
/* Concepto: un instrumento de medición de bolsillo. Filas y reglas en vez de cajas;
   la única tarjeta es «Ahora toca». El lima marca «aquí estás» y lo medido; lo elegido es claro. */
:root {
  --bg: #0A0A0A; --s1: #141416; --s2: #1e1e20; --s3: #262628;
  --tx: #f7f7f9; --tx2: #d2d2d5; --dim: #97979b; --dim2: #77777b;
  --line: #222326; --line2: #2d2e32;
  --lima: #C8E000; --lima-tx: #C8E000; --marca: #C8E000; --sobre-lima: #0A0A0A;
  --ok: #8fd6a4; --mal: #ff8a7a; --aviso: #f2bd6b;
  --vidrio: rgba(22, 22, 24, .74); --velo: rgba(0, 0, 0, .62); --sombra: 0 18px 50px rgba(0, 0, 0, .55);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 16px; --r-campo: 12px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f3f3f5; --s1: #ffffff; --s2: #ffffff; --s3: #e9e9ec; --tx: #0b0b0d; --tx2: #2c2c31; --dim: #5c5c62; --dim2: #77777d;
  --line: #e1e1e5; --line2: #d2d2d8; --lima: #C8E000; --lima-tx: #566200; --marca: #7b8a00; --ok: #1d7a3c; --mal: #b3261e; --aviso: #8f5800;
  --vidrio: rgba(255, 255, 255, .78); --velo: rgba(20, 20, 24, .32); --sombra: 0 18px 50px rgba(20, 20, 30, .16); color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #f3f3f5; --s1: #ffffff; --s2: #ffffff; --s3: #e9e9ec; --tx: #0b0b0d; --tx2: #2c2c31; --dim: #5c5c62; --dim2: #77777d;
  --line: #e1e1e5; --line2: #d2d2d8; --lima: #C8E000; --lima-tx: #566200; --marca: #7b8a00; --ok: #1d7a3c; --mal: #b3261e; --aviso: #8f5800;
  --vidrio: rgba(255, 255, 255, .78); --velo: rgba(20, 20, 24, .32); --sombra: 0 18px 50px rgba(20, 20, 30, .16); color-scheme: light; }

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { color: var(--tx); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html.con-hoja body { overflow: hidden; }
::selection { background: var(--lima); color: var(--sobre-lima); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.micro { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dim { color: var(--dim); } .peq { font-size: 13px; }
.num { font: 500 12px var(--mono); color: var(--dim); margin-left: 4px; }
.ico { flex: none; display: block; }

/* ─── Armazón ─── */
.app { min-height: 100%; }
.principal { max-width: 780px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 22px calc(118px + env(safe-area-inset-bottom, 0px)); }
.vista { display: grid; gap: 26px; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cab h1 { font-size: 36px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.cab .fecha { display: block; margin-top: 9px; }
.estado-db { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; text-align: center; padding: 10px 16px; font-size: 13px; background: var(--s2); border-bottom: 1px solid var(--line2); color: var(--tx2); }
.estado-db.suave { background: transparent; border: 0; color: var(--dim); }
.bloque { display: grid; gap: 12px; }
.bloque > h2, .bloque-cab h2, .plegable summary h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pila, .pila-vista { display: grid; gap: 14px; }
.pila-vista { gap: 22px; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ─── Botones ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .16s var(--curva), background-color .16s, color .16s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.pri { background: var(--tx); color: var(--bg); font-weight: 600; }
.btn.sec, .btn.canal, .btn.peq { background: var(--s3); color: var(--tx); }
.btn.fant { color: var(--tx2); padding: 0 12px; }
.btn.fant:hover { background: var(--s2); }
.btn.peq { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
.btn.ancho { width: 100%; }
.btn.grande { min-height: 54px; font-size: 16.5px; }
.btn.peligro { background: var(--mal); color: var(--bg); }
.btn.rojo { color: var(--mal); }
.btn[aria-pressed="true"] { background: var(--tx); color: var(--bg); }
.ico-btn { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; color: var(--tx2); transition: background-color .16s; }
.ico-btn:hover { background: var(--s2); }
.ico-btn.grande { background: var(--s3); color: var(--tx); }

/* ─── Lecturas (instrumento) ─── */
.lecturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.lecturas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lectura { display: grid; gap: 6px; padding: 14px 12px 14px 0; min-width: 0; }
.lectura + .lectura { padding-left: 14px; border-left: 1px solid var(--line); }
.lectura b { font: 700 26px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lectura.dato b { color: var(--lima-tx); }
.lectura.tarde b { color: var(--mal); }
@media (max-width: 560px) {
  .lecturas:not(.tres) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lecturas:not(.tres) .lectura:nth-child(3) { padding-left: 0; border-left: 0; }
  .lecturas:not(.tres) .lectura:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lectura b { font-size: 23px; }
  .lecturas.tres .lectura b { font-size: 19px; }
}

/* ─── Filas ─── */
.lista { display: grid; border-top: 1px solid var(--line); }
.fila-hoy, .fila-persona, .fila-cuenta { display: grid; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 11px 2px; border-bottom: 1px solid var(--line); transition: background-color .16s; }
.fila-hoy { grid-template-columns: auto minmax(0, 1fr) auto auto; }
button.fila-hoy:hover, .fila-persona:hover, .fila-cuenta:hover { background: linear-gradient(90deg, transparent, var(--s1) 12%, var(--s1) 88%, transparent); }
.fila-hoy.tarea { grid-template-columns: auto minmax(0, 1fr) auto; }
.fh-txt, .fp-txt, .fc-txt { display: grid; gap: 2px; min-width: 0; }
.fh-txt b, .fp-txt b, .fc-txt b { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-txt > span:not(.micro), .fp-txt > span, .fc-txt > span:not(.periodo) { color: var(--tx2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-meta { display: grid; justify-items: end; gap: 4px; }
.fh-ir { color: var(--dim2); }
.tick-tarea { width: 26px; height: 26px; margin: 0 7px; border-radius: 50%; border: 1.5px solid var(--dim2); transition: border-color .16s, background-color .16s; }
.tick-tarea:hover { border-color: var(--tx); background: var(--s2); }
.fila-persona { grid-template-columns: auto minmax(0, 1fr) minmax(96px, 36%); }
.fp-medida { display: grid; gap: 6px; min-width: 0; }
.fp-pie { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.fila-cuenta { grid-template-columns: auto minmax(0, 1fr) auto; }
.fc-cifras { display: grid; justify-items: end; gap: 4px; }
@media (max-width: 480px) { .fh-meta .etq { display: none; } .fila-hoy { grid-template-columns: auto minmax(0, 1fr) auto; } .fh-ir { display: none; } }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--s3); color: var(--tx); font: 600 13.5px var(--display); letter-spacing: .02em; }
.avatar.cliente { box-shadow: inset 0 0 0 1.5px var(--tx2); }
.ficha-cab .avatar { width: 56px; height: 56px; font-size: 18px; }
.etq { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line2); font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.etq.cliente { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.etq.cerrada { color: var(--dim2); border-style: dashed; }
.etq.tarde { color: var(--mal); border-color: color-mix(in srgb, var(--mal) 45%, transparent); }
.cuando { font: 500 12px var(--mono); white-space: nowrap; color: var(--dim); }
.cuando.u-tarde, .u-tarde.mono { color: var(--mal); }
.cuando.u-hoy { color: var(--tx); }
.cuando.u-pronto { color: var(--tx2); }

.vacio { display: grid; gap: 8px; justify-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.vacio b { font: 600 18px var(--display); }
.vacio span { color: var(--dim); max-width: 46ch; }
.vacio .btn { margin-top: 6px; }

.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atajo { display: grid; gap: 4px; padding: 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); transition: border-color .16s, transform .16s var(--curva); }
.atajo:hover { border-color: var(--line2); }
.atajo:active { transform: scale(.98); }
.atajo .ico { color: var(--tx2); margin-bottom: 6px; }
.atajo b { font-weight: 600; }
.atajo span { color: var(--dim); font-size: 13.5px; }
@media (max-width: 380px) { .atajos { grid-template-columns: 1fr; } }

details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--tx2); }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin-left: 4px; transition: transform .2s var(--curva); }
details.plegable[open] > summary::after { transform: rotate(45deg); }

/* ─── La regla ─── */
.regla { --alto: 16px; width: 100%; }
.regla-pista { position: relative; height: var(--alto); border-bottom: 1px solid var(--line2); }
.regla-hecho { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--tx2); transition: width .6s var(--curva); }
.tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--line2); transform: translateX(-.5px); }
.tick.mayor { height: 10px; background: var(--dim2); }
.tick.pasado { background: var(--tx2); }
.aguja { position: absolute; bottom: -1px; width: 2px; height: calc(var(--alto) + 4px); background: var(--marca); transform: translateX(-1px); transition: left .6s var(--curva); border-radius: 1px; }
.aguja::before { content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); transform: translateX(-50%); }
.regla.grande { --alto: 30px; padding-bottom: 22px; }
.regla.grande .tick { height: 8px; } .regla.grande .tick.mayor { height: 16px; }
.regla.grande .aguja::before { width: 10px; height: 10px; top: -5px; }
.regla-fases { position: relative; height: 0; }
.regla-fases span { position: absolute; top: 7px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.regla.apagada .aguja, .regla.apagada .aguja::before { background: var(--dim2); }
.regla.apagada .regla-hecho { background: var(--dim2); }

/* ─── Embudo ─── */
.embudo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.col-embudo { display: grid; justify-items: center; gap: 6px; padding: 10px 2px 10px; border-radius: 14px; transition: background-color .16s; min-width: 0; }
.col-embudo:hover { background: var(--s1); }
.col-embudo[aria-pressed="true"] { background: var(--tx); color: var(--bg); }
.col-embudo[aria-pressed="true"] .micro { color: var(--bg); }
.col-embudo b { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.col-embudo .micro { font-size: 9.5px; letter-spacing: .04em; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.barra-col { position: relative; width: 10px; height: 52px; display: block; border-bottom: 1px solid var(--line2); }
.barra-col i { position: absolute; bottom: 0; left: 0; right: 0; min-height: 2px; background: var(--tx2); border-radius: 3px 3px 0 0; transition: height .5s var(--curva); }
.col-embudo[aria-pressed="true"] .barra-col i { background: var(--bg); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; flex: none; justify-self: start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.seg button { min-height: 38px; padding: 0 14px; border-radius: 999px; color: var(--dim); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background-color .16s, color .16s; }
.seg button[aria-selected="true"] { background: var(--s3); color: var(--tx); }
.buscar { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); color: var(--dim); }
.buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; font-size: 16px; color: var(--tx); }
@media (max-width: 480px) { .col-embudo b { font-size: 20px; } .barra-col { height: 40px; } }

/* ─── Hojas ─── */
.velo { position: fixed; inset: 0; z-index: 20; background: var(--velo); display: flex; justify-content: flex-end; animation: aparece .2s ease-out; }
.hoja { position: relative; display: flex; flex-direction: column; width: min(100%, 560px); height: 100%; background: var(--bg); border-left: 1px solid var(--line2); box-shadow: var(--sombra); animation: entra-lado .32s var(--curva); }
.hoja.ancha { width: min(100%, 720px); }
.hoja-cab { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--bg); }
.hoja-tit { display: grid; gap: 1px; min-width: 0; }
.hoja-tit h2 { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoja-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px max(18px, env(safe-area-inset-right, 0px)) 32px max(18px, env(safe-area-inset-left, 0px)); display: grid; align-content: start; grid-auto-rows: max-content; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hoja-pie { padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.pie-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 640px) {
  .velo { align-items: flex-end; }
  .hoja, .hoja.ancha { width: 100%; height: calc(100% - 10px - env(safe-area-inset-top, 0px)); border-left: 0; border-radius: 20px 20px 0 0; animation-name: entra-abajo; }
  .hoja-cab { padding-top: 8px; border-radius: 20px 20px 0 0; }
}
@keyframes aparece { from { opacity: 0; } }
@keyframes entra-lado { from { transform: translateX(40px); opacity: 0; } }
@keyframes entra-abajo { from { transform: translateY(48px); opacity: .4; } }

/* ─── Campos ─── */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo.ancho, .campos > .ancho, .campos > .btn, .campos > .fila { grid-column: 1 / -1; }
.campo label, .lbl { font-size: 13px; font-weight: 500; color: var(--tx2); }
.ayuda { font-size: 12.5px; color: var(--dim); }
input, select, textarea { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--r-campo); background: var(--s1); border: 1px solid var(--line2); font-size: 16px; outline: none; transition: border-color .16s; }
textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 92px; }
input:focus, select:focus, textarea:focus { border-color: var(--marca); }
input::placeholder, textarea::placeholder { color: var(--dim2); }
input[type="checkbox"] { width: auto; min-height: 0; }
@media (max-width: 480px) { .campos { grid-template-columns: minmax(0, 1fr); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-sel { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); color: var(--tx2); font-size: 14px; transition: background-color .16s, color .16s, border-color .16s; }
.chip-sel:hover { border-color: var(--dim2); }
.chip-sel[aria-pressed="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); font-weight: 500; }

/* Escala de cinco topes: aquí sí se mide */
.escala { display: flex; gap: 4px; }
.tope { position: relative; width: 40px; height: 36px; border-radius: 8px; background: var(--s1); border: 1px solid var(--line2); display: grid; place-items: center; font: 500 12px var(--mono); color: var(--dim); }
.tope::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 1px; height: 5px; background: var(--line2); }
.tope.lleno { background: var(--s3); color: var(--tx); }
.tope.aqui { background: var(--lima); color: var(--sobre-lima); border-color: var(--lima); }
.tope:disabled { opacity: 1; cursor: default; width: 28px; height: 24px; font-size: 10.5px; }

/* ─── Ahora toca: la única tarjeta ─── */
.ahora { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--s2); border: 1px solid var(--line2); box-shadow: 0 1px 0 color-mix(in srgb, var(--tx) 6%, transparent) inset; }
.ahora.quieto { gap: 8px; background: var(--s1); }
.ahora.quieto b { font: 600 18px var(--display); }
.ahora.quieto span { color: var(--dim); }
.ahora-cab { display: flex; justify-content: space-between; align-items: center; }
.ahora h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ahora.u-tarde .ahora-cab .micro::after { content: ' · con retraso'; color: var(--mal); }
.que { color: var(--tx2); max-width: 62ch; }
.composer { display: grid; gap: 10px; }
.composer .msg { min-height: 150px; background: var(--bg); font-size: 15.5px; }
.canales { display: flex; gap: 8px; flex-wrap: wrap; }
.canales .btn { flex: 1 1 auto; }
.falta { font-size: 13px; color: var(--aviso); }
.falta b { font-family: var(--mono); font-weight: 500; }
.salidas { display: flex; gap: 8px; flex-wrap: wrap; }
.salidas .btn { flex: 1 1 140px; }
.salidas.grande .btn { min-height: 54px; font-size: 16px; }
.fila-fecha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fila-fecha .campo { flex: 1 1 200px; }
.salida-cierre { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line2); }
.criterios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.criterio { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--bg); text-align: left; transition: border-color .16s; }
.criterio b { display: block; font-weight: 600; font-size: 14.5px; }
.criterio small { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.35; }
.criterio[aria-pressed="true"] { border-color: var(--tx2); }
.caja { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--dim2); display: grid; place-items: center; color: var(--bg); transition: background-color .16s, border-color .16s; }
.criterio[aria-pressed="true"] .caja, .check input:checked + .caja { background: var(--tx); border-color: var(--tx); }
@media (max-width: 480px) { .criterios { grid-template-columns: 1fr; } }
.cita-hora { display: grid; gap: 4px; }
.cita-hora b { font: 700 28px/1.1 var(--display); letter-spacing: -.02em; }
.checks { display: grid; gap: 2px; }
.checks-medida { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.barra-fina { flex: 1; height: 3px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.barra-fina i { display: block; height: 100%; background: var(--lima); transition: width .5s var(--curva); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check input:focus-visible + .caja { outline: 2px solid var(--marca); outline-offset: 2px; }
.check input:checked ~ span:last-child { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--dim2); }

.objeciones { display: grid; border-top: 1px solid var(--line2); }
.obj { border-bottom: 1px solid var(--line2); }
.obj-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 50px; font-weight: 500; }
.obj-q .ico { color: var(--dim); transition: transform .2s var(--curva); }
.obj.abierta .obj-q .ico { transform: rotate(90deg); }
.obj-r { display: grid; gap: 10px; justify-items: start; padding: 0 0 14px; color: var(--tx2); }

/* ─── Ficha ─── */
.ficha { display: grid; gap: 26px; }
.ficha-cab { display: flex; align-items: center; gap: 14px; }
.ficha-datos { flex: 1; min-width: 0; display: grid; gap: 8px; }
.etqs { display: flex; gap: 6px; flex-wrap: wrap; }
.contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.contacto-it { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contacto-txt { display: grid; min-width: 0; }
.valor { font-size: 14px; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; max-width: 100%; user-select: text; }
.valor:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dim2); }
.vacio-v { color: var(--dim); font-style: italic; }
.recorrido { display: grid; gap: 4px; padding-top: 6px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pasos li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.paso { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; min-width: 0; }
.paso-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--dim2); display: grid; place-items: center; color: var(--bg); }
.paso.hecho .punto { background: var(--tx2); border-color: var(--tx2); }
.paso.hecho .paso-t { color: var(--dim); }
.paso.aqui .punto { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 22%, transparent); }
.paso.aqui .paso-t { font-weight: 600; }
.deshacer { font-size: 12.5px; color: var(--dim); padding: 0 6px; min-height: 44px; }
.datos { display: grid; margin: 0; border-top: 1px solid var(--line); }
.datos > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.datos dt { color: var(--dim); font-size: 13.5px; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.datos.compacto > div { grid-template-columns: 76px 1fr; padding: 7px 0; font-size: 14px; }
.servicio { display: grid; gap: 12px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
.servicio-t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.servicio-t b { font-weight: 600; }
.servicio.viejo { color: var(--dim); }
.periodo { display: grid; gap: 6px; }
.periodo-pista { position: relative; height: 10px; border-bottom: 1px solid var(--line2); display: block; }
.periodo-pista i { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--tx2); }
.periodo-pista b { position: absolute; bottom: -1px; width: 2px; height: 13px; background: var(--marca); transform: translateX(-1px); }
.periodo-pie { display: flex; justify-content: space-between; gap: 8px; }
.periodo.mini { margin-top: 6px; max-width: 160px; }
.cobros, .gastos, .ideas { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.cobros li button { width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cobro-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx2); }
@media (max-width: 480px) { .cobros li button { grid-template-columns: 52px minmax(0, 1fr) auto; } .cobros li button .etq { display: none; } }
.salida { white-space: pre-wrap; padding: 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); font-size: 14.5px; color: var(--tx2); }
.claude h2 .ico { color: var(--tx2); }
.nota-nueva { display: flex; gap: 8px; }
.nota-nueva input { flex: 1; min-width: 0; }
.historial { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 14px; border-left: 1px solid var(--line2); }
.ev { position: relative; display: grid; gap: 3px; }
.ev::before { content: ''; position: absolute; left: -18px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--dim2); }
.ev-etapa::before { background: var(--tx2); border-color: var(--tx2); }
.ev p { white-space: pre-line; color: var(--tx2); font-size: 14px; overflow-wrap: anywhere; }
.zona-baja { padding-top: 10px; border-top: 1px solid var(--line); }

/* ─── Guion ─── */
.guion { display: grid; gap: 20px; }
.guion-regla { display: flex; gap: 0; overflow-x: auto; padding-bottom: 4px; border-bottom: 1px solid var(--line2); scrollbar-width: none; }
.g-tick { flex: 1 0 auto; display: grid; justify-items: center; gap: 6px; padding: 0 6px 8px; min-width: 52px; color: var(--dim2); }
.g-tick i { width: 1px; height: 10px; background: currentColor; }
.g-tick span { font: 500 9.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.g-tick.pasado { color: var(--tx2); }
.g-tick.aqui { color: var(--lima-tx); }
.g-tick.aqui i { width: 2px; height: 18px; background: var(--marca); }
.guion-bloque { display: grid; gap: 14px; animation: aparece .25s ease-out; }
.guion-cab { display: flex; justify-content: space-between; align-items: baseline; }
.guion-cab h3 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.guion-di { margin: 0; padding: 4px 0 4px 16px; border-left: 1px solid var(--tx2); font-size: 17px; line-height: 1.55; color: var(--tx); max-width: 62ch; }
.guion-di b { font-weight: 600; color: var(--lima-tx); }
.hueco { font-family: var(--mono); font-size: 14px; color: var(--aviso); }
.preguntas, .puntos { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.preguntas li { font-size: 17px; line-height: 1.45; padding-left: 22px; position: relative; }
.preguntas li::before { content: '¿'; position: absolute; left: 2px; color: var(--dim); font-family: var(--display); }
.puntos li { padding-left: 18px; position: relative; color: var(--tx2); }
.puntos li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 6px; height: 1px; background: var(--dim); }
.precio-grande { display: grid; gap: 10px; justify-items: start; padding: 10px 0; }
.precio-grande .cifra { font: 800 64px/1 var(--display); letter-spacing: -.03em; color: var(--lima-tx); font-variant-numeric: tabular-nums; }
.silencio { margin-top: 10px; font: 600 15px var(--display); letter-spacing: .02em; color: var(--tx2); }
.pie-guion { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notas-llamada textarea { margin-top: 8px; }
.estructura { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); counter-reset: e; }
.estructura li { display: grid; grid-template-columns: 26px minmax(90px, 26%) 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: e; font-size: 14px; }
.estructura li::before { content: counter(e, decimal-leading-zero); font: 500 11px var(--mono); color: var(--dim2); }
.estructura li span:not(.micro) { color: var(--tx2); }
.estructura li:not(:has(b)) { grid-template-columns: 26px 1fr; }
@media (max-width: 480px) { .estructura li { grid-template-columns: 26px 1fr; } .estructura li span { grid-column: 2; } }

/* ─── Dinero ─── */
.mono-ini { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); font: 600 12px var(--mono); text-transform: uppercase; color: var(--tx2); }
.gastos li button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gasto-t { display: grid; gap: 2px; min-width: 0; }
.gasto-t > span:not(.ojo) { color: var(--dim); font-size: 13.5px; }
.gasto-cifra { display: grid; justify-items: end; gap: 2px; }
.ojo { font-size: 13px; color: var(--aviso); line-height: 1.4; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--tx2); }
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.ing, .b-ing { background: var(--lima); fill: var(--lima); }
.sw.gas, .b-gas { background: var(--dim2); fill: var(--dim2); }
.grafico { position: relative; }
.grafico svg { display: block; overflow: visible; }
.rejilla { stroke: var(--line); stroke-width: 1; }
.eje { fill: var(--dim); font: 500 11px var(--mono); text-transform: uppercase; }
.tip { position: absolute; top: 0; transform: translateX(-50%); display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); box-shadow: var(--sombra); font-size: 13px; white-space: nowrap; pointer-events: none; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 8px 0; border-bottom: 1px solid var(--line2); }
.tabla td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.tabla th:not(:first-child), .tabla td:not(:first-child) { text-align: right; }

/* ─── Cuentas ─── */
.nota-candado { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--s1); color: var(--tx2); font-size: 14px; }
.nota-candado .ico { color: var(--dim); margin-top: 1px; }
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.acceso { display: grid; gap: 10px; align-content: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.acceso header { display: flex; gap: 12px; align-items: center; }
.acceso header div { flex: 1; min-width: 0; }
.acceso h3 { font-size: 17px; font-weight: 600; }
.acceso > p:not(.ojo) { color: var(--tx2); font-size: 14px; }
.acceso .btn { justify-self: start; }
.acceso.est-futuro, .acceso.est-cancelado { opacity: .78; }

/* ─── Guía ─── */
.guia { display: grid; border-top: 1px solid var(--line); }
.guia-sec { border-bottom: 1px solid var(--line); }
.guia-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 68px; padding: 10px 0; }
.guia-cab > span { display: grid; gap: 2px; }
.guia-cab b { font: 600 18px var(--display); }
.guia-cab .dim { font-size: 13.5px; }
.guia-cab .ico { color: var(--dim); transition: transform .2s var(--curva); }
.guia-sec.abierta .guia-cab .ico { transform: rotate(90deg); }
.guia-cuerpo { display: grid; gap: 16px; padding: 4px 0 24px; animation: aparece .2s ease-out; }
.mapa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 20px; }
.mapa li { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mapa li .mono { grid-row: span 2; font-size: 12px; color: var(--dim2); padding-top: 3px; }
.mapa li span:last-child { color: var(--dim); font-size: 13.5px; }
.secuencia { font-size: 12.5px; color: var(--tx2); line-height: 1.7; }
.resp-grupo { display: grid; gap: 0; }
.resp-grupo h3 { padding: 14px 0 6px; }
.resp { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.resp header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.resp header b { font-weight: 600; font-size: 14.5px; }
.resp p { white-space: pre-line; color: var(--tx2); font-size: 14px; }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 20px; border-top: 1px solid var(--line); }
.producto { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.producto header { display: flex; justify-content: space-between; gap: 8px; }
.producto h3 { font-size: 17px; font-weight: 600; }
.producto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.producto li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 14px; }
.producto li small { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.sub { font: 600 16px var(--display); margin-top: 8px; }
.plazas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.plaza { display: grid; gap: 8px; }
.plaza b { font-size: 22px; }
.medidor { display: flex; gap: 3px; flex-wrap: wrap; }
.medidor i { width: 8px; height: 18px; border-radius: 2px; background: var(--line2); }
.medidor i.lleno { background: var(--lima); }
.plaza input { max-width: 120px; }
.ideas li button { width: 100%; display: grid; gap: 4px; justify-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ideas li .dim { font-size: 13.5px; }

/* ─── Barra inferior: el único cristal ─── */
.barra { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 2px; padding: 6px; width: min(calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 470px); border-radius: 999px; background: var(--vidrio); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--sombra); }
.barra-it { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 999px; color: var(--dim); font-size: 10.5px; font-weight: 500; transition: color .16s, background-color .16s; }
.barra-it:hover { color: var(--tx2); }
.barra-it[aria-current="page"] { color: var(--tx); background: color-mix(in srgb, var(--tx) 7%, transparent); }
.barra-ico { position: relative; }
.barra-it[aria-current="page"] .barra-ico::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; border-radius: 50%; background: var(--marca); transform: translateX(-50%); }
.globo { position: absolute; top: -5px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--tx); color: var(--bg); font: 600 10px/17px var(--mono); text-align: center; }

/* ─── Avisos ─── */
.aviso-zona { position: fixed; z-index: 40; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; pointer-events: none; padding-inline: 16px; }
.aviso { display: inline-flex; align-items: center; gap: 8px; max-width: 520px; padding: 11px 16px; border-radius: 999px; background: var(--tx); color: var(--bg); font-size: 14px; font-weight: 500; box-shadow: var(--sombra); animation: sube .28s var(--curva); }
.aviso.error { background: var(--mal); color: var(--bg); border-radius: 16px; }
@keyframes sube { from { transform: translateY(10px); opacity: 0; } }

@media (min-width: 1100px) { .principal { max-width: 860px; } .cab h1 { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* La puerta: solo entra Víctor */
.entrada-cuerpo { min-height: 100%; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.entrada { width: min(100%, 380px); display: grid; gap: 32px; }
.entrada-marca { display: grid; gap: 8px; }
.entrada-logo { font: 800 44px/1 var(--display); letter-spacing: -.03em; }
.entrada-form { display: grid; gap: 10px; }
.entrada-form label { font-size: 13px; font-weight: 500; color: var(--tx2); }
.entrada-form .btn { margin-top: 8px; }
.entrada-aviso { color: var(--mal); font-size: 14px; }
.entrada-pie { text-align: center; }
.entrada-logo .mas { color: var(--lima-tx); }