/* ==========================================================================
   1. FUENTES (REORGANIZADO)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800');

/* Avenir Next (Fuente Principal) */
@font-face {
    font-family: 'AvenirNext-Regular';
    src: url('../fonts/AvenirNext-Medium.ttf') format('truetype');
}

/* ========================================================================
   1. EL ESQUELETO (Mantenemos la altura estándar de 37.6px)
   ======================================================================== */
.btn-default,  .btn-success, .btn-primary,
.btn-audi-green, .btn-secondary, .marginButton.btn {
    height: 37.6px !important;
    min-height: 37.6px !important;
    max-height: 37.6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important; /* Padding vertical 0 para que mande el height */
    box-sizing: border-box !important;
    border-radius: 6px !important;
    gap: 8px !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* 2. LA PIEL (Colores y Estilos Visuales) */

/* Primarios (Verde Audi / Kendo) */
.btn-audi-green, #btnSearch, .btn-primary, .btn-success {
    background-color: var(--kendo-primary, #63BBCD) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: #fff !important;
    font-family: "AvenirNextLTPro-Bold", sans-serif;
}

/* Secundarios / Default (Gris con borde/Outline) */
.btn-secondary, .btn-default-custom  {
    background: #ffffff !important;
    color: #6c757d !important;
    border: 0.8px solid #ccc !important;
}

.btn-default {
    /* Estado Normal: Outline */
    background-color: transparent !important;
    background-image: none !important; /* Quitamos cualquier degradado previo */
    color: #6c757d !important;
    border: 1px solid #6c757d !important;
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    font-size: 14px !important;
}

/* Botón Especial Exportar (Degradado) */
#btnExportar {
    background: linear-gradient(to bottom, #63BBCD 0%, #4ea1b0 100%) !important;
    color: #fff !important;
    border: none !important;
}

/* 3. ESTADOS (Hover / Active) */
.btn-audi-green:hover, #btnSearch:hover, .btn-primary:hover, .btn-success:hover {
    background-color: #4ea1b0 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
    text-decoration: none !important;
    transform: translateY(-1px); /* Mantenemos tu efecto de elevación suave */
}

.btn-secondary:hover {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
    color: #495057 !important;
}

/* Ajuste de iconos */
.btn i, .btn-audi-green i,  {
    margin: 0 !important; /* El gap del padre ya maneja el espacio */
    font-size: 1.1em;
}

.btn-tree-classic {
    /* Dimensiones y estructura */
    height: 21.6px !important;
    width: 23.6px !important;
    padding: 1px 5px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Tipografía */
    font-size: 11px !important; /* Un poco más pequeño para que el 'fill' luzca mejor */
    line-height: 18px !important;
    /* Fondo y Degradado Classic */
    background-color: rgb(255, 255, 255) !important;
    background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(224, 224, 224) 100%) !important;
    /* Bordes y Sombra */
    border: 0.8px solid rgb(204, 204, 204) !important;
    border-radius: 3px !important;
    box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 1px 1px 0px !important;
    /* --- CAMBIO DE COLOR (Kendo Primary) --- */
    color: var(--kendo-primary, #63BBCD) !important;
    text-shadow: none !important;
    cursor: pointer;
    margin-left: 5px;
    transition: all 0.2s ease;
}

    /* Efecto al pasar el mouse para que no se pierda el estilo */
    .btn-tree-classic:hover {
        background-image: linear-gradient(rgb(245, 245, 245) 0px, rgb(210, 210, 210) 100%) !important;
        border-color: var(--kendo-primary, #63BBCD) !important;
        filter: brightness(0.9); /* Oscurece el conjunto sutilmente */
    }

    .btn-tree-classic i {
        -webkit-text-stroke: 0.5px; /* Define un poco más el borde del icono */
    }

/* fix oversized nav items from Kendo/Bootstrap inheritance */
.navaudit {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin-right: 0.75rem;
    font-size: 0.95rem;
    vertical-align: middle;
}

.navauditb {
    font-weight: 700;
    color: var(--kendo-primary, #63BBCD) !important;
}

/* Ensure navbar-nav used as tabs in partials renders horizontally (not vertical list) */
.container-fluid > .navbar-nav, .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}

.navbar-nav .nav-item {
    display: inline-block;
}

/* Make nav links compact like original tabs */
.navbar-nav .nav-link {
    padding: .25rem .5rem !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Reintroduce legacy .sr-only to hide '(current)' visually */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@font-face {
    font-family: 'AvenirNextLTPro-Bold';
    src: url('../fonts/AvenirNextLTPro-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'AvenirNextLTPro-It';
    src: url('../fonts/AvenirNextLTPro-It.otf') format('opentype');
}

@font-face {
    font-family: 'AvenirNextLTPro-Regular';
    src: url('../fonts/AvenirNextLTPro-Regular.otf') format('opentype');
}

/* Antipasto Pro (Variantes) */
@font-face {
    font-family: 'AntipastoPro-Bold_trial';
    src: url('../fonts/AntipastoPro-Bold_trial.ttf') format('truetype');
}

@font-face {
    font-family: 'AntipastoPro-DemiBold_trial';
    src: url('../fonts/AntipastoPro-DemiBold_trial.ttf') format('truetype');
}

@font-face {
    font-family: 'AntipastoPro-ExtraBold_trial';
    src: url('../fonts/AntipastoPro-ExtraBold_trial.ttf') format('truetype');
}

@font-face {
    font-family: 'AntipastoPro-Medium_trial';
    src: url('../fonts/AntipastoPro-Medium_trial.ttf') format('truetype');
}

@font-face {
    font-family: 'AntipastoPro-Light_trial';
    src: url('../fonts/AntipastoPro-Light_trial.ttf') format('truetype');
}

/* Open Sans (Variantes locales) */
@font-face {
    font-family: 'OpenSans-Italic';
    src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

/* ==========================================================================
   2. HTML ESTÁNDAR Y REBOOT DE BOOTSTRAP 5
   ========================================================================== */
:root {
    /* Force primary colors to match the Goretail (Telerik) theme */
    --audi-green: #63BBCD; /* Kendo primary */
    --audi-green-alpha: rgba(99, 187, 205, 0.70); /* primary @ 70% */
    --audi-gray: #757575; /* neutral / secondary */
    --audi-dark: #141414; /* dark neutral */

    /* Support shades (mapped to theme palette approximations) */
    --audi-green-3ab: #4d97c1; /* darker primary */
    --audi-green-52be: #409fa3; /* mid primary */
    --audi-green-47e8: #80bfc2; /* lighter primary */
    --audi-green-light: #a6d2d4; /* soft primary */
    --audi-orange: #F5A600; /* kendo warning */
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background: #ffffff;
    font-family: "AvenirNext-Regular", "Open Sans", Helvetica, Arial, sans-serif;
    color: #444;
    line-height: 1.5;
    /* Ajuste para Navbar fija en BS5 */
    padding-top: 80px;
}

/* Inputs Fluidos (Optimizado para evitar el error de los 280px) */
input, select, textarea {
    font-family: inherit;
    max-width: 100%; /* Permite que el sistema de columnas de BS5 funcione */
}

/* Títulos */
h1.titu {
    /* Forzar mayúsculas como en la versión anterior */
    text-transform: uppercase !important;
    /* Tipografía: Usamos el nombre exacto de tu versión anterior */
    font-family: "AvenirNext-DemiBold", Helvetica, Arial, serif !important;
    /* Tamaño: 1.875rem es correcto, pero lo fijamos en px si prefieres seguridad total */
    font-size: 30px !important;
    /* Color: Usamos la variable que ya tienes definida */
    color: var(--audi-gray) !important;
    /* Alineación y Espaciado: Aquí están los cambios clave */
    text-align: left;
    line-height: 41px !important; /* BS5 ponía 36px (1.2), aquí recuperamos los 41px */
    margin-left: 0px !important; /* El margen que faltaba en la nueva versión */
    /* Reset de Bootstrap 5 */
    margin-bottom: 0.5rem; /* Ajusta según necesites el espacio con lo de abajo */
}

/* ==========================================================================
   3. LAYOUT (HEADER, FOOTER, LOGIN)
   ========================================================================== */

/* Header & Navbar */
.header, #header.navbar {
    border-bottom: 1px solid #e7e8e6;
    background: #fff;
    height: 80px;
    z-index: 1030; /* Sticky-top/Fixed-top BS5 index */
}

.logo-container {
    padding: 10px 0;
}

.head-nav {
    display: flex;
    list-style: none;
    margin: 0;
}

    .head-nav li {
        border-right: 1px solid #e7e8e6;
        height: 64px;
        display: flex;
        align-items: center;
    }

/* Ajuste de los links del menú principal */
.navbar-nav .nav-link {
    font-family: "AvenirNext-Regular", sans-serif;
    font-size: 15px; /* Ajusta según prefieras */
    color: #444 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    transition: color 0.2s;
}

    .navbar-nav .nav-link:hover {
        color: var(--kendo-primary, #63BBCD) !important;
    }

    /* Iconos de Bootstrap Icons: alineación similar a Glyphicons */
    .navbar-nav .nav-link i {
        margin-right: 5px;
        font-size: 1.1rem;
        vertical-align: middle;
    }

/* Limitar la altura del menú y permitir scroll */
#header .dropdown-menu {
    max-height: 70vh; /* Se ajusta al 70% de la altura de la pantalla */
    overflow-y: auto; /* Activa el scroll vertical */
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 0 5px grey !important;
    padding: 5px 0; /* Menos espacio arriba y abajo del contenedor */
}

/* Reducir drásticamente el espacio entre elementos (estilo BS 3.3) */
#header .dropdown-item {
    font-family: "AvenirNext-Regular", sans-serif;
    font-size: 13px; /* Un punto más pequeña para ganar espacio */
    color: #555 !important;
    padding: 4px 15px !important; /* Padding reducido (arriba/abajo 4px) */
    line-height: 1.2 !important; /* Interlineado más apretado */
}

    /* Color verde Mabe/Audi para el hover */
    #header .dropdown-item:hover {
        /* Use Telerik/Kendo theme primary for dropdown hover */
        background-color: var(--kendo-primary, #63BBCD) !important;
        color: #fff !important;
    }

/* Solo afecta al separador dentro del header */
#header .dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #e7e8e6;
}

/* Solo ajusta la posición de los iconos que vivan dentro del navbar */
#header .bi {
    color: var(--kendo-primary, #63BBCD) !important;
    font-size: 1.2rem; /* Tamaño ligeramente mayor para que luzcan más */
    vertical-align: middle;
}

    /* Opcional: Si usas iconos de línea pero los quieres más 'pesados' */
    #header .bi::before {
        font-weight: bold !important;
    }

/* Color de los iconos dentro de las opciones del dropdown */
#header .dropdown-item .bi {
    font-size: 1rem;
    margin-right: 8px;
    opacity: 0.8; /* Un poco más sutiles dentro del menú */
}

/* Personalización del scroll dentro del dropdown del header */
#header .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

#header .dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--kendo-primary, #63BBCD);
    border-radius: 10px;
}

#header .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* ==========================================================================
   1. ESTRUCTURA DEL LOGIN (FONDO Y CAPA VERDE)
   ========================================================================== */
#login {
    background: url('../img/login.png') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    position: relative;
    /* Eliminamos flex center para que el padding-top de .login controle la posición */
}

    #login .verd {
        background-color: var(--audi-green-alpha); /* rgba(58, 181, 73, 0.7) */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Capa intermedia */
    }

    /* Contenedor que inyecta _Login */
    #login .login {
        position: relative;
        z-index: 10;
        text-align: center;
        padding-top: 10vh; /* Ajusta este valor para subir o bajar el logo/form */
    }

/* ==========================================================================
   2. REEMPLAZO DE TEXTO POR LOGOS (MABE / DEFAULT)
   ========================================================================== */
.logo-login,
.logo-login-Mabe {
    display: block;
    margin: 0 auto 2.5rem;
    width: 320px;
    height: 140px;
    text-indent: -9999px; /* Esconde el texto H1 */
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.logo-login {
    background-image: url('../img/Audi.png');
}

.logo-login-Mabe {
    background-image: url('../img/mabe_logo.png');
}

/* Utility: aplica separación vertical entre campos dentro de un contenedor */
.vertical-gap .form-group {
    margin-bottom: 1.25rem; /* separación vertical consistente */
}

/* Variante más compacta si se desea menos separación */
.vertical-gap.compact .form-group {
    margin-bottom: 0.75rem;
}

/* Stronger spacing for selects and kendo widgets inside vertical-gap containers */
.vertical-gap .row {
    row-gap: 1rem; /* gaps between flex row children when supported */
}

.vertical-gap .col-sm-8 > select,
.vertical-gap .col-sm-8 .k-multiselect,
.vertical-gap .col-sm-8 .k-dropdown {
    margin-bottom: 0.85rem !important;
}

/* Ensure form-group spacing wins over other CSS */
.vertical-gap .form-group {
    margin-bottom: 1.25rem !important;
}

/* Additional overrides for Kendo widgets (increase vertical spacing and force full width) */
.vertical-gap .k-multiselect,
.vertical-gap .k-dropdown,
.vertical-gap .k-textbox,
.vertical-gap .k-input {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
}

.vertical-gap .k-multiselect .k-input-inner,
.vertical-gap .k-dropdown .k-input-inner,
.vertical-gap input.k-textbox {
    padding: 10px 12px !important;
}

/* Chip list / selected values spacing */
.vertical-gap .k-multiselect .k-selection-multiple {
    margin-bottom: 0.5rem !important;
}

/* Ensure placeholder/input area has consistent height */
.vertical-gap .k-multiselect .k-input-inner,
.vertical-gap .k-dropdown .k-select,
.vertical-gap .k-dropdown .k-input {
    min-height: 42px !important;
    line-height: 20px !important;
}

/* Fallback for any direct select elements (non-kendo) */
.vertical-gap select.form-control {
    height: auto !important;
    padding: 10px 12px !important;
}

/* ==========================================================================
   3. FOOTER (EXTREMO A EXTREMO Y TRANSPARENCIA INTELIGENTE)
   ========================================================================== */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #ffffff !important; /* Blanco para el resto de la app */
    border-top: 1px solid #e7e8e6;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo Izq - Texto Centro - Logo Der */
    padding: 0 40px;
    box-sizing: border-box;
}

/* EL TRUCO: Como el footer está FUERA de #login, usamos este selector */
body:has(#login) .footer {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

.textfoot {
    font-family: "AvenirNext-Regular", sans-serif;
    font-size: 14px;
    color: #8c8c8c; /* Gris en app normal */
    text-decoration: none;
    flex-grow: 1;
    text-align: center;
}

/* Cambios visuales solo cuando estamos en el Login */
body:has(#login) .textfoot {
    color: #ffffff !important;
}

body:has(#login) .logogop,
body:has(#login) .logogo {
    filter: brightness(0) invert(1); /* Convierte logos negros en blancos */
}

.logogop, .logogo {
    height: 35px;
    width: auto;
    display: block;
}

/* ==========================================================================
   4. LINKS Y UTILIDADES DEL LOGIN
   ========================================================================== */
#login a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.3s;
}

    #login a:hover {
        color: #000;
        text-decoration: none;
    }

/* ==========================================================================
   4. COMPONENTES Y BOTONES (BOOTSTRAP 5 CUSTOM)
   ========================================================================== */

.filter-text-container {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.funnel-icon {
    color: var(--audi-green); /* Color verde para el embudo */
    margin-right: 8px;
}

/* Ensure collapse/filter panel headers show at 1rem and funnel icon spacing is consistent
   Applies to the typical pattern used across views: an anchor with data-bs-toggle="collapse"
   containing an optional funnel icon. */
a[role="button"][data-bs-toggle="collapse"] .bi-funnel-fill,
.panel.panel-default .panel-heading .panel-title i.bi-funnel-fill {
    font-size: 1rem !important;
    vertical-align: middle;
}

a[role="button"][data-bs-toggle="collapse"],
.panel.panel-default .panel-heading .panel-title a,
.panel-title a {
    font-size: 1rem !important;
}

/* Provide spacing similar to Bootstrap's "me-2" if the utility is not present */
.bi-funnel-fill.me-2 { margin-right: .5rem !important; }
.bi-funnel-fill:not(.me-2) { margin-right: .5rem; }



/* Inputs con línea inferior (Tu estilo actual) */
.fcont, .form-control-audi {
    border: none;
    border-bottom: 2px solid var(--audi-gray);
    border-radius: 0;
    background-color: transparent;
    padding: 8px 0;
}

    .fcont:focus, .form-control-audi:focus {
        box-shadow: none;
        border-bottom-color: var(--audi-green);
    }

/* Checkboxes y Radios (Adaptados para no romper BS5) */
.form-check-input:checked {
    background-color: var(--audi-green);
    border-color: var(--audi-green);
}



/* Personalización de Radio Buttons para que sean VERDES */
input[type="radio"]#UserEnabled {
    accent-color: var(--audi-green); /* Esto tiñe el círculo de verde en navegadores modernos */
    transform: scale(1.2); /* Un poco más grandes para que luzcan como en la imagen */
    margin-right: 5px;
    vertical-align: middle;
}

#element label {
    margin-right: 15px;
    color: #555;
    font-weight: 500;
    vertical-align: middle;
}

/* ==========================================================================
   5. COMPONENTES KENDO TELERIK (VERSIÓN 2025.4.1321)
   ========================================================================== */

/* Nota: La versión 2025 utiliza más variables CSS (--kendo-*) */

/* Grid: Selección y Hovers */
.k-grid {
    border-radius: 8px;
    overflow: hidden;
}

    /* Fila seleccionada (Actualizado de .k-state-selected a .k-selected) */
    .k-grid tr.k-selected,
    .k-selected,
    .k-listview > .k-selected {
        background-color: var(--audi-green) !important;
        color: #fff !important;
    }

    /* Hover en celdas */
    .k-grid td:hover {
        /* use a variable derived color instead of hardcoded green */
        background-color: color-mix(in srgb, var(--audi-green) 20%, transparent) !important;
        cursor: pointer;
    }

/* Botones dentro de Kendo */
.k-button-solid-primary, .k-grid-update {
    background-color: var(--audi-green) !important;
    border-color: var(--audi-green) !important;
}

/* Tabs / TabStrip */
.k-tabstrip-items .k-item.k-active {
    border-bottom: 3px solid var(--audi-green) !important;
}

/* Cargando / Loading */
.k-loading-mask .k-loading-image {
    background-image: url(/Content/img/paxaudi.gif) !important;
    background-size: contain;
}

/* Scrollbars Personalizados (Solo Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--audi-green-3ab);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* ==========================================================================
   6. CLASES DE UTILIDAD ESPECÍFICAS
   ========================================================================== */
.myDiv-status {
    min-height: 50px;
    padding: 10px;
    border: 2px solid;
    border-radius: 4px;
    margin-bottom: 10px;
}

    .myDiv-status.error {
        border-color: red;
    }

    .myDiv-status.success {
        border-color: var(--audi-green);
    }

    .myDiv-status.warning {
        border-color: #ff8100;
    }

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5) url(/Content/img/paxaudi.gif) no-repeat center;
    z-index: 9999;
}

.loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5) url(/Content/img/paxaudi.gif) no-repeat center;
    z-index: 100;
}

/* SweetAlert2 topbar customizations */
.swal2-topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.swal2-topbar .swal2-html-container {
    font-size: 1rem;
    text-align: left;
}
.swal2-topbar-success { background-color: #3ab549 !important; color: #fff !important; }
.swal2-topbar-danger { background-color: #ff4d4f !important; color: #fff !important; }
.swal2-topbar-warning { background-color: #ffb020 !important; color: #111 !important; }
.swal2-topbar-info { background-color: #63BBCD !important; color: #fff !important; }
.swal2-topbar .swal2-title { color: inherit !important; }
.swal2-topbar .swal2-close { color: #fff !important; }

/* Nav-tabs used as stepper/tabs: render tab links as normal text (no blue, no underline)
   Targets only bootstrap tab components (ul.nav.nav-tabs) so regular anchors are unaffected. */
ul.nav.nav-tabs[role="tablist"] .nav-link,
ul.nav.nav-tabs .nav-link {
    color: inherit !important; /* use surrounding text color */
    text-decoration: none !important; /* remove underline */
    background: transparent !important; /* avoid default link backgrounds */
    border: none !important; /* let bootstrap handle active underline if needed */
    padding: .5rem .75rem !important;
}

ul.nav.nav-tabs[role="tablist"] .nav-link:hover,
ul.nav.nav-tabs .nav-link:hover {
    color: var(--kendo-primary, #63BBCD) !important; /* subtle hover color */
    text-decoration: none !important;
}

/* Keep active tab visually distinct but still not blue/underlined */
ul.nav.nav-tabs[role="tablist"] .nav-link.active,
ul.nav.nav-tabs .nav-link.active {
    font-weight: 700;
    color: var(--kendo-primary, #63BBCD) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--kendo-primary, #63BBCD) !important;
}

/* Make collapse toggles that use role="button" look like plain text (non-blue, no underline)
   This targets anchors used as buttons for collapse panels (data-bs-toggle="collapse").
   It avoids modifying regular links elsewhere. */
a[role="button"][data-bs-toggle="collapse"],
a[role='button'][data-bs-toggle='collapse'] {
    color: #444 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0 !important;
}

a[role="button"][data-bs-toggle="collapse"]:hover,
a[role='button'][data-bs-toggle='collapse']:hover {
    color: var(--kendo-primary, #63BBCD) !important;
    text-decoration: none !important;
}

/* ======================================================================
   COMPATIBILITY: Legacy classes from original main (Bootstrap 3 / Kendo 2016)
   These were present in the older temporary file; kept where still useful.
   Colors mapped to the new CSS variables above.
   Review and remove selectors if a component-specific stylesheet provides them.
 ====================================================================== */

.boton-azul {
    height: 40px;
    width: 100%;
    max-width: 165px;
    border-radius: 8px;
    color: #FFF;
    background: url(/Content/img/boton-azul-bg.jpg) repeat-x;
    background-size: auto 100%;
    font-size: 12px;
}

.logo {
    width: 121px;
    height: 42px;
    float: left;
    margin: 10px 0;
}

.logo a {
    display: block;
    width: 121px;
    height: 44px;
    text-indent: -9999px;
    background: url(/Content/img/logo.png) no-repeat center;
}

.head-nav { list-style: none; margin: 0; }
.head-nav li { float: left; height: 64px; }
.head-nav .cerrar-sesion { font-size: 13px; padding-top: 25px; text-align: center; color: #6a6a59; display:block; height:64px; width:110px; }
.head-usuario a { color: var(--kendo-primary, #63BBCD); text-decoration: none; line-height: 34px; }

.footer { text-align: center; height: 60px; padding-top: 11px; position: fixed; width: 100%; bottom: 0; left: 0; }
.espacio-footer { height: 60px; margin-top: 20px; display: block; }

.logo-login { background: url('../img/Audi.png') no-repeat center; width: 290px; height: 140px; margin: 0 auto 40px; text-indent: -9999px; }
.logo-login-Mabe { background: url(/Content/img/logo-loguin-mabe.png) no-repeat center; width: 361px; height: 123px; margin: 0 auto 40px; text-indent: -9999px; }

.interna-cont { padding: 65px 0 0; }
.interna-head { background: #a4a4a4; height: 40px; margin-bottom: 40px; }
.interna-head h2 { text-align:center; margin:0; color:#FFF; padding:12px 0; font-size:15px; font-weight:700; text-transform:uppercase; }

.interna-cont table th { background: #000; padding: 10px 15px; border-bottom: 12px #f8f8ef solid; color: #FFF; font-weight: 400; font-size: 13px; }
.interna-cont table tr:nth-child(even) { background: #e2e2df }
.interna-cont table td.activo { color: var(--audi-green-52be); }

.k-header .k-link { text-align: center; }
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button { min-width: 64px; font-weight: bold; }

.input-group-addon { background-color: #fff; border-left-width: 0; border-radius: 8px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 8px 8px 0; border-left-width: 0; }

.fajcontrol { border-radius: 8px; border: solid 2px var(--audi-gray); }
.fajcontrol:focus { border-radius: 8px; border: solid 2px var(--audi-gray); }

.fcont { display: block; width: 100%; height: 34px; padding: 6px 12px; line-height: 1.42857143; color: var(--audi-gray); background-color: #fff; font-family: "AvenirNext-DemiBold", Helvetica, Arial, serif; font-size: 16px; border-bottom: solid 2px var(--audi-gray); border-radius: 0; }
.fcont:focus { border-bottom: solid 2px var(--audi-gray); }

.titu { font-family: "AvenirNext-DemiBold", Helvetica, Arial, serif; font-size: 30px; color: var(--audi-gray); text-align: left; line-height: 41px; margin-left: 0px; }

.k-tabstrip .k-content.k-state-active { border-color: #B2BABB; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: #F4F4F4; }

.k-grid tr.k-state-selected, .k-grid td.k-state-selected, .k-grid td.k-state-selected.k-state-focused { background-color: var(--audi-green) !important; color: #fff; }
.k-grid-update { background-image: none; border-color: var(--audi-green) !important; background-color: var(--audi-green-52be) !important; }
.k-grid-update:hover { background-image: none; border-color: var(--audi-green) !important; background-color: var(--audi-green) !important; }

.k-tabstrip-items .k-state-active { border-color: var(--audi-green) !important; }
.k-tabstrip-items .k-item.k-state-hover { border-color: var(--audi-green) !important; }



.openSans { font-size: 13px; font-family: OpenSans-LightItalic; }

.checkbox-inline.no_indent, .checkbox-inline.no_indent + .checkbox-inline.no_indent { margin-left: 0; margin-right: 10px; padding-left: 0; }
.checkbox-inline.no_indent:last-child { margin-right: 0; padding-left: 0; }

.placement-list { width: 310px; min-height: 80px; margin: 0; padding: 0; border: 1px solid #dddddd; border-radius: 4px; }

.list-item { list-style-type: none; width: 300px; margin: 5px; line-height: 30px; text-align: center; background-color: #222222; color: #ffffff; border-radius: 3px; }
.list-item.assigned, .placement-assigned .list-item { background-color: var(--audi-green-52be); color: #000000; }

.Gst { color: rgba(255, 129, 0, 0.89) !important; }
.Gtach { color: red !important; }

.Sepbtn:active { background-color: #0bff02; }
.Sepbtn:focus { background-color: rgba(141,142,140,0.57); }

.ImageView { align-items: center; margin: auto; height:450px; overflow:auto; }
.ImageView h3 { font-size: 15px; padding-left: 3px; padding-top: 5px; text-transform: uppercase; text-align: center }

.ImageViewM { align-items: center; margin: auto; height: 450px; overflow: auto; }
.ImageViewM h3 { font-size: 12px; padding-left: 30px; padding-top: 5px; text-transform: uppercase; text-align: left; }

.title_View { font-size: 15px; padding-left: 3px; padding-top: 5px; text-transform: uppercase; text-align: center; margin-bottom: -16px; }

.ImageView img { margin: auto; line-height: 50px; text-align: center; max-width: 75%; }

.k-loading-image { position: fixed; width: 100%; height: 100%; background: rgba(231, 232, 230, 0.50) url(/Content/img/paxaudi.gif) no-repeat center !important; background-color: transparent; background-size: 10px; z-index: 100; }

.k-button:hover { background-color: var(--audi-green); color: #fff; border: none; outline: none; }

/* Scrollbars (legacy specific overrides) */
::-webkit-scrollbar-thumb { background-color: var(--audi-green); border-radius: 10px !important; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey !important; border-radius: 10px !important; }

/* Dropdown menu links: render as plain text (no blue, no underline) */
.dropdown-menu a,
.dropdown-menu a:link,
.dropdown-menu a:visited {
    color: inherit !important; /* inherit text color from parent */
    text-decoration: none !important; /* remove underline */
    display: block; /* ensure full clickable row */
    padding: .375rem 1rem; /* similar spacing to bootstrap but customizable */
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: inherit !important;
    text-decoration: none !important;
    background-color: rgba(0,0,0,0.04); /* subtle hover */
}

/* Page-specific overrides --------------------------------------------------
   Adjust the vertical position of the Exit button used in several views.
   This targets the element with id="Exit" only and nudges it up by 10px.
   Using !important to ensure it overrides any layout rules from Bootstrap
   or component CSS that might affect the button positioning.
*/
#Exit {
    margin-top: -30px !important;
}

.store {
    float: left;
    width: 230px;
    height: 450px; /*350*/
    margin-right: 5px;
    margin-top: 15px;
    margin-bottom: 5px;
}

    .store img {
        width: auto;
        height: 110px;
        margin-left: auto;
        margin-right: auto;
        line-height: 50px;
        text-align: center;
        display: block;
        cursor: pointer;
    }

    .store h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 13px;
        padding-left: 3px;
        padding-top: 5px;
        text-transform: uppercase;
        text-align: center;
    }

.storeB {
    float: left;
    width: 355px;
    /*width: 230px;*/
    /*max-height: 400px;*/
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /*border: 2px solid;*/
    padding: 10px;
    margin-left: 5px;
    /*    margin-bottom: 35px;*/
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}


    .storeB img {
        width: auto;
        height: 250px;
        margin-left: auto;
        margin-right: auto;
        line-height: 50px;
        text-align: center;
        display: block;
        cursor: pointer;
    }

    .storeB h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 10px;
        padding-left: 3px;
        padding-top: 5px;
        text-transform: uppercase;
        text-align: left;
    }

.ImageView {
    align-items: center;
    margin: auto;
    height: 450px;
    overflow: auto;
}

    .ImageView::-webkit-scrollbar {
        display: none;
    }

    .ImageView h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
        padding-left: 3px;
        padding-top: 5px;
        text-transform: uppercase;
        text-align: center
    }

.ImageViewM {
    align-items: center;
    margin: auto;
    height: 450px;
    overflow: auto;
    /*padding-left: 25px;*/
}

    .ImageViewM::-webkit-scrollbar {
        display: none;
    }

    .ImageViewM h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        padding-left: 30px;
        padding-top: 5px;
        text-transform: uppercase;
        text-align: left;
    }

.title_View {
    font-size: 15px;
    padding-left: 3px;
    padding-top: 5px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: -16px;
}

.ImageView img {
    margin: auto;
    line-height: 50px;
    text-align: center;
    max-width: 75%;
}

.ImageView figure {
    width: 400px;
    height: auto;
}

.Auevtipe {
    padding: 10px;
    margin-left: 20px;
    line-height: 20px;
    font-family: "AvenirNext-Regular", Helvetica, Arial, serif;
    font-size: 14px;
    color: #8c8c8c;
}

.Geoborde {
    border: 2px solid #3c3b3b;
    max-width: 400px;
    padding: 5px;
}

.storeGe {
    float: left;
    box-shadow: rgb(0 0 0 / 15%) 2.4px 2.4px 3.2px;
    padding: 10px;
}

.TextosModal {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    padding-left: 3px;
    padding-top: 5px;
    text-transform: uppercase;
}

.TextosModal1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 11px;
    padding-left: 3px;
    padding-top: 5px;
    text-transform: uppercase;
}

.treeview-container {
    max-height: 250px;
    overflow-y: auto;
    /*border: 1px solid #ccc;*/
    padding: 5px;
}

.categories-container {
    max-height: 250px;
    min-height: 250px;
    /*overflow-y: auto;*/
    /*border: 1px solid #ccc;*/
    padding: 5px;
}

/* ============================================================
   BLOQUE DE HOMOLOGACIÓN FINAL - SIDEBAR AUDIT
   ============================================================ */

/* 1. Contenedores de seguridad y Scroll */
.AEpnel {
    overflow-x: hidden !important; /* Mata el scroll horizontal del panel */
    max-height: 700px;
    padding: 0 !important;
    margin: 0 !important;
}

#element {
    /* Este padding aleja el contenido del borde azul */
    padding-right: 22px !important;
    padding-left: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Títulos y Chevrons (Alineación a la derecha) */
#mySidenav h4,
#mySidenav legend,
div#mySidenav .col-sm-12 h4,
div#mySidenav .col-sm-12 legend {
    font-family: "AvenirNext-DemiBold", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #8C8C8C !important;
    display: flex !important;
    justify-content: space-between !important; /* Texto <---> Icono */
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: none !important;
    line-height: normal !important;
}

    #mySidenav h4 a,
    #mySidenav legend a {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        font-size: inherit !important;
        color: inherit !important;
        text-decoration: none !important;
    }

    #mySidenav h4 i.bi,
    #mySidenav legend i.bi,
    #mySidenav h4 .k-icon,
    #mySidenav legend .k-icon {
        font-size: 13px !important;
        color: #63BBCD !important;
        margin-left: auto !important; /* Asegura posición extrema derecha */
    }

/* 3. Elementos de formulario y limpieza de anchos */
#mySidenav label,
#mySidenav span {
    font-size: 13px !important;
    color: #666 !important;
}

#mySidenav input,
#mySidenav select,
#mySidenav .k-widget,
#mySidenav .col-sm-12 {
    max-width: 100% !important; /* No permite que nada empuje hacia afuera */
    box-sizing: border-box !important;
}

/* 1. Ajuste de los cuadros de valores */
.valores {
    border: solid 1px #8c8c8c;
    padding: 8px;
    box-shadow: rgb(183 183 183 / 29%) 5px 5px;
    /* Cambiamos margin: 5px por margin-bottom para no romper el ancho horizontal */
    margin-bottom: 10px;
    margin-top: 5px;
    width: 100%;
    display: block;
    box-sizing: border-box; /* Asegura que el borde no sume al ancho total */
    background-color: #fff;
    text-align: center;
}

/* 2. Limpieza de los legends para alineación perfecta */
#contentResume legend {
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    padding-left: 0;
    width: 100%;
    color: #444;
}

/* Contenedor interno para evitar desbordamiento lateral */
.resume-inner-container {
    padding: 0 10px;
}

/* ============================================================
   HOMOLOGACIÓN FINAL: PANEL -> CARD STYLE (CHEVRON A LA DERECHA)
   ============================================================ */

/* 1. Contenedor del Panel (Estilo Card) */
#accordion .panel.panel-default {
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem !important;
    background-color: #fff !important;
}

/* 2. Header (Gris tenue de las cards) */
#accordion .panel-heading {
    background-color: rgba(0,0,0,.03) !important; 
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
    padding: 0.75rem 1.25rem !important;
    border-top-left-radius: calc(0.25rem - 1px) !important;
    border-top-right-radius: calc(0.25rem - 1px) !important;
}

/* 3. Título y Enlace (Alineación Flexible) */
#accordion .panel-title {
    margin: 0 !important;
    display: flex !important;
    width: 100% !important;
}

#accordion .panel-title a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Alinea el inicio a la izquierda */
    width: 100% !important;
    color: #444 !important;
    font-size: 15px !important; /* Tu estándar */
    font-family: "AvenirNext-DemiBold", sans-serif !important;
    text-decoration: none !important;
}

/* 4. Comportamiento de los Chevrons */

/* El "imán" que empuja el chevron al extremo derecho */
#accordion .panel-title a i.bi-chevron-down,
#accordion .panel-title a i.bi-chevron-up,
#accordion .panel-title a #Expand,
#accordion .panel-title a #NoExpand {
    margin-left: auto !important; /* Absorbe el espacio sobrante y empuja a la derecha */
    font-size: 13px !important;
    color: #63BBCD !important;
    padding-left: 10px; /* Margen mínimo de seguridad si el texto es muy largo */
}

/* Lógica de visibilidad (Solo uno a la vez según el estado) */
#accordion a[aria-expanded="true"] .bi-chevron-down,
#accordion a[aria-expanded="true"] #Expand {
    display: none !important;
}

#accordion a[aria-expanded="false"] .bi-chevron-up,
#accordion a[aria-expanded="false"] #NoExpand {
    display: none !important;
}

/* 5. El cuerpo del filtro */
#accordion .panel-body {
    padding: 1.25rem !important;
    border-top: none !important;
}

/*Fondo*/
.fondo {
    background: #fff;
    width: 100%;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    /*margin-top:50px;*/
}