/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ============================================================
   OPLAND — Design tokens
   ============================================================ */
:root {
    /* Color de marca: naranja Opland sustituye al púrpura de Vuexy */
    --bs-primary:            #f4921e;
    --bs-primary-rgb:        244, 146, 30;

    /* Derivados usados por Vuexy internamente */
    --bs-link-color:         #f4921e;
    --bs-link-hover-color:   #d97c10;

    /* Border-radius más generoso para aspecto moderno */
    --bs-border-radius:      0.5rem;     /* 8px  — inputs, selects */
    --bs-border-radius-sm:   0.375rem;   /* 6px  */
    --bs-border-radius-lg:   0.75rem;    /* 12px — cards, modales */
    --bs-border-radius-xl:   1rem;       /* 16px — elementos destacados */
}

/* Primario de Vuexy (usa sus propias variables, no las de BS) */
.btn-primary,
.badge-primary,
.bg-primary {
    background-color: #f4921e !important;
    border-color:     #f4921e !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #d97c10 !important;
    border-color:     #d97c10 !important;
}
.btn-outline-primary {
    color:        #f4921e !important;
    border-color: #f4921e !important;
}
.btn-outline-primary:hover {
    background-color: #f4921e !important;
    color:            #fff    !important;
}
.text-primary { color: #f4921e !important; }
.border-primary { border-color: #f4921e !important; }

/* Menú lateral: hover en naranja */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li > a:hover span,
.main-menu .navigation > li > a:hover i,
.main-menu .navigation > li > a:hover svg {
    color: #f4921e !important;
    stroke: #f4921e !important;
    background: rgba(244, 146, 30, 0.08) !important;
}

/* Menú lateral: ítem activo — texto naranja, fondo muy sutil */
.main-menu .navigation > li.active > a,
.main-menu .navigation li.active > a {
    background: rgba(244, 146, 30, 0.1) !important;
    box-shadow: none !important;
    color: #f4921e !important;
}
.main-menu .navigation > li.active > a i,
.main-menu .navigation > li.active > a svg,
.main-menu .navigation > li.active > a span {
    color: #f4921e !important;
    stroke: #f4921e !important;
}

/* Padre has-sub activo: mantiene naranja Opland */
.main-menu .navigation > li.has-sub.sidebar-group-active > a,
.main-menu .navigation > li.has-sub.active > a {
    color: #f4921e !important;
    background: rgba(244, 146, 30, 0.10) !important;
}
.main-menu .navigation > li.has-sub.sidebar-group-active > a span,
.main-menu .navigation > li.has-sub.sidebar-group-active > a i,
.main-menu .navigation > li.has-sub.sidebar-group-active > a svg,
.main-menu .navigation > li.has-sub.active > a span,
.main-menu .navigation > li.has-sub.active > a i,
.main-menu .navigation > li.has-sub.active > a svg {
    color: #f4921e !important;
    stroke: #f4921e !important;
}

/* Subítems (Listado / Kanban): verde botella #1E6B50 + sangría */
.main-menu .navigation > li > ul.menu-content > li > a {
    padding-left: 56px !important;
}
.main-menu .navigation > li > ul.menu-content > li > a:hover {
    color: #1E6B50 !important;
    background: rgba(30, 107, 80, 0.18) !important;
}
.main-menu .navigation > li > ul.menu-content > li > a:hover span,
.main-menu .navigation > li > ul.menu-content > li > a:hover i,
.main-menu .navigation > li > ul.menu-content > li > a:hover svg {
    color: #1E6B50 !important;
    stroke: #1E6B50 !important;
}
.main-menu .navigation > li > ul.menu-content > li.active > a {
    color: #1E6B50 !important;
    background: rgba(30, 107, 80, 0.10) !important;
    box-shadow: none !important;
}
.main-menu .navigation > li > ul.menu-content > li.active > a span,
.main-menu .navigation > li > ul.menu-content > li.active > a i,
.main-menu .navigation > li > ul.menu-content > li.active > a svg {
    color: #1E6B50 !important;
    stroke: #1E6B50 !important;
}

/* Campos deshabilitados: fondo blanco, texto gris */
.form-control:disabled,
.form-control[disabled],
.form-select:disabled,
.form-select[disabled] {
    background-color: #ffffff !important;
    color: #9e9e9e !important;
    opacity: 1 !important;
    cursor: default;
}

/* Select2 deshabilitado: mismo tratamiento que inputs */
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background-color: #ffffff !important;
    cursor: default !important;
}
.select2-container--disabled .select2-selection__rendered {
    color: #9e9e9e !important;
}

/* Focus ring en naranja */
.form-control:focus,
.form-select:focus {
    border-color: rgba(244, 146, 30, 0.6) !important;
    box-shadow:   0 0 0 0.2rem rgba(244, 146, 30, 0.2) !important;
}

/* Paginación */
.page-item.active .page-link {
    background-color: #f4921e !important;
    border-color:     #f4921e !important;
}
.page-link { color: #f4921e !important; }

/* Cards — sombra más suave + radius */
.card {
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05) !important;
}

/* Inputs, selects y botones con radio moderno */
.form-control,
.form-select,
.input-group-text {
    border-radius: 0.5rem !important;
}
.btn {
    border-radius: 0.5rem !important;
}
.modal-content {
    border-radius: 0.75rem !important;
}

/* ============================================================
   LISTADOS
   ============================================================ */

/* Tamaño de fuente legible */
.table {
    font-size: 13px !important;
}

/* Cabecera: fondo sutil, texto más definido */
.table thead th {
    background-color: #f9f9f9 !important;
    color: #4a4a4a !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #ebe9f1 !important;
}

/* Filas: sin stripes, hover con tinte naranja y borde izquierdo */
.table tbody tr {
    transition: background-color 0.15s ease, border-left 0.15s ease;
    border-left: 3px solid transparent;
}
.table tbody tr:hover {
    background-color: rgba(244, 146, 30, 0.05) !important;
    border-left: 3px solid #f4921e;
    cursor: pointer;
}

/* ============================================================ */
.op-breadcrumbs {
    font-size: 15px;
    text-decoration: underline !important;
}

.op-breadcrumbs_separator {
    font-size: 15px;
    /*color: #f4901f;*/
}

.op-login-banner {
    background-image: url('/assets/basic/images/pages/paper-opland.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.nav-tabs .nav-link:after {
    background: #f4921e !important
        /*linear-gradient(30deg, #9b5c11, #f4921e) !important ;*/
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #f4911e !important;
}

.modal-body {
    white-space: normal;
}

.mr-auto {
    margin-right: auto !important;
}

.presubmit {
    margin-top: 20px !important;
}

.divpopup {
    z-index: 99999;
}

#divpopup {
    margin: 10vh 10vw !important;
}

@media (min-width: 1440px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .submit.nuevo {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit.parcial {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit.volver {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit.continuar {
        width: 100%;
        margin-bottom: 10px;
    }

    .deleted,
    .undelete {
        /*width: 100%;*/

    }
}
.brand-logo {
    display: block !important;
}

@media (min-width: 992px){

    .brand-logo {
        display: block !important;
    }
}

/* ── Botones de listado en móvil ── */
@media (max-width: 575px) {
    .btn-add-record {
        padding: .3rem .45rem !important;
        font-size: .75rem !important;
        line-height: 1 !important;
    }
    a:has(.fa-download) { display: none !important; }
}