/* ============================================================================
   Panel de administración
   Documento serio con presencia: barra lateral con peso, tipografía con
   contraste real entre jerarquías, superficies con profundidad medida.
   El color sigue siendo semántico — el acento marca navegación y la acción
   principal; rojo, ámbar y verde no se usan para decorar.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/*
 | Paleta leída de las marcas en producción, mptech.com.do y datared.io, para
 | que el panel no se sienta una herramienta ajena al sitio del que viene el
 | comerciante. La densidad del panel no cambia: sólo color, tipografía y radio.
 */
:root {
  --accent:#0F62A8; --accent-deep:#073B6F; --accent-tint:#D8E8F8;
  --accent-glow:rgba(15,98,168,.18); --pop:#FF6F4F; --pop-tint:#FFE5DC;
  --sidebar:#0B1E3F; --sidebar-2:#073B6F; --sidebar-ink:#93A9C6;
  --ink-900:#0B1E3F; --ink-700:#33456A; --ink-500:#5A6B85; --ink-400:#8C9AB3; --ink-300:#B6C1D2;
  --rule:rgba(11,30,63,.10); --rule-strong:rgba(11,30,63,.20);
  --serif:"Fraunces",Georgia,serif;
}
[data-brand="mptech"] {
  --accent:#0F62A8; --accent-deep:#073B6F; --accent-tint:#D8E8F8;
  --accent-glow:rgba(15,98,168,.18); --pop:#FF6F4F; --pop-tint:#FFE5DC;
  --canvas:#FFFBF5; --sunken:#F2F7FC; --hover:#F2F7FC;
  --sidebar:#0B1E3F; --sidebar-2:#073B6F; --sidebar-ink:#93A9C6;
  --ink-900:#0B1E3F; --ink-700:#33456A; --ink-500:#5A6B85; --ink-400:#8C9AB3; --ink-300:#B6C1D2;
  --rule:rgba(11,30,63,.10); --rule-strong:rgba(11,30,63,.20);
  --serif:"Fraunces",Georgia,serif;
}
[data-brand="datared"] {
  --accent:#2B5BD7; --accent-deep:#1B3A8F; --accent-tint:#DCE6FB;
  --accent-glow:rgba(43,91,215,.20); --pop:#E0A32B; --pop-tint:#FFF4DC;
  --canvas:#FFFFFF; --sunken:#EEF3FE; --hover:#EEF3FE;
  --sidebar:#0B1B3D; --sidebar-2:#1B3A8F; --sidebar-ink:#9AAECF;
  --ink-900:#0B1B3D; --ink-700:#1B3A8F; --ink-500:#5A6C8F; --ink-400:#8C9AB3; --ink-300:#B6C1D2;
  --rule:rgba(11,27,61,.10); --rule-strong:rgba(11,27,61,.18);
  --serif:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
}

:root {
  /* Nada de lo que las marcas definen puede vivir aquí: este bloque va último
     y `:root` pesa igual que `[data-brand]`, así que ganaría siempre. */
  --surface:#FFFFFF;
  --tint-dop:#FFF9EC;

  --ok:#0E9F6E;     --ok-tint:#E4F5EE;   --ok-line:#8FD3B8;
  --warn:#B47A0C;   --warn-tint:#FFF4DC; --warn-line:#E8C88A;
  --danger:#9B2C2C; --danger-mid:#C23B3B; --danger-tint:#FEF0F0;
  --danger-line:#F6CFCF; --danger-row:#FFF7F7;

  --fs-display:30px; --fs-title:23px; --fs-body:15px; --fs-ident:13px;
  --fs-note:13.5px; --fs-th:11.5px; --fs-chip:11.5px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r:10px; --r-sm:6px;
  --ease:cubic-bezier(0.22,1,0.36,1);

  --shadow-sm:0 1px 2px rgba(11,30,63,.05), 0 6px 16px -10px rgba(11,30,63,.16);
  --shadow:0 1px 2px rgba(11,30,63,.05), 0 8px 20px -8px rgba(11,30,63,.18);

  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--canvas); color:var(--ink-900);
  font:400 var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent-deep); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* --- Barra lateral: le da peso y estructura a todo lo demás --------------- */
/* minmax(0,1fr) y no 1fr: el mínimo por defecto de un item de grid es
   min-content, así que una tabla ancha estiraba <main> más allá de la
   ventana en vez de desbordarse dentro de .scroll, y la página entera se
   iba de lado. Se veía en Transacciones desde siempre. */
.shell { display:grid; grid-template-columns:232px minmax(0, 1fr); min-height:100vh; }
@media (max-width:900px) { .shell { grid-template-columns:1fr; } aside { position:static !important; height:auto !important; } }

aside {
  background:var(--sidebar); color:var(--sidebar-ink);
  padding:var(--sp-5) 0; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}
aside .wordmark {
  font:700 19px/1 var(--sans); letter-spacing:-.015em; color:#fff;
  padding:0 var(--sp-5) var(--sp-1); display:flex; align-items:center; gap:7px;
}
aside .wordmark .mark-svg { width:22px; height:22px; flex:none; color:var(--accent); }
aside .tagline {
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:#5B6F7A; padding:0 var(--sp-5) var(--sp-5) 16px;
}
aside nav { display:flex; flex-direction:column; gap:1px; padding:0 var(--sp-3); }
aside nav a {
  color:var(--sidebar-ink); font-size:var(--fs-body); font-weight:500;
  padding:9px var(--sp-3); border-radius:var(--r-sm); display:flex;
  justify-content:space-between; align-items:center; gap:var(--sp-2);
}
aside nav a:hover { background:var(--sidebar-2); color:#DCE6EA; text-decoration:none; }
aside nav a.on { background:var(--sidebar-2); color:#fff; box-shadow:inset 2px 0 0 var(--accent); }
aside nav .count {
  font:600 12px var(--sans); background:rgba(255,255,255,.09);
  padding:1px 6px; border-radius:9px; font-variant-numeric:tabular-nums;
}
aside nav a.on .count, aside nav .count.hot { background:var(--danger-mid); color:#fff; }
aside .foot { margin-top:auto; padding:var(--sp-4) var(--sp-5) 0; border-top:1px solid var(--sidebar-2); }
aside .who { color:#C6D3D9; font-weight:600; font-size:var(--fs-note); }
aside .foot button {
  margin-top:var(--sp-2); background:transparent; color:var(--sidebar-ink);
  border:1px solid #263943; font-size:var(--fs-note); padding:5px 10px;
}
aside .foot button:hover { background:var(--sidebar-2); color:#fff; }

main { padding:var(--sp-8) var(--sp-8) 64px; max-width:1480px; }

/* --- Tipografía ---------------------------------------------------------- */
.page-head { display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-2); }
h1 { font:700 var(--fs-title)/1.25 var(--sans); letter-spacing:-.015em; margin:0; }
h1.record { font:700 var(--fs-display)/1.2 var(--serif); letter-spacing:-.01em; }
h2 {
  font:700 var(--fs-th)/1.4 var(--sans); text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-500); margin:0 0 var(--sp-3);
}
.caption { color:var(--ink-500); font-size:var(--fs-note); margin:0 0 var(--sp-5); }
.note { color:var(--ink-500); font-size:var(--fs-note); margin-top:var(--sp-4); max-width:70ch; }

/* --- Cifras resumen ------------------------------------------------------ */
.summary { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:var(--sp-5); }
.summary > div {
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.summary b { display:block; font:700 34px/1.05 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.summary span { color:var(--ink-500); font-size:var(--fs-note); }
.summary .is-danger { border-color:var(--danger-line); }
.summary .is-danger::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--danger-mid); }
.summary .is-danger b { color:var(--danger); }

/* --- Tablas -------------------------------------------------------------- */
.scroll {
  overflow-x:auto; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}
table { width:100%; border-collapse:collapse; }
thead th {
  position:sticky; top:0; z-index:1; background:var(--sunken);
  font:700 var(--fs-th)/1.3 var(--sans); text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-500); text-align:left; padding:12px var(--sp-4);
  border-bottom:1px solid var(--rule-strong); white-space:nowrap;
}
td { padding:14px var(--sp-4); border-bottom:1px solid var(--rule); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .12s ease; }
tbody tr:hover { background:var(--hover); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.num.strong { font-weight:700; }
.num.alert { color:var(--danger); font-weight:700; }
.mono { font:400 var(--fs-ident) var(--mono); }
.date { font-variant-numeric:tabular-nums; color:var(--ink-700); white-space:nowrap; }
.quiet { color:var(--ink-500); }
.field > .quiet { display:block; margin-top:6px; font-size:var(--fs-note); line-height:1.5; }
.ident { font:400 var(--fs-ident)/1.5 var(--mono); color:var(--ink-400); margin-top:3px; }
td b { font-weight:600; }
.ccy-dop { background:var(--tint-dop); }

/* --- Riesgo: barra + tinte + PALABRA, siempre las tres ------------------- */
tr.riesgo-alto > td { background:var(--danger-row); }
tr.riesgo-alto > td:first-child { box-shadow:inset 3px 0 0 var(--danger-mid); }
tr.riesgo-alto:hover > td { background:#FDEFF0; }

tr.threshold td { padding:0; height:0; border-bottom:1px dashed var(--danger-line); position:relative; background:transparent; }
tr.threshold span {
  position:absolute; right:var(--sp-4); top:-10px; background:var(--canvas);
  padding:0 8px; font:700 11px var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--danger);
}

/* --- Chips: la clase de estado sólo declara --status --------------------- */
/* .chip y .ok tienen la misma especificidad. Si ambas pintaran color ganaría
   el orden del archivo. Resolviendo las dos a var(--status) el resultado es
   idéntico gane quien gane: el conflicto deja de existir. */
.ok        { --status:var(--ok);     --status-tint:var(--ok-tint);     --status-line:var(--ok-line); }
.attention { --status:var(--warn);   --status-tint:var(--warn-tint);   --status-line:var(--warn-line); }
.block     { --status:var(--danger); --status-tint:var(--danger-tint); --status-line:var(--danger-line); }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font:700 var(--fs-chip)/1.7 var(--sans); letter-spacing:.05em;
  padding:2px 8px; border-radius:20px; white-space:nowrap;
  color:var(--status,var(--ink-700));
  background:var(--status-tint,var(--sunken));
  border:1px solid var(--status-line,var(--rule-strong));
}
.chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }

/* --- Paneles ------------------------------------------------------------- */
.panel {
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:var(--sp-5) var(--sp-6); margin-bottom:var(--sp-4); box-shadow:var(--shadow-sm);
}
.panel.block { border-color:var(--danger-line); background:linear-gradient(var(--danger-tint),var(--surface) 120px); }
.panel.block h2 { color:var(--danger); }
.panel > p { margin:0 0 var(--sp-3); max-width:70ch; }
dl.facts, dl.compare { display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:10px var(--sp-5); margin:0; }
dl.facts dt, dl.compare dt { color:var(--ink-500); font-size:var(--fs-note); font-weight:500; }
dl.facts dd, dl.compare dd { margin:0; }

.verdicts {
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; margin-bottom:var(--sp-4); box-shadow:var(--shadow-sm);
}
.verdict { background:var(--surface); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:6px; }
.verdict .k { font-size:var(--fs-note); color:var(--ink-500); font-weight:500; }
.alert { color:var(--danger); font-weight:700; }

/* --- Formularios --------------------------------------------------------- */
label { display:block; font-size:var(--fs-note); color:var(--ink-500); font-weight:500; margin-bottom:5px; }
label.check { display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--ink-900); font-weight:400; }
/* Enumerar los type= dejaba fuera todo <input> sin atributo type — que es
   como están escritos los de condiciones, el buscador y las IPs — y también
   los type=date de los filtros. Doce campos salían sin estilo ninguno. */
input:where(:not([type=radio],[type=checkbox],[type=file],[type=hidden],[type=submit],[type=button])) {
  font:400 var(--fs-body) var(--sans); color:var(--ink-900); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  padding:8px 11px; width:100%; max-width:540px; transition:border-color .12s, box-shadow .12s;
}
input:where(:not([type=radio],[type=checkbox],[type=file],[type=hidden],[type=submit],[type=button])):focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); outline:none; }
input::placeholder { color:var(--ink-400); }
input.linkbox { font:400 var(--fs-ident) var(--mono); margin-top:6px; max-width:100%; background:var(--sunken); cursor:pointer; }
form.decide { padding:var(--sp-4) 0; border-top:1px solid var(--rule); }
form.decide:first-of-type { border-top:0; padding-top:0; }
form.decide > * + * { margin-top:10px; }
form.inline { display:inline-flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

button, .btn {
  display:inline-flex; align-items:center; gap:6px; font:600 var(--fs-body) var(--sans);
  cursor:pointer; background:var(--surface); color:var(--ink-700);
  border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  padding:7px 13px; text-decoration:none; transition:background .12s, border-color .12s;
}
button:hover, .btn:hover { background:var(--sunken); border-color:var(--ink-400); text-decoration:none; }
/* .btn.primary también: los colores estaban acotados a button.primary, así
   que un <a> que hace de acción principal salía gris. Mismo caso que en
   registro.css. */
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
button.primary:hover, .btn.primary:hover { background:var(--accent-deep); border-color:var(--accent-deep); }
button.danger { color:var(--danger); border-color:var(--danger-line); background:var(--surface); }
button.danger:hover { background:var(--danger-tint); border-color:var(--danger-mid); }
/* Aprobar sobre una verificación fallida no comparte apariencia con aprobar
   normal: sin acento, con subrayado de peligro y un nombre que dice qué hace. */
button.guarded { color:var(--ink-700); border-color:var(--rule-strong); box-shadow:inset 0 -2px 0 var(--danger-mid); }
button.guarded:hover { background:var(--danger-tint); }

/* --- Avisos -------------------------------------------------------------- */
.flash {
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r); margin-bottom:var(--sp-4);
  border:1px solid var(--rule-strong); background:var(--surface);
  font-size:var(--fs-body); box-shadow:var(--shadow-sm);
}
.flash.ok  { border-color:var(--ok-line);     background:var(--ok-tint);     color:var(--ok); }
.flash.err { border-color:var(--danger-line); background:var(--danger-tint); color:var(--danger); }
.flash ul { margin:var(--sp-2) 0 0; padding-left:18px; }
.flash code { font:400 var(--fs-ident) var(--mono); word-break:break-all; }

/* El mark de Datared lleva sus propios colores de marca (disco #0B1B3D,
   punto #2B5BD7): recolorearlo con el acento lo rompería. El de MPTech es de
   trazo y sí hereda currentColor. */
[data-brand="datared"] .mark-svg { color:inherit; }

/* --- Login --------------------------------------------------------------- */
/*
 | Fondo claro, no el degradado oscuro de antes: esta pantalla es lo primero
 | que ve quien viene de mptech.com.do o datared.io, y un checkout oscuro
 | parece de otra empresa. El tinte sale del acento de cada marca.
 */
body.login {
  min-height:100vh; display:grid; place-items:center; padding:var(--sp-6);
  background:
    radial-gradient(900px 520px at 50% -10%, var(--accent-tint) 0%, transparent 70%),
    var(--canvas);
}
body.login .box { width:100%; max-width:380px; }

body.login .mark {
  font:700 26px/1.2 var(--serif); color:var(--ink-900); letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
body.login .mark .mark-svg { width:30px; height:30px; flex:none; color:var(--accent); }
body.login .sub {
  color:var(--ink-500); font-size:var(--fs-note); margin:6px 0 var(--sp-5) 13px;
}

body.login form {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); padding:var(--sp-6);
  box-shadow:var(--shadow);
  /* Rhythm lives here rather than on the inputs: every field, the error and
     the button sit in one flow, so nothing ends up flush against the label
     of the control below it. */
  display:flex; flex-direction:column; gap:var(--sp-4);
}
body.login .field { display:flex; flex-direction:column; gap:6px; }
body.login label { margin:0; font-weight:600; color:var(--ink-700); }
body.login input { max-width:none; padding:10px 12px; }
body.login .flash { margin:0; }
body.login button { width:100%; justify-content:center; padding:11px; font-size:var(--fs-body); }

body.login .foot {
  color:#647A85; font-size:var(--fs-ident); line-height:1.7;
  margin:var(--sp-4) 0 0 13px; max-width:34ch;
}

/* --- Página pública de pago --------------------------------------------- */
form.pay .payee, form.pay .amount { display:flex; flex-direction:column; gap:2px; }
form.pay .payee b { font:600 17px var(--sans); }
/* Sólo la regla de abajo: la de arriba separaba el monto de un bloque
   "Pagas a" que ya no existe, y quedaba flotando en el borde de la tarjeta. */
form.pay .amount { padding:0 0 var(--sp-4); border-bottom:1px solid var(--rule); }
form.pay .amount b { font:700 34px/1.1 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
form.pay button[disabled] { opacity:.5; cursor:not-allowed; }
body.login .legal { color:var(--ink-500); font-size:var(--fs-ident); line-height:1.65; margin:var(--sp-4) 0 0 13px; max-width:40ch; }
select { font:400 var(--fs-body) var(--sans); color:var(--ink-900); background:var(--surface);
         border:1px solid var(--rule-strong); border-radius:var(--r-sm); padding:8px 11px; width:100%; }
select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); outline:none; }

.card-el { border:1px solid var(--rule-strong); border-radius:var(--r-sm); padding:11px 12px;
            background:var(--surface); width:100%; min-width:0; }

/*
 | Mes / Año / CVV.
 |
 | Un elemento de grid vale por defecto `min-width:auto`, o sea el ancho
 | intrínseco de su contenido — y un <input> lo calcula desde su atributo
 | `size`, que ronda las 20 letras. Tres de esos no caben en 380px, así que la
 | fila se salía de la tarjeta por la derecha en vez de encogerse.
 |
 | `min-width:0` en los hijos es lo que les permite achicarse. El CVV además
 | necesita menos espacio que los otros dos.
 */
.card-row { display:grid; gap:var(--sp-3); grid-template-columns:1fr 1fr 0.8fr; }
.card-row > .field { min-width:0; }
.card-row label { white-space:nowrap; }
.card-el.StripeElement--focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
form.pay button[disabled] { opacity:.6; cursor:progress; }


/* --- Registro de comercio: asistente por pasos --------------------------- */
body.wizard { background:var(--canvas); }
body.wizard .wrap { max-width:760px; margin:0 auto; padding:var(--sp-6) var(--sp-4) 80px; }

.wz-head { display:flex; justify-content:space-between; align-items:baseline;
           gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.wz-head .mark { display:flex; align-items:center; gap:9px; font:700 20px var(--serif); }
.wz-head .mark .mark-svg { width:24px; height:24px; color:var(--accent); flex:none; }

/* Stepper: shows where you are and how much is left, which is most of what
   makes a long form tolerable. */
.stepper { display:flex; gap:0; margin-bottom:var(--sp-5); counter-reset:step;
           background:var(--surface); border:1px solid var(--rule);
           border-radius:var(--r); padding:var(--sp-2); box-shadow:var(--shadow-sm); }
.stepper li { list-style:none; flex:1; display:flex; align-items:center; gap:8px;
              padding:8px 10px; font-size:var(--fs-note); color:var(--ink-400);
              border-radius:var(--r-sm); min-width:0; }
.stepper li b { flex:none; width:22px; height:22px; border-radius:50%;
                display:grid; place-items:center; font:700 11px var(--sans);
                background:var(--sunken); color:var(--ink-500); border:1px solid var(--rule-strong); }
.stepper li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stepper li.on { color:var(--ink-900); font-weight:600; background:var(--accent-tint); }
.stepper li.on b { background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper li.done { color:var(--ink-700); }
.stepper li.done b { background:var(--ok); border-color:var(--ok); color:#fff; font-size:12px; }
@media (max-width:720px) { .stepper li span { display:none; } .stepper li { flex:0 0 auto; justify-content:center; } }

.step { display:none; }
.step.on { display:block; }
.step h2 { font:700 17px/1.3 var(--sans); text-transform:none; letter-spacing:-.01em;
           color:var(--ink-900); margin:0 0 4px; }
.step .lead { color:var(--ink-500); font-size:var(--fs-note); margin:0 0 var(--sp-5); max-width:60ch; }

/* Controls */
body.wizard .field { margin-bottom:var(--sp-4); }
body.wizard label { font-weight:600; color:var(--ink-700); margin-bottom:6px; }
body.wizard label .opt { font-weight:400; color:var(--ink-400); }
body.wizard input[type=text], body.wizard input[type=email],
body.wizard input[type=number], body.wizard select { max-width:none; padding:10px 12px; }
body.wizard .hint { display:block; margin-top:5px; font-size:var(--fs-ident); color:var(--ink-500); }
body.wizard input:user-invalid, body.wizard select:user-invalid { border-color:var(--danger-line); }
body.wizard input:user-invalid:focus { box-shadow:0 0 0 3px rgba(203,42,58,.14); }

.grid2 { display:grid; gap:0 var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid3 { display:grid; gap:0 var(--sp-3); grid-template-columns:2fr 2fr 1fr; }
.span2 { grid-column:1/-1; }

/* Choice cards read better than a bare radio pair and give a real hit area. */
.choices { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.choice { display:flex; gap:10px; align-items:flex-start; padding:var(--sp-3) var(--sp-4);
          border:1px solid var(--rule-strong); border-radius:var(--r); cursor:pointer;
          background:var(--surface); font-weight:400; margin:0; transition:border-color .12s, background .12s; }
.choice:hover { border-color:var(--ink-400); }
.choice input { margin-top:2px; flex:none; accent-color:var(--accent); }
.choice:has(input:checked) { border-color:var(--accent); background:var(--accent-tint); }
.choice b { display:block; font-weight:600; color:var(--ink-900); }
.choice small { color:var(--ink-500); }

/* Beneficial owners repeat, so each block needs its own edge. */
.benef { padding:var(--sp-3) var(--sp-4); border:1px solid var(--rule);
         border-radius:var(--r); background:var(--surface); margin-bottom:var(--sp-3); }
.benef .field { margin-bottom:0; }

/* Documents: a native file input is unreadable, so the label is the control. */
.docs { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.doc { border:1px solid var(--rule-strong); border-radius:var(--r); background:var(--surface);
       padding:var(--sp-3) var(--sp-4); margin:0; cursor:pointer; display:block; transition:border-color .12s; }
.doc:hover { border-color:var(--accent); }
.doc input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.doc .name { display:block; font-weight:600; color:var(--ink-900); font-size:var(--fs-body); }
.doc .hint { margin-top:2px; }
.doc .state { display:inline-flex; align-items:center; gap:6px; margin-top:8px;
              font:600 var(--fs-ident) var(--sans); color:var(--ink-400); }
.doc .state::before { content:"+"; width:16px; height:16px; border-radius:50%;
                      display:grid; place-items:center; font-size:13px;
                      background:var(--sunken); color:var(--ink-500); }
.doc.filled { border-color:var(--ok-line); background:var(--ok-tint); }
.doc.filled .state { color:var(--ok); }
.doc.filled .state::before { content:"✓"; background:var(--ok); color:#fff; }

/* Consent: two separate acts, so two separate blocks. */
label.consent { align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4);
                border:1px solid var(--rule-strong); border-radius:var(--r);
                margin-bottom:var(--sp-3); background:var(--surface); line-height:1.65;
                font-weight:400; cursor:pointer; }
label.consent:has(input:checked) { border-color:var(--accent); background:var(--accent-tint); }
label.consent input { margin-top:3px; flex:none; accent-color:var(--accent); }
label.consent span { font-size:var(--fs-note); color:var(--ink-700); }
label.consent b { color:var(--ink-900); }

#firma { border:1px dashed var(--rule-strong); border-radius:var(--r);
         background:var(--surface); touch-action:none; width:100%; max-width:100%;
         cursor:crosshair; display:block; }
#firma.signed { border-style:solid; border-color:var(--ok-line); background:var(--ok-tint); }

/* Navigation pinned to the bottom of the step, not floating away. */
.wz-nav { display:flex; justify-content:space-between; gap:var(--sp-3);
          margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--rule); }
.wz-nav .right { display:flex; gap:var(--sp-2); margin-left:auto; }
.wz-error { display:none; }
.wz-error.on { display:block; }

/* Review step: what they are about to submit, in one place. */
.review dl { display:grid; grid-template-columns:minmax(150px,auto) 1fr;
             gap:8px var(--sp-4); margin:0; }
.review dt { color:var(--ink-500); font-size:var(--fs-note); font-weight:500; }
.review dd { margin:0; font-weight:600; }


/* --- Señales de riesgo de Didit ------------------------------------------
   Un bloque rojo uniforme hacía que una IP compartida pesara igual que una
   cara duplicada, y un revisor que ve todo en rojo deja de leerlo. El color
   lo pone la severidad de cada señal, no el bloque. Van plegadas: cinco
   explicaciones abiertas empujan el expediente fuera de pantalla. */
.risk-flags { border:1px solid var(--rule); border-radius:var(--r);
              background:var(--surface); padding:var(--sp-4); margin:var(--sp-4) 0; }
.risk-flags.to-review { border-color:var(--danger-line); background:var(--danger-tint); }
.risk-flags h3 { margin:0; font:600 var(--fs-title) var(--sans); }
.risk-flags.to-review h3 { color:var(--danger); }
.risk-flags .lead { margin:var(--sp-2) 0 0; font-size:var(--fs-note); color:var(--ink-500); }
.risk-flags .flags { margin-top:var(--sp-3); display:grid; gap:var(--sp-2); }

.risk-flags .flag { border:1px solid var(--rule); border-left-width:3px;
                    border-radius:var(--r-sm); background:var(--surface); }
.risk-flags .flag.review { border-left-color:var(--danger); }
.risk-flags .flag.info   { border-left-color:var(--warn-line); }

.risk-flags summary { display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap;
                      padding:var(--sp-2) var(--sp-3); cursor:pointer; list-style:none;
                      border-radius:var(--r-sm); }
.risk-flags summary::-webkit-details-marker { display:none; }
.risk-flags summary:hover { background:var(--hover); }
.risk-flags summary::after { content:'▾'; color:var(--ink-400);
                             font-size:12px; transition:transform .15s; }

/* Sin esto nadie abre nada: una fila plegada sin señal parece una fila muerta. */
.risk-flags summary .i { flex:none; width:17px; height:17px; border-radius:50%;
                         display:grid; place-items:center; align-self:center;
                         border:1.5px solid currentColor; color:var(--ink-400);
                         font:700 11px/1 var(--serif); font-style:italic; }
.risk-flags .flag.review summary .i { color:var(--danger); }
.risk-flags .flag.info   summary .i { color:var(--warn); }
.risk-flags summary .cue { margin-left:auto; font:500 var(--fs-note) var(--sans);
                           color:var(--ink-400); }
.risk-flags summary:hover .cue { color:var(--ink-700); }
.risk-flags .flag[open] summary .cue { visibility:hidden; }
.risk-flags .flag[open] > summary::after { transform:rotate(180deg); }
.risk-flags summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.risk-flags summary .t { font:600 var(--fs-body) var(--sans); color:var(--ink-900); }
.risk-flags .flag.review summary .t { color:var(--danger); }
.risk-flags summary .ev { font:500 var(--fs-note) var(--sans); color:var(--ink-500); }
.risk-flags summary { gap:var(--sp-2); }

.risk-flags .flag p { margin:0 var(--sp-3) var(--sp-2); font-size:var(--fs-note);
                      line-height:1.55; color:var(--ink-500); max-width:72ch; }
.risk-flags .flag code { display:inline-block; margin:0 var(--sp-3) var(--sp-3);
                         font:400 var(--fs-ident) var(--mono); color:var(--ink-400); }


/* --- El comercio se nombra en el estado de cuenta ------------------------- */
.descriptor { border:1px solid var(--rule); border-radius:var(--r); background:var(--surface);
              padding:var(--sp-4); max-width:64ch; }
.descriptor p { margin:0 0 var(--sp-3); font-size:var(--fs-body); color:var(--ink-700); }
.descriptor .sample { margin:0 0 var(--sp-4); }
.descriptor .sample code { display:inline-block; font:500 var(--fs-title) var(--mono);
                           letter-spacing:.02em; color:var(--ink-900);
                           background:var(--sunken); border:1px solid var(--rule);
                           border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); }
.descriptor .quiet { font-size:var(--fs-note); line-height:1.6; margin:0; }
.descriptor form { display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; }
.descriptor label { font-weight:600; font-size:var(--fs-note); }
.descriptor input { font:500 var(--fs-body) var(--mono); text-transform:uppercase;
                    letter-spacing:.02em; max-width:26ch; }
.descriptor .hint { font-size:var(--fs-note); color:var(--ink-500); line-height:1.55; max-width:56ch; }
.descriptor button { margin-top:var(--sp-1); }


/* --- Billeteras en el checkout ------------------------------------------- */
#wallets { margin-bottom:var(--sp-4); }
#express { min-height:44px; }
#wallets .or { display:flex; align-items:center; gap:var(--sp-3);
               margin:var(--sp-4) 0 0; color:var(--ink-400); font-size:var(--fs-note); }
#wallets .or::before, #wallets .or::after { content:""; flex:1; height:1px; background:var(--rule); }


/* --- QR de un enlace de cobro -------------------------------------------- */
.qr-pop p span { font-weight:400; font-size:var(--fs-note); color:var(--ink-500); }


/* --- Quién cobra, en el checkout ----------------------------------------
   El comercio es lo primero y lo más grande; nosotros somos el procesador y
   vamos en letra chica debajo. No es estética: quien paga tiene que reconocer
   a quién le compró, y el que no lo ubica abre un contracargo. */
.payee-head { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
               margin-bottom:var(--sp-4); }
.payee-head > div { min-width:0; flex:1 1 12rem; }

/* A wordmark gets the line to itself. Beside a name in a 380px card it wraps
   and clips; stacked, it reads as the sign above the door. */
.payee-head.wide { flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
.payee-head.wide .payee-logo { max-width:100%; height:auto; max-height:56px; }
.payee-head h1 { overflow-wrap:anywhere; }
.payee-head h1 { margin:0; font:600 22px/1.2 var(--serif); color:var(--ink-900);
                 letter-spacing:-.01em; }
.payee-head .processed { display:flex; align-items:center; gap:5px; margin-top:3px;
                         font-size:var(--fs-note); color:var(--ink-500); }
.payee-head .processed .mark-svg { width:14px; height:14px; color:var(--accent); }

/*
 | Logos arrive in every shape. Height is what is fixed, not width: a square
 | mark lands at 48x48, a horizontal wordmark keeps its proportions up to
 | 180px wide, and a tall one is bounded by the same height instead of
 | stretching the header.
 |
 | A fixed square box would have shrunk a 400x100 wordmark to 48px wide —
 | legible as a shape, unreadable as a name — which is the opposite of the
 | point.
 */
.payee-logo { flex:none; height:48px; width:auto; max-width:180px;
              object-fit:contain; object-position:left center; }

/* A photographic or white-background logo needs its own edge to sit on; a
   transparent PNG or SVG should not gain a visible plate. */
.payee-logo[src$=".png"], .payee-logo[src$=".svg"] { background:transparent; }
.payee-logo[src$=".jpg"], .payee-logo[src$=".jpeg"], .payee-logo[src$=".webp"] {
  border-radius:var(--r); border:1px solid var(--rule); background:var(--surface);
}


/* --- Filtros de transacciones -------------------------------------------- */
.filtros { display:grid; gap:var(--sp-3); align-items:end; margin:var(--sp-4) 0;
           grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.filtros .field { min-width:0; margin:0; }
.filtros .field.wide { grid-column:span 2; }
.filtros label { display:block; font:600 var(--fs-note) var(--sans); color:var(--ink-500);
                 margin-bottom:4px; }
.filtros .btn { margin-left:var(--sp-2); }

.flash.warn-flash { border-color:var(--warn-line); background:var(--warn-tint); color:var(--warn); }
.flash.warn-flash .quiet { color:var(--ink-700); }


/* La fila recién invitada, hasta que se recargue. El destello dice cuál es sin
   dejar un color permanente que después nadie sabe qué significa. */
tr.recien-invitado > td { background:var(--ok-tint); }
tr.recien-invitado > td:first-child { box-shadow:inset 3px 0 0 var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  tr.recien-invitado > td { animation:destello 1.6s ease-out 1; }
  @keyframes destello { from { background:var(--accent-tint); } to { background:var(--ok-tint); } }
}

/* --- Pestañas del expediente --------------------------------------------- */
/* 584 líneas en una sola columna: el analista bajaba media pantalla para
   llegar a Condiciones. Cada grupo es una pestaña; el nombre y los veredictos
   se quedan fuera, porque son el contexto de todas. */
.tabs {
  display:flex; flex-wrap:wrap; gap:3px;
  margin:var(--sp-5) 0 var(--sp-4); padding:4px;
  background:var(--sunken); border:1px solid var(--rule);
  border-radius:10px;
}
.tabs button {
  appearance:none; background:none; border:1px solid transparent;
  border-radius:var(--r-sm); padding:9px 16px; cursor:pointer;
  font:600 var(--fs-note) var(--sans); color:var(--ink-500);
  white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.tabs button:hover { color:var(--ink-900); background:var(--surface); }
.tabs button[aria-selected="true"] {
  background:var(--surface); color:var(--accent);
  border-color:var(--rule-strong); box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* Un punto avisa de algo que atender en una pestaña que no está abierta. */
.tabs button .pip {
  display:inline-block; width:6px; height:6px; margin-left:7px;
  border-radius:50%; background:var(--danger); vertical-align:middle;
}
.tab-panel[hidden] { display:none; }
.tab-panel > section.panel:first-child,
.tab-panel > .flash:first-child { margin-top:0; }

@media (max-width:640px) {
  .tabs { overflow-x:auto; flex-wrap:nowrap; }
  .tabs button { padding:9px 13px; }
}

/* --- Empezar un comercio desde el panel ----------------------------------- */
.nuevo-comercio {
  margin:var(--sp-4) 0 var(--sp-5); padding:var(--sp-4) var(--sp-5);
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}
.nuevo-comercio > summary {
  list-style:none; cursor:pointer; font:600 var(--fs-body) var(--sans);
  color:var(--accent); display:flex; align-items:center; gap:8px;
}
.nuevo-comercio > summary::-webkit-details-marker { display:none; }
.nuevo-comercio > summary::before {
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--accent-tint);
  color:var(--accent); font-size:13px; line-height:1;
}
.nuevo-comercio[open] > summary::before { content:"−"; }
.nuevo-comercio .hint { display:block; margin:0 0 var(--sp-3); }
/* .card-row pone white-space:nowrap en los label para las tres columnas del
   checkout, donde son de una palabra. Aquí son frases y no cabían: cada
   columna se quedaba con el ancho de su etiqueta y la página se iba de largo. */
.nuevo-comercio .card-row label { white-space:normal; }
.nuevo-comercio .card-row { gap:var(--sp-3) var(--sp-4); }

/* La acción de la cabecera se va al borde sin cambiar .page-head para todos. */
.page-head > .btn { margin-left:auto; align-self:center; }
.btn > [aria-hidden] { font-size:15px; line-height:1; }

/* --- (i) explicativa, en modal ------------------------------------------- */
.ayuda-i {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; padding:0; margin-left:6px; vertical-align:middle;
  border:1px solid var(--rule-strong); border-radius:50%;
  background:var(--surface); color:var(--ink-500);
  font:600 10px/1 var(--sans); cursor:pointer;
  transition:color .12s, border-color .12s;
}
.ayuda-i:hover { color:var(--accent); border-color:var(--accent); }

.ayuda-modal {
  width:min(440px, calc(100vw - 2rem)); padding:var(--sp-5);
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface); color:var(--ink-900); box-shadow:var(--shadow-lg, 0 12px 40px rgba(16,24,40,.18));
}
.ayuda-modal::backdrop { background:rgba(16,24,40,.42); }
.ayuda-modal h3 {
  margin:0 0 var(--sp-3); font:700 var(--fs-body) var(--sans);
  color:var(--ink-900); text-transform:none; letter-spacing:0;
}
.ayuda-modal p { margin:0 0 var(--sp-4); font-size:var(--fs-note); line-height:1.6; color:var(--ink-700); }
.ayuda-modal form { margin:0; display:flex; justify-content:flex-end; }

/* --- Paginación ----------------------------------------------------------- */
.paginacion {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-4);
}
.paginacion .cuenta { color:var(--ink-500); font-size:var(--fs-note); font-variant-numeric:tabular-nums; }
.paginacion .botones { display:flex; align-items:center; gap:6px; }
.paginacion .pag {
  display:inline-flex; align-items:center; padding:6px 12px;
  border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-700); text-decoration:none;
  font:600 var(--fs-note) var(--sans); transition:background .12s, border-color .12s;
}
.paginacion a.pag:hover { background:var(--sunken); border-color:var(--ink-400); }
.paginacion .pag.actual { border-color:transparent; background:none; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.paginacion .pag.disabled { opacity:.45; }

/* --- QR de cobro ---------------------------------------------------------- */
/* El código va cuadrado y con el patrón de posición exacto — se comprobó
   decodificando lo generado. Lo que se personaliza es el marco. */
.qr-marco {
  display:inline-block; padding:var(--sp-4); background:#fff;
  border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.qr-marco svg { display:block; }

.qr-modal {
  width:min(340px, calc(100vw - 2rem)); padding:var(--sp-5);
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface); color:var(--ink-900); text-align:center;
  box-shadow:0 12px 40px rgba(16,24,40,.18);
}
.qr-modal::backdrop { background:rgba(16,24,40,.5); }
.qr-modal .qr-monto { margin:var(--sp-4) 0 0; font:700 var(--fs-title) var(--sans); color:var(--ink-900); }
.qr-modal .qr-desc  { margin:2px 0 var(--sp-4); font-size:var(--fs-note); color:var(--ink-500); }
.qr-modal form { margin:0; display:flex; justify-content:center; }

/* En el checkout: el comercio gira la pantalla y el cliente escanea. */
.qr-pagar {
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid var(--rule); text-align:center;
}
.qr-pagar h2 {
  margin:0 0 var(--sp-2); font:600 var(--fs-body) var(--sans);
  color:var(--ink-900); text-transform:none; letter-spacing:0;
}
.qr-pagar p { margin:0 0 var(--sp-4); font-size:var(--fs-note); color:var(--ink-500); }
/* Ya estás en el teléfono: escanear la página en la que estás no lleva a
   ningún sitio, así que en pantalla estrecha no se muestra. */
@media (max-width:640px) { .qr-pagar { display:none; } }