:root {
    --progresemos-green: #006b12;
    --progresemos-green-dark: #006b12;
    --progresemos-green-deep: #006b12;
    --progresemos-yellow: #fff200;
    --progresemos-yellow-soft: #fffbd1;
    --progresemos-bg: #f6faef;
    --progresemos-line: #d9e7c8;

    --rojo: var(--progresemos-green);
    --rojo-2: var(--progresemos-green-dark);
    --red: var(--progresemos-green);
    --red-dark: var(--progresemos-green-dark);
    --azul: var(--progresemos-green-dark);
    --azul-osc: var(--progresemos-green-deep);
    --azulOsc: var(--progresemos-green-deep);
    --blue: var(--progresemos-green);
    --blue2: var(--progresemos-green-dark);
    --primary: var(--progresemos-green-dark);
    --primary-2: var(--progresemos-green);
    --fondo: var(--progresemos-bg);
    --bg: var(--progresemos-bg);
    --line: var(--progresemos-line);
    --borde: var(--progresemos-line);
    --sidebar: 244px;
    --sidebar-mini: 76px;
    --radius: 16px;
}

body {
    background-color: var(--progresemos-bg);
    font-size: 13px;
}

.sidebar,
.hero,
.topbar-card,
.header-card,
.page-head,
.panel-head,
.modal-head,
.photo-modal-head,
.flash-modal-head,
.notice-head,
.photo-view-head {
    background: var(--progresemos-green) !important;
}

.modal-head,
.photo-modal-head,
.flash-modal-head,
.notice-head,
.photo-view-head {
    color: #fff !important;
    border-bottom: 4px solid var(--progresemos-yellow) !important;
}

.modal-head h1,
.modal-head h2,
.modal-head h3,
.modal-head p,
.photo-modal-head h1,
.photo-modal-head h2,
.photo-modal-head h3,
.flash-modal-head h1,
.flash-modal-head h2,
.flash-modal-head h3,
.notice-head,
.photo-view-head h1,
.photo-view-head h2,
.photo-view-head h3 {
    color: #fff !important;
}

.modal-close,
.sidebar-pin,
.topbar-toggle {
    border-color: rgba(255, 242, 0, .65) !important;
}

.modal-close {
    background: var(--progresemos-yellow) !important;
    color: var(--progresemos-green-deep) !important;
}

.btn-primary,
.btn-search,
.btn-save,
.btn-photo,
.notice-btn,
.flash-modal-btn,
.btn-modal-save,
button[type="submit"]:not(.btn-light):not(.btn-secondary):not(.mini):not(.sort-btn),
.progress-fill,
.bar > span,
.local-progress span {
    background: var(--progresemos-green) !important;
    color: #fff !important;
    border-color: var(--progresemos-green-dark) !important;
}

.btn-primary:hover,
.btn-search:hover,
.btn-save:hover,
.btn-photo:hover,
.notice-btn:hover,
.flash-modal-btn:hover,
.btn-modal-save:hover {
    background: var(--progresemos-green-deep) !important;
}

.btn-light,
.mini-btn,
.btn-row.blue,
.mesa-id,
.role-chip,
.local-chip {
    background: var(--progresemos-yellow-soft) !important;
    color: var(--progresemos-green-deep) !important;
    border-color: #eee16a !important;
}

thead th,
.matrix-table thead th,
.conteo-sheet thead th,
.mesa-table th {
    background: var(--progresemos-green-deep) !important;
    color: #fff !important;
    border-color: var(--progresemos-green-dark) !important;
}

.conteo-sheet thead tr:first-child th {
    background: var(--progresemos-green-dark) !important;
}

tbody tr:hover td,
.matrix-table tbody tr:hover td,
.conteo-sheet tbody tr:hover td {
    background: #fffde0 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.count-input:focus {
    border-color: var(--progresemos-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 18, .14) !important;
}

.card,
.panel,
.box,
.modal,
.modal-card,
.flash-modal,
.notice-card,
.loading-card {
    border-color: var(--progresemos-line) !important;
}

.card-head,
.toolbar,
.modal-actions,
.modal-footer,
.modal-foot,
.flash-modal-foot {
    border-color: var(--progresemos-line) !important;
}

.card h1,
.card h2,
.card h3,
.toolbar h1,
.toolbar h2,
.toolbar h3,
.panel h1,
.panel h2,
.panel h3,
.stat .value,
.card .value,
.total,
.top10-votos,
.progress-text,
.ubicacion-cell strong,
.cell-main {
    color: var(--progresemos-green-deep) !important;
}

.badge-rank,
.pos,
.status-chip.ok,
.chip.ok,
.modal-icon {
    color: var(--progresemos-green-deep) !important;
    border-color: #a9dda8 !important;
    background: #efffec !important;
}

.menu-btn.active {
    color: var(--progresemos-green-deep) !important;
    border-color: var(--progresemos-yellow) !important;
    box-shadow: 0 10px 22px rgba(0, 107, 18, .20) !important;
}

.menu-btn.active::after {
    background: var(--progresemos-yellow) !important;
    box-shadow: 0 0 0 4px rgba(255, 242, 0, .22) !important;
}

.brand-logo {
    background: var(--progresemos-yellow) !important;
    border-color: rgba(255, 255, 255, .75) !important;
}

.brand-logo img,
.login-logo img,
.logo {
    object-fit: contain;
}

.photo-acta-panel,
.photo-acta-card,
.photo-preview,
.modal-meta,
.coord-card,
.resume .r {
    border-color: var(--progresemos-line) !important;
}

.photo-acta-card,
.modal-meta,
.coord-card,
.resume .r {
    background: #fbfff4 !important;
}

.btn-modal-close,
.btn-secondary {
    background: var(--progresemos-yellow-soft) !important;
    color: var(--progresemos-green-deep) !important;
    border-color: #eee16a !important;
}

.topbar-toggle,
.progress-fill,
.matrix-progress .mini-bar > span,
.page-link.active {
    background: var(--progresemos-green) !important;
}

.level-icon,
.district-card .level-icon {
    background: var(--progresemos-green) !important;
}

.superadmin-row td {
    background: #efffec !important;
}

input,
select,
textarea,
.form-control {
    background-color: #fff !important;
    background-image: none !important;
}

/* Densidad visual compacta para escritorio. */
@media (min-width: 761px) {
    .sidebar {
        padding: 14px 12px !important;
        gap: 12px !important;
    }

    .brand-logo {
        width: 46px !important;
        height: 46px !important;
        border-radius: 13px !important;
    }

    .brand-logo img {
        width: 36px !important;
        height: 36px !important;
    }

    .brand h1 {
        font-size: 20px !important;
    }

    .brand p,
    .menu-title {
        font-size: 10px !important;
    }

    .user-card {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .user-card strong {
        font-size: 12px !important;
    }

    .user-card span {
        font-size: 11px !important;
    }

    .role-chip {
        padding: 4px 7px !important;
        font-size: 9px !important;
    }

    .menu {
        gap: 7px !important;
    }

    .menu-btn,
    .logout {
        min-height: 43px !important;
        padding: 10px 12px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
        gap: 9px !important;
    }

    .menu-btn .icon,
    .logout .icon {
        width: 20px !important;
        font-size: 16px !important;
    }

    .sidebar-pin,
    .topbar-toggle {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .topbar {
        min-height: 62px !important;
        padding: 10px 15px !important;
    }

    .topbar h2,
    .hero h1 {
        font-size: 19px !important;
    }

    .topbar p,
    .hero p {
        font-size: 11px !important;
    }

    .content,
    .page,
    .wrap {
        padding: 8px !important;
    }

    .hero {
        padding: 10px 13px !important;
        border-radius: 14px !important;
    }

    .card,
    .panel,
    .box {
        border-radius: 14px !important;
    }

    .card-head,
    .panel-head,
    .toolbar {
        padding: 10px 12px !important;
    }

    .card-head h1,
    .card-head h2,
    .toolbar h1,
    .toolbar h2,
    .panel-head h1,
    .panel-head h2 {
        font-size: 16px !important;
    }

    .card-head p,
    .toolbar p,
    .panel-head p {
        margin-top: 3px !important;
        font-size: 10px !important;
    }

    .filters {
        padding: 9px 11px !important;
        gap: 8px !important;
    }

    .field label,
    .label {
        margin-bottom: 4px !important;
        font-size: 10px !important;
    }

    .field input,
    .field select,
    .field textarea,
    .form-control,
    .search input {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .field input[type="file"] {
        height: auto !important;
        padding: 7px 9px !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-light,
    .btn-search,
    .btn-save,
    .btn-photo,
    .btn-manage,
    .mini-btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .stat {
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }

    .stat .k,
    .stat strong,
    .card .label {
        font-size: 9px !important;
    }

    .stat .v,
    .stat span,
    .card .value {
        font-size: 20px !important;
    }

    .table-wrap {
        padding: 8px !important;
    }

    thead th,
    .matrix-table thead th,
    .conteo-sheet thead th,
    .mesa-table th {
        padding: 7px 6px !important;
        font-size: 10px !important;
    }

    tbody td,
    .matrix-table tbody td,
    .mesa-table td {
        padding: 7px 6px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .img-box,
    .thumb,
    .mini-logo {
        width: 38px !important;
        height: 38px !important;
        border-radius: 9px !important;
    }

    .badge,
    .resp-badge,
    .badge-green,
    .status-tag,
    .local-chip {
        padding: 4px 7px !important;
        font-size: 9px !important;
    }

    .modal,
    .modal-card,
    .flash-modal,
    .notice-card {
        border-radius: 16px !important;
    }

    .modal-card {
        max-width: min(94vw, 1080px) !important;
        max-height: 90vh !important;
    }

    .modal-head,
    .photo-modal-head,
    .flash-modal-head,
    .notice-head,
    .photo-view-head {
        padding: 10px 13px !important;
        border-bottom-width: 3px !important;
    }

    .modal-head h1,
    .modal-head h2,
    .modal-head h3,
    .photo-view-head h3 {
        font-size: 16px !important;
    }

    .modal-head p {
        margin-top: 3px !important;
        font-size: 10px !important;
    }

    .modal-body {
        padding: 10px 12px !important;
    }

    .modal-close,
    .close {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 17px !important;
    }

    .modal-actions,
    .modal-footer,
    .modal-foot {
        padding: 8px 11px !important;
        gap: 7px !important;
    }
}

.ribbon {
    background: var(--progresemos-yellow) !important;
    color: var(--progresemos-green-deep) !important;
    border-top-color: var(--progresemos-green) !important;
}

::selection {
    background: var(--progresemos-yellow);
    color: var(--progresemos-green-deep);
}