:root { --navy: #22263E; --navy2: #2C3150; --naranja: #F37A1F; --fondo: #F3F5F8; --borde: #DDE1E8; --texto: #1F2433; --gris: #5A6270; --verde: #1E7F4F; --rojo: #C0392B; --amarillo: #B7791F; }
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Calibri, Arial, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.45; }
a { color: #1D4E89; text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0 0 .2rem; color: var(--navy); } h2 { font-size: 1.05rem; margin: 0 0 .7rem; color: var(--navy); }
small { color: var(--gris); } code { background: #EEF0F4; padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.oculto { display: none; } .rojo { color: var(--rojo); } .nw { white-space: nowrap; }
.sub { color: var(--gris); margin: 0 0 1rem; }

/* estructura */
.lado { position: fixed; inset: 0 auto 0 0; width: 232px; background: var(--navy); color: #fff; overflow-y: auto; z-index: 20; }
.marca { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem .9rem; color: #fff; font-weight: 700; font-size: 1.1rem; }
.marca:hover { text-decoration: none; } .marca img { height: 34px; } .marca small, .caja-marca small { display: block; color: #AEB4CC; font-weight: 400; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.lado nav p { margin: 1rem 1.1rem .3rem; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: #8F96B3; }
.lado nav a { display: block; padding: .5rem 1.1rem; color: #E6E8F1; border-left: 3px solid transparent; }
.lado nav a:hover { background: var(--navy2); text-decoration: none; } .lado nav a.act { background: var(--navy2); border-left-color: var(--naranja); color: #fff; font-weight: 600; }
.pagina { margin-left: 232px; min-height: 100vh; }
.barra { display: flex; align-items: center; gap: 1rem; background: #fff; border-bottom: 1px solid var(--borde); padding: .55rem 1.5rem; position: sticky; top: 0; z-index: 10; }
.barra .migas { flex: 1; color: var(--gris); font-size: .9rem; } .barra .migas b { color: var(--texto); }
.barra form { margin: 0; } .hamb { display: none; font-size: 1.4rem; cursor: pointer; }
.campana { color: var(--texto); font-size: .9rem; } .campana b { background: var(--rojo); color: #fff; border-radius: 9px; padding: 0 .4rem; margin-left: .3rem; font-size: .75rem; }
.quien { color: var(--texto); text-align: right; font-size: .9rem; line-height: 1.15; } .quien small { display: block; }
main { padding: 1.4rem 1.5rem 3rem; max-width: 1380px; }

/* piezas */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; scroll-margin-top: 4rem; }
.tarjeta.resalta { border-color: var(--naranja); background: #FFF8F2; } .peligro-zona { border-color: #E8C4BF; }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .cab h1, .cab h2 { margin: 0; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: var(--navy); color: #fff; border-radius: 10px; padding: .85rem 1rem; } .kpi small { color: #AEB4CC; display: block; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; }
.kpi b { display: block; font-size: 1.4rem; margin: .1rem 0; } .kpi span { color: #C9CBD6; font-size: .78rem; }
.kpis.chicos .kpi { background: #EEF0F4; color: var(--texto); } .kpis.chicos .kpi small { color: var(--gris); } .kpis.chicos .kpi b { font-size: 1.15rem; }
.btn { display: inline-block; background: var(--naranja); color: #fff; border: 1px solid var(--naranja); border-radius: 7px; padding: .5rem .95rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(.95); text-decoration: none; } .btn.sec { background: #fff; color: var(--navy); border-color: #C5CAD6; } .btn.chico { padding: .28rem .65rem; font-size: .85rem; }
.btn.ancho { width: 100%; text-align: center; margin-top: .9rem; } .btn.peligro { color: var(--rojo); border-color: #E3B4AE; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: #1D4E89; cursor: pointer; } .enlace:hover { text-decoration: underline; } .enlace.peligro { color: var(--rojo); }
.enlinea { display: inline; margin: 0; }
.aviso { border-radius: 8px; padding: .65rem .9rem; margin-bottom: 1rem; border: 1px solid; } .aviso.ok { background: #EAF6EF; border-color: #B5DCC5; color: #14532D; }
.aviso.error { background: #FBECEA; border-color: #EBC1BC; color: #7F1D1D; } .aviso.info { background: #EDF2FA; border-color: #C6D4EA; } .aviso.alerta { background: #FFF6E5; border-color: #EBD3A0; color: #6B4A06; }
.vacio { color: var(--gris); font-style: italic; margin: .3rem 0; } .pie { color: var(--gris); font-size: .84rem; margin: .7rem 0 0; }
.pill { display: inline-block; border-radius: 99px; padding: .08rem .6rem; font-size: .76rem; font-weight: 600; background: #E7EAF0; color: #3B4252; white-space: nowrap; vertical-align: middle; }
.pill.activo, .pill.aplicado { background: #DDF2E5; color: var(--verde); } .pill.vencido { background: #FADFDB; color: var(--rojo); }
.pill.programado, .pill.pendiente { background: #FFF0D6; color: var(--amarillo); } .pill.liquidado, .pill.renovado { background: #DFE7F5; color: #1D4E89; }

/* tablas */
.scroll { overflow-x: auto; } .scroll.alto { max-height: 360px; overflow-y: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; } .tabla th { text-align: left; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--borde); padding: .45rem .6rem; white-space: nowrap; background: #fff; position: sticky; top: 0; }
.tabla td { padding: .5rem .6rem; border-bottom: 1px solid #ECEFF3; vertical-align: top; } .tabla tr:hover td { background: #FAFBFC; }
.tabla .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tabla.compacta { font-size: .85rem; } .tabla.compacta td, .tabla.compacta th { padding: .32rem .5rem; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--borde); background: #FAFBFC; } .tabla tr.pago td { background: #FFF8F2; } .tabla tr.alerta td { background: #FDF3F1; } .tabla tr.apagado td { color: #9AA1AE; }
.tabla .acc { text-align: right; white-space: nowrap; } .tabla .acc > * { margin-left: .6rem; } .tabla .corta { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris); }

/* formularios */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1rem; } .campo.ancho2 { grid-column: span 2; } .campo.ancho3 { grid-column: 1 / -1; }
.campo label, .caja label { display: block; font-size: .82rem; font-weight: 600; color: #3B4252; margin-bottom: .2rem; } .req { color: var(--rojo); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea { width: 100%; font: inherit; padding: .45rem .6rem; border: 1px solid #C5CAD6; border-radius: 7px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid #F8C49B; border-color: var(--naranja); } input.num { text-align: right; } input.corto { width: 6.5rem; }
.campo small { display: block; margin-top: .15rem; font-size: .78rem; } .campo .err, .campo.mal small.err { color: var(--rojo); } .campo.mal input, .campo.mal select { border-color: var(--rojo); }
.check { display: flex !important; align-items: center; gap: .45rem; font-weight: 500 !important; padding-top: 1.3rem; } .check input { width: auto; }
.botones { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; } .filtros input, .filtros select { width: auto; min-width: 150px; } .filtros label { font-size: .88rem; color: var(--gris); display: flex; align-items: center; gap: .35rem; }
.subir { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; } .subir input, .subir select { width: auto; flex: 1 1 180px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .opciones .check { padding-top: .3rem; }
.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; } .subnav a { background: #fff; border: 1px solid var(--borde); border-radius: 99px; padding: .25rem .8rem; font-size: .86rem; color: var(--navy); }
.subnav a:hover { border-color: var(--naranja); text-decoration: none; }
.ficha { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: .35rem 1rem; margin: 0; } .ficha dt { color: var(--gris); font-size: .86rem; } .ficha dd { margin: 0; font-weight: 600; } .ficha dd.largo { grid-column: 2 / -1; font-weight: 400; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .chips a, .chips span { background: #EEF0F4; border-radius: 6px; padding: .2rem .6rem; font-size: .86rem; }
.copiable { font-family: Consolas, monospace; font-size: .85rem; } .codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin: .8rem 0; } .codigos code { text-align: center; padding: .35rem; font-size: 1rem; }
details { margin-top: .8rem; } summary { cursor: pointer; color: #1D4E89; }

/* gráfica */
.grafica { display: flex; gap: .4rem; align-items: flex-end; height: 190px; border-bottom: 1px solid var(--borde); padding-top: .5rem; }
.grafica .col { flex: 1; display: flex; flex-direction: column; height: 100%; align-items: center; } .grafica .col.actual small { font-weight: 700; color: var(--navy); }
.grafica .barras { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; } .grafica .b { width: 18%; min-height: 0; border-radius: 3px 3px 0 0; }
.grafica small { padding: .25rem 0; font-size: .74rem; } .ent, .leyenda .ent { background: #2F66C5; } .entp { background: #A9C4EE; } .sal { background: #E8604F; } .salp { background: #F5B9B0; }
.leyenda { font-size: .8rem; color: var(--gris); margin: .6rem 0 0; } .leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin: 0 .3rem 0 .8rem; vertical-align: -1px; }

/* acceso */
body.centro { background: var(--navy); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.caja { background: #fff; border-radius: 14px; padding: 0 1.8rem 1.6rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); overflow: hidden; }
.caja-marca { background: var(--navy2); margin: 0 -1.8rem 1.3rem; padding: 1.1rem 1.8rem; display: flex; align-items: center; gap: .8rem; color: #fff; font-weight: 700; font-size: 1.15rem; } .caja-marca img { height: 38px; }
.caja h1 { font-size: 1.3rem; margin-bottom: .6rem; } .caja label { margin-top: .8rem; } .caja form { margin-bottom: .6rem; }
.qr { text-align: center; margin: .6rem 0; } .qr img { width: 200px; height: 200px; }

@media (max-width: 900px) {
  .lado { transform: translateX(-100%); transition: transform .2s; } #menu-abierto:checked ~ .lado { transform: none; } .pagina { margin-left: 0; } .hamb { display: block; }
  .dos, .rejilla { grid-template-columns: 1fr; } .campo.ancho2 { grid-column: auto; } .ficha { grid-template-columns: max-content 1fr; } .ficha dd.largo { grid-column: 2; }
  main { padding: 1rem; } .quien small { display: none; }
}
@media print { .lado, .barra, .subnav, .btn, .filtros, .subir, .acc { display: none !important; } .pagina { margin: 0; } .tarjeta { border: 0; padding: 0; } }