/* Control de la Privada — estilos */
:root {
    --azul: #1565c0; --azul-osc: #0d47a1; --azul-claro: #e3f0fd;
    --fondo: #f3f5f9; --tarjeta: #fff; --texto: #1d2433; --suave: #67718a; --borde: #e1e6ef;
    --verde: #1e8e3e; --verde-f: #e6f4ea; --rojo: #c62828; --rojo-f: #fdecea;
    --amarillo: #a86b00; --amarillo-f: #fff4dc; --sombra: 0 1px 3px rgba(20, 30, 60, .08);
    --radio: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); font-size: 15px; line-height: 1.45; }
a { color: var(--azul); }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.sub { color: var(--suave); font-size: 13.5px; margin: 0 0 16px; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px;
    padding-top: env(safe-area-inset-top); background: linear-gradient(90deg, var(--azul-osc), var(--azul)); color: #fff; }
.marca { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; min-width: 0; }
.marca img { width: 32px; height: 32px; border-radius: 8px; background: #fff; }
.marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: .95; }
.quien .salir { color: #fff; border: 1px solid rgba(255,255,255,.5); padding: 4px 10px; border-radius: 6px; text-decoration: none; }
.btn-menu { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 6px; }

/* Estructura */
.contenedor { display: flex; min-height: calc(100vh - 56px); }
.lateral { width: 230px; flex: 0 0 230px; background: #fff; border-right: 1px solid var(--borde); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 14.5px; }
.lateral a:hover { background: var(--fondo); }
.lateral a.activo { background: var(--azul-claro); color: var(--azul-osc); font-weight: 600; }
.lateral .ico { width: 22px; text-align: center; }
.lateral .instalar { margin-top: 10px; border: 1px dashed var(--azul); color: var(--azul); }
.solo-movil { display: none !important; }
.contenido { flex: 1; min-width: 0; padding: 22px 26px 60px; max-width: 1200px; }
.velo { display: none; }

@media (max-width: 860px) {
    .btn-menu { display: block; }
    .quien span { display: none; }
    .quien .salir { display: none; }
    .lateral { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 40; transform: translateX(-105%); transition: transform .2s; box-shadow: 4px 0 20px rgba(0,0,0,.15); overflow-y: auto; }
    body.menu-abierto .lateral { transform: none; }
    body.menu-abierto .velo { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.3); z-index: 35; }
    .solo-movil { display: flex !important; }
    .contenido { padding: 16px 14px 70px; }
}

/* Tarjetas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); margin-bottom: 16px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta .encab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tarjeta .encab h2 { margin: 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.cifra .t { font-size: 12.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.cifra .v { font-size: 24px; font-weight: 700; margin-top: 2px; }
.cifra .n { font-size: 12.5px; color: var(--suave); }
.cifra.verde .v { color: var(--verde); } .cifra.rojo .v { color: var(--rojo); } .cifra.azul .v { color: var(--azul); } .cifra.amarillo .v { color: var(--amarillo); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }

.cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* Chips */
.chip { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip.verde { background: var(--verde-f); color: var(--verde); }
.chip.rojo { background: var(--rojo-f); color: var(--rojo); }
.chip.amarillo { background: var(--amarillo-f); color: var(--amarillo); }
.chip.azul { background: var(--azul-claro); color: var(--azul-osc); }
.chip.gris { background: #eef0f4; color: var(--suave); }

/* Tablas */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #fafbfd; white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .der { text-align: right; } .tabla .cen { text-align: center; }
.tabla tr.anulado td { color: #9aa3b5; text-decoration: line-through; }
.vacio { text-align: center; color: var(--suave); padding: 26px !important; }

/* En celular, las tablas marcadas "tarjetas" se ven como fichas */
@media (max-width: 640px) {
    table.tabla.fichas thead { display: none; }
    table.tabla.fichas tr { display: block; border-bottom: 1px solid var(--borde); padding: 8px 4px; }
    table.tabla.fichas td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 10px; text-align: right; }
    table.tabla.fichas td::before { content: attr(data-t); color: var(--suave); font-size: 12.5px; text-align: left; }
    table.tabla.fichas td.der, table.tabla.fichas td.cen { text-align: right; }
    table.tabla.fichas td.vacio { display: block; }
    table.tabla.fichas td.vacio::before { content: none; }
}

/* Formularios */
label { display: block; font-size: 13px; font-weight: 600; color: #3b4459; margin-bottom: 4px; }
input, select, textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid #ccd3df; border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
input[type=checkbox], input[type=radio] { width: auto; }
.campo { margin-bottom: 12px; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ayuda { font-size: 12.5px; color: var(--suave); margin-top: 4px; font-weight: 400; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros > div { flex: 1; min-width: 140px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--azul); color: #fff; }
.btn:hover { background: var(--azul-osc); }
.btn.sec { background: #fff; color: var(--texto); border-color: #ccd3df; }
.btn.sec:hover { background: var(--fondo); }
.btn.verde { background: var(--verde); } .btn.verde:hover { background: #166d30; }
.btn.rojo { background: #fff; color: var(--rojo); border-color: #f0b8b8; } .btn.rojo:hover { background: var(--rojo-f); }
.btn.wa { background: #25d366; color: #fff; } .btn.wa:hover { background: #1da851; }
.btn.chico { padding: 5px 10px; font-size: 13px; }
.btn.bloque { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* Avisos */
.aviso { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.aviso.ok { background: var(--verde-f); color: #155d2a; border: 1px solid #bfe3c8; }
.aviso.error { background: var(--rojo-f); color: #8e1c1c; border: 1px solid #f3c1c1; }
.aviso.info { background: var(--azul-claro); color: var(--azul-osc); border: 1px solid #c4dcf7; }
.aviso.alerta { background: var(--amarillo-f); color: #7a4e00; border: 1px solid #f1d9a6; }

/* Modales */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15, 25, 45, .45); }
dialog .m-enc { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--borde); font-weight: 700; }
dialog .m-enc button { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--suave); }
dialog .m-cuerpo { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
dialog .m-pie { padding: 12px 18px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }

/* Meses (estado de cuenta) */
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mes { border-radius: 10px; padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--borde); background: #fff; }
.mes b { display: block; font-size: 13px; }
.mes.pagado { background: var(--verde-f); border-color: #bfe3c8; }
.mes.debe { background: var(--rojo-f); border-color: #f3c1c1; }
.mes.parcial { background: var(--amarillo-f); border-color: #f1d9a6; }
.mes.pend { background: #fff; border-style: dashed; }
.mes.futuro { background: var(--azul-claro); border-color: #c4dcf7; }

/* Gráfica de barras sencilla */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.barras .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barras .b .col { width: 100%; max-width: 38px; background: var(--azul); border-radius: 5px 5px 0 0; min-height: 2px; }
.barras .b.actual .col { background: var(--verde); }
.barras .b .l { font-size: 11px; color: var(--suave); margin-top: 4px; white-space: nowrap; }
.barras .b .val { font-size: 10.5px; color: var(--suave); margin-bottom: 2px; white-space: nowrap; }
@media (max-width: 640px) { .barras .b .val { display: none; } }

.progreso { height: 10px; background: #eef0f4; border-radius: 10px; overflow: hidden; }
.progreso > div { height: 100%; background: var(--verde); }

/* Calendario de alberca */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dn { font-size: 11.5px; text-align: center; color: var(--suave); font-weight: 600; padding: 4px 0; }
.cal .d { min-height: 64px; border: 1px solid var(--borde); border-radius: 8px; padding: 4px 6px; font-size: 12px; background: #fff; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: 2px; }
.cal .d.fuera { background: transparent; border-color: transparent; }
.cal .d.hoy { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.cal .d.sel { background: var(--azul-claro); }
.cal .d.pasado { color: #a3abbd; }
.cal .d .num { font-weight: 700; }
.cal .d .p { font-size: 10.5px; border-radius: 4px; padding: 0 4px; }
.cal .d .p.ap { background: var(--verde-f); color: var(--verde); }
.cal .d .p.so { background: var(--amarillo-f); color: var(--amarillo); }
@media (max-width: 640px) { .cal .d { min-height: 48px; padding: 3px; } .cal .d .p { font-size: 9.5px; padding: 0 2px; } }

.solicitud { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.solicitud.ventaja { border-color: #9fd3ad; box-shadow: inset 4px 0 0 var(--verde); }
.solicitud .top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.solicitud .meta { font-size: 12.5px; color: var(--suave); margin-top: 4px; }
.lugar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #eef0f4; font-weight: 700; font-size: 13px; margin-right: 6px; }
.lugar.uno { background: var(--verde); color: #fff; }

/* Ranking */
.ranking li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li:last-child { border-bottom: 0; }
.ranking .barra-r { flex: 1; height: 8px; background: #eef0f4; border-radius: 6px; overflow: hidden; }
.ranking .barra-r div { height: 100%; background: var(--azul); }

/* Login */
.login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(160deg, var(--azul-osc), var(--azul) 60%, #42a5f5); }
.login-caja { background: #fff; width: 100%; max-width: 380px; border-radius: 16px; padding: 28px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-caja .logo { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 auto 10px; }
.login-caja h1 { text-align: center; font-size: 20px; }
.login-caja .sub { text-align: center; }

/* Recibo */
.recibo { max-width: 560px; margin: 20px auto; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 26px; }
.recibo .enc { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 2px solid var(--azul); padding-bottom: 12px; margin-bottom: 14px; }
.recibo .total { font-size: 26px; font-weight: 800; color: var(--verde); }
.recibo dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin: 0 0 14px; font-size: 14px; }
.recibo dt { color: var(--suave); }
.recibo dd { margin: 0; font-weight: 600; }
.sello-anulado { color: var(--rojo); border: 3px solid var(--rojo); display: inline-block; padding: 4px 14px; font-weight: 800; transform: rotate(-6deg); border-radius: 6px; }
@media print {
    .no-imprimir, .barra, .lateral { display: none !important; }
    body { background: #fff; }
    .recibo { border: 0; margin: 0 auto; }
    .contenido { padding: 0; }
}

.mt { margin-top: 14px; } .mb0 { margin-bottom: 0; }
.txt-rojo { color: var(--rojo); } .txt-verde { color: var(--verde); } .txt-suave { color: var(--suave); }
.nowrap { white-space: nowrap; }
.grande { font-size: 20px; font-weight: 700; }