/* pwa-samuel · registro NO CLÍNICO · Paleta 2.22 + swap (consume tokens.css vendorizado).
   Chrome de producto = TEAL/petróleo (roles directos, simetría teal↔azul). Fondo = --lienzo-general (Milk #F9F7F0).
   Superficie = piedra.tarjeta + elev-1 (regla 18-bis). Esquina RECTA. Sin emoji.
   cargo/abono = capa ESTADO (alerta/éxito), TRANSVERSAL a los dos registros, por polaridad financiera del dato.
   Terracota (acento editorial) y oro (dato) disponibles del canon; no forzados aquí. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  background: var(--lienzo-general);
  color: var(--texto-principal);
  min-height: 100vh;
}

/* App-shell 12-ter: cromo fijo + una región de scroll, contención a --web-max */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--espacio-md) var(--espacio-lg);
  border-bottom: var(--trazo-pelo) solid var(--web-border);
  position: sticky; top: 0; z-index: 5;
  background: var(--lienzo-general);
}
.brand { display: flex; align-items: center; gap: var(--espacio-sm); font-family: var(--font-titulo); font-weight: 600; color: var(--teal-texto); }
.brand svg { width: 26px; height: 26px; fill: var(--teal-texto); }

.container { max-width: var(--web-max); margin: 0 auto; padding: var(--espacio-xl) var(--espacio-lg) var(--espacio-h4); }
/* el contenido no necesita todo el web-max: columna legible */
.container > * { max-width: var(--medida-17); margin-left: auto; margin-right: auto; }

/* Tarjeta: piedra + elevación (18-bis) — salto ≥1.22 contra el lienzo */
.card {
  background: var(--piedra-tarjeta);
  border: var(--trazo-pelo) solid var(--piedra-filete-tarjeta);
  border-radius: var(--radio-recto);
  box-shadow: var(--elev-1);
  padding: var(--espacio-xl); margin-bottom: var(--espacio-lg);
}
.card.narrow { max-width: var(--medida-14); }

h1 { font-family: var(--font-titulo); font-weight: 600; font-size: 1.5rem; margin: 0 0 var(--espacio-xs); color: var(--teal-texto); }
h2 { font-family: var(--font-titulo); font-weight: 600; font-size: 1.2rem; margin: 0; color: var(--teal-texto); }
.muted { color: var(--texto-secundario); }
.small { font-size: .85rem; color: var(--texto-terciario); }

/* Botones — cromo teal, esquina recta, táctil 44px */
button { cursor: pointer; font-size: 1rem; font-family: var(--font-cuerpo); border: var(--trazo-pelo) solid transparent; border-radius: var(--radio-recto); }
button.primary {
  margin-top: var(--espacio-lg); width: 100%; min-height: 44px; padding: 0 var(--espacio-lg); font-weight: 600;
  background: var(--teal-texto); color: var(--texto-inverso);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-sm);
}
button.primary:hover { background: var(--teal-hover); }
button.primary:active { background: var(--teal-pressed); }
button.ghost {
  min-height: 44px; padding: 0 var(--espacio-lg);
  background: var(--web-surface); border-color: var(--web-border); color: var(--teal-texto); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-xs);
}
button.ghost:hover { border-color: var(--teal-texto); }
button.ghost svg, button.primary svg { width: 18px; height: 18px; fill: currentColor; }

:focus-visible { outline: var(--trazo-anillo) solid var(--teal-texto); outline-offset: 2px; border-radius: var(--radio-recto); }

/* Dropzone */
.dropzone { text-align: center; padding: var(--espacio-xxl) var(--espacio-xl); transition: border-color var(--dur-rapido) var(--curva-entrada), background var(--dur-rapido) var(--curva-entrada); }
.dropzone.drag { border-color: var(--teal-texto); background: var(--piedra-hover); }
.dz-icon svg { width: 46px; height: 46px; fill: var(--teal-accento); }
.dz-inner p { margin: var(--espacio-xs) 0; }
.dz-inner button.primary { width: auto; }

/* Status — capa ESTADO (transversal) */
.status {
  display: flex; align-items: center; gap: var(--espacio-md);
  padding: var(--espacio-md) var(--espacio-lg); margin-bottom: var(--espacio-lg);
  background: var(--estado-info-tinte); color: var(--estado-info-texto);
  border-left: var(--trazo-barra) solid var(--teal-texto); border-radius: var(--radio-recto);
}
.status.err { background: var(--estado-alerta-tinte); color: var(--estado-alerta-texto); border-left-color: var(--estado-alerta-solido); }
.status.ok { background: var(--estado-exito-tinte); color: var(--estado-exito-texto); border-left-color: var(--estado-exito-solido); }
.spinner {
  width: 20px; height: 20px; border: var(--trazo-barra) solid var(--piedra-filete-tarjeta);
  border-top-color: var(--teal-texto); border-radius: var(--radio-circulo); animation: spin var(--dur-lento) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Resultado */
.result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-md); margin-bottom: var(--espacio-md); }
.pill { background: var(--piedra-chip); color: var(--texto-secundario); font-size: .8rem; padding: 2px var(--espacio-sm); border-radius: var(--radio-recto); margin-left: var(--espacio-sm); font-family: var(--font-dato); }

.totals { display: flex; flex-wrap: wrap; gap: var(--espacio-sm); margin-bottom: var(--espacio-lg); }
.totals .t { flex: 1 1 120px; background: var(--web-surface); border: var(--trazo-pelo) solid var(--web-border); border-radius: var(--radio-recto); padding: var(--espacio-sm) var(--espacio-md); }
.totals .t .k { font-size: .72rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.totals .t .v { font-family: var(--font-dato); font-size: 1.15rem; font-weight: 600; margin-top: 2px; color: var(--texto-principal); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: var(--espacio-sm) var(--espacio-md); border-bottom: var(--trazo-pelo) solid var(--piedra-filete); }
th { color: var(--texto-secundario); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
td.num, th.num { text-align: right; font-family: var(--font-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.cargo { color: var(--estado-alerta-texto); }
td.abono { color: var(--estado-exito-texto); font-weight: 600; }
tbody tr:hover { background: var(--piedra-hover); }

.foot { text-align: center; padding: var(--espacio-lg); color: var(--texto-terciario); }

@media (max-width: 560px) {
  .card { padding: var(--espacio-lg); }
  th, td { padding: var(--espacio-xs) var(--espacio-sm); }
}