/* Portal de carga: sin dependencias externas, legible en celular, claro y oscuro. */
:root {
  --fondo: #f6f7f9; --tarjeta: #ffffff; --texto: #1b1f24; --suave: #5b6470; --borde: #dfe3e8;
  --acento: #1a7f37; --acento-texto: #ffffff; --alerta: #b42318; --destacado: #fff8e1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111418; --tarjeta: #1b2027; --texto: #e8eaed; --suave: #9aa4b0; --borde: #2c333c;
    --acento: #3fb950; --acento-texto: #0b0e11; --alerta: #f97066; --destacado: #2b2614;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.45; }
a { color: var(--acento); }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; margin: .2rem 0; }
h2 { font-size: 1.1rem; margin-top: 0; }

.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.marca { font-weight: 700; text-decoration: none; color: var(--texto); }
.barra nav { display: flex; flex-wrap: wrap; gap: .75rem; flex: 1; }
.barra nav a { text-decoration: none; }
.salir { display: flex; align-items: center; gap: .5rem; margin: 0; }
.quien { color: var(--suave); font-size: .9rem; }

button, .boton { font: inherit; padding: .45rem .8rem; border-radius: .4rem; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block; }
button.principal, .boton { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
button.principal { width: 100%; padding: .7rem; font-size: 1.05rem; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: .6rem; padding: 1rem; margin: 1rem 0; }
.angosta { max-width: 28rem; margin: 2rem auto; }
.destacado { background: var(--destacado); }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.cifra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: .6rem; padding: .75rem; }
.cifra span { display: block; color: var(--suave); font-size: .85rem; }
.cifra strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--suave); }

.desliza { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { color: var(--suave); font-weight: 600; white-space: nowrap; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total td { font-weight: 700; }
.anulado td { text-decoration: line-through; color: var(--suave); }
.etiqueta { background: var(--borde); border-radius: .3rem; padding: 0 .3rem; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin: 1rem 0; }
.filtros label { display: flex; flex-direction: column; font-size: .85rem; color: var(--suave); }
.filtros input, .filtros select { font: inherit; padding: .35rem; border: 1px solid var(--borde); border-radius: .3rem;
  background: var(--tarjeta); color: var(--texto); }

.datos { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .3rem 1rem; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }
.persona { font-size: 1.1rem; }
.enlace code { word-break: break-all; font-size: .9rem; }
.nota, .vacio { color: var(--suave); font-size: .9rem; }