/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   seis.css — «Los seis de Buk» (round 37, 2026-10-24; audits/2026-10-24-equipo-seis-de-buk CONTRATO §4.5, seis-diseno).
   Jorge, 2026-10-22: «estamos muy alejados de que sea lo mejor que existe… todo está muy saturado, mucho texto» · 2026-10-16: «se ve todo
   igual, me cansa». The six modules' pieces (components/kit/Seis.tsx), each room its own material: a document to sign is a white sheet with
   its fold and the line to sign on, the name she types is ink (Eighties, vino) and the seal a green stamp; a goal walks a sage path of four
   words (never a number); a private note is a slip of coral (reconocimiento) or sage (para mejorar) paper; a loan is Dinero's ledger page,
   gold only on money; a report is the console's table with its date line and «sin dato» drawn dashed, never a zero. The AHORA cards keep the
   one constant shape (momentos.css `.mo-dia`). The round's only new sheet: tokens --sx-* over equipo.css's (a raw colour lives only in
   :root). Only transform and opacity move; text ≥ 16 px; targets ≥ 44 px; no glass, no dark mode; prefers-reduced-motion stops it all.
   Kill = this file's link in app/layout.tsx: the pieces fall back to the kit's plain blocks.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- the cards: the kit's paper and ink ---- */
  --sx-papel: var(--hoja);
  --sx-borde: var(--linea);
  --sx-tinta: var(--tinta);
  --sx-titulo: var(--vino);
  --sx-apoyo: var(--gris);
  --sx-radio: var(--r-grande);
  --sx-sombra: 0 1px 2px rgba(43, 27, 32, .06), 0 16px 32px -26px rgba(43, 27, 32, .6);
  --sx-hueco: 14px;
  --sx-orilla: 18px;
  --sx-t-titulo: 28px;      /* a sheet's title, in Eighties */
  --sx-t-meta: 24px;        /* a goal's title, in Eighties */
  --sx-t-cita: 18px;        /* RH's message, a note's words */
  /* ---- Firma: a white sheet on the crema desk — its fold, the line to sign on, the pen's ink, the green stamp ---- */
  --sx-hoja: var(--hoja);
  --sx-hoja-pliegue: var(--papel-2);
  --sx-hoja-mesa: var(--crema);
  --sx-hoja-renglon: var(--linea);
  --sx-pluma: var(--vino);
  --sx-renglon-firma: var(--vino-claro);
  --sx-t-firma: 30px;       /* the name she types, in Eighties — her ink on the line */
  --sx-sello: var(--verde);
  --sx-sello-claro: var(--verde-claro);
  --sx-sello-tinta: var(--verde-tinta);
  --sx-sello-giro: -8deg;
  /* ---- Desempeño: the sage path of four words ---- */
  --sx-meta-fondo: var(--s-salvia-hoja);
  --sx-meta-borde: var(--s-salvia-linea);
  --sx-meta-tinta: var(--s-salvia-tinta);
  --sx-meta-luz: var(--s-salvia-tarjeta);
  --sx-riel: var(--s-salvia-linea);
  --sx-punto: 16px;
  --sx-punto-actual: 26px;
  /* ---- Retro continua: a slip of paper, coral for a recognition, sage for what to improve — never gold ---- */
  --sx-reconoce: var(--s-coral-luz);
  --sx-reconoce-borde: var(--s-coral-linea);
  --sx-reconoce-tinta: var(--s-coral-3);
  --sx-mejora: var(--s-salvia-luz);
  --sx-mejora-borde: var(--s-salvia-linea);
  --sx-mejora-tinta: var(--s-salvia-tinta);
  --sx-nueva: var(--vino);
  /* ---- Préstamos: Dinero's ledger page; gold only on money (the next deduction, the total) ---- */
  --sx-libro: var(--mo-libro, var(--s-papel-hoja));
  --sx-renglon: rgba(220, 197, 158, .55);
  --sx-dinero: var(--vino);
  --sx-dinero-subraya: var(--oro);
  --sx-siguiente: var(--oro-claro);
  --sx-siguiente-tinta: var(--oro-tinta);
  --sx-t-pesos: 22px;
  --sx-t-monto: 40px;
  --sx-ley: var(--papel);
  /* ---- a refusal or a waiting state: the kit's terracota, never red ---- */
  --sx-espera: var(--espera);
  --sx-espera-claro: var(--espera-claro);
  --sx-espera-tinta: var(--espera-tinta);
  /* ---- Informes: «sin dato» is a dashed, quiet word — never a zero ---- */
  --sx-sin-dato: var(--gris-medio);
  --sx-sin-dato-borde: var(--gris-claro);
  /* ---- the specimen's rooms (the kit only: the room's light behind the pieces) ---- */
  --sx-cuarto-firmas: linear-gradient(170deg, var(--crema) 0%, var(--s-papel-luz) 100%);
  --sx-cuarto-desempeno: linear-gradient(170deg, var(--s-salvia-hoja) 0%, var(--s-salvia-luz) 100%);
}

/* ---------------- the rooms: a screen's root may wear data-cuarto; the AHORA card takes the room's material (momentos.css M4) ---------------- */
[data-cuarto="firmas"] { --mo-ahora-fondo: var(--sx-hoja); }
[data-cuarto="desempeno"] { --mo-ahora-fondo: var(--sx-meta-fondo); }
.sx-cuarto { display: grid; gap: var(--sx-hueco); min-width: 0; padding: 16px; border-radius: var(--sx-radio); }
.sx-cuarto[data-cuarto="firmas"] { background: var(--sx-cuarto-firmas); }
.sx-cuarto[data-cuarto="desempeno"] { background: var(--sx-cuarto-desempeno); }
.sx-cuarto[data-cuarto="dinero"] { background: var(--papel); }
/* the console's table outside the console (the kit): its frame's tokens, so a specimen reads as /rh draws it */
.sx-cuarto[data-cuarto="rh"] { background: var(--crema); }
:is(.sx-cuarto[data-cuarto="rh"], .sx-pantalla-escritorio) { --cs-t-cuerpo: 16px; --cs-t-meta: 16px; --cs-lh-cuerpo: 1.5; --cs-lh-meta: 1.5; --cs-acento: var(--vino);
  --cs-acento-suave: var(--s-ciruela-tarjeta); --cs-tabla-fila: 44px; --cs-tabla-hueco: 16px; --cs-tabla-linea: var(--linea); }

/* ---------------- the shared small parts ---------------- */
:is(.sx-firmar, .sx-meta, .sx-retro, .sx-prestamo, .sx-ley, .sx-informe) :is(p, h2, h3, ol, ul) { margin: 0; }
.sx-k { display: flex; align-items: center; gap: 8px; font-size: var(--t-apoyo); font-weight: 700; line-height: 1.3; color: var(--sx-apoyo); }
.sx-k .ico { width: 20px; height: 20px; flex: none; }
.sx-titulo { font: 500 var(--sx-t-titulo)/1.08 var(--f-display); color: var(--sx-titulo); text-wrap: balance; overflow-wrap: anywhere; }
.sx-mensaje { font-size: var(--sx-t-cita); font-weight: 600; line-height: 1.45; color: var(--sx-tinta); text-wrap: pretty; overflow-wrap: anywhere; }
.sx-vence { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sx-espera-tinta); }
.sx-vence .ico { width: 20px; height: 20px; flex: none; }
.sx-nota, .sx-fuente { font-size: var(--t-nota); font-weight: 600; line-height: 1.4; color: var(--sx-apoyo); }

/* a screen's block-flow section (a lane's `.section`, its `[data-pantalla]` root): the round's pieces keep the kit's 14 px from what comes before
   them, and goal / note / loan cards keep it between themselves also when a lane wraps each one for its locator (`<div data-compromiso>`,
   `<div id="retro-…">`). The kit's own frames are grids with a gap and are left alone, so a gap is never doubled. */
:where(.section, .section > div, [data-pantalla]) > :is(.sx-ley, .sx-pedir, .sx-calendario, .sx-no-alcanza, .sx-sello, .sx-decir, .sx-firmar, .sx-prestamo, .sx-meta, .sx-retro):not(:first-child):not(.section-head + *),
:where(.section, .section > div, [data-pantalla]) > :is(.sx-ley, .sx-pedir, .sx-calendario, .sx-no-alcanza, .sx-sello, .sx-decir, .sx-firmar, .sx-prestamo, .sx-meta, .sx-retro) + :not(.section-head),
:where(.section, .section > div) > :where(div, li):has(> :is(.sx-meta, .sx-retro, .sx-prestamo):first-child) + :where(div, li):has(> :is(.sx-meta, .sx-retro, .sx-prestamo):first-child) { margin-top: var(--sx-hueco); }
/* one report after another on RH's page: a breath between two tables, so a table's note never reads as the next one's title */
:where(.section, [data-pantalla]) > .sx-informe + .sx-informe { margin-top: 36px; }

/* ════════════════ Firma de documentos ════════════════ */

/* the AHORA card IS the sheet: white paper, its top-right corner folded over the crema desk, the line to sign on above «Firmar» */
.mo-dia.sx-ahora-firma { --mo-ahora-fondo: var(--sx-hoja); border-top-right-radius: 0; }
.sx-ahora-firma::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 38px; height: 38px;
  background: linear-gradient(225deg, var(--sx-hoja-mesa) 0 50%, var(--sx-hoja-pliegue) 50% 100%); border-bottom-left-radius: 6px; box-shadow: var(--sx-sombra); }
.sx-ahora-firma .mo-k { padding-right: 40px; color: var(--sx-titulo); }
.sx-ahora-firma .mo-dia-titulo { padding-right: 18px; }
.sx-renglon-firma { position: relative; display: block; height: 30px; margin: 2px 0 -6px; border-bottom: 2px dashed var(--sx-renglon-firma); }
.sx-renglon-firma::before { content: "×"; position: absolute; left: 2px; bottom: 2px; font: 600 22px/1 var(--f-texto); color: var(--sx-renglon-firma); }
.sx-mas-firmas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--sx-titulo); text-decoration: none; }
.sx-mas-firmas .flecha { width: 20px; height: 20px; }

/* the sign sheet: the type and title on top, then two numbered steps — read it, sign it — and «No lo firmo» quiet under them */
.sx-firmar { position: relative; isolation: isolate; display: grid; gap: 18px; min-width: 0; padding: 20px var(--sx-orilla) 22px; background: var(--sx-hoja); color: var(--sx-tinta);
  border: 1px solid var(--sx-borde); border-radius: var(--sx-radio); border-top-right-radius: 0; box-shadow: var(--sx-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); }
.sx-firmar::before { content: ""; position: absolute; top: -1px; right: -1px; width: 44px; height: 44px;
  background: linear-gradient(225deg, var(--sx-hoja-mesa) 0 50%, var(--sx-hoja-pliegue) 50% 100%); border-bottom-left-radius: 8px; box-shadow: var(--sx-sombra); }
.sx-firmar-cabeza { display: grid; gap: 10px; padding-right: 36px; }
.sx-pasos-firma { display: grid; gap: 20px; padding: 0; list-style: none; counter-reset: none; }
.sx-pasos-firma > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.sx-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--papel); color: var(--sx-titulo); font: 500 20px/1 var(--f-display);
  font-variant-numeric: tabular-nums; }
.sx-paso-cuerpo { display: grid; gap: 10px; min-width: 0; }
.sx-paso-cuerpo > h3 { padding-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sx-tinta); }

/* the document: a sheet you open (the phone's own viewer shows every page), or the picture drawn whole */
.sx-doc { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--sx-borde); border-radius: 16px; background: var(--papel);
  color: var(--sx-tinta); text-decoration: none; transition: transform var(--d-1) var(--suave); }
.sx-doc:active { transform: scale(.98); }
.sx-doc-hoja { position: relative; display: grid; align-content: center; gap: 5px; flex: none; width: 40px; height: 52px; padding: 0 8px; border-radius: 4px 12px 4px 4px;
  background: var(--sx-hoja); box-shadow: var(--sx-sombra); }
.sx-doc-hoja::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: linear-gradient(225deg, var(--papel) 0 50%, var(--sx-hoja-pliegue) 50%); }
.sx-doc-hoja i { display: block; height: 3px; border-radius: 2px; background: var(--sx-hoja-renglon); }
.sx-doc-hoja i:last-child { width: 60%; background: var(--sx-renglon-firma); }
.sx-doc-dice { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sx-doc-dice b { font-size: 17px; color: var(--sx-titulo); }
.sx-doc-dice span { font-size: var(--t-apoyo); font-weight: 600; color: var(--sx-apoyo); }
.sx-doc .flecha { flex: none; width: 22px; height: 22px; color: var(--sx-apoyo); }
.sx-doc-imagen { display: block; overflow: hidden; border: 1px solid var(--sx-borde); border-radius: 12px; background: var(--papel); }
.sx-doc-imagen img { display: block; width: 100%; height: auto; }

/* her name on the line: no box — a dashed line, the «×» at its start, what she types in ink */
.sx-firma-forma { display: grid; gap: 14px; margin: 0; }
.sx-linea-firma { position: relative; display: grid; gap: 4px; }
.sx-linea-dice { font-size: var(--t-apoyo); font-weight: 700; color: var(--sx-apoyo); }
.sx-linea-firma input { width: 100%; min-height: 60px; padding: 10px 4px 6px 34px; border: 0; border-bottom: 2px dashed var(--sx-renglon-firma); border-radius: 0;
  background: transparent; color: var(--sx-pluma); font: 500 var(--sx-t-firma)/1.2 var(--f-display); -webkit-appearance: none; appearance: none; }
.sx-linea-firma input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--sx-pluma); }
.sx-linea-firma input:focus-visible { outline: 3px solid var(--oro); outline-offset: 4px; }
.sx-linea-firma::after { content: "×"; position: absolute; left: 4px; bottom: 12px; font: 600 26px/1 var(--f-texto); color: var(--sx-renglon-firma); pointer-events: none; }
.sx-promesa { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-apoyo); font-weight: 600; line-height: 1.4; color: var(--sx-apoyo); }
.sx-promesa .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sx-aviso { font-size: var(--t-nota); line-height: 1.4; color: var(--sx-apoyo); }
.sx-firmar-boton { width: 100%; min-height: 56px; font-size: 17px; }
.sx-firmar-boton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.sx-abre-primero { font-size: var(--t-apoyo); font-weight: 700; line-height: 1.4; color: var(--sx-espera-tinta); }
.sx-error { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--sx-espera-claro); color: var(--sx-espera-tinta);
  font-weight: 700; line-height: 1.4; }
.sx-error .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* «No lo firmo»: always offered, quiet — a link-sized summary; open, her reason and «Mandar a RH» */
.sx-no-firmo { display: grid; gap: 10px; margin: -4px 0 0 48px; }
.sx-no-firmo > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sx-apoyo); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sx-borde); }
.sx-no-firmo > summary::-webkit-details-marker { display: none; }
.sx-no-firmo[open] > summary { color: var(--sx-tinta); }
.sx-no-firmo-forma { display: grid; gap: 10px; margin: 0; }
.sx-no-firmo-forma label { display: grid; gap: 6px; }
.sx-no-firmo-forma textarea { width: 100%; min-height: 96px; padding: 12px 14px; border: 1.5px solid var(--sx-borde); border-radius: 14px; background: var(--hoja);
  color: var(--sx-tinta); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); resize: vertical; }
.sx-no-firmo-forma .mo-acto { justify-self: start; }

/* the seal: a green rubber stamp pressed once, her name in ink beside it, the moment in words, «Tu acuse» */
.sx-sello { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 14px 16px; border-radius: 18px;
  background: var(--sx-sello-claro); color: var(--sx-sello-tinta); }
.sx-sello-marca { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--sx-sello); color: var(--sx-sello);
  box-shadow: inset 0 0 0 3px var(--sx-sello-claro), inset 0 0 0 5px var(--sx-sello); transform: rotate(var(--sx-sello-giro)); animation: sx-sella var(--d-3) var(--resorte) both; }
.sx-sello-marca .ico { width: 26px; height: 26px; }
.sx-sello-dice { display: grid; gap: 2px; min-width: 0; }
.sx-sello-nombre { font: 500 26px/1.1 var(--f-display); color: var(--sx-pluma); overflow-wrap: anywhere; }
.sx-sello-cuando { font-weight: 700; line-height: 1.35; }
.sx-acuse { grid-column: 2; justify-self: start; min-height: 44px; border-color: var(--sx-sello-tinta); color: var(--sx-sello-tinta); }
@keyframes sx-sella { from { opacity: 0; transform: rotate(var(--sx-sello-giro)) scale(1.4); } to { opacity: 1; transform: rotate(var(--sx-sello-giro)) scale(1); } }

/* a row of the lists (inside .list, like FilaDocumento) */
.item.sx-fila-firma { align-items: flex-start; color: inherit; text-decoration: none; }
.item.sx-fila-firma .txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.item.sx-fila-firma .s { overflow-wrap: anywhere; }
.item.sx-fila-firma .linea { margin-top: 6px; }
.item.sx-fila-firma > :is(.chip, .flecha) { align-self: center; flex: none; }
.item.sx-fila-firma > .chip { min-height: 44px; }
.item.sx-fila-firma[data-estado="firmada"] .ic { background: var(--sx-sello-claro); color: var(--sx-sello-tinta); }

/* ════════════════ Desempeño ════════════════ */

.sx-meta { display: grid; gap: 10px; min-width: 0; padding: 16px var(--sx-orilla) 18px; background: var(--sx-meta-fondo); color: var(--sx-tinta);
  border: 1px solid var(--sx-meta-borde); border-radius: var(--sx-radio); box-shadow: var(--sx-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); }
.sx-meta .sx-k { color: var(--sx-meta-tinta); }
.sx-meta-titulo { font: 500 var(--sx-t-meta)/1.1 var(--f-display); color: var(--sx-titulo); text-wrap: balance; overflow-wrap: anywhere; }
.sx-porque { line-height: 1.45; color: var(--sx-tinta); overflow-wrap: anywhere; }
.sx-porque b { color: var(--sx-meta-tinta); }

/* the word scale: four stops on a sage path; the reached ones filled, hers ringed — a stop is a ≥ 44 px target with its word under it */
.sx-escala-forma { display: grid; gap: 6px; margin: 4px 0 0; }
.sx-escala-campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.sx-escala-leyenda { padding: 0; margin: 0 0 6px; font-size: var(--t-apoyo); font-weight: 700; color: var(--sx-meta-tinta); }
.sx-escala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sx-escala-nota { display: block; margin: 0 0 8px; }
.sx-escala-nota input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--sx-meta-borde); border-radius: 14px; background: var(--sx-hoja);
  color: var(--sx-tinta); font: 500 var(--t-cuerpo)/1.3 var(--f-texto); }
.sx-parada { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; min-height: 68px; padding: 4px 2px 6px; border: 0;
  background: transparent; color: var(--sx-apoyo); font: 600 var(--t-cuerpo)/1.15 var(--f-texto); text-align: center; cursor: default; }
button.sx-parada { cursor: pointer; transition: transform var(--d-1) var(--suave); -webkit-tap-highlight-color: transparent; }
button.sx-parada:active { transform: scale(.94); }
/* the path between two stops: each stop draws the piece from the one before it to itself; filled when she got there */
.sx-parada + .sx-parada::before { content: ""; position: absolute; z-index: 0; top: calc(4px + var(--sx-punto-actual) / 2 - 2px); left: -50%; right: 50%; height: 4px;
  border-radius: 2px; background: var(--sx-riel); }
.sx-parada[data-llegado] + .sx-parada[data-llegado]::before { background: var(--sx-meta-tinta); }
.sx-punto-caja { position: relative; z-index: 1; display: grid; place-items: center; width: var(--sx-punto-actual); height: var(--sx-punto-actual); }
.sx-punto { display: grid; place-items: center; width: var(--sx-punto); height: var(--sx-punto); border-radius: 50%; background: var(--sx-meta-fondo);
  box-shadow: inset 0 0 0 2.5px var(--sx-riel); color: var(--sx-meta-fondo); }
.sx-parada[data-llegado] .sx-punto { background: var(--sx-meta-tinta); box-shadow: none; }
.sx-parada[data-actual] .sx-punto { width: var(--sx-punto-actual); height: var(--sx-punto-actual); box-shadow: 0 0 0 5px var(--sx-meta-luz); }
.sx-punto .ico { width: 16px; height: 16px; }
/* a word never breaks inside itself («sin / empezar», never «empeza / r»); the longest («cumplida») may pass its column by a hair, centered */
.sx-parada-dice { overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.sx-parada[data-actual] .sx-parada-dice { font-weight: 700; color: var(--sx-meta-tinta); }
button.sx-parada:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; border-radius: 12px; }

/* a closed one: a line, not a stop */
.sx-cerrada { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pastilla);
  background: var(--papel-2); color: var(--sx-apoyo); font-weight: 700; }
.sx-cerrada[data-cerrada="cumplida"] { background: var(--sx-sello-claro); color: var(--sx-sello-tinta); }
.sx-cerrada .ico { width: 18px; height: 18px; }

/* the leader's three closing words: «Se cumplió» filled, «No se cumplió» drawn, «Cancelarla» quiet */
.sx-cerrar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 2px; }
.sx-cerrar form { margin: 0; }
.sx-cerrar button { min-height: 44px; padding: 8px 16px; border-radius: var(--r-pastilla); font: 700 var(--t-cuerpo)/1 var(--f-texto); cursor: pointer;
  transition: transform var(--d-1) var(--suave); }
.sx-cerrar button:active { transform: scale(.96); }
.sx-cerrar-si { border: 0; background: var(--sx-meta-tinta); color: var(--sx-meta-fondo); }
.sx-cerrar-no { border: 2px solid var(--sx-meta-tinta); background: transparent; color: var(--sx-meta-tinta); }
.sx-cerrar-quita { border: 0; background: transparent; color: var(--sx-apoyo); text-decoration: underline; text-underline-offset: 4px; }

/* a plan's steps: a tick box per step, a done step quiet with when */
.sx-pasos { display: grid; margin: 0; padding: 0; list-style: none; }
.sx-pasos > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 52px; }
.sx-pasos > li + li { border-top: 1px dashed var(--sx-meta-borde); }
.sx-tic-forma { margin: 0; }
.sx-tic { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform var(--d-1) var(--suave); }
span.sx-tic { cursor: default; }
.sx-tic .ico { width: 30px; height: 30px; padding: 5px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--sx-meta-tinta); background: var(--sx-hoja); }
button.sx-tic:active { transform: scale(.92); }
[data-hecho] > .sx-tic, [data-hecho] > .sx-tic-forma .sx-tic { color: var(--sx-meta-fondo); }
[data-hecho] .sx-tic .ico { background: var(--sx-meta-tinta); box-shadow: none; }
.sx-paso-dice { display: grid; gap: 2px; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.sx-paso-dice small { font-size: var(--t-nota); font-weight: 600; color: var(--sx-apoyo); }
[data-hecho] .sx-paso-dice > span { color: var(--sx-apoyo); }

/* a private note: a slip of paper, its corner square where it came from */
.sx-retro { position: relative; display: grid; gap: 8px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--sx-reconoce-borde); border-radius: 6px 18px 18px 18px;
  background: var(--sx-reconoce); color: var(--sx-tinta); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); --sx-retro-tinta: var(--sx-reconoce-tinta); }
.sx-retro[data-tipo="para_mejorar"] { border-color: var(--sx-mejora-borde); background: var(--sx-mejora); --sx-retro-tinta: var(--sx-mejora-tinta); }
.sx-retro[data-lado="dada"] { border-radius: 18px 6px 18px 18px; }
.sx-retro .sx-k { color: var(--sx-retro-tinta); }
.sx-retro-glifo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sx-hoja); color: var(--sx-retro-tinta); }
.sx-retro-glifo .ico { width: 18px; height: 18px; }
.sx-retro-tipo { flex: 1; min-width: 0; }
.sx-nueva { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-nueva); }
.sx-nueva i { width: 10px; height: 10px; border-radius: 50%; background: var(--sx-nueva); }
.sx-retro-texto { font-size: var(--sx-t-cita); font-weight: 600; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.sx-retro-quien { font-weight: 700; color: var(--sx-apoyo); }
.sx-leida[data-leida-dicho="si"] { color: var(--sx-sello-tinta); }
.sx-leer { margin: 2px 0 0; }

/* ════════════════ Préstamos y adelantos ════════════════ */

/* the loan's card: the ledger paper; the AHORA variant is the one constant shape (.mo-dia) on the same paper */
.sx-prestamo { display: grid; gap: 10px; min-width: 0; padding: 16px var(--sx-orilla) 18px; background: var(--sx-libro); color: var(--sx-tinta); border: 1px solid var(--sx-borde);
  border-radius: var(--sx-radio); box-shadow: var(--sx-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); }
.mo-dia.sx-prestamo-ahora { --mo-ahora-fondo: var(--sx-libro); padding: 18px var(--mo-orilla) 20px; border: 0; }
.sx-prestamo-titulo { font: 500 var(--sx-t-meta)/1.1 var(--f-display); color: var(--sx-titulo); }
.sx-prestamo-monto { font: 500 var(--sx-t-monto)/1 var(--f-display); color: var(--sx-dinero); font-variant-numeric: tabular-nums; }
.sx-prestamo .mo-dia-lineas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-prestamo .mo-dia-lineas li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.sx-prestamo .mo-dia-lineas .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sx-apoyo); }
.sx-prestamo .sx-siguiente { font-weight: 700; }
.sx-prestamo .sx-siguiente .monto { text-decoration: underline; text-decoration-color: var(--sx-dinero-subraya); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sx-prestamo[data-estado="rechazado"] .sx-prestamo-monto, .sx-prestamo[data-estado="cancelado"] .sx-prestamo-monto { color: var(--sx-apoyo); }
.sx-prestamo .mo-dia-actos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* the schedule: a ledger page — the number in a ring, the day in words, the pesos right in Eighties; the next one in gold light */
.sx-calendario { min-width: 0; padding: 4px 14px; border: 1px solid var(--sx-borde); border-radius: 18px; background: var(--sx-libro); }
.sx-calendario table { width: 100%; border-collapse: collapse; font: 500 var(--t-cuerpo)/1.35 var(--f-texto); color: var(--sx-tinta); }
.sx-calendario :is(th, td) { padding: 10px 6px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sx-renglon); }
.sx-calendario tbody th { width: 44px; }
.sx-calendario .sx-n { width: 34px; height: 34px; font-size: 18px; background: var(--sx-hoja); box-shadow: inset 0 0 0 1.5px var(--sx-borde); }
.sx-cal-dia { font-weight: 600; }
.sx-descontado { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--t-nota); font-weight: 700; color: var(--sx-sello-tinta); }
.sx-descontado .ico { width: 16px; height: 16px; }
.sx-calendario td.sx-pesos { text-align: right; white-space: nowrap; font: 500 var(--sx-t-pesos)/1 var(--f-display); color: var(--sx-dinero); font-variant-numeric: tabular-nums; }
.sx-calendario tr[data-siguiente] > * { background: var(--sx-siguiente); }
.sx-calendario tr[data-siguiente] > :first-child { border-radius: 12px 0 0 12px; }
.sx-calendario tr[data-siguiente] > :last-child { border-radius: 0 12px 12px 0; }
.sx-calendario tr[data-siguiente] .sx-cal-dia { color: var(--sx-siguiente-tinta); }
.sx-calendario tr[data-pagado] :is(.sx-cal-dia, .sx-pesos) { color: var(--sx-apoyo); }
.sx-calendario tfoot :is(th, td) { border-bottom: 0; border-top: 2px solid var(--sx-borde); font-weight: 700; }
.sx-total { text-decoration: underline; text-decoration-color: var(--sx-dinero-subraya); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sx-cal-rh { margin: 6px 0 2px; }
.sx-cal-rh .chip { min-height: 44px; }

/* «Lo que la ley permite»: the caps with their source; a refusal in terracota, never red */
.sx-ley { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--sx-ley); color: var(--sx-tinta); }
.sx-ley ul { display: grid; gap: 6px; padding: 0; list-style: none; }
.sx-ley li { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; line-height: 1.4; }
.sx-ley li .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--sx-sello-tinta); }
.sx-no-alcanza { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sx-espera-claro);
  color: var(--sx-espera-tinta); font-weight: 700; line-height: 1.4; }
.sx-no-alcanza .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* ════════════════ Informes de RH ════════════════ */

.sx-informe { display: grid; gap: 10px; min-width: 0; }
.sx-informe-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.sx-informe-titulo { font: 500 var(--sx-t-meta)/1.1 var(--f-display); color: var(--sx-titulo); }
.sx-csv { min-height: 44px; }
.sx-fecha { display: flex; align-items: center; gap: 8px; font-size: var(--t-apoyo); font-weight: 600; color: var(--sx-apoyo); }
.sx-fecha .ico { width: 18px; height: 18px; flex: none; }
.sx-sin-dato { display: inline-flex; align-items: center; padding: 0 10px; min-height: 26px; border: 1.5px dashed var(--sx-sin-dato-borde); border-radius: var(--r-pastilla);
  color: var(--sx-sin-dato); font-size: var(--t-nota); font-weight: 600; white-space: nowrap; }
.sx-informe .cs-tabla { font-size: var(--t-cuerpo); }
/* on a phone the console stacks each row as a card (consola.css `apila`); a report's figures read as a ledger there: the column at the left, the
   number at the right, one line each */
@media (max-width: 699px) {
  .sx-informe .cs-tabla.apila tbody td[data-k] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; font-variant-numeric: tabular-nums; }
  .sx-informe .cs-tabla.apila tbody td[data-k]::before { content: attr(data-k); }
  /* the totals row stacks like a row, its label first */
  .sx-informe .cs-tabla.apila tfoot { display: block; }
  .sx-informe .cs-tabla.apila tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-3) var(--e-4); border-top: 2px solid var(--linea); }
  .sx-informe .cs-tabla.apila tfoot :is(th, td) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; height: auto; padding: 0; border: 0;
    text-align: left; white-space: normal; font-variant-numeric: tabular-nums; }
  .sx-informe .cs-tabla.apila tfoot td[data-k]::before { content: attr(data-k); font-weight: 400; color: var(--gris); }
}
/* the totals alone (the rest folded): the head is read once, above */
.sx-informe .cs-tabla.sx-solo-pie thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* a folded report (round 34's «everything else folded»): closed, a card — the title, the date line, its one line and a chevron; open, the
   report as always under the same head (the chevron turns) */
.sx-informe-plegada > summary { display: grid; gap: 6px; min-height: 44px; padding: 14px 16px; border-radius: 18px; background: var(--papel); cursor: pointer;
  list-style: none; -webkit-tap-highlight-color: transparent; }
.sx-informe-plegada > summary::-webkit-details-marker { display: none; }
.sx-informe-plegada > summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.sx-informe-plegada[open] > summary { padding: 0; border-radius: 0; background: transparent; }
.sx-informe-plegada .sx-informe-cab { flex-wrap: nowrap; }
.sx-pliegue-flecha { flex: none; width: 22px; height: 22px; color: var(--sx-apoyo); transition: transform var(--d-2) var(--suave); }
.sx-informe-plegada[open] .sx-pliegue-flecha { transform: rotate(180deg); }
.sx-resumen { font-weight: 700; line-height: 1.4; color: var(--sx-tinta); }
.sx-informe-dentro { display: grid; gap: 10px; margin-top: 10px; }
.sx-csv-fila { display: flex; justify-content: flex-end; }
.sx-mas { display: grid; gap: 8px; }
.sx-mas > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sx-titulo); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sx-borde); }
.sx-mas > summary::-webkit-details-marker { display: none; }

/* ════════════════ RH's module switch (the kit's .sw, read from data-abierta too) ════════════════ */

.sx-modulo-forma { margin: 0; }
.sx-modulo-forma + .sx-modulo-forma, .sx-modulo + .sx-modulo { border-top: 1px solid var(--linea); }
.sw.sx-modulo { min-height: 72px; padding-inline: 16px; }
/* off, the track reads on the console's papel (the kit's .sw track alone is papel-2 on papel) */
.sw.sx-modulo i { box-shadow: inset 0 0 0 1.5px var(--gris-claro); }
.sw.sx-modulo[data-abierta="true"] i { box-shadow: none; }
:where(div):has(> .sw.sx-modulo) + :where(div):has(> .sw.sx-modulo) { border-top: 1px solid var(--linea); }
.sw.sx-modulo[data-abierta="true"] i { background: var(--verde); }
.sw.sx-modulo[data-abierta="true"] i::after { transform: translateX(22px); }
.sw.sx-modulo[data-abierta="true"] .sx-modulo-linea { color: var(--sx-sello-tinta); }
.sx-modulos { padding: 4px 0; border-radius: var(--r-tarjeta); background: var(--papel); }
/* an RH form on a desk keeps a reading measure: a field or a button never stretches the console's whole width — the lanes put the class on their
   form (firma's send forms: sx-forma-envio; préstamos' own numbers: sx-forma-rh) */
.sx-forma-envio { max-width: 560px; }
.sx-forma-rh { max-width: 480px; }

/* ════════════════ The two forms: «Decirle algo» and the loan's ask — the type as two tiles, then the fields, then the act ════════════════ */

:is(.sx-decir, .sx-pedir) { display: grid; gap: 14px; margin: 0; min-width: 0; font: 500 var(--t-cuerpo)/1.45 var(--f-texto); color: var(--sx-tinta); }
.sx-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sx-tipos > legend { grid-column: 1 / -1; margin-bottom: 8px; padding: 0; }
.sx-tipo { position: relative; display: grid; justify-items: start; align-content: start; gap: 6px; min-height: 96px; padding: 14px; border: 2px solid var(--sx-borde);
  border-radius: 18px; background: var(--sx-hoja); cursor: pointer; transition: transform var(--d-1) var(--suave); -webkit-tap-highlight-color: transparent; }
.sx-tipo:active { transform: scale(.97); }
.sx-tipo > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sx-tipo b { font-size: 17px; line-height: 1.2; color: var(--sx-titulo); }
.sx-tipo small { font-size: var(--t-nota); font-weight: 600; line-height: 1.3; color: var(--sx-apoyo); }
.sx-tipo:has(> input:checked) { border-color: var(--sx-titulo); background: var(--papel); }
.sx-tipo:has(> input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }
.sx-decir .sx-tipo[data-tipo="reconocimiento"]:has(> input:checked) { border-color: var(--sx-reconoce-tinta); background: var(--sx-reconoce); }
.sx-decir .sx-tipo[data-tipo="para_mejorar"]:has(> input:checked) { border-color: var(--sx-mejora-tinta); background: var(--sx-mejora); }
.sx-tipo .sx-retro-glifo { box-shadow: inset 0 0 0 1.5px var(--sx-borde); color: var(--sx-titulo); }
.sx-decir .sx-tipo[data-tipo="reconocimiento"] .sx-retro-glifo { color: var(--sx-reconoce-tinta); }
.sx-decir .sx-tipo[data-tipo="para_mejorar"] .sx-retro-glifo { color: var(--sx-mejora-tinta); }
.sx-campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.sx-campo-dice, .sx-campo > span:first-child { font-size: var(--t-apoyo); font-weight: 700; color: var(--sx-apoyo); }
:is(.sx-campo textarea, .sx-campo select, .sx-pesos-campo) { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--sx-borde); border-radius: 14px;
  background: var(--sx-hoja); color: var(--sx-tinta); font: 500 var(--t-cuerpo)/1.4 var(--f-texto); }
.sx-campo textarea { resize: vertical; }
.sx-campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--vino) 50%),
  linear-gradient(135deg, var(--vino) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* the amount: the peso sign and the number in Eighties, the ledger's money */
.sx-pesos-campo { display: flex; align-items: center; gap: 6px; padding: 6px 14px; }
.sx-pesos-campo > span { font: 500 28px/1 var(--f-display); color: var(--sx-dinero); }
.sx-pesos-campo input { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--sx-dinero); font: 500 32px/1 var(--f-display);
  font-variant-numeric: tabular-nums; }
.sx-pesos-campo input:focus { outline: none; }
.sx-pesos-campo:focus-within { border-color: var(--sx-dinero); }
.sx-pedir-actos { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-pedir-actos > .mo-acto { flex: 1 1 140px; min-height: 52px; }
.sx-nota .ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }

/* ════════════════ The kit's screen frame (the specimen only): a phone at 390, its title, the screen's parts in its order ════════════════ */

.sx-pantalla { display: grid; gap: var(--sx-hueco); align-content: start; min-width: 0; max-width: 390px; padding: 18px 16px 22px; border: 1px solid var(--sx-borde);
  border-radius: 28px; background: var(--crema); box-shadow: var(--sx-sombra); }
.sx-pantalla[data-cuarto="firmas"] { background: var(--sx-cuarto-firmas); }
.sx-pantalla[data-cuarto="desempeno"] { background: var(--sx-cuarto-desempeno); }
.sx-pantalla-cabeza { display: grid; gap: 2px; padding: 0 2px; }
.sx-pantalla-cabeza small { font-size: var(--t-apoyo); font-weight: 700; color: var(--sx-apoyo); }
.sx-pantalla-cabeza b { font: 500 var(--t-titulo)/1.05 var(--f-display); color: var(--sx-titulo); }
.sx-pantalla-grupo { display: grid; gap: 10px; }
.sx-pantalla-grupo > h4 { margin: 6px 2px 0; font-size: 17px; font-weight: 700; color: var(--sx-tinta); }
.sx-pantalla-escritorio { max-width: 760px; }
/* the screens' grid: one phone per row on a phone, three across on a laptop; a desk screen takes the row's width up to 760 px */
.sx-pantallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 390px)); align-items: start; gap: 26px 24px; }
.sx-pantalla-celda { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sx-pantalla-celda > .date { margin: 0 2px; }
.sx-pantalla-ancha { grid-column: 1 / -1; }

/* ---------------- reduced motion: nothing moves ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sx-sello-marca { animation: none; }
  :is(.sx-doc, button.sx-parada, .sx-cerrar button, button.sx-tic, .sx-tipo, .sx-pliegue-flecha) { transition: none; }
  :is(.sx-doc, button.sx-parada, .sx-cerrar button, button.sx-tic, .sx-tipo):active { transform: none; }
}