:root {
  --fondo: #f4f6f9;
  --panel: #ffffff;
  --texto: #1c2430;
  --suave: #637083;
  --linea: #e2e7ee;
  --acento: #1f5fa8;
  --acento-txt: #ffffff;
  --verde: #1a7f4b; --verde-f: #e3f4ea;
  --ambar: #9a6200; --ambar-f: #fdf1d8;
  --rojo: #b42318;  --rojo-f: #fde7e5;
  --gris-f: #eef1f5;
  --nc: #7a3db8; --nc-f: #f1e8fb;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161c; --panel: #1b2129; --texto: #e6eaf0; --suave: #96a1b1; --linea: #2c3440;
    --acento: #4c8fe0; --acento-txt: #0d1620;
    --verde: #5cc98d; --verde-f: #173527; --ambar: #f0b552; --ambar-f: #3a2c12;
    --rojo: #ff8a80; --rojo-f: #3d1c1a; --gris-f: #252c36; --nc: #c39af0; --nc-f: #2e2240;
    --sombra: none; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .75rem; }
.sub { color: var(--suave); margin: 0 0 1.25rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .86em; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fuerte { font-weight: 600; }
.txt-rojo { color: var(--rojo); }
small { display: block; color: var(--suave); font-size: .8em; }

/* barra */
.barra { background: var(--panel); border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1.25rem; position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 1.1rem; color: var(--texto); }
.barra nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.barra nav a { color: var(--suave); font-weight: 500; }
.barra nav a:hover { color: var(--texto); text-decoration: none; }
.barra .salir { font-size: .9em; }
.contenido { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* botones */
.btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); padding: .55rem 1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: var(--suave); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--rojo); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* avisos */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; border: 1px solid transparent; }
.aviso.ok { background: var(--verde-f); color: var(--verde); }
.aviso.alerta { background: var(--ambar-f); color: var(--ambar); }
.aviso.error { background: var(--rojo-f); color: var(--rojo); }
.aviso a { color: inherit; text-decoration: underline; }

/* encabezado y mes */
.encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mes-nav { display: flex; align-items: center; gap: .6rem; }
.mes-nav h1 { margin: 0; min-width: 11ch; text-align: center; }
.flecha { font-size: 1.6rem; line-height: 1; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--texto); }
.flecha:hover { background: var(--gris-f); text-decoration: none; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.revisar { margin: 0; }
.rangos { display: inline-flex; gap: 2px; margin-top: 1rem; padding: 3px; background: var(--gris-f); border: 1px solid var(--linea); border-radius: 10px; flex-wrap: wrap; }
.rangos a { padding: .4rem .9rem; border-radius: 7px; color: var(--suave); font-weight: 600; font-size: .9em; white-space: nowrap; }
.rangos a:hover { color: var(--texto); text-decoration: none; }
.rangos a.activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra); }
.estado-correo { color: var(--suave); margin: .6rem 0 1.25rem; font-size: .92em; }
.punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.punto.verde { background: var(--verde); } .punto.rojo { background: var(--rojo); } .punto.gris { background: var(--suave); }

/* tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.25rem; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--sombra); min-width: 0; }
.tarjeta span { color: var(--suave); font-size: .85em; font-weight: 500; }
.tarjeta strong { display: block; font-size: 1.45rem; margin-top: .2rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tarjeta.destacada { border-color: var(--acento); }

/* filtros */
.filtros { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.25rem; }
.filtros label { display: flex; flex-direction: column; gap: .25rem; font-size: .82em; color: var(--suave); font-weight: 500; }
.filtros .crece { flex: 1; min-width: 200px; }
.filtros .enlace { align-self: center; font-size: .9em; }
input, select { font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .65rem; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

/* tabla */
.lista { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); }
.lista th { text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); padding: .7rem .8rem; border-bottom: 1px solid var(--linea); background: var(--gris-f); }
.lista th.num { text-align: right; }
.lista td { padding: .7rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.lista tbody tr:last-child td { border-bottom: 0; }
.lista tbody tr[onclick] { cursor: pointer; }
.lista tbody tr[onclick]:hover { background: var(--gris-f); }
.prov a { color: var(--texto); font-weight: 600; }
.cuentas { margin: -.5rem 0 1.25rem; padding-left: 1.2rem; color: var(--suave); }
.cuentas strong { color: var(--texto); }
.detalle-log { font-size: .88em; color: var(--suave); max-width: 520px; }
.nota { color: var(--suave); font-size: .9em; }

.tipo { display: inline-block; font-size: .78em; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--gris-f); color: var(--suave); white-space: nowrap; }
.tipo.t-fe { background: #e4eefb; color: #1f5fa8; }
.tipo.t-nc { background: var(--nc-f); color: var(--nc); }
.tipo.t-nd { background: var(--ambar-f); color: var(--ambar); }
@media (prefers-color-scheme: dark) { .tipo.t-fe { background: #1b2d45; color: #8db8ef; } }
.estado { display: inline-block; font-size: .8em; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.estado.verde { background: var(--verde-f); color: var(--verde); }
.estado.ambar { background: var(--ambar-f); color: var(--ambar); }
.estado.rojo { background: var(--rojo-f); color: var(--rojo); }
.estado.gris { background: var(--gris-f); color: var(--suave); }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--suave); background: var(--panel); border: 1px dashed var(--linea); border-radius: 12px; }

/* detalle */
.volver { display: inline-block; margin-bottom: 1rem; }
.detalle { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 1.5rem; box-shadow: var(--sombra); }
.detalle-cab { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); }
.detalle-cab h1 { margin-top: .5rem; }
.detalle-cab .sub { margin: 0; }
.detalle-total { text-align: right; }
.detalle-total span { color: var(--suave); font-size: .85em; }
.detalle-total strong { display: block; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem 1.5rem; margin: 1.25rem 0 0; }
.datos dt { font-size: .8em; color: var(--suave); font-weight: 500; }
.datos dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.datos .ancho { grid-column: 1 / -1; }
.clave { font-size: .82em; }
.lineas { box-shadow: none; }
.unidad { color: var(--suave); font-size: .8em; }
.pie-detalle { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pie-detalle form { margin: 0; }

/* subir */
.subida { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1.5rem; }
.zona { flex: 1; min-width: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 2rem 1rem; border: 2px dashed var(--linea); border-radius: 12px; background: var(--panel); cursor: pointer; position: relative; text-align: center; }
.zona.encima, .zona:hover { border-color: var(--acento); }
.zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona span { color: var(--suave); font-size: .9em; }
.subida .btn { align-self: center; }

/* login */
.login { max-width: 360px; margin: 10vh auto 0; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--sombra); }
.login h1 { text-align: center; font-size: 1.3rem; }
.login label { display: flex; flex-direction: column; gap: .3rem; font-size: .88em; color: var(--suave); font-weight: 500; }
.login .btn { justify-content: center; }
.logo-grande { font-size: 2.6rem; text-align: center; }

/* celular */
@media (max-width: 760px) {
  .contenido { padding: 1rem 1rem 3rem; }
  .barra { padding: .6rem 1rem; }
  .barra nav { gap: .85rem; font-size: .92em; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .tarjeta strong { font-size: 1.15rem; }
  .encabezado { flex-direction: column; align-items: stretch; }
  .mes-nav { justify-content: space-between; }
  .mes-nav h1 { font-size: 1.2rem; }
  .rangos { display: flex; }
  .rangos a { flex: 1; text-align: center; padding: .45rem .3rem; }
  .acciones .btn, .revisar, .revisar .btn { flex: 1; justify-content: center; }
  .lista, .lista tbody, .lista tr, .lista td { display: block; width: 100%; }
  .lista { border: 0; background: none; box-shadow: none; }
  .lista thead { display: none; }
  .lista tr { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; margin-bottom: .7rem; padding: .4rem .2rem; }
  .lista td { border: 0; padding: .3rem .8rem; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .lista td::before { content: attr(data-t); color: var(--suave); font-size: .82em; text-align: left; flex-shrink: 0; }
  .lista td.prov { flex-direction: column; text-align: left; gap: 0; }
  .lista td.prov::before { display: none; }
  .detalle { padding: 1.1rem; }
  .detalle-total { text-align: left; }
}