/* ===== distritos.css =====
   Solo layout y componentes exclusivos de Distritos.
   Hero, KPI cards y shell viven en assets/css/module-patterns.css
   ========================================================= */

/* Grid de cards de distritos */
.cl-distritos-grid,
.distritos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

/* Card de cada distrito */
.cl-distrito-card {
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-distrito-numero {
    font-size: 12px;
    font-weight: 700;
    color: var(--cielo);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cl-distrito-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.cl-distrito-estados {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.cl-estado-badge {
    font-size: 11px;
    background: var(--panel-2);
    border: 1px solid var(--stroke);
    border-radius: 6px;
    padding: 2px 8px;
    color: var(--text-muted);
}

/* Formulario de distrito — layout exclusivo del módulo */
.distrito-form { display: grid; gap: 14px; }

/* Altura de textarea específica de este módulo */
.distrito-card .ui-field > textarea { min-height: 130px; }

/* ===== Responsive ===== */

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

/* ===== Light mode ===== */

body.light .cl-distrito-card {
    background: rgba(255,255,255,.82);
    border-color: var(--stroke);
}

/* La página completa vive ahora dentro de la sección oficial head/body */
.distritos-section-card .ui-module-body{
    gap:18px;
}
.distrito-card .ui-card-body{
    padding:0;
}
.distrito-kpis{
    gap:8px;
    flex-wrap:wrap;
}
.distrito-kpis span{
    display:inline-flex;
    gap:4px;
    align-items:baseline;
}