:root {
    --info: #478bf3;
    --danger: #f94f4f;
    --warning: #fea45a;
    --success: #28d785;
    --primary: #589bff;
    --secondary: #af6ded;
    --pink: #f171b1;
}


/* General */
svg.svg-info {
    fill: var(--info);
}

svg.svg-danger {
    fill: var(--danger);
}

svg.svg-warning {
    fill: var(--warning);
}

svg.svg-success {
    fill: var(--success);
}

svg.svg-primary {
    fill: var(--primary);
}

svg.svg-secondary {
    fill: var(--secondary);
}

.modal form {
    overflow-y: auto;
}

span.obligatory {
    color: red;
}

@media(max-width: 500px) {

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_Filter {
        display: flex;
        justify-content: flex-start;
    }

    .dtr-control {
        display: flex;
        gap: 5px;
    }

    table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
    table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
        width: 20px;
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .dataTables_wrapper>.row {
        overflow-x: auto;
    }
}

#mapageneral,
#departamentos {
    scroll-margin-top: 100px;
}

a.custom-link {
    color: var(--primary);
    transition: .25s all ease
}

a.custom-link:hover {
    opacity: calc(0.8);
}

.alert .spinner-border {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.alertsArea .alert {
    display: flex;
    gap: 5px;
}

/* Users */
.dataTables_wrapper>div {
    padding: 10px 0;
}

/* Coordinators */
.wizard-tab .wizard-nav.dots .wizard-step:before {
    background: var(--primary);
}

/* Voters */
.votantes-container .card-header .choices {
    margin-bottom: 0 !important;
}

#votantesTable_wrapper>div {
    margin-bottom: 10px;
}

.semaphores>.form-check {
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}

.semaphores>.form-check label {
    margin-right: 5px;
}

.semaphore-select-0 {
    background: #525252;
    color: #fff;
}

.semaphore-select-1 {
    background: #28d785;
    color: #fff;
}

.semaphore-select-2 {
    background: #fea45a;
    color: #fff;
}

.semaphore-select-3 {
    background: #f94f4f;
    color: #fff;
}

.semaphore-select-4 {
    background: #e6e6e6;
    color: #393939;
}

.form-check .form-check-input {
    margin-left: -1.2em;
}

/* Estilo para el radio button cuando está seleccionado */
.semaphores input[type="radio"].form-check-input:checked {
    background-color: #589bff;
    border-color: #589bff;
}

/* Referidos */
#referidos-general-table_wrapper .dt-top .dt-filters {
    margin-left: auto;
}

@media(max-width: 500px) {
    .dtr-data .btn-toggle {
        display: none;
    }
}

.filtro-general-div>.choices {
    margin-bottom: 10px;
}

@media (max-width: 991.98px) {
    .landing-body .main-content {
        padding-block-start: 0;
    }
}

/* Maps */
.gm-style-iw-chr {
    margin-bottom: -15px;
}

.cluster-visible {
    line-height: 53px !important;
}

.btn-group btn {
    transition: .25s all ease;
}

.btn-group .active {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

/* Wizard forms */
.wizard-step span.dot {
    align-content: center;
    font-size: 10px;
}

.wizard.wizard-tab .wizard-nav.dots .wizard-step.active~.wizard-step .dot {
    color: #a6a6a6;
}

.wizard-tab .wizard-nav.dots .wizard-step .dot {
    color: white;
}

@media(max-width: 600px) {
    .wizard-step span.dot {
        color: transparent !important;
    }
}

/* Sidebar compactado en escritorio: solo iconos, sin textos cortados */
@media (min-width: 992px) {
    html[data-toggled="icon-click-closed"] .app-sidebar,
    html[data-toggled="menu-click-closed"] .app-sidebar {
        width: 5rem !important;
        min-width: 5rem !important;
        overflow: visible;
    }

    html[data-toggled="icon-click-closed"] .main-sidebar-header,
    html[data-toggled="menu-click-closed"] .main-sidebar-header {
        width: 5rem !important;
        min-width: 5rem !important;
        height: 4.75rem;
        padding-inline: 0 !important;
        justify-content: center;
        align-items: center;
    }

    html[data-toggled="icon-click-closed"] .main-sidebar-header .header-logo,
    html[data-toggled="menu-click-closed"] .main-sidebar-header .header-logo {
        width: 3rem;
        height: 3rem;
        display: grid !important;
        place-items: center;
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
        position: relative;
    }

    html[data-toggled="icon-click-closed"] .main-sidebar-header .header-logo img,
    html[data-toggled="menu-click-closed"] .main-sidebar-header .header-logo img {
        display: none !important;
    }

    html[data-toggled="icon-click-closed"] .main-sidebar-header .header-logo::before,
    html[data-toggled="menu-click-closed"] .main-sidebar-header .header-logo::before {
        content: "";
        width: 2rem;
        height: 2rem;
        display: block;
        background: url('/custom/assets/logo-icon.png') center / contain no-repeat;
    }

    html[data-toggled="icon-click-closed"] .main-sidebar,
    html[data-toggled="menu-click-closed"] .main-sidebar {
        width: 5rem !important;
    }

    html[data-toggled="icon-click-closed"] .main-content,
    html[data-toggled="menu-click-closed"] .main-content,
    html[data-toggled="icon-click-closed"] .app-header,
    html[data-toggled="menu-click-closed"] .app-header {
        margin-inline-start: 5rem !important;
    }

    html[data-toggled="icon-click-closed"] .side-menu__item,
    html[data-toggled="menu-click-closed"] .side-menu__item {
        width: 3.25rem;
        height: 3.25rem;
        min-height: 3.25rem;
        margin: 0.25rem auto;
        padding: 0 !important;
        display: grid !important;
        place-items: center;
        border-radius: 0.85rem;
        overflow: hidden;
        text-align: center;
        gap: 0 !important;
    }

    html[data-toggled="icon-click-closed"] .side-menu__icon,
    html[data-toggled="menu-click-closed"] .side-menu__icon {
        width: 1.35rem !important;
        height: 1.35rem !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center;
        font-size: 1.15rem;
        line-height: 1 !important;
        transform: none !important;
        text-align: center;
        flex: 0 0 auto !important;
    }

    html[data-toggled="icon-click-closed"] .side-menu__icon::before,
    html[data-toggled="menu-click-closed"] .side-menu__icon::before {
        line-height: 1 !important;
        margin: 0 !important;
    }

    html[data-toggled="icon-click-closed"] .side-menu__label,
    html[data-toggled="menu-click-closed"] .side-menu__label,
    html[data-toggled="icon-click-closed"] .side-menu__angle,
    html[data-toggled="menu-click-closed"] .side-menu__angle,
    html[data-toggled="icon-click-closed"] .slide-menu,
    html[data-toggled="menu-click-closed"] .slide-menu,
    html[data-toggled="icon-click-closed"] .slide__category,
    html[data-toggled="menu-click-closed"] .slide__category {
        display: none !important;
    }

    html[data-toggled="icon-click-closed"] .side-menu__item::after,
    html[data-toggled="menu-click-closed"] .side-menu__item::after {
        content: attr(title);
        position: fixed;
        left: 5.35rem;
        z-index: 10000;
        max-width: 15rem;
        padding: 0.45rem 0.65rem;
        border-radius: 0.55rem;
        background: #0f172a;
        color: #fff;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.1;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-0.15rem);
        transition: opacity .15s ease, transform .15s ease;
        white-space: nowrap;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    }

    html[data-toggled="icon-click-closed"] .side-menu__item:hover::after,
    html[data-toggled="menu-click-closed"] .side-menu__item:hover::after {
        opacity: 1;
        transform: translateY(0);
    }
}