:root {
    --primary: #e20e0e;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --body-bg: white;

    /* Select */


    /* list ul */
    --ul-li: #e6e6e6;

    /* list-group */
    --list-group-color: #ffffff;
    --list-group-bg: #e61616cb;
    --list-group-active-border-color: #b81212;
    --list-group-bg-hover: #e6e6e6;

    /* Gray Scales */
    --color-gray-10: #d9dee2;

    /* Buttons */
    --color-btn-bg-no-ready: #ff5353cb;
    --color-btn-bg-no-ready-hover: #ff0000cb;
    --color-btn-bg-ready: red;
    --color-btn-bg-ready-hover: #b30000cb;
    --color-btn-bg-ready-active: red;


    --bs-primary: #dc3545;
    /* Color rojo */
    --bs-nav-pills-link-active-color: white;
    --bs-nav-pills-link-active-bg: var(--primary);
    --bs-nav-pills-link-color: white;
    --bs-nav-pills-link-hover-color: transparent;
    --bs-nav-pills-link-hover-bg: white;
    --bs-nav-pills-link-focus-color: black;
    --bs-nav-pills-link-focus-bg: var(--ul-li);
}

/* Fonts */
.open-sans-gamovi {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


.theme-gamovi {

    .logo-gamovi-derecha-admin {
        background-image: url(https://r2-images.casagamovi.cl/logo_500x135.png);
        background-size: 10%;
        background-repeat: no-repeat;
        background-position: 95%;
    }

    .btn {
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--bd-violet);
        --bs-btn-border-radius: .5rem;
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
        --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
        --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
        background-color: var(--color-btn-bg-ready);
    }

    .btn:hover {
        background-color: var(--color-btn-bg-ready-hover) !important;
    }

    .btn:active {
        background-color: var(--color-btn-bg-ready-active) !important;
        color: var(--color-gray-10)
    }

    .btn-no-ready {
        background-color: var(--color-btn-bg-no-ready);
    }

    .btn-no-ready:hover {
        background-color: var(--color-btn-bg-no-ready-hover);
    }

    .btn.btn-primary {
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--bd-violet);
        --bs-btn-border-radius: .5rem;
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
        --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
        --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
        background-color: var(--color-btn-bg-ready);
    }

    .btn-primary:hover {
        background-color: var(--color-btn-bg-ready-hover) !important;
    }

    .btn-primary:active {
        background-color: var(--color-btn-bg-ready-active) !important;
        color: var(--color-gray-10)
    }

    .btn-primary-no-ready {
        background-color: var(--color-btn-bg-no-ready);
    }

    .btn-primary-no-ready:hover {
        background-color: var(--color-btn-bg-no-ready-hover);
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
        color: var(--bs-list-group-color);
        text-decoration: none;
        background-color: var(--bs-list-group-bg);
        border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    }

    .list-group-item:hover {
        background-color: var(--list-group-bg-hover);
    }

    .list-group-item.active {
        color: var(--list-group-color);
        background-color: var(--list-group-bg);
        border-color: var(--list-group-active-border-color);
    }

    ul li:hover {
        background-color: var(--ul-li);
        cursor: pointer;
    }

    .form-select {
        --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
        color: var(--bs-body-color);
        background-color: var(--body-bg);
        background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    }

    .form-select:focus {
        box-shadow: none;
        outline: 3px solid red !important;
        border-color: transparent;
    }

    .form-select option {}

    input:focus {
        box-shadow: none;
        outline: none;
        border-color: transparent;
    }

    input[type="checkbox"]:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="email"]:focus {
        box-shadow: none;
        outline: 3px solid red !important;
        border-color: transparent;
    }

    input[type="checkbox"]::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="email"]::placeholder {
        opacity: 0.3;
    }

    textarea:focus {
        box-shadow: none;
        outline: 3px solid red !important;
        border-color: transparent;
    }

    input[type="checkbox"] {
        background-color: #ff4b4b;
        border: transparent;
    }

    input[type="checkbox"]:not(:checked) {
        background-color: #ffe0e0;
        border: transparent;
    }

    input[type="checkbox"]:focus {
        background-color: #ff4949;
    }

    a {
        color: var(--primary);
        text-decoration: none;
    }

    a:visited {
        color: var(--primary);
        ;
    }

    /* 
    a:hover {
        color: var(--primary);;
        text-decoration: underline;
    } 
    */

    a:active {
        color: var(--primary);
    }

    a.btn.btn-primary {
        color: white !important;
    }

    .no-link a {
        color: var(--dark);
        text-decoration: none;
    }

    .no-link a:visited {
        color: var(--dark);
        text-decoration: none;
    }

    .no-link a:active {
        color: var(--dark);
        text-decoration: none;
    }

    .no-link-white a {
        color: var(--white);
        text-decoration: none;
    }

    .no-link-white a:visited {
        color: var(--white);
        text-decoration: none;
    }

    .no-link-white a:active {
        color: var(--white);
        text-decoration: none;
    }

    .nav-pills {
        --bs-nav-pills-border-radius: var(--bs-border-radius);
        --bs-nav-pills-link-active-color: #fff;
        --bs-nav-pills-link-active-bg: #ff0000;
    }

    .nav-pills:hover {
        --bs-nav-pills-link-hover-color: black !important;
        --bs-nav-pills-hover-color: black;
        --bs-nav-pills-link-hover-bg: var(--ul-li);
    }

    .cursor-pointer * {
        cursor: pointer;
    }

    .subtitle-color {
        color: white;
        background-color: var(--color-btn-bg-ready) !important;
    }

    /* Para asegurar que los estilos se mantengan en móviles */
    @media (max-width: 767px) {
        .btn.btn-primary {
            --bs-btn-font-weight: 600 !important;
            --bs-btn-color: var(--bs-white) !important;
            --bs-btn-bg: var(--primary) !important;
            --bs-btn-border-color: var(--bd-violet) !important;
            --bs-btn-border-radius: .5rem !important;
            --bs-btn-hover-color: var(--bs-white) !important;
            --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)} !important;
            --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)} !important;
            --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb) !important;
            --bs-btn-active-color: var(--bs-btn-hover-color) !important;
            --bs-btn-active-bg: #{shade-color($bd-violet, 20%)} !important;
            --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)} !important;
            background-color: var(--color-btn-bg-ready) !important;
        }
    }

    @media (max-width: 576px) {
        .btn.btn-primary {
            --bs-btn-font-weight: 600 !important;
            --bs-btn-color: var(--bs-white) !important;
            --bs-btn-bg: var(--primary) !important;
            --bs-btn-border-color: var(--bd-violet) !important;
            --bs-btn-border-radius: .5rem !important;
            --bs-btn-hover-color: var(--bs-white) !important;
            --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)} !important;
            --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)} !important;
            --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb) !important;
            --bs-btn-active-color: var(--bs-btn-hover-color) !important;
            --bs-btn-active-bg: #{shade-color($bd-violet, 20%)} !important;
            --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)} !important;
            background-color: var(--color-btn-bg-ready) !important;
        }

        .modal-lg-custom {
            max-width: none !important;
        }
    }

    /* Estilo específico para pantallas de 1000px o menos */
    @media (max-width: 1000px) {

        /* Asegurar que el header cubra todo el ancho */
        #mainHeader {
            padding: 10px;
        }

        /* Eliminar el padding del contenedor principal */
        .container {
            padding: 0;
            max-width: 100%;
        }

        /* Ajustar el tamaño de las columnas */
        .col-md-6,
        .col-md-8,
        .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        /* Ajustar el tamaño de las imágenes o elementos de fondo */
        .back-image-principal {
            background-size: cover;
        }

        /* Ajustar el tamaño de los elementos en el footer */
        footer .container {
            padding: 0;
        }

        footer .nav-item {
            flex: 1 0 100%;
            text-align: center;
            padding: 5px 0;
        }
    }

    .modal-lg-custom {
        max-width: 60%;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    .container.admin-container {
        max-width: 95%;
        /* Adjust this value as needed */
        margin: 0 auto;
        overflow: hidden;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: var(--bs-nav-pills-link-active-color) !important;
        background-color: var(--bs-nav-pills-link-active-bg) !important;
    }

    .nav-pills .nav-link {
        background-color: transparent !important;
        border-radius: 10px;
    }

    .nav-pills .nav-link:hover {
        color: black !important;
        border-radius: 10px;
    }

    .nav-pills li:hover {
        color: var(--bs-nav-pills-link-hover-color) !important;
        background-color: var(--bs-nav-pills-link-hover-bg) !important;
        border-radius: 10px;
    }

    .nav-pills .nav-link:focus {
        color: var(--bs-nav-pills-link-focus-color) !important;
        background-color: var(--bs-nav-pills-link-focus-bg) !important;
    }

    .dropdown-menu .dropdown-item {
        color: white !important;
    }

    .dropdown-menu .dropdown-item:hover {
        background-color: var(--primary) !important;
    }

    .button-ver-denuncia {
        cursor: pointer;
    }

    .oculto {
        display: none !important;
    }

    .mostrar {
        display: block !important;
    }

    .code-text {
        font-weight: 800;
    }

    .toolbar {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
    }

    .btn-excel {
        width: 32px;
        height: 32px;
        padding: 5px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
    }

    .btn-excel i {
        font-size: 16px;
    }
}