/* Panel de cobranza – IEP Ingenieros Junior */
:root{
  --fondo:#f3f5f8; --superficie:#fff; --hundido:#e9edf3; --linea:#d6dce5;
  --tinta:#16202e; --suave:#5b6778; --acento:#1f5f8b; --acento-tinta:#fff;
  --ok:#1d7a46; --ok-f:#dff3e7; --alerta:#9a5b00; --alerta-f:#fdf0d6; --mal:#b02a2a; --mal-f:#fbe3e3; --info-f:#e1ecf6;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#10151d; --superficie:#18202b; --hundido:#202a37; --linea:#2e3a4a;
  --tinta:#e6ebf2; --suave:#9aa7b8; --acento:#6fa9d6; --acento-tinta:#0d1620;
  --ok:#6fd39a; --ok-f:#16301f; --alerta:#f0b65a; --alerta-f:#33270f; --mal:#f08a8a; --mal-f:#3a1a1a; --info-f:#1a2b3c;
  color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--fondo);border:1px solid var(--linea);border-radius:7px;padding:6px 9px;max-width:100%}
button,.boton{cursor:pointer;border:1px solid var(--linea);background:var(--superficie);border-radius:7px;padding:6px 12px;text-decoration:none;color:var(--tinta);display:inline-block}
button:hover,.boton:hover{border-color:var(--acento)}
button:disabled{opacity:.5;cursor:not-allowed}
.primario{background:var(--acento);color:var(--acento-tinta);border-color:var(--acento);font-weight:600}
.suave{color:var(--suave)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
small{color:var(--suave)}
code{background:var(--hundido);padding:1px 5px;border-radius:4px}

.barra{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;background:var(--superficie);border-bottom:1px solid var(--linea);padding:10px 16px}
.marca{font-size:15px}.marca b{color:var(--acento)}
.barra nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.barra nav a{padding:6px 10px;border-radius:7px;text-decoration:none;color:var(--suave)}
.barra nav a.activo{background:var(--hundido);color:var(--tinta);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.barra .num{background:var(--acento);color:var(--acento-tinta);border-radius:999px;padding:0 6px;font-size:11px}
.usr{color:var(--suave);font-size:13px}
.banda{background:var(--alerta-f);color:var(--alerta);padding:6px 16px;font-size:13px;text-align:center}
main{max-width:1200px;margin:0 auto;padding:16px}

.aviso{padding:9px 12px;border-radius:8px;margin-bottom:12px;background:var(--ok-f);color:var(--ok)}
.aviso.alerta{background:var(--alerta-f);color:var(--alerta)}
.aviso.error{background:var(--mal-f);color:var(--mal)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-bottom:16px}
.kpis div{background:var(--superficie);padding:12px 14px;display:flex;flex-direction:column}
.kpis span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.kpis b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bloque{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.bloque h2{font-size:17px;margin:0 0 4px}
.nota{color:var(--suave);margin:0 0 12px;max-width:80ch}
.vacio{color:var(--suave);text-align:center;padding:16px;border:1px dashed var(--linea);border-radius:10px}
.titulo-fila{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acciones form{margin:0}

.tabla{overflow-x:auto;border:1px solid var(--linea);border-radius:10px}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 9px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);background:var(--hundido);white-space:nowrap}
tr:last-child td{border-bottom:none}
.der{text-align:right}.c{text-align:center}
td.ancho{min-width:240px}
.err{color:var(--mal)}

.chip{display:inline-block;font-size:11.5px;border-radius:999px;padding:2px 9px;white-space:nowrap;background:var(--hundido);color:var(--suave)}
.chip.ok{background:var(--ok-f);color:var(--ok)}.chip.info{background:var(--info-f);color:var(--acento)}
.chip.alerta{background:var(--alerta-f);color:var(--alerta)}.chip.mal{background:var(--mal-f);color:var(--mal);font-weight:600}

.hoja td,.hoja th{padding:5px 6px}
.celda{display:inline-block;min-width:28px;text-align:center;border-radius:5px;padding:2px 4px;text-decoration:none;font-size:12px;font-variant-numeric:tabular-nums}
.celda.pagado{background:var(--ok-f);color:var(--ok)}.celda.por_validar{background:var(--info-f);color:var(--acento)}
.celda.vencido{background:var(--mal-f);color:var(--mal);font-weight:700}.celda.pendiente{background:var(--hundido);color:var(--suave)}
.celda.exonerado{background:var(--hundido);color:var(--suave);font-style:italic}
.leyenda{color:var(--suave);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.detalle{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;background:var(--hundido);border-radius:10px;padding:12px;margin-bottom:12px}
.detalle small{display:block}

.fila-form,.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
.fila-form label,.rejilla label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--suave)}
label.check{flex-direction:row!important;align-items:center;gap:6px;font-size:13px;color:var(--tinta)}
.apod{border-top:1px solid var(--linea);padding-top:8px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;border:0;padding:0;margin:0}
.rejilla .doble{grid-column:1/-1}

.tarjetas{display:grid;gap:12px}
.tarjeta{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;border:1px solid var(--linea);border-radius:10px;padding:12px}
@media (max-width:640px){.tarjeta{grid-template-columns:minmax(0,1fr)}}
.foto img{width:100%;max-height:260px;object-fit:contain;border-radius:8px;background:var(--hundido)}
.sinfoto{display:grid;place-items:center;text-align:center;height:140px;background:var(--hundido);border-radius:8px;color:var(--suave)}
.form-voucher{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:8px}
.form-voucher label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--suave)}
.form-voucher .acciones{grid-column:1/-1}
.rechazo{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.rechazo input{flex:1;min-width:180px}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip-form{background:var(--hundido);border-radius:999px;padding:3px 4px 3px 10px;display:flex;align-items:center;gap:4px;font-size:13px}
.chip-form .x{border:0;background:none;padding:0 6px;font-size:16px;line-height:1}
.lista{margin:0 0 8px;padding-left:18px}

.conversacion .chat{display:flex;flex-direction:column;gap:6px;background:var(--hundido);border-radius:10px;padding:12px;max-height:60vh;overflow-y:auto}
.msg{max-width:min(80%,520px);padding:7px 10px;border-radius:9px;white-space:normal;word-wrap:break-word}
.msg small{display:block;text-align:right;font-size:10.5px;margin-top:2px}
.msg.in{background:var(--superficie);align-self:flex-start}
.msg.out{background:var(--info-f);align-self:flex-end}
.estado-cuenta{white-space:pre-wrap;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;background:var(--hundido);border-radius:8px;padding:10px;margin:0 0 12px}
.responder{display:flex;gap:8px;margin-top:10px;align-items:flex-end}.responder textarea{flex:1}

body.login{display:grid;place-items:center;min-height:100vh;padding:16px}
.caja{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:24px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.caja h1{font-size:22px;margin:0}.caja h1 small{font-size:13px;font-weight:400}
.caja label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--suave)}
td.acciones{display:table-cell;white-space:nowrap}
td.acciones form,td.acciones .boton{display:inline-block;margin:0 4px 4px 0}
@media (max-width:700px){.barra nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto}.usr{margin-left:auto}}