/* ============================= */
/* ESTILO GENERAL */
/* ============================= */

body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    margin:0;
}

/* ============================= */
/* HEADER */
/* ============================= */

header{
    background:#2c3e50;
    color:white;
    padding:15px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

header h1{
    margin:0;
    font-size:22px;
}

header button{
    background:#e74c3c;
    border:none;
    color:white;
    padding:8px 14px;
    border-radius:4px;
    cursor:pointer;
}

/* ============================= */
/* NAV */
/* ============================= */

nav{
    background:#34495e;
    padding:10px;
    display:flex;
    gap:10px;
}

nav button{
    background:#ecf0f1;
    border:none;
    padding:8px 14px;
    border-radius:4px;
    cursor:pointer;
}

nav button:hover{
    background:#d0d7de;
}

/* ============================= */
/* MAIN AREA */
/* ============================= */

main{

flex:1;
padding:20px;
overflow-y:auto;

}

/* ============================= */
/* DASHBOARD */
/* ============================= */

.dashboard-box{
    background:white;
    padding:20px;
    border-radius:6px;
    margin-bottom:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.dashboard-card{
    background:#ecf0f1;
    padding:12px;
    border-radius:4px;
    margin-bottom:10px;
}

.dashboard-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    margin-bottom:16px;
}

.kpi-card{
    background:white;
    padding:14px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.kpi-card strong{
    display:block;
    font-size:13px;
    color:#6b7280;
    margin-bottom:6px;
}

.kpi-card span{
    font-size:22px;
    font-weight:bold;
}

.dashboard-section{
    margin-bottom:16px;
}

.dashboard-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.dashboard-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.dashboard-actions button{
    background:#ecf0f1;
    border:none;
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
}

/* ============================= */
/* FINANZAS */
/* ============================= */

#modulo-finanzas .form-box input,
#modulo-finanzas .form-box select,
#modulo-finanzas .form-box textarea{
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border:1px solid #ccc;
    border-radius:4px;
}

#modulo-finanzas #finInformeMes,
#modulo-finanzas #finInformeAnio{
    max-width:220px;
}

#modulo-finanzas #finPanel{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.fin-chart-card{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.fin-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.fin-card-title{
    font-weight:900;
    font-size:13px;
    color:#111827;
}

.fin-card-sub{
    font-size:11px;
    color:#6b7280;
    margin-top:2px;
}

.fin-card-kpis{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
}

.fin-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#f8fafc;
    font-size:11px;
    font-weight:800;
    color:#111827;
    white-space:nowrap;
}

.fin-chip .muted{
    font-weight:700;
    color:#6b7280;
}

.fin-canvas-wrap{
    position:relative;
    height:240px;
}

.fin-canvas-wrap canvas{
    width:100% !important;
    height:100% !important;
}

.fin-card-foot{
    border-top:1px solid var(--border);
    padding-top:10px;
}

.fin-foot-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.fin-foot-item{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px;
    border:1px solid var(--border);
    background:#f8fafc;
    border-radius:var(--radius-md);
}

.fin-foot-item .k{
    font-size:11px;
    color:#6b7280;
    font-weight:800;
}

.fin-foot-item .v{
    font-size:14px;
    font-weight:900;
    color:#111827;
}

.fin-foot-item .d{
    font-size:11px;
    color:#374151;
    font-weight:700;
}

.fin-delta.up{ color:#065f46; }
.fin-delta.down{ color:#991b1b; }

.fin-metrics-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.fin-metric{
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

.fin-metric .label{
    font-size:12px;
    color:#6b7280;
    font-weight:600;
    margin-bottom:6px;
}

.fin-metric .value{
    font-size:20px;
    font-weight:800;
    color:#111827;
    line-height:1.1;
}

.fin-metric .sub{
    margin-top:6px;
    font-size:11px;
    color:#6b7280;
}

.fin-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.fin-mini-title{
    font-weight:800;
    font-size:12px;
    color:#111827;
    margin-bottom:10px;
}

/* Historial financiero (Finanzas) */
.fin-history-filters{
    display:grid;
    grid-template-columns:160px 160px 1fr auto;
    gap:10px;
    align-items:center;
}

.fin-history-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.fin-history-card{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

.fin-history-main{
    min-width:0;
    flex:1;
}

.fin-history-title{
    font-weight:900;
    color:#0f172a;
    display:flex;
    align-items:center;
    gap:8px;
}

.fin-history-meta{
    margin-top:4px;
    font-size:12px;
    color:#64748b;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fin-history-side{
    flex:0 0 auto;
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.fin-history-amount{
    font-size:16px;
    font-weight:900;
}

.fin-history-amount.ok{ color:#065f46; }
.fin-history-amount.bad{ color:#991b1b; }

.fin-history-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.btn.danger{
    background:#ef4444;
    color:#fff;
    border-color:#ef4444;
}

.btn.danger:hover{
    background:#dc2626;
    border-color:#dc2626;
}

@media (max-width: 900px){
    .fin-history-filters{ grid-template-columns:1fr 1fr; }
    .fin-history-card{ flex-direction:column; align-items:stretch; }
    .fin-history-side{ align-items:flex-start; text-align:left; }
    .fin-history-actions{ justify-content:flex-start; }
}

.fin-bar-row{
    display:grid;
    grid-template-columns:1.2fr 2.2fr 0.9fr;
    gap:10px;
    align-items:center;
    margin-bottom:8px;
}

.fin-bar-label{
    font-size:11px;
    color:#374151;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.fin-bar-track{
    height:10px;
    border-radius:999px;
    background:#eef2ff;
    border:1px solid #e5e7eb;
    overflow:hidden;
}

.fin-bar-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,0.75), rgba(245,158,11,0.75));
}

.fin-bar-value{
    font-size:11px;
    color:#111827;
    font-weight:800;
    text-align:right;
}

.fin-meta{
    font-size:11px;
    color:#6b7280;
}

@media (max-width: 860px){
    .fin-metrics-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .fin-mini-grid{ grid-template-columns:1fr; }
    .fin-bar-row{ grid-template-columns:1.4fr 2fr 0.9fr; }
    .fin-foot-grid{ grid-template-columns:1fr; }
}

/* ============================= */
/* INCUMPLIMIENTOS (REGLAMENTO)  */
/* ============================= */

#modulo-incumplimientos .form-box textarea{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:1px solid #ccc;
    border-radius:4px;
    resize:vertical;
}

/* Banco: Importador PDF (tabla preview) */
.tabla-modern{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabla-modern th,
.tabla-modern td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  vertical-align: top;
}
.tabla-modern th{
  text-align: left;
  background: rgba(15, 23, 42, 0.04);
  font-weight: 700;
}
.tabla-modern td[contenteditable="true"]{
  outline: none;
}
.tabla-modern td[contenteditable="true"]:focus{
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.04);
}

/* Invertir tamaños: descripción más grande, nombre más compacto */
#modulo-incumplimientos #reglDescripcion{
    min-height:120px;
}

#modulo-incumplimientos #reglRegistradoPor{
    width:55%;
    max-width:520px;
}

@media (max-width: 700px){
    #modulo-incumplimientos #reglRegistradoPor{
        width:100%;
        max-width:none;
    }
}

@media (max-width: 900px){
    .dashboard-grid-2{
        grid-template-columns:1fr;
    }
}

/* ============================= */
/* TAREAS (KANBAN / LISTA)       */
/* ============================= */

.task-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.task-toolbar-left,
.task-toolbar-right{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.task-toolbar-right .btn.active{
    background:var(--primary);
    color:white;
}

.task-filtros .task-filtros-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
    margin-top:10px;
}

.task-kanban{
    display:grid;
    grid-template-columns:repeat(4, minmax(220px, 1fr));
    gap:12px;
}

.task-column{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    min-height:380px;
}

.task-column-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 12px;
    background:#ffffff;
    border-bottom:1px solid var(--border);
}

.task-column-title{
    font-weight:700;
    color:#0f172a;
}

.task-column-count{
    background:#eef2ff;
    color:#1e3a8a;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.task-column-body{
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.task-card{
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    cursor:grab;
}

.task-card:active{cursor:grabbing;}

.task-card-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px 0 10px;
}

.task-title{
    font-weight:700;
    color:#0f172a;
    font-size:14px;
    line-height:1.25;
}

.task-badges{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-end;
}

.task-card-body{
    padding:8px 10px 10px 10px;
}

.task-category{
    font-size:12px;
    color:#475569;
    margin-bottom:4px;
}

.task-meta-line{
    font-size:12px;
    color:#475569;
    margin-bottom:6px;
}

.task-responsables{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.chip{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    background:#f1f5f9;
    color:#334155;
    border:1px solid #e2e8f0;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.badge{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    background:#e2e8f0;
    color:#0f172a;
}

.badge-danger{background:#fee2e2;color:#991b1b;}
.badge-warning{background:#fef9c3;color:#854d0e;}
.badge-success{background:#dcfce7;color:#166534;}
.badge-info{background:#dbeafe;color:#1e40af;}
.badge-muted{background:#f1f5f9;color:#475569;}

.task-progress{
    width:100%;
    height:6px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}

.task-progress-bar{
    height:100%;
    background:linear-gradient(90deg, #2563eb, #22c55e);
}

.task-progress-text{
    margin-top:6px;
    font-size:12px;
    color:#475569;
}

.task-empty{
    color:#64748b;
    font-size:13px;
    padding:12px;
    text-align:center;
}

.task-list .task-table{
    width:100%;
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.task-list .task-table td,
.task-list .task-table th{
    padding:10px;
    border-bottom:1px solid #eef2f7;
}

.task-empty-row{
    text-align:center;
    color:#64748b;
    padding:16px;
}

.task-modal{width:min(620px, 92vw);}
.task-detail{width:min(900px, 94vw);}

.task-checklist-add{
    display:flex;
    gap:8px;
    align-items:center;
}

.task-checklist-add input{flex:1;}

.task-checklist-list{
    list-style:none;
    padding-left:0;
    margin:8px 0 0 0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.task-checklist-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
}

.task-check-item{
    display:flex;
    gap:10px;
    align-items:center;
}

.btn.mini{
    padding:6px 10px;
    font-size:12px;
}

.task-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:10px;
}

.task-meta .task-meta-row{
    margin:6px 0;
    color:#334155;
}

.task-meta .task-desc{
    padding:10px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
}

.task-evidencia-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
}

.task-evidencia-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:white;
}

.task-evidencia-file{
    width:48px;
    height:48px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2ff;
    color:#1e3a8a;
    font-weight:800;
    border:1px solid #e0e7ff;
}

.task-evidencia-meta{flex:1;}
.task-evidencia-name{font-weight:700;color:#0f172a;}
.task-evidencia-sub{font-size:12px;color:#64748b;margin:4px 0 8px 0;}

.task-comentarios .task-comment,
.task-bitacora .task-log{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px;
    background:#fff;
    margin-top:10px;
}

.task-comment-meta,
.task-log-meta{
    font-size:12px;
    color:#64748b;
    margin-bottom:6px;
}

.task-comment-body,
.task-log-body{
    color:#0f172a;
    font-size:13px;
    white-space:pre-wrap;
}

.task-weekdays{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:8px;
}

@media (max-width: 1100px){
    .task-kanban{grid-template-columns:repeat(2, minmax(220px, 1fr));}
}

@media (max-width: 700px){
    .task-kanban{grid-template-columns:1fr;}
    .task-detail-grid{grid-template-columns:1fr;}
}

/* ============================= */
/* FORMULARIOS */
/* ============================= */

.form-box{
    background:white;
    padding:20px;
    border-radius:6px;
    margin-bottom:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.form-box input,
.form-box select{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:1px solid #ccc;
    border-radius:4px;
}

.form-box button{
    background:#2ecc71;
    border:none;
    padding:10px;
    color:white;
    border-radius:4px;
    cursor:pointer;
}

/* Solicitudes de pago a proveedor */
.pago-prov-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.pago-prov-form textarea,
.pago-prov-form .fin-meta,
.pago-prov-form button,
.pago-prov-form input[type="file"]{
    grid-column:1 / -1;
}

@media (max-width: 900px){
    .pago-prov-form{ grid-template-columns:1fr; }
}

/* ============================= */
/* LISTAS */
/* ============================= */

.list-box{
    background:white;
    padding:20px;
    border-radius:6px;
    margin-bottom:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* ============================= */
/* CHECKLIST OPERATIVO */
/* ============================= */

.checklist-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.checklist-actions{
    display:flex;
    gap:10px;
}

.ops-toolbar{
    background:white;
    padding:12px 14px;
    border-radius:6px;
    margin-bottom:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.ops-filtros{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
}

.ops-alertas{
    margin-top:10px;
    font-size:13px;
    color:#0f172a;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.ops-alerta-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #e2e8f0;
    background:#ffffff;
    font-weight:800;
    color:#0f172a;
}

.ops-alerta-pill.ops-alerta-warn{
    border-color:#fdba74;
    background:#fff7ed;
    color:#9a3412;
}

.ops-alerta-pill.ops-alerta-ok{
    border-color:#86efac;
    background:#f0fdf4;
    color:#166534;
}

.ops-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:140px;
}

.ops-field label{
    font-size:12px;
    color:#64748b;
    font-weight:600;
}

.ops-field-grow{
    flex:1;
    min-width:220px;
}

.ops-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-bottom:10px;
}

.ops-weekdays{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    font-size:12px;
    color:#334155;
}

.ops-weekdays label{
    display:flex;
    align-items:center;
    gap:6px;
    background:#f1f5f9;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid #e2e8f0;
}

.ops-pill{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#0f172a;
    white-space:nowrap;
}

.ops-prio-alta{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.ops-prio-media{ background:#ffedd5; border-color:#fed7aa; color:#9a3412; }
.ops-prio-baja{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }

.ops-evi{
    font-size:12px;
    color:#475569;
}

.ops-vencida td{
    background:#fff7ed;
}

.estado-cancelado{
    background:#f1f5f9;
    color:#334155;
}

.ops-kanban{
    display:grid;
    grid-template-columns:repeat(4, minmax(220px, 1fr));
    gap:12px;
}

.ops-col{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    overflow:hidden;
}

.ops-col-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    background:#ffffff;
    border-bottom:1px solid #e2e8f0;
}

.ops-col-title{
    font-weight:800;
    color:#0f172a;
    font-size:13px;
}

.ops-col-count{
    font-weight:800;
    font-size:12px;
    color:#475569;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    border-radius:999px;
    padding:2px 8px;
}

.ops-col-body{
    padding:10px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ops-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:10px 10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    cursor:grab;
}

.ops-card-vencida{
    border-color:#fdba74;
    box-shadow:0 2px 10px rgba(234,88,12,0.12);
}

.ops-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.ops-card-title{
    font-weight:800;
    color:#0f172a;
    font-size:13px;
    line-height:1.2;
}

.ops-card-meta{
    margin-top:6px;
    font-size:12px;
    color:#475569;
}

.ops-calendar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.ops-calendar-title{
    font-weight:800;
    color:#0f172a;
}

.ops-cal-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:10px;
}

.ops-cal-headcell{
    font-size:12px;
    font-weight:800;
    color:#475569;
    text-align:center;
}

.ops-cal-cell{
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:8px 8px;
    min-height:92px;
    background:#ffffff;
    cursor:pointer;
}

.ops-cal-empty{
    background:transparent;
    border:none;
    cursor:default;
}

.ops-cal-day{
    font-weight:900;
    color:#0f172a;
    font-size:12px;
}

.ops-cal-kpi{
    margin-top:4px;
    font-size:11px;
    color:#64748b;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.ops-kpi-ok{ color:#166534; font-weight:800; }
.ops-kpi-warn{ color:#9a3412; font-weight:800; }

.ops-cal-items{
    margin-top:6px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ops-cal-item{
    font-size:10px;
    padding:3px 6px;
    border-radius:8px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#334155;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.ops-cal-more{
    font-size:10px;
    color:#475569;
    font-weight:800;
}

.table-responsive{
    width:100%;
    overflow-x:auto;
}

/* Tabla de Condóminos: encabezado fijo y scroll solo del cuerpo */
#modulo-condominos .table-responsive{
    max-height:65vh;
    overflow-y:auto;
}

/* Cartera vencida: mismo layout que Condóminos */
#modulo-cartera .table-responsive{
    max-height:65vh;
    overflow-y:auto;
}

#tablaUsuarios{
    border-collapse:separate;
    border-spacing:0;
}

#tablaUsuarios thead th{
    position:sticky;
    top:0;
    z-index:3;
    background:#f1f3f5;
}

#tablaCartera{
    border-collapse:separate;
    border-spacing:0;
}

#tablaCartera thead th{
    position:sticky;
    top:0;
    z-index:3;
    background:#f1f3f5;
}

#tablaChecklist{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

#tablaChecklist th,
#tablaChecklist td{
    border:1px solid #e1e4e8;
    padding:8px;
    text-align:left;
    font-size:14px;
    vertical-align:top;
}

#tablaChecklist thead{
    background:#f1f3f5;
}

.estado-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:12px;
    font-size:12px;
    font-weight:bold;
}

.estado-pendiente{
    background:#fff4d6;
    color:#8a5a00;
}

.estado-autorizado{
    background:#e7f2ff;
    color:#1f5a99;
}

.estado-pagado{
    background:#e6f7e9;
    color:#1f7a3a;
}

.estado-realizado{
    background:#e6f7e9;
    color:#1f7a3a;
}

.thumb{
    width:48px;
    height:48px;
    border-radius:6px;
    object-fit:cover;
    border:1px solid #ddd;
    cursor:pointer;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:50;
}

.modal.hidden{
    display:none;
}

.modal-content{
    background:white;
    padding:20px;
    border-radius:8px;
    width:min(520px, 92vw);
    max-height:90vh;
    overflow:auto;
}

.modal-content h3{
    margin-top:0;
}

.modal-content label{
    display:block;
    margin-top:12px;
    font-weight:600;
}

.modal-content input,
.modal-content select,
.modal-content textarea{
    width:100%;
    padding:8px;
    margin-top:6px;
    border:1px solid #ccc;
    border-radius:6px;
}

.form-actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.convenio-config{
    margin-top:12px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:10px;
    background:#fafafa;
}

.convenio-config summary{
    cursor:pointer;
    font-weight:600;
}

.convenio-preview{
    margin-top:12px;
    padding:12px;
    white-space:normal;
}

.convenio-preview ul{
    margin:8px 0 0 16px;
}

.convenio-preview .muted{
    opacity:0.8;
}

.modal-foto{
    background:white;
    padding:12px;
    border-radius:8px;
    max-width:92vw;
    max-height:92vh;
}

.modal-foto img{
    max-width:88vw;
    max-height:88vh;
    display:block;
}

/* ============================= */
/* ERP MODERNO - REFINADO SOLO CSS */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --border:#e5e7eb;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:0 6px 16px rgba(15,23,42,0.08);
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:14px;
}

/* ============================= */
/* BI DASHBOARD (SaaS / BI style) */
/* ============================= */

body.theme-dark{
    --bg:#0b1220;
    --surface:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --primary:#3b82f6;
    --primary-dark:#2563eb;
    --border:rgba(148,163,184,0.18);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
    --shadow-md:0 12px 30px rgba(0,0,0,0.35);
}

.bi-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin:10px 0 16px 0;
    position:relative;
    z-index:2;
}

.bi-toolbar .btn{
    position:relative;
    z-index:3;
    cursor:pointer;
}

.bi-status{
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(148,163,184,0.10);
    user-select:text;
}
.bi-status.ok{
    color:var(--success);
    background:rgba(22,163,74,0.10);
    border-color:rgba(22,163,74,0.25);
}
.bi-status.err{
    color:var(--danger);
    background:rgba(220,38,38,0.10);
    border-color:rgba(220,38,38,0.25);
}

.bi-toolbar-left{
    display:flex;
    align-items:flex-end;
    gap:1cm;
    flex-wrap:nowrap;
}

.bi-toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.bi-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.bi-field label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}
.bi-field input,
.bi-field select{
    height:36px;
    padding:6px 10px;
    background:var(--surface);
    color:var(--text);
    margin-bottom:0;
    width:100%;
    box-sizing:border-box;
}

@media (max-width: 920px){
    .bi-toolbar-left{
        flex-wrap:wrap;
    }
}

.bi-toolbar-left .btn.primary{
    white-space:nowrap;
}

.bi-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    margin-bottom:14px;
}

.bi-kpi{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease;
    position:relative;
    overflow:hidden;
    animation:biFadeUp .28s ease both;
}
.bi-kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.bi-kpi .bi-kpi-left{display:flex; flex-direction:column; gap:6px;}
.bi-kpi .bi-kpi-label{font-size:12px; color:var(--muted); font-weight:600;}
.bi-kpi .bi-kpi-value{font-size:26px; font-weight:800; letter-spacing:-.02em;}
.bi-kpi .bi-kpi-delta{font-size:12px; font-weight:700;}
.bi-kpi .bi-kpi-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(37,99,235,0.12);
    border:1px solid rgba(37,99,235,0.25);
}
.bi-kpi .bi-kpi-icon svg{width:22px; height:22px; fill:var(--primary);}
.bi-kpi.accent .bi-kpi-icon{background:rgba(245,158,11,0.14); border-color:rgba(245,158,11,0.3);}
.bi-kpi.accent .bi-kpi-icon svg{fill:var(--warning);}

.bi-kpi.success .bi-kpi-icon{background:rgba(22,163,74,0.14); border-color:rgba(22,163,74,0.28);}
.bi-kpi.success .bi-kpi-icon svg{fill:var(--success);}
.bi-kpi.warning .bi-kpi-icon{background:rgba(245,158,11,0.14); border-color:rgba(245,158,11,0.30);}
.bi-kpi.warning .bi-kpi-icon svg{fill:var(--warning);}
.bi-kpi.danger .bi-kpi-icon{background:rgba(220,38,38,0.14); border-color:rgba(220,38,38,0.28);}
.bi-kpi.danger .bi-kpi-icon svg{fill:var(--danger);}

.bi-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:14px;
}
.bi-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-sm);
    padding:14px;
    animation:biFadeUp .28s ease both;
}
.bi-card:hover{box-shadow:var(--shadow-md);}
.bi-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.bi-title{font-weight:800; letter-spacing:-.01em;}
.bi-subtitle{font-size:12px; color:var(--muted); margin-top:3px;}
.bi-chip{
    font-size:12px;
    color:var(--muted);
    background:rgba(148,163,184,0.10);
    border:1px solid var(--border);
    padding:6px 10px;
    border-radius:999px;
    white-space:nowrap;
}
.bi-chart{height:260px;}
.bi-chart canvas{width:100% !important; height:100% !important;}

.bi-donut-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:10px;
}
.bi-donut{
    position:relative;
    background:rgba(148,163,184,0.06);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    min-height:180px;
}
.bi-donut canvas{width:100% !important; height:140px !important;}
.bi-donut-center{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:20px;
    font-weight:900;
    pointer-events:none;
}
.bi-donut-caption{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    text-align:center;
}

.bi-calendar{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:6px;
    margin-top:8px;
}
.bi-cal-h{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    font-weight:700;
    padding:2px 0;
}
.bi-cal-d{
    height:34px;
    border-radius:10px;
    border:1px solid var(--border);
    background:rgba(148,163,184,0.05);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:var(--text);
    position:relative;
}
.bi-cal-d.active{
    background:rgba(37,99,235,0.14);
    border-color:rgba(37,99,235,0.35);
}
.bi-cal-d .dot{
    position:absolute;
    bottom:6px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--warning);
}

.bi-feed{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:190px;
    overflow:auto;
    padding-right:4px;
}
.bi-feed-item{
    border:1px solid var(--border);
    background:rgba(148,163,184,0.05);
    border-radius:12px;
    padding:10px;
}
.bi-feed-item .t{
    font-size:12px;
    font-weight:800;
}
.bi-feed-item .s{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

/* =========================
   Cotizaciones (comparador)
========================= */
.cotz-provider-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
    align-items:end;
}
.cotz-provider-form *{box-sizing:border-box;}
.cotz-provider-form .btn{
    height:36px;
    justify-self:end;
    width:auto;
}

.cotz-weights-grid{
    display:flex;
    gap:10px;
    align-items:end;
    flex-wrap:wrap;
    margin-top:8px;
}
.cotz-weights-grid .bi-field{min-width:150px;}

.cotz-table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:12px;
}
.cotz-table th,
.cotz-table td{
    padding:10px 10px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    vertical-align:top;
}
.cotz-table th{
    background:rgba(148,163,184,0.10);
    color:var(--muted);
    font-weight:800;
    text-align:left;
}
.cotz-table tr:last-child td{border-bottom:none;}
.cotz-right{text-align:right;}
.cotz-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    border:1px solid var(--border);
    background:rgba(148,163,184,0.06);
    color:var(--text);
}
.cotz-badge.ok{background:rgba(22,163,74,0.12); border-color:rgba(22,163,74,0.25); color:var(--success);}
.cotz-badge.warn{background:rgba(245,158,11,0.14); border-color:rgba(245,158,11,0.30); color:var(--warning);}
.cotz-badge.best{background:rgba(37,99,235,0.14); border-color:rgba(37,99,235,0.30); color:var(--primary);}

.cotz-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.cotz-select-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}
.cotz-select-row *{box-sizing:border-box;}
.cotz-select-row select,
.cotz-select-row input{height:36px; padding:6px 10px; max-width:100%;}
.cotz-select-row select{flex:1 1 280px; min-width:240px;}
.cotz-select-row input{flex:2 1 360px; min-width:240px;}

.cotz-history-grid{
    display:grid;
    grid-template-columns:1.3fr 0.7fr;
    gap:12px;
}
.cotz-history,
.cotz-ranking{
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(148,163,184,0.05);
    padding:10px;
    min-height:180px;
    overflow:auto;
}
.cotz-notes{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:10px;
    align-items:end;
}
.cotz-notes *{box-sizing:border-box;}
.cotz-notes input[type="file"]{max-width:100%;}
.cotz-notes .btn{
    grid-column:1 / -1;
    justify-self:end;
    height:36px;
    width:auto;
}
@media (max-width: 980px){
    .cotz-notes .bi-field{grid-column:span 12 !important;}
    .cotz-notes .btn{grid-column:span 12;}
}
.cotz-item{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
}
.cotz-item .t{font-weight:900;}
.cotz-item .s{font-size:12px; color:var(--muted); margin-top:4px;}
.cotz-item .a{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.cotz-item .a .btn{height:32px; padding:6px 10px;}

@media (max-width: 980px){
    .cotz-history-grid{grid-template-columns:1fr;}
    .cotz-select-row input{min-width:220px;}
}

.bi-span-8{grid-column:span 8;}
.bi-span-4{grid-column:span 4;}

@keyframes biFadeUp{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}

@media (max-width: 1100px){
    .bi-kpis{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .bi-span-8, .bi-span-4{grid-column:span 12;}
}

body{
    font-family:'Inter', Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
}

main{padding:24px;}

header{
    background:#1f2a44;
    padding:16px 24px;
}

header h1{font-weight:600;}

header button{
    background:var(--danger);
    border-radius:var(--radius-sm);
    transition:all .2s ease;
}
header button:hover{filter:brightness(.95);}

.sidebar{
    background:#1f2a44;
}

.sidebar button{
    background:#24324f;
    border-radius:var(--radius-sm);
    transition:all .2s ease;
}
.sidebar button:hover{background:#2b3c5f;}
.sidebar button.activo{background:var(--primary);}

.dashboard-box,
.form-box,
.list-box,
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.dashboard-card{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
}

.kpi-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

input, select, textarea{
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    transition:border .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

button,
.form-box button,
button.primary,
.usuarios-actions button,
.dashboard-actions button,
.btn{
    border-radius:var(--radius-sm);
    transition:all .2s ease;
}

button.primary,
.form-box button,
.usuarios-actions button.primary{
    background:var(--primary);
    color:white;
}
button.primary:hover,
.form-box button:hover,
.usuarios-actions button.primary:hover{
    background:var(--primary-dark);
}

.danger{
    background:var(--danger);
    color:white;
}
.danger:hover{filter:brightness(.95);}

.btn{
    background:#eef2ff;
}
.btn:hover{background:#e0e7ff;}

table{
    border-collapse:collapse;
}
table th{
    background:#f8fafc;
    color:#334155;
    font-weight:600;
}
table tr:hover td{
    background:#f9fafb;
}

#tablaUsuarios tr.fila-seleccionada td,
#tablaCartera tr.fila-seleccionada td{
    background:rgba(37,99,235,0.12);
}

.modal{
    background:rgba(15,23,42,0.45);
}
.modal-content{
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}

.alertas-box{
    border-radius:var(--radius-sm);
}

nav button{
    background:#eef2ff;
    color:#1e3a8a;
    font-weight:600;
}
nav button.activo{
    background:var(--primary);
    color:white;
}

/* ============================= */
/* CONTROL USUARIOS ALBERCA */
/* ============================= */

.usuarios-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.usuarios-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.usuarios-actions button{
    background:#ecf0f1;
    border:none;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}

.usuarios-actions button.primary{
    background:#2ecc71;
    color:white;
}

.alertas-box{
    background:#fff7cc;
    border:1px solid #f0e1a0;
    padding:10px 12px;
    border-radius:6px;
    margin-bottom:12px;
    font-size:14px;
}

.alertas-box ul{
    margin:0;
    padding-left:18px;
}

#tablaUsuarios{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:1400px;
}

#tablaUsuarios th,
#tablaUsuarios td{
    border:1px solid #e1e4e8;
    padding:8px;
    text-align:left;
    font-size:14px;
    vertical-align:top;
}

#tablaUsuarios thead{
    background:#f1f3f5;
}

.btn{
    border:none;
    background:#ecf0f1;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    margin:2px 0;
}

/* ============================= */
/* INSUMOS PROFESIONAL */
/* ============================= */

#tablaInsumos{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

#tablaInsumos th,
#tablaInsumos td{
    border:1px solid #e1e4e8;
    padding:8px;
    text-align:left;
    font-size:14px;
}

#tablaInsumos thead{
    background:#f1f3f5;
}

/* ============================= */
/* COMPRAS */
/* ============================= */

.tabla-compras{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.tabla-compras th,
.tabla-compras td{
    border:1px solid #e1e4e8;
    padding:8px;
    text-align:left;
}

.tabla-compras thead{
    background:#f1f3f5;
}

.detalle-compras td{
    background:#fafafa;
    padding:12px;
}

.compra-detalle h4{
    margin:12px 0 8px 0;
}

.compra-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px 16px;
    font-size:14px;
}

.compra-seccion{
    margin-top:10px;
    padding-top:8px;
    border-top:1px dashed #ddd;
}

.compra-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
    margin-top:8px;
    align-items:end;
}

.compra-form input,
.compra-form select,
.compra-form button{
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

.compra-form button{
    white-space:nowrap;
}

.tabla-cotizaciones-wrap{
    width:100%;
    overflow-x:auto;
}

.tabla-cotizaciones{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    margin-top:8px;
}

.tabla-cotizaciones th,
.tabla-cotizaciones td{
    border:1px solid #e6e6e6;
    padding:6px;
    text-align:left;
}

@media (max-width: 900px){
    .compra-grid{
        grid-template-columns:1fr;
    }

    .compra-form{
        grid-template-columns:1fr;
    }
}

/* ============================= */
/* ITEMS QUIMICOS */
/* ============================= */

.quimico-item{
    border:1px solid #ddd;
    padding:10px;
    margin-bottom:10px;
    border-radius:4px;
}

/* colores estado */

.rojo{
    background:#ffe5e5;
}

.amarillo{
    background:#fff7cc;
}

.verde{
    background:#e7f9e7;
}

.azul{
    background:#e5f0ff;
}

/* ============================= */
/* LOGIN */
/* ============================= */

.login-box{
    background:white;
    width:300px;
    margin:120px auto;
    padding:30px;
    border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    text-align:center;
}

.login-box input{
    width:100%;
    padding:10px;
    margin-bottom:10px;
}

.login-box button{
    width:100%;
    padding:10px;
    background:#3498db;
    border:none;
    color:white;
}

/* ============================= */

.hidden{
    display:none;
}

/* ---------- LAYOUT GENERAL ---------- */

body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    background:#f4f6f9;
}

/* CONTENEDOR PRINCIPAL */

.app-container{
display:flex;
height:100vh;
width:100%;
}

/* HEADER */

.header{
    background:#154c79;
    color:white;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header h1{
    margin:0;
    font-size:26px;
}

.logout-btn{
    background:white;
    border:none;
    padding:10px 18px;
    cursor:pointer;
    font-weight:bold;
}

/* MENU */

.menu{
    background:#e6e9ed;
    padding:10px;
    display:flex;
    gap:10px;
}

.menu button{
    padding:8px 14px;
    border:1px solid #ccc;
    background:white;
    cursor:pointer;
}

/* CONTENIDO */

.main-content{
    flex:1;
    overflow:auto;
    padding:20px;
}

/* SECCIONES */

.section{
    margin-bottom:25px;
}

.section h2{
    margin-bottom:10px;
    border-bottom:2px solid #ddd;
    padding-bottom:5px;
}

/* GRID DE TARJETAS */

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* TARJETAS */

.card{

background:white;
padding:15px;
border-radius:6px;
margin-bottom:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);

}

/* ============================= */
/* MOBILIARIO */
/* ============================= */

.mobiliario-card{
    background:white;
    border:1px solid #e1e4e8;
    border-radius:6px;
    padding:12px;
    margin-bottom:12px;
}

.mobiliario-top{
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
}

.mobiliario-info{
    flex:1;
    min-width:220px;
}

.mobiliario-foto{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #ddd;
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:#666;
    text-align:center;
}

.mobiliario-qr{
    width:90px;
    height:90px;
    object-fit:contain;
    border-radius:6px;
    border:1px solid #ddd;
    background:#fff;
}

.mobiliario-foto-placeholder{
    padding:6px;
}

.mobiliario-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 16px;
    margin-top:10px;
    font-size:14px;
}

.estado-badge{
    padding:4px 10px;
    border-radius:12px;
    font-size:12px;
    font-weight:bold;
    height:max-content;
}

.estado-excelente{
    background:#e6f7e9;
    color:#1f7a3a;
}

.estado-bueno{
    background:#e7f2ff;
    color:#1f5a99;
}

.estado-regular{
    background:#fff4d6;
    color:#8a5a00;
}

.estado-danado{
    background:#ffe5e5;
    color:#9b1c1c;
}

.estado-fuera{
    background:#f2f2f2;
    color:#555;
}

.estado-default{
    background:#f5f5f5;
    color:#555;
}

@media (max-width: 700px){
    .mobiliario-grid{
        grid-template-columns:1fr;
    }
}

/* FORMULARIOS */

input, select{
    width:100%;
    padding:8px;
    margin-bottom:10px;
}

button.primary{
    background:#154c79;
    color:white;
    border:none;
    padding:10px;
    cursor:pointer;
}

.hidden{

display:none;

}

.modulo{

margin-top:20px;

}

nav button{

padding:10px 16px;
border:none;
background:#ecf0f1;
cursor:pointer;
border-radius:6px;
margin-right:5px;

}

nav button:hover{

background:#dcdde1;

}

nav button.activo{

background:#3498db;
color:white;
font-weight:bold;

}

/* ESTRUCTURA GENERAL */

.app-container{

display:flex;
height:100vh;
font-family:Arial, Helvetica, sans-serif;

}

/* SIDEBAR */

.sidebar{

width:220px;
background:#2c3e50;
color:white;
display:flex;
flex-direction:column;
padding:20px;
flex-shrink:0;

}

.logo{

margin-bottom:20px;
text-align:center;

}

.sidebar button{

background:none;
border:none;
color:white;
padding:12px;
text-align:left;
cursor:pointer;
border-radius:5px;
margin-bottom:5px;

}

.sidebar button:hover{

background:#34495e;

}

.sidebar button.activo{

background:#3498db;

}

.logout{

margin-top:auto;
background:#e74c3c;

}

/* AREA PRINCIPAL */

.main-content{

flex:1;
display:flex;
flex-direction:column;
overflow:hidden;

}

.topbar{

background:white;
padding:15px;
border-bottom:1px solid #ddd;

}

main{

padding:20px;
overflow-y:auto;

}

@media (max-width: 900px){
  .ops-grid{ grid-template-columns:1fr; }
  .ops-kanban{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 600px){
  .ops-kanban{ grid-template-columns:1fr; }
}

/* ============================= */
/* BITÁCORA AGUA (OPERATIVO V2)  */
/* ============================= */

.agua-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.agua-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.agua-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.agua-toolbar{
  margin-bottom:12px;
}
.agua-filters{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  align-items:end;
}
.agua-alertas{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.agua-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(148,163,184,0.10);
  font-size:12px;
  font-weight:800;
  color:var(--text);
}
.agua-pill.ok{ background:rgba(22,163,74,0.12); border-color:rgba(22,163,74,0.25); }
.agua-pill.warn{ background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.25); }
.agua-pill.bad{ background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.25); }

.agua-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}
.agua-kpi{
  padding:14px;
}
.agua-kpi-label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.agua-kpi-value{
  font-size:22px;
  font-weight:900;
  margin-top:6px;
  color:var(--text);
  line-height:1.1;
}
.agua-kpi-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.agua-grid-2{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:12px;
  align-items:start;
}

.agua-section-title{
  font-weight:900;
  color:var(--text);
  margin-bottom:10px;
}
.agua-section-mini{
  font-weight:900;
  color:var(--text);
  margin-bottom:8px;
  font-size:12px;
}
.agua-form-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.agua-form-grid label{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}
.agua-form-grid textarea{
  width:100%;
}
.agua-form-span2{ grid-column:span 2; }
.agua-form-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.agua-checks{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.agua-check{
  font-size:13px;
  color:var(--text);
  font-weight:700;
}
.agua-hint{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}
.agua-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}

.agua-historial{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.agua-item{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  padding:12px;
  box-shadow:var(--shadow-sm);
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.agua-item .meta{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-top:4px;
}
.agua-item .title{
  font-weight:900;
  color:var(--text);
}
.agua-item .right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.agua-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--border);
  background:rgba(148,163,184,0.10);
}
.agua-badge.ok{ background:rgba(22,163,74,0.12); border-color:rgba(22,163,74,0.25); }
.agua-badge.warn{ background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.25); }
.agua-badge.bad{ background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.25); }
.agua-photos{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.agua-photos img{
  width:52px;
  height:52px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  cursor:pointer;
}
.agua-item .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 1100px){
  .agua-filters{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .agua-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .agua-grid-2{ grid-template-columns:1fr; }
  .agua-form-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .agua-form-span2{ grid-column:span 2; }
}

/* ============================= */
/* ACCESOS (VISITAS)             */
/* ============================= */

.acc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.acc-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.acc-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.acc-filters{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:end;
}
.acc-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:4px;
  font-weight:800;
  color:var(--muted);
}
.acc-status{
  grid-column: 1 / -1;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.acc-kpis{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}
.acc-kpi{
  padding:12px 14px;
}
.acc-kpi-label{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.acc-kpi-value{
  margin-top:6px;
  font-size:24px;
  font-weight:900;
  color:var(--text);
}
.acc-kpi-sub{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  font-weight:800;
}
.acc-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.acc-section-title{
  font-weight:900;
  color:var(--text);
  margin-bottom:10px;
}
.acc-chart{
  height:220px;
}
.acc-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.acc-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,0.06);
  font-weight:900;
}
.acc-top-row span{ color:var(--text); }
.acc-top-row strong{ color:var(--text); }
.acc-muted{ color:var(--muted); font-weight:800; font-size:12px; }
.acc-assign{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.acc-assign-row{
  display:grid;
  grid-template-columns: 1.05fr 0.35fr 0.7fr 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,0.06);
}
.acc-assign-row .acc-tag{
  font-weight:950;
  letter-spacing:0.2px;
}
.acc-assign-row .acc-count{
  font-weight:900;
  color:var(--muted);
  text-align:right;
  white-space:nowrap;
}
.acc-assign-row input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-weight:900;
  outline:none;
}
.acc-assign-row select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-weight:900;
  outline:none;
}
.acc-assign-row input:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.acc-assign-row select:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.acc-assign-empty{
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}
@media (max-width: 820px){
  .acc-assign-row{
    grid-template-columns: 1fr 0.55fr 1fr;
  }
  .acc-assign-row .btn{
    grid-column: 1 / -1;
    justify-content:center;
  }
}
.acc-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}
.acc-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
  background:#fff;
}
.acc-table th, .acc-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
}
.acc-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(248,250,252,0.98);
  color:var(--muted);
  font-weight:900;
}
.acc-row-blocked td{
  background: rgba(239,68,68,0.08);
  border-bottom-color: rgba(239,68,68,0.22);
}
.acc-row-blocked td:first-child{
  border-left: 4px solid rgba(239,68,68,0.45);
}
.acc-row-blocked td:nth-child(4){
  text-decoration: underline;
  text-decoration-color: rgba(239,68,68,0.75);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.acc-foot{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.acc-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:11px;
  font-weight:900;
}
.acc-badge.warn{
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.25);
  color:#854d0e;
}

@media (max-width: 1100px){
  .acc-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .acc-grid{ grid-template-columns:1fr; }
  .acc-filters{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}