/* ════════════════════════════════════════════════════════════════════════
   dsmITEC · Central de operaciones — TEMA GLOBAL (web admin)

   Replica en CSS el lenguaje visual de las apps Flutter (dsmPDVTPC):
   lib/theme.dart (AppColors) y lib/widgets/ui.dart (SoftCard, Pill),
   y es hermano del tema del POS web (dsmPDV/wwwroot/css/dsmitec-theme.css):
   mismos tokens, mismos nombres de variables, misma marca.

   Se carga DESPUÉS de bootstrap.min.css, site.css y dsmITEC.styles.css,
   por lo que gana el cascade a igual especificidad.

   Reglas de contraste del proyecto:
     · texto negro sobre claro / blanco sobre oscuro
     · el rojo se reserva a acciones, acentos y alertas — nunca a texto corrido
     · los colores de marca de operadores (Tigo/Movistar/Digicel) NO se tocan

   NO cambia estructura ni comportamiento: solo color, radio, sombra y peso.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
    /* Paleta Claro (= AppColors de theme.dart) */
    --rojo:        #E4002B;
    --rojo-oscuro: #C10024;
    --rojo-hondo:  #B3001B;
    --rojo-tenue:  #FDE7EB;
    --negro:       #141418;
    --negro-hondo: #0E0E10;
    --gris-oscuro: #26262B;
    --gris:        #6B6B73;
    --gris-medio:  #9AA0A6;
    --gris-claro:  #F3F3F5;
    --card:        #FFFFFF;
    --borde:       #ECECEF;
    --borde-fuerte:#DADADD;
    --ok:          #1F9D57;
    --ok-tenue:    #E7F6EE;
    --warn:        #E9A100;
    --warn-tenue:  #FFF6E0;

    /* Tinta sobre superficies oscuras (sidebar / navbar) */
    --sobre-oscuro:       #FFFFFF;
    --sobre-oscuro-2:     #C9CBD2;
    --sobre-oscuro-3:     #8E9199;
    --borde-oscuro:       rgba(255, 255, 255, .08);

    /* Geometría */
    --radio:       16px;
    --radio-btn:   12px;
    --radio-input: 12px;
    --radio-pill:  999px;
    --sombra:      0 6px 18px rgba(17, 18, 20, .06);
    --sombra-alta: 0 12px 32px rgba(17, 18, 20, .14);

    /* Altura de la barra superior (la marca ocupa dos líneas) */
    --nav-h: 62px;

    /* Tipografía */
    --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Reemplaza el rojo viejo (#da291c) que declara site.css: con esto
       el ribbon, los acentos del sidebar y los botones heredados de
       site.css quedan alineados al rojo de las apps sin editar site.css. */
    --claro-red:        #E4002B;
    --claro-red-dark:   #C10024;
    --claro-red-darker: #B3001B;

    /* ── Puente hacia Bootstrap 5.3 (cascadea a TODO el sitio) ── */
    --bs-primary:            #E4002B;
    --bs-primary-rgb:        228, 0, 43;
    --bs-danger:             #E4002B;
    --bs-danger-rgb:         228, 0, 43;
    --bs-success:            #1F9D57;
    --bs-success-rgb:        31, 157, 87;
    --bs-warning:            #E9A100;
    --bs-warning-rgb:        233, 161, 0;
    --bs-info:               #6B6B73;
    --bs-info-rgb:           107, 107, 115;
    --bs-secondary:          #6B6B73;
    --bs-secondary-rgb:      107, 107, 115;
    --bs-dark:               #141418;
    --bs-dark-rgb:           20, 20, 24;
    --bs-light:              #F3F3F5;
    --bs-light-rgb:          243, 243, 245;
    --bs-body-color:         #141418;
    --bs-body-color-rgb:     20, 20, 24;
    --bs-body-bg:            #F3F3F5;
    --bs-emphasis-color:     #141418;
    --bs-secondary-color:    rgba(20, 20, 24, .68);
    --bs-tertiary-color:     rgba(20, 20, 24, .52);
    --bs-border-color:       #ECECEF;
    --bs-border-radius:      12px;
    --bs-border-radius-sm:   10px;
    --bs-border-radius-lg:   16px;
    --bs-border-radius-xl:   20px;
    --bs-link-color:         #C10024;
    --bs-link-color-rgb:     193, 0, 36;
    --bs-link-hover-color:   #8F001B;
    --bs-focus-ring-color:   rgba(228, 0, 43, .22);
    --bs-body-font-family:   var(--tipo);

    /* ── Superficies oscuras, aparte de la tinta ─────────────────────────────
       --negro y --negro-hondo son TINTA: se usan para el color del texto en una
       veintena de reglas. La barra y el menú lateral necesitaban un token propio,
       porque pintarlos con el de la tinta hacía que cambiar el fondo del menú
       tiñera las letras de toda la plataforma. Los administra
       «Herramientas → Marca y colores». */
    --barra:   #0E0E10;
    --lateral: #141418;

    /* Las mismas tres de arriba en componentes, para poder usarlas con alfa.
       Sin esto, cada rgba() con el rojo escrito a mano se quedaba en rojo al
       rebrandear y el resultado eran halos rosados sobre un tema azul. */
    --marca-rgb: 228, 0, 43;
    --ok-rgb:    31, 157, 87;
    --warn-rgb:  233, 161, 0;
}


/* ── 2. BASE ────────────────────────────────────────────────────────── */
body {
    font-family: var(--tipo);
    background: var(--gris-claro);
    color: var(--negro);
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--negro);
}

/* Los "h6 text-uppercase text-muted" que rotulan secciones */
h2.h6.text-uppercase, .h6.text-uppercase {
    letter-spacing: .06em;
    font-weight: 800;
}

/* Contraste: el gris tenue de Bootstrap es demasiado claro para leer */
.text-muted, .text-body-secondary {
    color: var(--gris) !important;
}

.text-danger  { color: var(--rojo) !important; }
.text-success { color: var(--ok) !important; }
.text-primary { color: var(--rojo-oscuro) !important; }
.text-warning { color: #8A6100 !important; }
.text-info    { color: var(--gris-oscuro) !important; }
.text-dark    { color: var(--negro) !important; }

a {
    color: var(--rojo-oscuro);
    text-decoration-color: rgba(193, 0, 36, .35);
}

a:hover { color: #8F001B; }

/* Enlaces que hacen de tarjeta o de fila no deben pintarse de rojo */
a.card, a.card:hover,
a.text-reset, a.text-reset:hover,
a.dropdown-item, a.list-group-item { color: inherit; }

/* Anillo de foco rojo suave (site.css lo dejaba azul #258cfb) */
.btn:focus, .btn:active:focus, .btn:focus-visible, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22) !important;
    outline: 0;
}

.form-control:focus, .form-select:focus { border-color: var(--rojo) !important; }

.form-check-input:checked {
    background-color: var(--rojo);
    border-color: var(--rojo);
}

::selection { background: rgba(var(--marca-rgb), .18); }

/* ── 3. MARCA (wordmark de las apps, en HTML+CSS, sin imágenes) ─────── */
.dsmitec-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    word-break: normal;
}

.dsmitec-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radio-pill);
    background: var(--rojo);
    color: #fff !important;
    font-family: var(--tipo);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(var(--marca-rgb), .35);
}

.dsmitec-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.dsmitec-brand-name {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: #FFFFFF;
}

.dsmitec-brand-sub {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
    color: #B7B9C0;
}

/* Variante sobre fondo claro (login) */
.dsmitec-brand--light .dsmitec-brand-name { color: var(--negro); }
.dsmitec-brand--light .dsmitec-brand-sub  { color: var(--gris); }

/* Variante grande (login) */
.dsmitec-brand--lg { gap: .75rem; }
.dsmitec-brand--lg .dsmitec-brand-mark { width: 54px; height: 54px; font-size: 1.7rem; }
.dsmitec-brand--lg .dsmitec-brand-name { font-size: 1.6rem; }
.dsmitec-brand--lg .dsmitec-brand-sub  { font-size: .78rem; }

@media (max-width: 575.98px) {
    .dsmitec-brand-mark { width: 33px; height: 33px; font-size: 1rem; }
    .dsmitec-brand-name { font-size: 1rem; }
    .dsmitec-brand-sub  { font-size: .62rem; }
}

/* ── 4. BARRA SUPERIOR (AppBar negra de las apps) ────────────────────── */
.navbar.ribbon {
    background: var(--barra) !important;
    background-image: none !important;
    border-bottom: 1px solid #000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .28) !important;
    min-height: var(--nav-h);
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.ribbon .navbar-brand,
.ribbon .navbar-brand:hover,
.ribbon .navbar-brand:focus {
    color: #fff;
    margin-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}

.ribbon .nav-link {
    color: var(--sobre-oscuro-2);
    font-weight: 600;
    border-radius: var(--radio-btn);
    padding-inline: .7rem;
}

.ribbon .nav-link:hover,
.ribbon .nav-link:focus,
.ribbon .nav-link.show {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.ribbon .navbar-toggler {
    border-color: rgba(255, 255, 255, .28);
    border-radius: var(--radio-btn);
}

.ribbon .dropdown-item.active,
.ribbon .dropdown-item:active { background-color: var(--rojo); color: #fff; }

/* La burbuja de conteo del campanario SÍ va en rojo sólido: es una alerta */
.ribbon .nav-link .badge.text-bg-danger,
.ribbon .nav-link .badge.text-bg-warning {
    background-color: var(--rojo) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--barra);
}

/* ── 5. BARRA LATERAL OSCURA ─────────────────────────────────────────── */
/* !important: en escritorio Bootstrap fuerza `background-color: transparent
   !important` sobre .offcanvas-lg, lo que dejaba el sidebar claro con texto
   gris ilegible. También se pinta el offcanvas-body para cubrir todo el alto. */
.sidebar {
    background: var(--lateral) !important;
    border-right: 1px solid #000;
    color: var(--sobre-oscuro-2);
    --bs-offcanvas-bg: var(--lateral);
    --bs-offcanvas-color: var(--sobre-oscuro-2);
    --bs-offcanvas-border-color: #000;
    --bs-emphasis-color: #fff;
}

.sidebar .offcanvas-body {
    background: var(--lateral);
}

.sidebar .offcanvas-header { border-bottom-color: var(--borde-oscuro) !important; }
.sidebar .offcanvas-title  { color: #fff; font-weight: 800; }

/* La X de cerrar del offcanvas es un SVG oscuro: se invierte */
.sidebar .btn-close {
    filter: invert(1) grayscale(100%) brightness(220%);
    opacity: .8;
}

/* Enlaces de primer nivel */
.sidebar .side-top {
    display: block;
    padding: .55rem .9rem;
    font-weight: 600;
    color: var(--sobre-oscuro-2);
    border-bottom: 1px solid var(--borde-oscuro);
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar .side-top:hover,
.sidebar .side-top:focus {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.sidebar .side-top i { color: var(--sobre-oscuro-3); }
.sidebar .side-top:hover i { color: #fff; }

/* Cabeceras de grupo (acordeón) */
.sidebar .accordion,
.sidebar .accordion-flush {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--sobre-oscuro-2);
    --bs-accordion-border-color: var(--borde-oscuro);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238E9199'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E4002B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.sidebar .accordion-item {
    background: transparent;
    border-color: var(--borde-oscuro);
    color: var(--sobre-oscuro-2);
}

.sidebar .accordion-button {
    padding: .6rem .9rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sobre-oscuro-3);
    background: transparent;
    box-shadow: none;
}

.sidebar .accordion-button:hover { color: #fff; background: rgba(255, 255, 255, .05); }

.sidebar .accordion-button:not(.collapsed) {
    color: #fff;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
}

.sidebar .accordion-button:focus { box-shadow: none; }

/* Enlaces dentro de un grupo */
.sidebar .accordion-body { background: rgba(0, 0, 0, .22); }

.sidebar .accordion-body .nav-link {
    padding: .4rem .9rem .4rem 1.55rem;
    font-size: .875rem;
    color: var(--sobre-oscuro-2);
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar .accordion-body .nav-link i { color: var(--sobre-oscuro-3); }

.sidebar .accordion-body .nav-link:hover,
.sidebar .accordion-body .nav-link:focus {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.sidebar .accordion-body .nav-link:hover i { color: #fff; }

/* Ítem activo: acento rojo (barra + fondo tenue), texto blanco */
.sidebar .nav-link.active,
.sidebar .accordion-body .nav-link.active,
.sidebar .side-top.active {
    color: #fff;
    font-weight: 700;
    background: rgba(var(--marca-rgb), .18);
    border-left: 3px solid var(--rojo);
}

.sidebar .nav-link.active i,
.sidebar .accordion-body .nav-link.active i,
.sidebar .side-top.active i { color: var(--rojo); }

/* Alto del área con la nueva barra superior */
/* ── El ancho de la pagina no lo decide el contenido ──────────────────
   Sintoma: el menu lateral aparecia CORTADO por la izquierda. No es que el
   menu se encogiera: es que la PAGINA entera tenia scroll horizontal y, al
   correrla para ver una tabla ancha, el lateral se iba con ella.

   Dos causas, las dos tapadas aqui:

   1. La barra superior no podia envolver. Con el menu de arriba lleno,
      agregar un boton mas la volvia mas ancha que la ventana y empujaba toda
      la pagina. Ahora envuelve y crece hacia abajo, que no le estorba a nadie.
   2. `max-width: 100%` en el area de contenido, como red por si algun dia
      entra una tabla sin su contenedor con scroll.

   MEDIDO en un banco con estos mismos CSS, ventana de 1265 px:
     sin envolver -> la barra pedia 1784 px y la pagina desbordaba 519 px.
     envolviendo  -> desborde 0, y la barra crece 14 px de alto. Buen cambio.

   La tabla NO era el problema: con el contenedor `.table-responsive` una tabla
   de 4797 px se queda con su scroll dentro de 973 px sin mover la pagina. Se
   comprobo antes de tocar nada, para no arreglar lo que no estaba roto.

   No se usa `overflow-x` en el area de contenido a proposito: crearia un
   contexto de scroll y rompe los `position: sticky` de las cabeceras de tabla
   que ya existen en varias pantallas. */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse,
    .navbar-expand-lg .navbar-nav { flex-wrap: wrap; }
}

.app-body { min-height: calc(100vh - var(--nav-h)); max-width: 100%; }
.main-content { min-width: 0; max-width: 100%; }

@media (min-width: 992px) {
    .sidebar .offcanvas-body {
        max-height: calc(100vh - var(--nav-h));
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .22) transparent;
    }

    .sidebar .offcanvas-body::-webkit-scrollbar { width: 8px; }
    .sidebar .offcanvas-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .18);
        border-radius: var(--radio-pill);
    }
}

.main-content { padding: 1.25rem; }

.main-content > footer {
    color: var(--gris) !important;
    border-top-color: var(--borde) !important;
}

/* ── 6. BOTONES ─────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radio-btn);
    font-weight: 700;
    letter-spacing: .005em;
    transition: background-color .14s ease, border-color .14s ease, transform .1s ease;
}

.btn:active { transform: scale(.985); }
.btn-lg { border-radius: 14px; }
.btn-sm { border-radius: 10px; font-weight: 700; }

.btn-primary,
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--rojo);
    --bs-btn-border-color: var(--rojo);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--rojo-oscuro);
    --bs-btn-hover-border-color: var(--rojo-oscuro);
    --bs-btn-focus-shadow-rgb: 228, 0, 43;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--rojo-hondo);
    --bs-btn-active-border-color: var(--rojo-hondo);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #F0899E;
    --bs-btn-disabled-border-color: #F0899E;
    border: 0;
    padding-inline: 1.05rem;
}

.btn-secondary {
    --bs-btn-color: #141418;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #DADADD;
    --bs-btn-hover-color: #141418;
    --bs-btn-hover-bg: #F3F3F5;
    --bs-btn-hover-border-color: #C7C7CC;
    --bs-btn-active-color: #141418;
    --bs-btn-active-bg: #E9E9ED;
    --bs-btn-active-border-color: #C7C7CC;
    --bs-btn-disabled-color: #9AA0A6;
    --bs-btn-disabled-bg: #F3F3F5;
    --bs-btn-disabled-border-color: #E5E5E9;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-info,
.btn-info {
    --bs-btn-color: #141418;
    --bs-btn-border-color: #DADADD;
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #141418;
    --bs-btn-hover-bg: #F3F3F5;
    --bs-btn-hover-border-color: #C7C7CC;
    --bs-btn-active-color: #141418;
    --bs-btn-active-bg: #E9E9ED;
    --bs-btn-active-border-color: #C7C7CC;
    --bs-btn-focus-shadow-rgb: 107, 107, 115;
}

.btn-info {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #DADADD;
}

.btn-outline-primary,
.btn-outline-danger {
    --bs-btn-color: var(--rojo-oscuro);
    --bs-btn-border-color: rgba(var(--marca-rgb), .55);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--rojo);
    --bs-btn-hover-border-color: var(--rojo);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--rojo-hondo);
    --bs-btn-active-border-color: var(--rojo-hondo);
    --bs-btn-focus-shadow-rgb: 228, 0, 43;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #197F46;
    --bs-btn-hover-border-color: #197F46;
    --bs-btn-active-bg: #16713E;
    --bs-btn-active-border-color: #16713E;
    --bs-btn-focus-shadow-rgb: 31, 157, 87;
    border: 0;
}

.btn-outline-success {
    --bs-btn-color: #177842;
    --bs-btn-border-color: rgba(var(--ok-rgb), .55);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ok);
    --bs-btn-hover-border-color: var(--ok);
    --bs-btn-focus-shadow-rgb: 31, 157, 87;
}

.btn-warning {
    --bs-btn-color: #3A2B00;
    --bs-btn-bg: var(--warn);
    --bs-btn-border-color: var(--warn);
    --bs-btn-hover-color: #3A2B00;
    --bs-btn-hover-bg: #CE8F00;
    --bs-btn-hover-border-color: #CE8F00;
    border: 0;
}

.btn-outline-warning {
    --bs-btn-color: #8A6100;
    --bs-btn-border-color: rgba(var(--warn-rgb), .6);
    --bs-btn-hover-color: #3A2B00;
    --bs-btn-hover-bg: var(--warn);
    --bs-btn-hover-border-color: var(--warn);
}

.btn-light {
    --bs-btn-color: #141418;
    --bs-btn-bg: #F3F3F5;
    --bs-btn-border-color: #E5E5E9;
    --bs-btn-hover-color: #141418;
    --bs-btn-hover-bg: #E9E9ED;
    --bs-btn-hover-border-color: #DADADD;
    --bs-btn-active-bg: #E1E1E6;
}

.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #141418;
    --bs-btn-border-color: #141418;
    --bs-btn-hover-bg: #26262B;
    --bs-btn-hover-border-color: #26262B;
    border: 0;
}

.btn-link {
    --bs-btn-color: var(--rojo-oscuro);
    --bs-btn-hover-color: #8F001B;
    font-weight: 700;
}

.d-grid > .btn { min-height: 46px; }

.btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ── 7. CARDS / PANELES (SoftCard: r16, borde suave, sombra tenue) ───── */
.card {
    --bs-card-border-radius: var(--radio);
    --bs-card-inner-border-radius: calc(var(--radio) - 1px);
    --bs-card-border-color: var(--borde);
    --bs-card-cap-bg: #FFFFFF;
    --bs-card-bg: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.card.shadow-sm { box-shadow: var(--sombra) !important; }
.card.shadow, .card.shadow-lg { box-shadow: var(--sombra-alta) !important; }

.card > .card-header:first-child {
    border-top-left-radius: calc(var(--radio) - 1px);
    border-top-right-radius: calc(var(--radio) - 1px);
}

.card-header {
    border-bottom: 1px solid var(--borde);
    background: #FFFFFF;
    font-weight: 700;
    color: var(--negro);
}

.card-header.bg-white { background: #FFFFFF !important; }

.card-footer {
    border-top: 1px solid var(--borde);
    background: #FCFCFD;
}

/* Tarjetas-enlace del dashboard: el borde de acento se suaviza al radio */
a.card { transition: box-shadow .14s ease, transform .1s ease; }
a.card:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }

/* El "border-start border-3" de las fichas del dashboard */
.border-3 { border-width: 3px !important; }
.border-primary { border-color: var(--rojo) !important; }
.border-danger  { border-color: var(--rojo) !important; }
.border-success { border-color: var(--ok) !important; }
.border-warning { border-color: var(--warn) !important; }
.border-info    { border-color: var(--gris-medio) !important; }
.border-secondary { border-color: var(--gris-medio) !important; }
.border-dark    { border-color: var(--negro) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--borde);
}

/* ── 8. TABLAS ──────────────────────────────────────────────────────── */
.table {
    --bs-table-color: var(--negro);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--borde);
    --bs-table-hover-color: var(--negro);
    --bs-table-hover-bg: rgba(var(--marca-rgb), .045);
    --bs-table-striped-bg: #FAFAFB;
    --bs-table-striped-color: var(--negro);
    margin-bottom: 0;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table thead.table-light > tr > th,
.table thead.table-secondary > tr > th,
.table thead.table-dark > tr > th {
    background: var(--gris-claro) !important;
    color: var(--gris) !important;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--borde) !important;
    border-top: 0;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-color: var(--borde);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: rgba(var(--marca-rgb), .045);
}

.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background: var(--gris-claro);
    border-color: var(--borde);
    font-weight: 800;
    color: var(--negro);
}

.table-bordered > :not(caption) > * > * { border-color: var(--borde); }

/* Filas tintadas: tono suave, texto legible en negro */
.table > :not(caption) > * > *.table-danger,
.table > tbody > tr.table-danger > * { --bs-table-bg: var(--rojo-tenue); --bs-table-color: #8F001B; }

.table > :not(caption) > * > *.table-warning,
.table > tbody > tr.table-warning > * { --bs-table-bg: var(--warn-tenue); --bs-table-color: #6B4A00; }

.table > :not(caption) > * > *.table-success,
.table > tbody > tr.table-success > * { --bs-table-bg: var(--ok-tenue); --bs-table-color: #145E34; }

.table > :not(caption) > * > *.table-primary,
.table > tbody > tr.table-primary > * { --bs-table-bg: rgba(var(--marca-rgb), .08); --bs-table-color: #8F001B; }

.table > :not(caption) > * > *.table-info,
.table > tbody > tr.table-info > * { --bs-table-bg: var(--gris-claro); --bs-table-color: var(--negro); }

.table-active { --bs-table-bg: rgba(var(--marca-rgb), .07); }

/* Radio en el contenedor: se conserva el scroll horizontal de Bootstrap.
   min-width:0 es el guard contra el desborde en pantallas chicas: sin el, una
   tabla ancha dentro de un flex/grid estira a su contenedor —el minimo de un
   item de flex/grid es su contenido, no cero— y saca de cuadro la pagina
   entera en vez de scrollear dentro de su propia caja. */
.table-responsive {
    border-radius: var(--radio);
    overflow-y: hidden;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.card > .table-responsive:last-child,
.card > .table-responsive > .table:last-child {
    border-bottom-left-radius: calc(var(--radio) - 1px);
    border-bottom-right-radius: calc(var(--radio) - 1px);
}

/* ── 9. FORMULARIOS ─────────────────────────────────────────────────── */
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--radio-input);
    border-color: #E5E7EB;
    color: var(--negro);
    background-color: #fff;
}

.form-control::placeholder { color: var(--gris-medio); }

.form-control:hover,
.form-select:hover { border-color: var(--borde-fuerte); }

.input-group-text {
    background: var(--gris-claro);
    color: var(--gris);
    font-weight: 700;
}

.form-label {
    font-weight: 700;
    color: var(--negro);
    font-size: .82rem;
}

.form-text { color: var(--gris); }
.form-check-label { color: var(--negro); }

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--gris-claro);
    color: var(--gris);
}

.form-switch .form-check-input:checked { background-color: var(--rojo); border-color: var(--rojo); }

.invalid-feedback, .field-validation-error { color: var(--rojo-hondo); font-weight: 600; }
.form-control.input-validation-error, .form-select.input-validation-error { border-color: var(--rojo); }

/* ── 10. BADGES / PILLS (look Pill de ui.dart: tinte 12% + texto fuerte) */
.badge {
    --bs-badge-border-radius: var(--radio-pill);
    border-radius: var(--radio-pill) !important;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .34em .74em;
}

.badge.bg-primary, .badge.bg-danger,
.badge.text-bg-primary, .badge.text-bg-danger {
    background-color: rgba(var(--marca-rgb), .12) !important;
    color: var(--rojo-hondo) !important;
}

.badge.bg-secondary, .badge.text-bg-secondary {
    background-color: rgba(107, 107, 115, .14) !important;
    color: var(--gris-oscuro) !important;
}

.badge.bg-dark, .badge.text-bg-dark {
    background-color: rgba(20, 20, 24, .10) !important;
    color: var(--negro) !important;
}

.badge.bg-success, .badge.text-bg-success {
    background-color: rgba(var(--ok-rgb), .14) !important;
    color: #16713E !important;
}

.badge.bg-warning, .badge.text-bg-warning {
    background-color: rgba(var(--warn-rgb), .18) !important;
    color: #7A5400 !important;
}

/* Adiós al cian de Bootstrap: "info" pasa a gris neutro */
.badge.bg-info, .badge.text-bg-info {
    background-color: rgba(20, 20, 24, .08) !important;
    color: var(--gris-oscuro) !important;
}

.badge.bg-light, .badge.text-bg-light {
    background-color: var(--gris-claro) !important;
    color: var(--negro) !important;
}

.badge.border { border-color: var(--borde) !important; }

/* ── 11. ALERTAS ────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radio-btn);
    border-width: 1px;
    font-weight: 600;
}

.alert-danger {
    --bs-alert-bg: var(--rojo-tenue);
    --bs-alert-border-color: rgba(var(--marca-rgb), .3);
    --bs-alert-color: #8F001B;
}

.alert-success {
    --bs-alert-bg: var(--ok-tenue);
    --bs-alert-border-color: rgba(var(--ok-rgb), .3);
    --bs-alert-color: #145E34;
}

.alert-warning {
    --bs-alert-bg: var(--warn-tenue);
    --bs-alert-border-color: rgba(var(--warn-rgb), .35);
    --bs-alert-color: #6B4A00;
}

/* info / secondary / primary / light: gris neutro, texto oscuro */
.alert-info,
.alert-secondary,
.alert-primary,
.alert-light {
    --bs-alert-bg: #F3F3F5;
    --bs-alert-border-color: #E1E1E6;
    --bs-alert-color: #26262B;
}

.alert .btn-close { --bs-btn-close-focus-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22); }

/* ── 12. MODALES ────────────────────────────────────────────────────── */
.modal-content {
    border: 0;
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
}

.modal-header {
    border-bottom: 1px solid var(--borde);
    padding: .95rem 1.1rem;
}

.modal-title {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--negro);
}

.modal-footer {
    border-top: 1px solid var(--borde);
    background: #FCFCFD;
    padding: .8rem 1.1rem;
    border-bottom-left-radius: var(--radio);
    border-bottom-right-radius: var(--radio);
}

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

/* ── 13. NAV / TABS / DROPDOWNS / LISTAS ────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--borde); }

.nav-tabs .nav-link {
    color: var(--gris);
    font-weight: 700;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--negro);
    border-color: transparent transparent var(--borde-fuerte);
}

.nav-tabs .nav-link.active {
    color: var(--negro);
    background: transparent;
    border-color: transparent transparent var(--rojo);
}

.nav-pills .nav-link { border-radius: var(--radio-pill); color: var(--negro); font-weight: 700; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--rojo);
    border-color: var(--rojo);
    color: #fff;
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--radio-btn);
    --bs-dropdown-border-color: var(--borde);
    --bs-dropdown-link-active-bg: var(--rojo);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-hover-bg: var(--gris-claro);
    --bs-dropdown-header-color: var(--gris);
    --bs-dropdown-link-color: var(--negro);
    box-shadow: var(--sombra);
    padding-block: .35rem;
}

/* Sin tocar el ancho: varios dropdown-item son <button> dentro de un <form> */
.dropdown-item { font-weight: 600; }
.dropdown-header { font-weight: 800; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.dropdown-divider { border-top-color: var(--borde); }

.list-group {
    --bs-list-group-border-color: var(--borde);
    --bs-list-group-border-radius: var(--radio);
    --bs-list-group-active-bg: var(--rojo);
    --bs-list-group-active-border-color: var(--rojo);
    --bs-list-group-action-hover-bg: var(--gris-claro);
}

.pagination {
    --bs-pagination-border-radius: var(--radio-btn);
    --bs-pagination-color: var(--negro);
    --bs-pagination-border-color: var(--borde);
    --bs-pagination-hover-bg: var(--gris-claro);
    --bs-pagination-hover-color: var(--negro);
    --bs-pagination-hover-border-color: var(--borde-fuerte);
    --bs-pagination-active-bg: var(--rojo);
    --bs-pagination-active-border-color: var(--rojo);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22);
    --bs-pagination-focus-bg: var(--gris-claro);
    font-weight: 700;
}

.progress { border-radius: var(--radio-pill); background: #E9E9ED; }
.progress-bar { background-color: var(--rojo); }
.progress-bar.bg-primary, .progress-bar.bg-danger { background-color: var(--rojo) !important; }
.progress-bar.bg-success { background-color: var(--ok) !important; }
.progress-bar.bg-warning { background-color: var(--warn) !important; }
.progress-bar.bg-info, .progress-bar.bg-secondary { background-color: var(--gris-medio) !important; }

.spinner-border, .spinner-grow { color: var(--rojo); }

/* Acordeones fuera de la barra lateral (fondo claro) */
.main-content .accordion {
    --bs-accordion-border-color: var(--borde);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22);
    --bs-accordion-active-color: var(--negro);
    --bs-accordion-active-bg: rgba(var(--marca-rgb), .06);
    --bs-accordion-border-radius: var(--radio);
}

/* ── 14. FONDOS UTILITARIOS (contraste) ─────────────────────────────── */
.bg-dark, .bg-black { background-color: var(--negro) !important; color: #fff; }
.bg-dark .text-muted, .bg-black .text-muted { color: #A0A3AB !important; }

.bg-primary, .bg-danger { background-color: var(--rojo) !important; color: #fff; }
.bg-success { background-color: var(--ok) !important; color: #fff; }
.bg-warning { background-color: var(--warn) !important; color: #3A2B00; }
.bg-secondary { background-color: var(--gris) !important; color: #fff; }
.bg-light   { background-color: var(--gris-claro) !important; color: var(--negro); }
.bg-info    { background-color: var(--gris-claro) !important; color: var(--negro); }
.bg-white   { background-color: #fff !important; }

hr { border-color: var(--borde); opacity: 1; }

.rounded    { border-radius: var(--radio-btn) !important; }
.rounded-2  { border-radius: var(--radio-btn) !important; }
.rounded-3  { border-radius: var(--radio) !important; }
.rounded-pill { border-radius: var(--radio-pill) !important; }
.shadow-sm  { box-shadow: 0 2px 10px rgba(17, 18, 20, .05) !important; }
.shadow     { box-shadow: var(--sombra) !important; }
.shadow-lg  { box-shadow: var(--sombra-alta) !important; }

/* ── 15. LOGIN ──────────────────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background:
        radial-gradient(1100px 560px at 50% -12%, rgba(var(--marca-rgb), .10), transparent 62%),
        var(--gris-claro);
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--borde);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17, 18, 20, .12) !important;
}

.login-card .card-body { padding: 2rem 1.75rem; }

.login-rule {
    height: 3px;
    width: 42px;
    border-radius: var(--radio-pill);
    background: var(--rojo);
    margin: 1.1rem auto 1.25rem;
}

/* ── 15b. SELECT CON BUSCADOR (componente reutilizable) ─────────────────
   Ver: Views/Shared/_SelectBuscador.cshtml + wwwroot/js/select-buscador.js.
   El <select> nativo se oculta (data-sb-listo lo marca el JS) y se pinta un
   combobox con panel de búsqueda. Sin JS, el <select> se ve normal. */
.selbus { position: relative; }

/* Oculta el <select> real una vez mejorado, conservándolo para el POST. */
select.selbus-native {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}

.selbus-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.selbus-toggle .selbus-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selbus-toggle.selbus-vacio .selbus-txt { color: var(--gris-medio); }

/* Un select vacío no puede colapsar. El toggle es un <button> cuyo único hijo es el <span>
   del texto: sin texto, la caja de línea no existe y el botón queda en 10 px de alto contra
   los 31 de un <select> nativo — se ve como si no hubiera control, solo la flechita. El
   espacio duro cuando está vacío le devuelve su altura natural, sin fijar píxeles a mano. */
.selbus-toggle .selbus-txt:empty::before { content: "a0"; }


.selbus.is-open .selbus-toggle {
    border-color: var(--rojo);
    box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .22);
}

.selbus-panel {
    position: absolute;
    z-index: 1055;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 220px;
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio-btn);
    box-shadow: var(--sombra-alta);
    padding: .4rem;
}

.selbus-search { margin-bottom: .35rem; }

.selbus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 244px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.selbus-item {
    padding: .38rem .55rem;
    border-radius: var(--radio-input);
    cursor: pointer;
    font-size: .875rem;
    color: var(--negro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selbus-item.is-activo { background: rgba(var(--marca-rgb), .10); }

.selbus-item.is-sel {
    font-weight: 700;
    color: var(--rojo-hondo);
}

.selbus-item[aria-disabled="true"] {
    color: var(--gris-medio);
    cursor: default;
}

.selbus-nada { padding: .45rem .55rem; }

/* ── Variante MULTIPLE ──────────────────────────────────────────────────
   El panel se queda abierto y cada linea se marca. La casilla es dibujada y
   no un <input type=checkbox>: el <select multiple> real sigue siendo el
   campo del formulario, asi que un checkbox de verdad seria un segundo
   estado que habria que mantener sincronizado. */
.selbus-acciones {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .55rem .3rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: .3rem;
}

.selbus-item--multi {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.selbus-item--multi .selbus-et {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selbus-box {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border: 1px solid var(--gris-medio);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    line-height: 1;
    color: #fff;
}

.selbus-item--multi.is-sel .selbus-box {
    background: var(--rojo);
    border-color: var(--rojo);
}

/* ── 16. MAPA (Leaflet, MonitorFlota) ───────────────────────────────── */
.leaflet-container { border-radius: var(--radio-btn); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: var(--radio-btn); }
.leaflet-bar a, .leaflet-bar a:hover { color: var(--negro); }