:root {
  --fondo: #f5f6f8;
  --tarjeta: #ffffff;
  --texto: #1f2430;
  --gris: #626a78;
  --borde: #dde1e7;
  --marca: #1f3864;
  --marca-claro: #e8eef8;
  --verde: #1d7a46;
  --verde-claro: #e3f4ea;
  --rojo: #b42318;
  --rojo-claro: #fdecea;
  --ambar: #8a5a00;
  --ambar-claro: #fff4d6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--marca); }
h1 { font-size: 1.45rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
main { max-width: 1180px; margin: 0 auto; padding: 1rem; }

.barra { background: var(--marca); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding: .6rem 1rem; }
.barra a { color: #fff; text-decoration: none; }
.marca strong { font-size: 1.15rem; letter-spacing: .04em; }
.marca span { opacity: .75; font-size: .85rem; margin-left: .3rem; }
.barra nav { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
.barra nav a { padding: .35rem .7rem; border-radius: 6px; }
.barra nav a:hover, .barra nav a.activo { background: rgba(255,255,255,.16); }
.quien { font-size: .85rem; opacity: .9; }
.quien a { text-decoration: underline; }
.pie { text-align: center; color: var(--gris); font-size: .8rem; padding: 2rem 1rem; }

.titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .6rem; }
.titulo h1 { margin: 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.dos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } }

.cuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.cuadro { display: block; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: .9rem 1rem; text-decoration: none; color: var(--texto); }
.cuadro:hover { border-color: var(--marca); }
.cuadro span { display: block; color: var(--gris); font-size: .85rem; }
.cuadro strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cuadro small { color: var(--gris); }
.cuadro.alerta { border-color: #f0c36d; background: var(--ambar-claro); }

.resumen { border-collapse: collapse; width: 100%; max-width: 560px; font-variant-numeric: tabular-nums; }
.resumen td { padding: .35rem .2rem; border-bottom: 1px solid var(--borde); }
.resumen td:last-child { text-align: right; }
.resumen tr.total td { font-weight: 600; }
.resumen tr.cuadra td { color: var(--verde); font-weight: 700; background: var(--verde-claro); }
.resumen tr.no-cuadra td { color: var(--rojo); font-weight: 700; background: var(--rojo-claro); }

.tabla-envoltura { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; }
.tabla { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { background: #f0f2f5; font-weight: 600; white-space: nowrap; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--marca-claro); }
.tabla td a { text-decoration: none; }
.rojo { color: var(--rojo); font-weight: 600; }
.gris, small.gris { color: var(--gris); }
small.gris { display: block; }

.chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip-alumno { background: var(--verde-claro); color: var(--verde); }
.chip-efectivo { background: var(--marca-claro); color: var(--marca); }
.chip-retiro { background: #eceef1; color: var(--gris); }
.chip-otro { background: #efe7fb; color: #5b2a9a; }
.chip-pendiente { background: var(--ambar-claro); color: var(--ambar); }
.revisar { color: var(--ambar); font-weight: 600; }

.pestanas { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.pestanas a { padding: .3rem .75rem; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--borde); text-decoration: none; font-size: .88rem; }
.pestanas a.activo { background: var(--marca); color: #fff; border-color: var(--marca); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.filtros label { display: flex; align-items: center; gap: .4rem; margin: 0; }
label { display: block; margin: 0 0 .8rem; font-weight: 500; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid #c4cad3; border-radius: 6px; width: 100%; background: #fff; }
.filtros input, .filtros select { width: auto; }
input[type=radio], input[type=checkbox] { width: auto; }
input[type=file] { border: 1px dashed #c4cad3; }
button { font: inherit; font-weight: 600; background: var(--marca); color: #fff; border: 0; border-radius: 6px; padding: .5rem 1rem; cursor: pointer; }
button:hover { filter: brightness(1.12); }
button.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; }
form.en-linea { display: flex; gap: .3rem; }
form.en-linea input { min-width: 150px; }

.aviso { padding: .65rem .9rem; border-radius: 8px; margin-bottom: .8rem; }
.aviso-ok { background: var(--verde-claro); color: var(--verde); }
.aviso-error { background: var(--rojo-claro); color: var(--rojo); }
.nota { color: var(--gris); font-size: .9rem; }
.vacio { color: var(--gris); padding: 1rem 0; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.datos dt { color: var(--gris); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .datos { grid-template-columns: 1fr; } .datos dd { margin-bottom: .4rem; } }

.candidatos { display: grid; gap: .3rem; margin-bottom: .9rem; }
.candidato { display: flex; gap: .5rem; align-items: baseline; font-weight: 400; margin: 0; padding: .4rem .5rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; }
.candidato:hover { background: var(--marca-claro); }
.candidato small { margin-left: auto; }

.entrar { max-width: 380px; margin: 3rem auto; }
.pendientes { margin: 0 0 .5rem; padding-left: 1.2rem; }

a.boton { display: inline-block; font-weight: 600; background: var(--marca); color: #fff; border-radius: 6px; padding: .5rem 1rem; text-decoration: none; }
.titulo .botones { align-items: end; }
.fila3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }
.conceptos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
.billetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 .8rem; margin-top: .6rem; }
.deposito { border-top: 1px dashed var(--borde); padding-top: .8rem; margin-top: .8rem; }
.deposito:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
details summary { cursor: pointer; color: var(--marca); font-weight: 600; margin: .2rem 0 .6rem; }
.total-corte { font-size: 1.05rem; margin: .2rem 0 1rem; }
.total-corte strong { font-variant-numeric: tabular-nums; }
.estado { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.estado-ok { background: var(--verde-claro); color: var(--verde); }
.estado-alerta { background: var(--ambar-claro); color: var(--ambar); }
.estado-error { background: var(--rojo-claro); color: var(--rojo); }
button.chico { padding: .2rem .6rem; font-size: .8rem; }
.en-linea-check { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
small.rojo { display: block; }