:root {
  --fondo: #f5f7fb; --tarjeta: #ffffff; --texto: #1c2733; --suave: #6b7785; --linea: #e4e9f0;
  --ok: #1a7f4b; --ok-fondo: #e8f6ee; --alerta: #9a6700; --alerta-fondo: #fff6e0; --error: #b42318; --error-fondo: #fdecea;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --radio: 14px;
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 var(--fuente); min-height: 100vh;
  display: flex; flex-direction: column; }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
a { color: var(--color); }
.suave { color: var(--suave); }
.pequeno { font-size: .86rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: var(--tarjeta); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.marca { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--texto); font-weight: 650; }
.marca-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; }
.marca-inicial { width: 34px; height: 34px; border-radius: 10px; background: var(--color); color: #fff; display: grid; place-items: center; font-weight: 700; }
.menu { display: flex; align-items: center; gap: .3rem; }
.menu a { padding: .45rem .8rem; border-radius: 99px; text-decoration: none; color: var(--suave); font-weight: 600; }
.menu a:hover { background: var(--fondo); color: var(--texto); }
.menu a[aria-current="page"] { background: var(--color); color: #fff; }
.menu form { margin: 0 0 0 .4rem; }
.salir { border: 1px solid var(--linea); background: var(--tarjeta); color: var(--suave); border-radius: 99px; padding: .4rem .9rem; cursor: pointer; font: inherit; }
.salir:hover { color: var(--texto); border-color: var(--suave); }

.contenido { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.4rem) clamp(1rem, 4vw, 1.5rem) 3rem; flex: 1; }
.saludo { margin-bottom: 1.4rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem 1.25rem; }
.tarjeta + .tarjeta, .grupo + .grupo, .nota-saldo + .anios { margin-top: 1rem; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--color); background: var(--color);
  color: #fff; padding: .6rem 1.1rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.boton:hover { filter: brightness(1.08); }
.boton-claro { background: var(--tarjeta); color: var(--color); }
.boton:focus-visible, .salir:focus-visible, input:focus-visible, .anios a:focus-visible, .menu a:focus-visible { outline: 3px solid color-mix(in srgb, var(--color) 40%, transparent); outline-offset: 2px; }

.ingreso { display: grid; place-items: center; min-height: 60vh; }
.ingreso-tarjeta { width: min(420px, 100%); padding: 2rem 1.8rem; }
.ingreso-tarjeta form { display: grid; gap: .5rem; margin: 1.2rem 0 .8rem; }
.ingreso-tarjeta label { font-weight: 600; font-size: .92rem; margin-top: .4rem; }
input { width: 100%; font: inherit; padding: .7rem .85rem; border: 1px solid var(--linea); border-radius: 10px; background: #fbfcfe; color: var(--texto); }
input:focus { border-color: var(--color); background: #fff; }
.ingreso-tarjeta .boton { margin-top: 1rem; padding: .75rem 1rem; }
.aviso { padding: .65rem .85rem; border-radius: 10px; margin: .9rem 0 0; font-size: .93rem; }
.aviso-error { background: var(--error-fondo); color: var(--error); }

.nota-saldo { display: flex; gap: .8rem; align-items: center; background: var(--ok-fondo); border-color: #cfe9da; margin-bottom: 1.2rem; }
.nota-saldo-debe { background: var(--alerta-fondo); border-color: #f1e0ad; }
.nota-saldo b { display: block; }

.anios { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; }
.anios a { padding: .4rem 1rem; border-radius: 99px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--suave);
  text-decoration: none; font-weight: 650; }
.anios a:hover { color: var(--texto); }
.anios a[aria-current="true"] { background: var(--color); border-color: var(--color); color: #fff; }

.documentos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.documento { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; margin: 0 !important; }
.icono { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; color: #fff; background: #c2410c; }
.icono-xml { background: #0f766e; }
.documento-datos { flex: 1; min-width: 0; display: grid; }
.documento-datos b { overflow-wrap: anywhere; line-height: 1.3; }
.documento-acciones { display: flex; gap: .5rem; flex: none; }
.documento-acciones .boton { padding: .5rem .9rem; font-size: .92rem; }
.vacio { text-align: center; padding: 2.2rem 1rem; }
.vacio p { margin: .2rem 0; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.indicador { display: grid; gap: .1rem; margin: 0 !important; }
.indicador b { font-size: 1.45rem; letter-spacing: -.02em; }
.grafico svg { width: 100%; height: auto; display: block; }
.eje { stroke: var(--linea); stroke-width: 1; }
.barra-ventas { fill: var(--color); }
.barra-compras { fill: #9db4d3; }
.etiqueta { font: 11px var(--fuente); fill: var(--suave); }
.leyenda { display: flex; gap: 1rem; align-items: center; margin: .6rem 0 0; color: var(--suave); font-size: .9rem; }
.punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .3rem; }
.punto-ventas { background: var(--color); }
.punto-compras { background: #9db4d3; }
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabla th, .tabla td { padding: .55rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla th { color: var(--suave); font-weight: 600; font-size: .85rem; }
.tabla th.num { text-align: right; }

.pie { text-align: center; color: var(--suave); font-size: .85rem; padding: 1.4rem 1rem 2rem; }

@media (max-width: 560px) {
  .documento { flex-wrap: wrap; }
  .documento-acciones { width: 100%; }
  .documento-acciones .boton { flex: 1; }
  .menu a { padding: .4rem .6rem; }
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0f1620; --tarjeta: #17212d; --texto: #e8edf3; --suave: #93a1b1; --linea: #263445; --sombra: none;
    --ok-fondo: #12301f; --alerta-fondo: #33290f; --error-fondo: #3a1a17; }
  input { background: #111a25; }
  input:focus { background: #0f1620; }
  .barra-compras { fill: #5b7394; }
  .punto-compras { background: #5b7394; }
  .nota-saldo { border-color: #1f4a30; }
  .nota-saldo-debe { border-color: #5b4817; }
}
@media print { .barra, .pie, .documento-acciones { display: none; } }
.filtros input, .filtros select { width: auto; }
.filtros .filtro-ancho { width: auto; }
.aviso select { width: auto; }
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.filtros label { display: grid; gap: .2rem; color: var(--suave); font-size: .85rem; }
.filtros input, .filtros select, .aviso select { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: .45rem .6rem; font: inherit; }
.filtro-ancho { flex: 1 1 260px; }
.etiqueta-tipo { display: inline-block; padding: .1rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--color) 18%, transparent); font-size: .82rem; }
.etiqueta-ret { background: color-mix(in srgb, #d9a441 25%, transparent); }
.vacio-celda { text-align: center; color: var(--suave); padding: 1.6rem 1rem !important; }
.paginas { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
.subtitulo { margin: 1rem 0 .4rem; font-size: 1rem; }
.tabla tfoot th { border-top: 2px solid var(--linea); color: var(--texto); }
.pequeno { font-size: .85rem; }
.aviso { display: flex; gap: .4rem; }
.aviso .boton { padding: .35rem .7rem; font-size: .85rem; }
.contenido { max-width: 1100px; }
.aviso { flex-wrap: wrap; min-width: 150px; }
.etiqueta-foto { background: color-mix(in srgb, #8a63d2 25%, transparent); }
.bloque-ventas { border-left: 4px solid var(--color); }
.bloque-compras { border-left: 4px solid #d9a441; }
.rotulo { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .78rem; letter-spacing: .04em; margin-right: .4rem; color: #fff; vertical-align: middle; }
.rotulo-ventas { background: var(--color); }
.rotulo-compras { background: #b8860b; }
.bloque-ventas .tabla thead th { color: var(--color); }
.bloque-compras .tabla thead th { color: #d9a441; }
.col-ventas { color: var(--color) !important; }
.col-compras { color: #d9a441 !important; }
.tabla th.num, .tabla td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }