/* Estilos del sistema, primero para el celular. Paleta tomada de mockups/app.css.
   Sin fuentes externas, estilos en línea ni scripts en línea: la CSP es default-src 'self' (R16).
   FR-023: se usa a 360 px de ancho sin desplazamiento horizontal; controles de al menos 44 px. */
:root {
  --fondo: #F2F4F8; --tarjeta: #FFFFFF; --tinta: #0E1626; --mut: #69748A; --linea: #E3E7EF;
  --primario: #1E5FE0; --primario-suave: #E6EEFD; --sobre-primario: #FFFFFF;
  --verde: #12805C; --verde-suave: #E2F4EB; --rojo: #C4332B; --rojo-suave: #FCE7E5;
  --ambar: #A86200; --ambar-suave: #FFF2DA; --ambar-tinta: #6B3F00; --violeta: #6646D6;
  --gris-suave: #ECEFF4; --info-tinta: #173F94; --sin-efecto: #A3ABBA;
  /* Tintas para texto pequeño sobre fondos suaves: contraste de al menos 4.5:1 (WCAG AA). */
  --verde-tinta: #0E6B4D; --gris-tinta: #535D70;
  --sombra: 0 1px 2px rgba(14, 22, 38, .07), 0 2px 8px rgba(14, 22, 38, .04);
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.45 var(--fuente); overflow-wrap: anywhere;
}
.pagina {
  width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 16px 48px;
  display: flex; flex-direction: column; gap: 16px;
}
h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
.mut { color: var(--mut); }
.tarjeta {
  background: var(--tarjeta); border-radius: 16px; padding: 20px 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px;
}
.formulario { display: flex; flex-direction: column; gap: 10px; }
label { font-weight: 700; font-size: .95rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="tel"],
input[type="search"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: inherit;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .boton:focus-visible { outline: 3px solid var(--primario-suave); outline-offset: 1px; border-color: var(--primario); }
.boton {
  min-height: 48px; padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--primario); color: var(--sobre-primario); font: inherit; font-weight: 700;
}
.boton.secundario { background: var(--primario-suave); color: var(--primario); }
.aviso { padding: 12px 14px; border-radius: 12px; font-size: .95rem; }
.aviso.error { background: var(--rojo-suave); color: var(--rojo); }
.aviso.ok { background: var(--verde-suave); color: var(--verde); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.ayuda { font-size: .875rem; color: var(--mut); }
.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.casilla input { width: 22px; height: 22px; flex: none; }
.pasos { font-size: .875rem; font-weight: 700; color: var(--primario); }
.qr { display: flex; justify-content: center; }
.qr svg { width: 100%; max-width: 240px; height: auto; }
.clave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; letter-spacing: .04em; }
.codigos { margin: 0; padding-left: 1.6em; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; }
.num { font-variant-numeric: tabular-nums; }
.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.enlace { color: var(--primario); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linea); padding-top: 12px; }
.lista li:first-child { border-top: 0; padding-top: 0; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--primario-suave); color: var(--primario); font-size: .8rem; font-weight: 700; }
.etiqueta.error { background: var(--rojo-suave); color: var(--rojo); }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.grupo legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.orden { display: flex; gap: 8px; flex: none; }
.orden .boton { min-width: 48px; padding: 0 12px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cifras { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cifras div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.cifras dt { color: var(--mut); }
.cifras dd { margin: 0; font-weight: 700; text-align: right; margin-left: auto; }
.cifras .total { border-top: 1px solid var(--linea); padding-top: 6px; }

/* ---- Caja (004, pase UX/UI; «Cajas en la UX v1», extensión de la Propuesta UX v1) ---------------
   Piezas de Caja con la paleta de la v1: avisos de cuatro tonos, cifra principal, acciones en
   cuadrícula, «Más acciones» plegable, historia con cortes de cierre y selector de caja con saldo.
   Solo las pantallas de Caja usan la columna ancha; el resto de la app no cambia. */
.pagina.ancha { max-width: 1040px; }
.nw { white-space: nowrap; }
.aviso.advertencia { background: var(--ambar-suave); color: var(--ambar-tinta); }
.aviso.info { background: var(--primario-suave); color: var(--info-tinta); }
.aviso.neutro { background: var(--gris-suave); color: var(--tinta); }
.etiqueta.neutra { background: var(--gris-suave); color: var(--gris-tinta); }
.etiqueta.advertencia { background: var(--ambar-suave); color: var(--ambar-tinta); }
.etiqueta.bien { background: var(--verde-suave); color: var(--verde-tinta); }
.antetitulo { font-size: .85rem; font-weight: 600; color: var(--mut); }
.encabezado-caja { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cifra { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.cifra.chica { font-size: 1.15rem; }
.cifra.larga { font-size: 1.45rem; } /* USDT: hasta 8 decimales */
.tarjeta.destacada { background: var(--primario-suave); box-shadow: none; }
.tarjeta.plana { background: transparent; box-shadow: none; border: 1px solid var(--linea); }
.rotulo { font-size: .85rem; font-weight: 700; color: var(--mut); }
.rejilla-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.accion {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px;
  border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra);
  color: var(--tinta); font-weight: 700; text-decoration: none;
}
.accion:focus-visible, .mas-acciones summary:focus-visible, .menu-acciones a:focus-visible,
.corte:focus-visible, .opcion:focus-within, .pagina.ancha a:focus-visible {
  outline: 3px solid var(--primario); outline-offset: 2px; /* visible sobre blanco y sobre los fondos suaves */
}
.accion .icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); flex: none; }
.accion.ancha { grid-column: 1 / -1; }
.accion.moneda { background: var(--primario-suave); box-shadow: none; color: var(--primario); }
.accion.moneda .icono { background: var(--tarjeta); }
.accion small { display: block; font-size: .8rem; font-weight: 600; color: var(--mut); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nota { font-size: .875rem; color: var(--mut); display: flex; gap: 8px; align-items: flex-start; }
.mas-acciones { border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); }
.mas-acciones summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.mas-acciones summary::-webkit-details-marker { display: none; }
.mas-acciones summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); }
.mas-acciones[open] summary::after { transform: rotate(-135deg); }
.menu-acciones { list-style: none; margin: 0; padding: 0 14px 6px; display: flex; flex-direction: column; }
.menu-acciones li { border-top: 1px solid var(--linea); }
.menu-acciones a, .menu-acciones .apagada { min-height: 48px; display: flex; flex-direction: column; justify-content: center; padding: 6px 0; color: var(--tinta); font-weight: 600; text-decoration: none; }
.menu-acciones .apagada { color: var(--mut); }
.menu-acciones small { font-size: .8rem; font-weight: 600; color: var(--mut); }
.historia { display: flex; flex-direction: column; container-type: inline-size; }
.historia .dia { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 10px 0 2px; }
.fila { border-top: 1px solid var(--linea); }
.historia .dia + .fila, .historia > .fila:first-child { border-top: 0; }
.fila-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; }
details.fila > summary { list-style: none; cursor: pointer; min-height: 44px; }
details.fila > summary::-webkit-details-marker { display: none; }
details.fila > summary:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.fila .titulo { font-weight: 700; min-width: 0; }
.fila .detalle { grid-column: 1; color: var(--mut); font-size: .875rem; }
.fila .monto { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fila .monto.entra { color: var(--verde); }
.fila .saldo { grid-column: 2; text-align: right; color: var(--mut); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila .corregir { padding: 0 0 10px; }
.fila.revertida .titulo, .fila.revertida .monto { color: var(--mut); }
.fila.revertida .monto { text-decoration: line-through; }
.corte { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .85rem; font-weight: 800; color: var(--violeta); text-decoration: none; }
.corte::before, .corte::after { content: ""; flex: 1; border-top: 1.5px dashed var(--violeta); }
@container (min-width: 600px) {
  .fila-c { grid-template-columns: minmax(0, 1fr) auto 150px; align-items: baseline; }
  .fila .saldo { grid-column: 3; grid-row: 1; font-size: .875rem; }
}
.diferencia { border-radius: 14px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; background: var(--gris-suave); }
.diferencia.cuadra { background: var(--verde-suave); color: var(--verde-tinta); }
.diferencia.descuadre { background: var(--ambar-suave); color: var(--ambar-tinta); }
.opciones-caja { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.opciones-caja legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.opcion { border: 1.5px solid var(--linea); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--tarjeta); min-height: 52px; font-weight: 700; cursor: pointer; }
.opcion input { width: 22px; height: 22px; margin: 0; }
.opcion:has(input:checked) { border-color: var(--primario); background: #F7FAFF; }
.opcion .saldo { font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.salio-entro { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.salio-entro .lado:last-child { text-align: right; }
.salio-entro b { display: block; }
.camino { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: paso; }
.camino li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; background: var(--tarjeta); }
.camino li::before { counter-increment: paso; content: counter(paso); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--gris-suave); color: var(--mut); }
.camino li.actual { border-color: var(--primario); }
.camino li.actual::before { background: var(--primario); color: var(--sobre-primario); }
.camino li.espera { color: var(--mut); }
.columnas-caja { display: flex; flex-direction: column; gap: 16px; }
.pagina.ancha > .caja-detalle { container-type: inline-size; }
@container (min-width: 860px) {
  .columnas-caja { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
}
.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.pila { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pila.chica { gap: 10px; }

/* 008 · Comprobantes: la imagen revelada nunca desborda el ancho del celular. */
.comprobante-imagen {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--borde, #d0d5dd);
}
.comprobantes { margin-top: 8px; }
/* El selector de archivo del comprobante también mide al menos 44 px en el celular (G3). */
input[type="file"] {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--borde, #d0d5dd); border-radius: 12px; background: #fff;
}
input[type="file"]::file-selector-button {
  min-height: 36px; margin-right: 10px; padding: 6px 12px; font: inherit; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer;
}

/* 015 · Con la barra inferior fija (shell, ADR 0010), el último botón de cada pantalla queda por
   encima de ella. Es el único cambio de la 015 en este archivo (FR-027). */
.espacio-barra { height: calc(72px + env(safe-area-inset-bottom, 0px)); }