/* ============================================================
   MODERN UI — Capa de modernización visual TeamVOX
   Se carga DESPUÉS de assets/css/style.css y sobreescribe el
   tema "Annex" sin modificar los archivos originales.
   Para revertir: quitar la referencia en _Layout.cshtml y
   _LayoutPage.cshtml.
   ============================================================ */

:root {
    /* Marca */
    --tv-primary: #F26835;
    --tv-primary-dark: #d95422;
    --tv-primary-light: #fdeee7;
    --tv-primary-ring: rgba(242, 104, 53, 0.25);
    /* Neutros */
    --tv-bg: #f4f6fa;
    --tv-surface: #ffffff;
    --tv-ink: #1e293b;
    --tv-ink-soft: #475569;
    --tv-ink-muted: #94a3b8;
    --tv-border: #e2e8f0;
    /* Barra de navegación (naranja del emblema Servitron) */
    --tv-nav: #F26835;
    --tv-nav-hover: #d95422;
    /* Estados */
    --tv-success: #10b981;
    --tv-info: #0ea5e9;
    --tv-warning: #f59e0b;
    --tv-danger: #ef4444;
    /* Forma */
    --tv-radius-sm: 8px;
    --tv-radius: 12px;
    --tv-radius-lg: 16px;
    --tv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --tv-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 10px 24px -6px rgba(15, 23, 42, 0.08);
    --tv-shadow-lg: 0 20px 45px -12px rgba(15, 23, 42, 0.22);
    --tv-transition: 0.18s ease;
}

/* ==============
   Base / tipografía
   ============== */
body {
    background: var(--tv-bg);
    font-family: "Inter", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tv-ink-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tv-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    transition: color var(--tv-transition);
}

/* Barra de desplazamiento moderna */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid var(--tv-bg);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--tv-ink-muted);
    }

/* Selección de texto en color de marca */
::selection {
    background: var(--tv-primary);
    color: #fff;
}

/* Preloader: spinner CSS en lugar del GIF */
#preloader {
    background-color: var(--tv-bg);
}

.tv-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--tv-primary-light);
    border-top-color: var(--tv-primary);
    border-radius: 50%;
    animation: tv-spin 0.8s linear infinite;
    margin: 0 auto 8px;
}

@keyframes tv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==============
   Barra superior (topbar)
   ============== */
#topnav .topbar-main {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--tv-border);
    /* El backdrop-filter crea un contexto de apilamiento propio: sin esto,
       los desplegables de la barra superior (selector de tecnología, perfil)
       quedan ocultos detrás del menú de navegación */
    position: relative;
    z-index: 2;
}

#topnav .navbar-custom {
    position: relative;
    z-index: 1;
}

#topnav .topbar-main .nav-link {
    color: var(--tv-ink-soft);
    border-radius: var(--tv-radius-sm);
    transition: background var(--tv-transition), color var(--tv-transition);
}

    #topnav .topbar-main .nav-link:hover {
        color: var(--tv-primary);
    }

.nav-user img,
img.rounded-circle {
    border: 2px solid var(--tv-border);
    box-shadow: var(--tv-shadow-sm);
}

/* ==============
   Menú de navegación principal
   ============== */
#topnav .navbar-custom {
    background-color: var(--tv-nav);
    background-image: linear-gradient(90deg, var(--tv-nav) 0%, var(--tv-nav-hover) 100%);
    box-shadow: 0 4px 14px rgba(217, 84, 34, 0.28);
    padding-left: 0;
}

#topnav .navigation-menu > li > a {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    transition: color var(--tv-transition), background var(--tv-transition);
}

    #topnav .navigation-menu > li > a i {
        color: rgba(255, 255, 255, 0.72);
        transition: color var(--tv-transition);
    }

@media (min-width: 992px) {
    #topnav .navigation-menu > li:hover > a,
    #topnav .navigation-menu > li.active > a {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.16);
    }

        #topnav .navigation-menu > li:hover > a i,
        #topnav .navigation-menu > li.active > a i {
            color: #ffffff;
        }

    /* Submenús flotantes */
    #topnav .navigation-menu > li .submenu {
        border: 1px solid var(--tv-border);
        border-radius: var(--tv-radius);
        box-shadow: var(--tv-shadow-lg);
        padding: 8px;
        margin-top: 8px;
        overflow: hidden;
    }

        #topnav .navigation-menu > li .submenu li a {
            border-radius: var(--tv-radius-sm);
            color: var(--tv-ink-soft);
            padding: 9px 14px;
            transition: background var(--tv-transition), color var(--tv-transition), padding-left var(--tv-transition);
        }

            #topnav .navigation-menu > li .submenu li a:hover {
                background: var(--tv-primary-light);
                color: var(--tv-primary);
            }
}

/* Mejoras de usabilidad del menú (escritorio) */
@media (min-width: 992px) {
    /* Compacto: caben más opciones antes de desbordar la barra */
    #topnav .navigation-menu > li > a {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 14px;
    }

    /* Indicador de submenú (chevron); .with-children lo asigna modern-menu.js
       solo a los ítems que de verdad tienen hijos */
    #topnav .navigation-menu > li.with-children > a::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-left: 8px;
        vertical-align: 2px;
        opacity: 0.7;
        transition: transform var(--tv-transition);
    }

    #topnav .navigation-menu > li.with-children:hover > a::after,
    #topnav .navigation-menu > li.with-children:focus-within > a::after {
        transform: rotate(225deg);
        vertical-align: -1px;
    }

    /* Accesibilidad: los submenús también abren navegando con Tab */
    #topnav .navigation-menu > li.has-submenu:focus-within > .submenu {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
    }

    /* Sección activa: subrayado blanco (la barra ya es del color de marca) */
    #topnav .navigation-menu > li.active > a {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: inset 0 -3px 0 #ffffff;
    }

        #topnav .navigation-menu > li.active > a i {
            color: #ffffff;
        }

    /* Opción activa dentro del submenú */
    #topnav .navigation-menu > li .submenu li.active > a {
        background: var(--tv-primary-light);
        color: var(--tv-primary);
        font-weight: 600;
        border-radius: var(--tv-radius-sm);
    }
}

/* Tier compacto extra en pantallas medianas */
@media (min-width: 992px) and (max-width: 1366px) {
    #topnav .navigation-menu > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13.5px;
    }
}

/* Opción activa del submenú: el tema la pintaba con el índigo viejo */
#topnav .has-submenu.active .submenu li.active > a {
    color: var(--tv-primary);
    font-weight: 600;
}

/* Menú móvil */
@media (max-width: 991px) {
    #topnav .navigation-menu > li > a {
        color: var(--tv-ink);
    }

    #topnav .navigation-menu > li .submenu li a {
        color: var(--tv-ink-soft);
    }

        #topnav .has-submenu.active a,
        #topnav .navigation-menu > li > a:hover,
        #topnav .navigation-menu > li .submenu li a:hover {
            color: var(--tv-primary);
        }

    #topnav .navigation-menu > li.active > a,
    #topnav .navigation-menu > li .submenu li.active > a {
        color: var(--tv-primary) !important;
        font-weight: 600;
    }

    #topnav .navbar-custom {
        background: #ffffff;
        background-image: none;
        box-shadow: var(--tv-shadow);
    }
}

/* ==============
   Títulos de página
   ============== */
.page-title-box .page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--tv-ink);
    letter-spacing: -0.02em;
}

.page-title-box .breadcrumb {
    background: transparent;
    padding-left: 0;
}

    .page-title-box .breadcrumb .breadcrumb-item a {
        color: var(--tv-ink-muted);
    }

        .page-title-box .breadcrumb .breadcrumb-item a:hover {
            color: var(--tv-primary);
        }

/* ==============
   Tarjetas
   ============== */
.card,
.card-box,
.mini-stat {
    background: var(--tv-surface);
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow-sm);
    transition: box-shadow var(--tv-transition), transform var(--tv-transition);
}

.card-box {
    padding: 24px;
    margin-bottom: 24px;
}

    .card:hover,
    .card-box:hover,
    .mini-stat:hover {
        box-shadow: var(--tv-shadow);
    }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--tv-border);
    font-weight: 600;
    color: var(--tv-ink);
}

.header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tv-ink);
}

.mini-stat-icon {
    border-radius: var(--tv-radius);
}

.mini-stat-info span {
    font-weight: 700;
    color: var(--tv-ink);
}

/* Paneles legados (clases .panel de Bootstrap 3 usadas en vistas de consumo) */
.panel {
    background: var(--tv-surface);
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.panel-body {
    padding: 16px;
}

.modern-panel-heading {
    background: #f8fafc;
    border-bottom: 1px solid var(--tv-border);
    padding: 12px 16px;
}

    .modern-panel-heading p {
        margin: 0;
        font-weight: 600;
        font-size: 14px;
        color: var(--tv-ink);
    }

/* Botón de carga de archivos legado: 30 vistas lo definen inline en teal
   (#02a39c); se alinea a la marca desde aquí sin tocar cada vista */
#buttonImage {
    background: var(--tv-primary) !important;
    border-radius: 0 var(--tv-radius-sm) var(--tv-radius-sm) 0 !important;
}

/* ==============
   Botones
   ============== */
.btn {
    border-radius: var(--tv-radius-sm);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 18px;
    transition: background var(--tv-transition), border-color var(--tv-transition), box-shadow var(--tv-transition), transform var(--tv-transition);
}

    .btn:active {
        transform: translateY(1px);
    }

    .btn:focus {
        box-shadow: 0 0 0 3px var(--tv-primary-ring);
    }

.btn-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary:hover,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--tv-primary);
    border: 1px solid var(--tv-primary);
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        background-color: var(--tv-primary-dark);
        border: 1px solid var(--tv-primary-dark);
    }

.btn-outline-primary {
    color: var(--tv-primary);
    border-color: var(--tv-primary);
}

.btn-success {
    background-color: var(--tv-success);
    border-color: var(--tv-success);
}

.btn-info {
    background-color: var(--tv-info);
    border-color: var(--tv-info);
}

.btn-warning {
    background-color: var(--tv-warning);
    border-color: var(--tv-warning);
}

.btn-danger {
    background-color: var(--tv-danger);
    border-color: var(--tv-danger);
}

.btn-secondary {
    background-color: #f1f5f9;
    border-color: var(--tv-border);
    color: var(--tv-ink-soft);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--tv-border);
        border-color: #cbd5e1;
        color: var(--tv-ink);
    }

/* ==============
   Barra de acciones de listados
   (Realizar, reporte de consumos, compra de plan, crear/editar números)
   ============== */
/* Los botones "grandes" traen height:52px, width:100% y float inline:
   se normalizan para que midan lo natural y no se salgan de la tarjeta.
   Cubre todos los pares divLarge/divSmall, divRealizar*, divBuscar*, etc. */
div[id$="Large"] > .btn,
div[id$="Large"] > a.btn {
    height: auto !important;
    min-height: 38px;
    width: auto !important;
    max-width: 100%;
    float: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div[id$="Small"] > .btn {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Una sola fila: los botones comparten el espacio disponible y recortan
   su texto con puntos suspensivos cuando no caben (el title de cada
   botón muestra el nombre completo al pasar el cursor). La cadena de
   min-width:0 permite que los envoltorios flex realmente encojan. */
.card-body .d-flex.justify-content-between:has(div[id$="Large"]):not(:has(select, input)) {
    flex-wrap: nowrap;
    justify-content: flex-end !important;
    gap: 8px;
    min-width: 0;
}

    .card-body .d-flex.justify-content-between:has(div[id$="Large"]):not(:has(select, input)) .d-flex {
        min-width: 0;
    }

    .card-body .d-flex.justify-content-between:has(div[id$="Large"]):not(:has(select, input)) div[id$="Large"] {
        min-width: 0;
        overflow: hidden;
    }

/* En pantallas pequeñas (móvil/tableta) solo se muestra la versión de
   icono; unifica los puntos de quiebre dispares de cada vista (795px,
   850px...) con el umbral móvil del resto de la interfaz */
@media (max-width: 991px) {
    div[id$="Large"] {
        display: none !important;
    }

    div[id$="Small"] {
        display: block !important;
    }

    /* La barra completa (select + Realizar + botones de acción) se junta
       en un solo renglón centrado: las columnas del grid dejan de ocupar
       el 100% y miden lo que su contenido necesita */
    .card-body .row:has(div[id^="divRealizar"]) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

        .card-body .row:has(div[id^="divRealizar"]) > [class*="col-"] {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }

        .card-body .row:has(div[id^="divRealizar"]) .d-flex.justify-content-between {
            width: auto !important;
            padding-top: 0 !important;
        }

        /* El select de operaciones no debe acaparar el renglón */
        .card-body .row:has(div[id^="divRealizar"]) select.form-control {
            max-width: 44vw;
        }

    /* Los grupos de botones se centran en vez de alinearse a la derecha */
    .card-body .d-flex.justify-content-between:has(div[id$="Large"]):not(:has(select, input)) {
        justify-content: center !important;
    }
}

/* Evita que las columnas del grid fuercen desbordes horizontales */
.card-body .row > [class*="col-"] {
    min-width: 0;
}

/* ==============
   Formularios
   ============== */
.form-control,
.custom-select {
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius-sm);
    color: var(--tv-ink);
    background-color: #fff;
    transition: border-color var(--tv-transition), box-shadow var(--tv-transition);
}

    .form-control:focus,
    .custom-select:focus {
        border-color: var(--tv-primary);
        box-shadow: 0 0 0 3px var(--tv-primary-ring);
    }

    .form-control::placeholder {
        color: var(--tv-ink-muted);
    }

label {
    color: var(--tv-ink-soft);
    font-weight: 500;
    font-size: 13.5px;
}

.input-group-addon,
.input-group-text {
    border-radius: var(--tv-radius-sm);
    border: 1px solid var(--tv-border);
    background: #f8fafc;
    color: var(--tv-ink-soft);
}

/* Selects estilizados (bootstrap-select / multiselect) */
.bootstrap-select > .dropdown-toggle,
.multiselectStyle,
.multiselect.dropdown-toggle {
    border: 1px solid var(--tv-border) !important;
    border-radius: var(--tv-radius-sm) !important;
    background-color: #fff !important;
    color: var(--tv-ink) !important;
    transition: border-color var(--tv-transition), box-shadow var(--tv-transition);
}

    .bootstrap-select > .dropdown-toggle:focus,
    .multiselect.dropdown-toggle:focus {
        border-color: var(--tv-primary) !important;
        box-shadow: 0 0 0 3px var(--tv-primary-ring) !important;
        outline: none !important;
    }

/* Select2 */
.select2-container--material .select2-selection--single,
.select2-container--material .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--tv-border) !important;
    border-radius: var(--tv-radius-sm) !important;
}

.select2-container--open .select2-dropdown {
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius-sm);
    box-shadow: var(--tv-shadow-lg);
    overflow: hidden;
}

.select2-container--material .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tv-primary) !important;
    color: #fff;
}

/* ==============
   Menús desplegables
   ============== */
.dropdown-menu {
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow-lg);
    padding: 8px;
}

.dropdown-item {
    border-radius: var(--tv-radius-sm);
    color: var(--tv-ink-soft);
    padding: 8px 12px;
    transition: background var(--tv-transition), color var(--tv-transition);
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: var(--tv-primary-light);
        color: var(--tv-primary);
    }

.dropdown-divider {
    border-top-color: var(--tv-border);
}

/* ==============
   Tablas / DataTables
   ============== */
.table {
    color: var(--tv-ink-soft);
}

    .table thead th,
    table.dataTable thead th {
        background: #f8fafc;
        color: var(--tv-ink);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-top: none;
        border-bottom: 1px solid var(--tv-border) !important;
    }

    .table td,
    table.dataTable tbody td {
        border-top: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .table-hover tbody tr:hover,
    table.dataTable.hover tbody tr:hover,
    table.dataTable tbody tr:hover {
        background-color: #f8fafc;
    }

/* Paginación DataTables estilo "píldoras".
   La integración de Bootstrap 4 genera
   <li class="paginate_button page-item [previous|next|active]"><a class="page-link">,
   así que se estilan las dos familias de clases. */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-item .page-link {
    border-radius: var(--tv-radius-sm) !important;
    margin: 0 2px;
    border: none !important;
    color: var(--tv-ink-soft) !important;
    transition: background var(--tv-transition), color var(--tv-transition);
}

/* Ancho mínimo uniforme: sin esto el botón de la página "1" es más
   estrecho que el de la "10" y la fila baila al cambiar de página */
.dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 34px;
    text-align: center;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tv-primary) !important;
    color: #fff !important;
    border-color: var(--tv-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tv-primary-light) !important;
    color: var(--tv-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: transparent !important;
    color: var(--tv-ink-muted) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius-sm);
    padding: 5px 10px;
    outline: none;
    transition: border-color var(--tv-transition), box-shadow var(--tv-transition);
}

    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
        border-color: var(--tv-primary);
        box-shadow: 0 0 0 3px var(--tv-primary-ring);
    }

/* Las etiquetas envuelven al control ("Mostrando [select] registros por
   página", "Buscar: [input]"): se maquetan como fila flexible para que el
   control no quede pegado al texto. */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--tv-ink-soft);
}

/* ==============
   DataTables en móvil
   ==============
   Cada bloque (longitud, buscador, info y paginación) pasa a ocupar el
   ancho completo y se centra. La paginación es el problema real: con
   `pageLength: 50` sobre listados de miles de registros DataTables pinta
   decenas de números que no caben y desbordan/parten el renglón. Por
   debajo de 768px se reduce a Anterior / página actual / Siguiente:
   siempre cabe en una línea y los tres objetivos táctiles quedan
   separados. Los números intermedios y los puntos suspensivos se ocultan;
   en un teléfono no son objetivos cómodos de tocar. */
@media (max-width: 767.98px) {
    /* Se replica la forma de selector de dataTables.bootstrap4.css
       (div.dataTables_wrapper div.dataTables_length) para ganarle: con
       `.dataTables_wrapper .dataTables_length` se pierde por especificidad. */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center !important;
        margin-bottom: 8px;
        white-space: normal;
    }

    /* El buscador ocupa el ancho útil en lugar de quedar en una caja
       diminuta alineada a la derecha */
    div.dataTables_wrapper div.dataTables_filter label {
        display: flex;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        margin-left: 0;
    }

    div.dataTables_wrapper div.dataTables_length label {
        display: flex;
        justify-content: center;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0;
        white-space: nowrap;
    }

    .dataTables_wrapper .dataTables_paginate .page-item {
        display: none;
    }

    .dataTables_wrapper .dataTables_paginate .page-item.previous,
    .dataTables_wrapper .dataTables_paginate .page-item.next,
    .dataTables_wrapper .dataTables_paginate .page-item.active {
        display: block;
    }

    /* Da contexto al número, que suelto no se entendería. El espacio va
       como carácter duro (\00a0): uno normal al final de `content` lo
       colapsa el navegador y quedaría "Página1". */
    .dataTables_wrapper .dataTables_paginate .page-item.active .page-link::before {
        content: "Página\00a0";
    }

    /* Objetivo táctil de 40px de alto (recomendación WCAG 2.5.5) */
    .dataTables_wrapper .dataTables_paginate .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
        margin: 0;
        padding: 0 12px;
        white-space: nowrap;
    }
}

/* Tabletas: aún caben los números, pero se dejan envolver en vez de
   desbordar la tarjeta hacia la derecha */
@media (min-width: 768px) and (max-width: 991.98px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        flex-wrap: wrap;
        justify-content: flex-end;
        white-space: normal;
    }
}

/* Botones de exportación de DataTables */
.dt-buttons .btn,
.dt-button {
    background: #fff !important;
    border: 1px solid var(--tv-border) !important;
    color: var(--tv-ink-soft) !important;
    border-radius: var(--tv-radius-sm) !important;
}

    .dt-buttons .btn:hover,
    .dt-button:hover {
        background: var(--tv-primary-light) !important;
        color: var(--tv-primary) !important;
        border-color: var(--tv-primary) !important;
    }

/* ==============
   Filas desplegables de DataTables Responsive (vista móvil)
   ==============
   Al colapsar columnas, el plugin pinta un botón "+/-" azul/rojo propio y
   una lista de pares título/valor sin estilo. Se lleva a la marca y se
   maqueta como ficha legible, que es lo que hace que el listado se lea
   bien en el teléfono. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before,
table.dataTable.dtr-column > tbody > tr > td.control::before {
    background-color: var(--tv-primary) !important;
    box-shadow: none !important;
    border-color: #fff !important;
    font-family: inherit !important;
    font-weight: 700;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before,
table.dataTable.dtr-column > tbody > tr.parent td.control::before {
    background-color: var(--tv-ink-muted) !important;
}

/* El :hover lleva !important porque responsive.bootstrap4.css fuerza
   `background: transparent !important` en la fila hija */
table.dataTable > tbody > tr.child,
table.dataTable > tbody > tr.child:hover {
    background: #fbfcfe !important;
}

    table.dataTable > tbody > tr.child > td {
        padding: 12px 16px;
    }

    table.dataTable > tbody > tr.child ul.dtr-details {
        display: block;
        width: 100%;
    }

    table.dataTable > tbody > tr.child ul li {
        border-bottom: 1px solid var(--tv-border);
        padding: 8px 0;
    }

/* Etiqueta arriba en gris pequeño y valor debajo: en una columna estrecha
   el par en línea partía el valor a media palabra */
table.dataTable > tbody > tr.child span.dtr-title {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tv-ink-muted);
}

table.dataTable > tbody > tr.child span.dtr-data {
    display: block;
    color: var(--tv-ink);
    word-break: break-word;
}

/* ==============
   Columna "Opciones" de los listados
   Los botones de acción (editar, comprar, cambiar, detalle, baja, alias)
   se alinean en renglones de 4 como máximo en escritorio y en un único
   renglón en móvil, tanto en la celda de la tabla como en el detalle
   responsive.
   ============== */
table.dataTable tbody td:has(> .btn),
table.dataTable td.child .dtr-data:has(> .btn) {
    white-space: nowrap;
}

/* Tamaño y separación uniformes; el margin inline de las vistas
   (style="margin-right: 5px") se normaliza aquí */
table.dataTable tbody td > .btn.btn-sm,
table.dataTable td.child .dtr-data > .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 6px 0 0 !important;
}

    /* Botón de solo icono: cuadrado e idéntico en todos los listados */
    table.dataTable tbody td > .btn.btn-sm:has(> i:only-child),
    table.dataTable td.child .dtr-data > .btn.btn-sm:has(> i:only-child) {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    table.dataTable tbody td > .btn.btn-sm:last-child,
    table.dataTable td.child .dtr-data > .btn.btn-sm:last-child {
        margin-right: 0 !important;
    }

/* En escritorio, como máximo cuatro botones por renglón: la celda se fija
   al ancho de 4 botones (32px + 6px de separación = 152px de contenido) y
   el 5º en adelante bajan a un segundo renglón. `font-size: 0` elimina los
   espacios en blanco que las vistas dejan entre botones — cada botón trae
   su propio tamaño de fuente, así que el icono no se ve afectado.
   En móvil no aplica: ahí manda el `nowrap` de arriba (una sola fila). */
@media (min-width: 992px) {
    table.dataTable tbody td:has(> .btn.btn-sm > i:only-child) {
        white-space: normal;
        font-size: 0;
        box-sizing: content-box;
        width: 152px;
        min-width: 152px;
    }

        table.dataTable tbody td:has(> .btn.btn-sm > i:only-child) > .btn.btn-sm {
            margin: 3px 6px 3px 0 !important;
        }
}

/* En móvil el detalle responsive pone el título encima y los botones
   debajo: la fila de acciones ocupa el ancho y no se envuelve */
@media (max-width: 991px) {
    table.dataTable td.child .dtr-details > li:has(.btn) {
        display: block;
    }

        table.dataTable td.child .dtr-details > li:has(.btn) .dtr-data {
            display: block;
            padding-top: 4px;
        }
}

/* ==============
   Modales
   ============== */
.modal-content {
    border: none;
    border-radius: var(--tv-radius-lg);
    box-shadow: var(--tv-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: none;
    padding: 18px 24px;
}

    .modal-header .modal-title {
        font-weight: 600;
        color: inherit;
    }

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--tv-border);
    padding: 14px 24px;
    background: #f8fafc;
}

.modal-backdrop.show {
    opacity: 0.55;
}

/* ==============
   Alertas y badges
   ============== */
.alert {
    border: none;
    border-radius: var(--tv-radius);
    border-left: 4px solid transparent;
}

.alert-success {
    background: #ecfdf5;
    border-left-color: var(--tv-success);
    color: #065f46;
}

.alert-info {
    background: #f0f9ff;
    border-left-color: var(--tv-info);
    color: #075985;
}

.alert-warning {
    background: #fffbeb;
    border-left-color: var(--tv-warning);
    color: #92400e;
}

.alert-danger {
    background: #fef2f2;
    border-left-color: var(--tv-danger);
    color: #991b1b;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 10px;
    letter-spacing: 0.02em;
}

.badge-primary {
    background-color: var(--tv-primary);
}

/* ==============
   Pestañas (tabs)
   ============== */
.nav-tabs {
    border-bottom: 1px solid var(--tv-border);
}

    .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: var(--tv-ink-soft);
        font-weight: 500;
        transition: color var(--tv-transition), border-color var(--tv-transition);
    }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-link:hover {
            color: var(--tv-primary);
            border-bottom-color: var(--tv-primary);
            background: transparent;
        }

.nav-pills .nav-link {
    border-radius: var(--tv-radius-sm);
    color: var(--tv-ink-soft);
}

    .nav-pills .nav-link.active {
        background-color: var(--tv-primary);
    }

/* Pestañas legadas .activeTab/.inactiveTab: varias vistas las definen inline
   con !important (fondo naranja sólido); se neutralizan con mayor
   especificidad para alinearlas al estilo de subrayado del Modern UI */
.nav-tabs .nav-link.activeTab {
    background-color: transparent !important;
    color: var(--tv-primary) !important;
    border: none !important;
    border-bottom: 2px solid var(--tv-primary) !important;
    font-family: inherit !important;
    font-weight: 600;
}

.nav-tabs .nav-link.inactiveTab {
    background-color: transparent !important;
    color: var(--tv-ink-soft) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: inherit !important;
}

    .nav-tabs .nav-link.inactiveTab:hover {
        color: var(--tv-primary) !important;
    }

/* ==============
   SweetAlert2
   ============== */
.swal2-popup {
    border-radius: var(--tv-radius-lg) !important;
    box-shadow: var(--tv-shadow-lg) !important;
    font-family: inherit !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--tv-primary) !important;
    border-radius: var(--tv-radius-sm) !important;
}

.swal2-styled.swal2-cancel {
    border-radius: var(--tv-radius-sm) !important;
}

/* ==============
   Página de acceso (login)
   ============== */
.accountbg {
    background: linear-gradient(135deg, #1e293b 0%, #33415c 55%, #F26835 180%);
}

.wrapper-page .card {
    border: none;
    border-radius: var(--tv-radius-lg);
    box-shadow: var(--tv-shadow-lg);
}

/* ==============
   Pie de página
   ============== */
.footer {
    border-top: none;
}

/* ==============
   Utilidades
   ============== */
.thumb-sm, .thumb-md, .thumb-lg {
    border-radius: var(--tv-radius-sm);
}

.progress {
    border-radius: 999px;
    background-color: #eef2f7;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--tv-primary);
}

/* Accesibilidad: foco visible con anillo de marca */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--tv-primary);
    outline-offset: 2px;
}