/* Custom Looper Theme: Paleta Verde Estilo Excel */
:root {
    --blue: #10793F; /* Verde fuerte */
    --indigo: #218739; /* Verde medio */
    --purple: #1F5D33; /* Verde más oscuro */
    --pink: #3EA64A; /* Verde claro cálido */
    --red: #006100; /* Verde intenso (alerta estilo Excel) */
    --orange: #2E7D32; /* Otro verde medio */
    --yellow: #C6EFCE; /* Fondo celda exitosa */
    --green: #A9D18E; /* Verde pálido */
    --teal: #548235; /* Verde tierra */
    --cyan: #00B050; /* Verde brillante */
    --white: #ffffff;
    --gray: #7F7F7F;
    --gray-dark: #4F4F4F;
    --primary: #009900; /* Verde Excel principal */
    --secondary: #E2EFDA; /* Fondo de tabla clara */
    --success: #00B050; /* Verde éxito estilo Excel */
    --info: #10793F; /* Verde fuerte */
    --warning: #C6EFCE; /* Amarillo verdoso */
    --danger: #006100; /* Verde alerta */
    --light: #F2F2F2;
    --dark: #385723;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--teal) !important;
    color: var(--white) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--info) !important;
        border-color: var(--teal) !important;
        color: var(--white) !important;
    }

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

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active {
        background-color: var(--teal) !important;
        border-color: var(--green) !important;
        color: var(--white) !important;
    }

.btn-info {
    background-color: var(--indigo) !important;
    border-color: var(--purple) !important;
    color: var(--white) !important;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active {
        background-color: var(--dark) !important;
        border-color: var(--purple) !important;
        color: var(--white) !important;
    }


select.form-control {
    border: 1px solid var(--primary);
    color: var(--dark); 
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--font-family-sans-serif);
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23009900" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2rem;
}

    select.form-control:focus {
        background-color: var(--white);
        border-color: var(--info); 
        box-shadow: 0 0 0 0.2rem rgba(0, 153, 0, 0.25);
        outline: none;
        color: var(--dark);
    }

    select.form-control option:checked {
        background-color: var(--green); 
        color: var(--dark);
    }

    select.form-control option {
        background-color: var(--white);
        color: var(--dark);
    }





.app-header {
    background-color: var(--primary) !important;
}

.stacked-menu .menu-item.has-active > .menu-link .menu-icon {
    color: var(--primary) !important;
}

.stacked-menu > .menu > .menu-item.has-active > .menu-link {
    color: var(--primary) !important;
}

.auth-header {
    background-color: var(--primary) !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

a {
    color: var(--primary) !important;
}

element.style {
    background-color: var(--info) !important;
}