:root {
  --fondo: #f4f6f8; --tarjeta: #fff; --texto: #1d2731; --suave: #66727f; --borde: #dde3e9;
  --primario: #0b6bcb; --primario-osc: #08519a; --ok: #1a7f37; --alerta: #c62828; --aviso: #b26a00;
  --radio: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto); background: var(--fondo); font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; }
.oculto { display: none !important; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; width: 100%; }
label { display: block; margin-bottom: .6rem; color: var(--suave); font-size: .9rem; }
label > input, label > select, label > textarea { margin-top: .2rem; color: var(--texto); }
small { color: var(--suave); }

.btn { padding: .5rem .9rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #eef2f6; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.primario:hover { background: var(--primario-osc); }
.btn.peligro { color: var(--alerta); border-color: #f1c4c4; }
.btn.verde { background: #25d366; border-color: #25d366; color: #fff; }
.btn.chico { padding: .25rem .6rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; }
.login-caja { width: min(360px, 92vw); }
.error { color: var(--alerta); min-height: 1.2em; }

/* Barra superior */
.barra { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .6rem 1rem; background: #10263d; color: #fff; position: sticky; top: 0; z-index: 1100; }
.barra nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.barra nav button { background: none; border: 0; color: #c9d6e3; padding: .45rem .8rem; border-radius: 8px; cursor: pointer; }
.barra nav button.activa, .barra nav button:hover { background: #1f3d5c; color: #fff; }
.barra .usuario { display: flex; gap: .5rem; align-items: center; }
.barra select { width: auto; padding: .3rem; }
.badge { background: var(--alerta); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; margin-left: .2rem; }

main { padding: 1rem; max-width: 1300px; margin: auto; }
.filtros { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-bottom: .75rem; }
.filtros h2 { margin: 0 auto 0 0; }
.filtros input[type=search] { flex: 1; min-width: 220px; }
.filtros label { margin: 0; }
.filtros select { width: auto; }

/* Caja */
.caja-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .caja-grid { grid-template-columns: 1fr; } }
.lista { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 70vh; overflow: auto; }
.lista li { padding: .55rem .5rem; border-bottom: 1px solid var(--borde); cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; }
.lista li:hover, .lista li.sel { background: #eef5fc; }
.lista.simple li { cursor: default; }
.lista small { display: block; }
.cliente-cab { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--borde); padding-bottom: .75rem; margin-bottom: .75rem; }
.cliente-cab h2 { margin: 0; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem 1rem; font-size: .9rem; color: var(--suave); }
.datos b { color: var(--texto); font-weight: 500; }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.mes { border: 1px solid var(--borde); border-radius: 8px; padding: .5rem; display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.mes input { width: auto; }
.mes.parcial { border-color: #f0c36d; background: #fff8e8; }
.cobro { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; align-items: end; }
.extra-fila { display: flex; gap: .5rem; margin-bottom: .4rem; }
.extra-fila input:first-child { flex: 2; }
.extra-fila input:nth-child(2) { flex: 1; }
.total { font-size: 1.6rem; font-weight: 700; }

.estado { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.estado.activo, .estado.pagado { background: #e3f4e8; color: var(--ok); }
.estado.suspendido, .estado.parcial { background: #fff1d6; color: var(--aviso); }
.estado.retirado, .estado.anulado { background: #eceff2; color: var(--suave); }
.estado.pendiente, .estado.moroso { background: #fde7e7; color: var(--alerta); }
.estado.exonerado { background: #e8eefc; color: #3851a3; }

/* Tablas */
.tabla-scroll { overflow: auto; max-height: 72vh; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .45rem .5rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
th { background: #f7f9fb; position: sticky; top: 0; font-weight: 600; color: var(--suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.anulado td { text-decoration: line-through; color: var(--suave); }
.acciones { display: flex; gap: .3rem; flex-wrap: wrap; }
.resumen { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.resumen div { background: #f7f9fb; border-radius: 8px; padding: .5rem .8rem; }
.resumen b { display: block; font-size: 1.2rem; }

.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.ayuda { color: var(--suave); font-size: .85rem; }
.en-linea { display: flex; gap: .5rem; margin: .5rem 0 1rem; }

/* Modal */
dialog { border: 0; border-radius: var(--radio); padding: 1.2rem; width: min(760px, 95vw); max-height: 92vh; }
dialog::backdrop { background: rgba(10, 20, 30, .45); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.modal-pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

.aviso { position: fixed; bottom: 1rem; right: 1rem; background: #10263d; color: #fff; padding: .8rem 1rem; border-radius: 8px; z-index: 1200; max-width: 420px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.aviso.error { background: var(--alerta); }

/* ===== Recibo ===== */
#area-impresion { display: none; }
.recibo { font-family: "Courier New", monospace; color: #000; font-size: 12px; line-height: 1.35; }
.recibo h3 { margin: 0; font-size: 15px; text-align: center; }
.recibo .centro { text-align: center; }
.recibo .linea { border-top: 1px dashed #000; margin: 6px 0; }
.recibo table { font-size: 12px; }
.recibo td { border: 0; padding: 1px 0; }
.recibo .tot td { font-weight: bold; font-size: 14px; border-top: 1px solid #000; padding-top: 3px; }
.recibo.formato-80 { width: 72mm; }
.recibo.formato-a4 { width: 180mm; font-size: 13px; padding: 10mm; border: 1px solid #000; }
.recibo .copia { margin-top: 12mm; padding-top: 8mm; border-top: 1px dashed #000; }
.vista-previa { background: #eceff2; padding: 1rem; display: flex; justify-content: center; max-height: 60vh; overflow: auto; }
.vista-previa .recibo { background: #fff; padding: 8px; }

@media print {
  body > *:not(#area-impresion) { display: none !important; }
  #area-impresion { display: block !important; }
  body { background: #fff; }
}
#tabla-usuarios select { min-width: 7.5em; }
#tabla-usuarios input[data-campo=nombre] { min-width: 9em; }

/* GIS */
.mapa { height: 62vh; min-height: 380px; border-radius: 8px; border: 1px solid var(--borde); margin-bottom: .75rem; z-index: 0; }
.mapa.eligiendo { cursor: crosshair; outline: 3px solid var(--primario); }
.punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.leaflet-popup-content { font-size: .9rem; line-height: 1.45; }
input:disabled, select:disabled, textarea:disabled { background: #f3f5f7; color: var(--suave); }
.leaflet-control-layers label { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; color: var(--texto); font-size: .85rem; }
.leaflet-control-layers input { width: auto; margin: 0; }