/* =====================================================================
   LF · Capa de estandarización / compactación  (cargar DESPUÉS de app.min.css)
   Objetivo: bajar "un nivel" tamaños de texto, títulos, botones, espacios y
   márgenes para optimizar el espacio en pantalla, manteniendo la plantilla
   Highdmin. Se apoya en las variables --highdmin-* del template.
   ===================================================================== */

/* ---- 1) Tokens globales del template (bajan un nivel) ---- */
:root {
    --highdmin-topbar-height: 58px;          /* topbar más bajo (antes 85px) -> más espacio útil */
    --highdmin-body-font-size: 0.75rem;      /* 14px base template -> 12px */
    --highdmin-card-spacer-y: 0.5rem;        /* compacto global (antes 1rem) */
    --highdmin-card-spacer-x: 0.5rem;
    --highdmin-card-title-spacer-y: 0.35rem;
    --highdmin-btn-padding-y: 0.28rem;       /* tipo "small" */
    --highdmin-btn-padding-x: 0.75rem;
    --highdmin-btn-font-size: 0.75rem;
    --highdmin-btn-border-radius: 0.3125rem; /* 5px, plano (antes pill 50rem) */

    /* Paleta LF — azul oscuro corporativo (reemplaza el aguamarina #02c0ce) */
    --lf-primary: #1e4d8c;
    --lf-primary-hover: #173d70;
    --lf-primary-active: #143766;
    --lf-primary-rgb: 30, 77, 140;

    /* Primary global de la plantilla -> azul oscuro (afecta enlaces/acentos/focus) */
    --highdmin-primary: #1e4d8c;
    --highdmin-primary-rgb: 30, 77, 140;
    --highdmin-primary-text-emphasis: #17406f;
    --highdmin-primary-bg-subtle: #e7edf6;
    --highdmin-primary-border-subtle: #b9cae2;

    /* Primary de BOOTSTRAP (--bs-*): el template Highdmin renombró todas sus variables a
       --highdmin-*, así que las --bs-* quedaron sin definir. Los componentes de
       BlazorBootstrap (Grid, AutoComplete, etc.) sí las leen, y sin esto pintaban sus
       acentos —p. ej. el estado "sin registros" del Grid— en el morado por defecto. */
    --bs-primary: #1e4d8c;
    --bs-primary-rgb: 30, 77, 140;
    --bs-primary-text-emphasis: #17406f;
    --bs-primary-bg-subtle: #e7edf6;
    --bs-primary-border-subtle: #b9cae2;
    --bs-link-color: #1e4d8c;
    --bs-link-color-rgb: 30, 77, 140;
    --bs-link-hover-color: #173d70;

    /* Color de ENLACE del template: no se deriva de --highdmin-primary, el theme lo fija aparte
       en aguamarina (#02c0ce). De él cuelga, entre otros, el tab activo de .nav-tabs
       (--highdmin-nav-tabs-link-active-color: var(--highdmin-link-color)), que por eso seguía
       saliendo aguamarina —p. ej. "Detalles Pedido" en Ingresar Pedido—. */
    --highdmin-link-color: #1e4d8c;
    --highdmin-link-hover-color: #173d70;

    /* Resto de la familia aguamarina del template que NO cuelga de --highdmin-primary y por eso
       sobrevivía suelta: hover de tab/nav (es lo que se veía al pasar el mouse por un tab),
       nav-pills activo, item activo de dropdown, list-group activo y barra de progreso. */
    --highdmin-nav-link-hover-color: #173d70;
    --highdmin-nav-pills-link-active-bg: #1e4d8c;
    --highdmin-dropdown-link-active-bg: #1e4d8c;
    --highdmin-list-group-active-bg: #1e4d8c;
    --highdmin-list-group-active-border-color: #1e4d8c;
    --highdmin-progress-bar-bg: #1e4d8c;
}

/* ---- 2) Títulos: un nivel más pequeños y un punto menos pesados/oscuros ---- */
h1, .h1 { font-size: 1.35rem; }
h2, .h2 { font-size: 1.15rem; }
h3, .h3 { font-size: 1rem; }
h4, .h4 { font-size: 0.9rem; }
h5, .h5 { font-size: 0.825rem; }
h6, .h6 { font-size: 0.75rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; }

/* Título de página del topbar/cabeceras (la plantilla lo fija con .fs-18 !important) */
.page-title { font-size: 0.875rem !important; color: #1c2836 !important; font-weight: 700; }
.page-title-box { margin-bottom: 0.75rem; }
.page-title-box .page-title { margin-bottom: 0; }
/* Títulos de card/consulta (header-title): "Consulta Empresas", "Resultado", etc. -> más pequeños. */
.card .header-title { font-size: 0.8125rem; }

/* ---- 3) Texto secundario: un tono más suave ---- */
.text-muted { color: #8a93a5 !important; }
small, .small { font-size: 0.6875rem; }

/* ---- 4) Botones: "small + plano" en toda la app (antes pill) ---- */
.btn {
    --highdmin-btn-padding-y: 0.28rem;
    --highdmin-btn-padding-x: 0.75rem;
    --highdmin-btn-font-size: 0.75rem;
    border-radius: 0.3125rem !important;      /* plano 5px garantizado */
}
/* botones de solo ícono: compactos y con esquina suave (antes círculo) */
.btn-icon { padding: 0.28rem 0.45rem; }
.btn-icon.rounded-circle { border-radius: 0.3125rem !important; }
/* Iconos de acción por fila (ver/editar/eliminar): reduce el CUADRO gris (alto/ancho fijos
   del tema ~30px) e ícono a 10px. */
.btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn { height: 1.25rem; width: 1.25rem; padding: 0; }
.btn-icon i { font-size: 10px !important; line-height: 1; vertical-align: middle; }

/* Dentro de grupos: solo los extremos redondeados (5px) */
.btn-group > .btn, .input-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-radius: 0.3125rem 0 0 0.3125rem !important; }
.btn-group > .btn:last-child  { border-radius: 0 0.3125rem 0.3125rem 0 !important; }

/* ---- 5) Tarjetas y contenedores: densidad COMPACTA global (4 márgenes y
   separación entre cards a la mitad). El modificador .lf-card-compacta se
   mantiene como alias explícito (mismo resultado) para CardConsulta Compacta. ---- */
.card,
.card.lf-card-compacta { margin-bottom: 0.5rem; }
.card-header,
.card.lf-card-compacta > .card-header { padding: 0.35rem 0.5rem; }
.card.lf-card-compacta > .card-body { padding: 0.5rem; }
.page-content { padding: 0 0.5rem; }

/* ---- 6) Formularios: más compactos y mejor distribuidos ---- */
.form-control, .form-select {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    min-height: calc(1.5em + 0.6rem + 2px);   /* alto consistente */
    border-radius: 0.3rem;
}
/* Los <select> necesitan espacio a la derecha para la flecha (si no, el texto se solapa). */
.form-select { padding-right: 1.9rem; background-position: right 0.6rem center; }

/* Checkbox/radio marcados en azul oscuro LF (el tema los fija en aguamarina #02c0ce hardcodeado). */
.form-check-input:checked { background-color: var(--lf-primary); border-color: var(--lf-primary); }
/* Estado INDETERMINADO: es el check del encabezado en las tablas con selección cuando hay algunas
   filas marcadas y otras no. El tema lo pinta con el mismo aguamarina hardcodeado que :checked. */
.form-check-input:indeterminate { background-color: var(--lf-primary); border-color: var(--lf-primary); }

/* Icono grande de las páginas de error (reemplaza las ilustraciones moradas del theme). */
.lf-icono-error { font-size: 5rem; line-height: 1; display: inline-block; }
.form-check-input:focus { border-color: var(--lf-primary); box-shadow: 0 0 0 0.15rem rgba(30, 77, 140, 0.25); }

/* Selección de texto: el tema la pinta aguamarina (texto y fondo en #02c0ce). Se cambia a azul LF:
   fondo azul tenue y texto heredado (legible en claro y oscuro). */
::selection { color: inherit; background: rgba(30, 77, 140, 0.22); }
::-moz-selection { color: inherit; background: rgba(30, 77, 140, 0.22); }
.form-label {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 500;
}
.col-form-label { font-size: 0.8rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.input-group-text { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* FiltroBusqueda: igualar su alto al de los botones (btn-sm): mismo padding-y y fuente. */
.lf-filtro .form-control,
.lf-filtro .input-group-text {
    min-height: 0;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Espacio entre filas/grupos de formulario dentro de cards y forms (la utilidad
   .mb-3 es !important, por eso se sube especificidad y se reusa !important). */
.card-body .row.mb-3,
form .row.mb-3 { margin-bottom: 0.6rem !important; }
.card-body form .mb-3,
form .mb-3 { margin-bottom: 0.6rem !important; }
/* gutters de las filas de formulario un poco más juntos */
form .row { --highdmin-gutter-x: 1rem; }

/* mensajes de validación más discretos */
.invalid-feedback, .valid-feedback { font-size: 0.72rem; margin-top: 0.1rem; }

/* ---- 7) Tablas/listados: diseño "data-grid" de la propuesta aplicado al componente
   externo (BlazorBootstrap Grid) vía variables --highdmin-table-* y reglas .table,
   sin tocar el markup del componente ni de cada página. ---- */
.table {
    --highdmin-table-striped-bg: transparent;              /* sin zebra (filas limpias) */
    --highdmin-table-hover-bg: rgba(30, 77, 140, 0.06);    /* hover azul marca sutil */
    --highdmin-table-border-color: #eef2f6;                /* separación hairline entre filas */
    font-size: 0.625rem;                                   /* cuerpo de tabla ~10px */
}
.table > :not(caption) > * > * { padding: 0.3rem 0.4rem; }   /* menos padding horizontal -> más compacto */
/* Utilidades de columna: números a la derecha + dígitos tabulares (alineación consistente). */
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.tabnum { font-variant-numeric: tabular-nums; }
/* Trunca columnas de texto largo con "…" (cap de ancho); el valor completo se ve en hover (title). */
.col-trunc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-trunc-sm { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tope de ancho GLOBAL por celda: las columnas anchas se truncan con "…" (más columnas por
   pantalla). Las cortas (códigos, fechas, números) quedan a su ancho natural. El tooltip con el
   valor completo lo pone lf-tabla.js al pasar el cursor. */
.table > tbody > tr > td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.table th {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #7c8698;
    background-color: #f7f9fb;                             /* encabezado gris muy claro */
    border-bottom: 1px solid #e2e7ee;
}

/* ---- 8) Badges/paginación al mismo lenguaje compacto ---- */
.badge { font-size: 0.66rem; }
/* Pills de estado positivo: verde más oscuro que el text-success del tema. */
.badge.bg-success-subtle { color: #157347 !important; background-color: #e3f1ea !important; }

/* Paleta semántica de pills de estado (usada por el componente EstadoBadge). */
.badge.lf-pill-ok     { color: #157347 !important; background-color: #e3f1ea !important; }
.badge.lf-pill-warn   { color: #9a6700 !important; background-color: #f7eed6 !important; }
.badge.lf-pill-danger { color: #b3423c !important; background-color: #f7e5e4 !important; }
.badge.lf-pill-info   { color: #345f8c !important; background-color: #e7eef7 !important; }
.badge.lf-pill-mut    { color: #5c6b7a !important; background-color: #eef2f6 !important; }
/* Footer de tabla con el selector de "Filas por página". */
.lf-tabla-footer { padding: 0.25rem 0.15rem 0; }

.pagination {
    --highdmin-pagination-padding-y: 0.02rem;
    --highdmin-pagination-padding-x: 0.28rem;
    /* Página activa en azul oscuro LF (el tema la fija en aguamarina #02c0ce). */
    --highdmin-pagination-active-bg: var(--lf-primary);
    --highdmin-pagination-active-border-color: var(--lf-primary);
    /* Hover: azul oscuro LF en vez del aguamarina del tema. */
    --highdmin-pagination-hover-color: var(--lf-primary);
    --highdmin-pagination-hover-bg: rgba(30, 77, 140, 0.08);
    /* Tamaño de los NÚMEROS de página (.page-link usa esta variable; no la hereda de font-size). */
    --highdmin-pagination-font-size: 0.6rem;
    font-size: 0.6rem;
}
/* Cuadros de página más bajos y texto de conteo ("X - Y de Z") más pequeño. */
.pagination .page-link { line-height: 1.05; min-width: 1.05rem; text-align: center; }
.bb-grid-pagination-text, .dataTables_info { font-size: 0.5rem; }

/* =====================================================================
   9) COLOR "primary" -> AZUL OSCURO LF (#1e4d8c):
      - TEXTO/enlaces/acentos generales: vía override de --highdmin-primary* en :root
        (bloque de tokens, sección 1). Reemplaza el aguamarina #02c0ce del template.
      - MENÚS (lateral/superior) y BOTONES primary/outline: bloques propios abajo.
      Nota: los botones verde (btn-success) / rojo (btn-danger) de los formularios
      NO se repintan aquí (romperían la semántica de estados). El cambio a
      primario/ghost se hace por marcado en los FormIngresar* (pendiente).
   ===================================================================== */

/* Botón sólido primary -> azul oscuro LF */
.btn-primary {
    --highdmin-btn-bg: var(--lf-primary);
    --highdmin-btn-border-color: var(--lf-primary);
    --highdmin-btn-hover-bg: var(--lf-primary-hover);
    --highdmin-btn-hover-border-color: var(--lf-primary-hover);
    --highdmin-btn-focus-shadow-rgb: var(--lf-primary-rgb);
    --highdmin-btn-active-bg: var(--lf-primary-active);
    --highdmin-btn-active-border-color: var(--lf-primary-active);
    --highdmin-btn-disabled-bg: var(--lf-primary);
    --highdmin-btn-disabled-border-color: var(--lf-primary);
}

/* Menú lateral (sidenav): texto activo/hover en azul oscuro LF (igual que los botones).
   Usa variables propias bajo :root[data-menu-color=light] (mayor especificidad que :root). */
:root[data-menu-color=light] {
    --highdmin-menu-item-active-color: var(--lf-primary);
    --highdmin-menu-item-hover-color: var(--lf-primary);
    --highdmin-menu-item-hover-bg: rgba(30, 77, 140, 0.08);
}

/* Densidad compacta LF: texto del menú lateral a 0.75rem (~12px), igual que la base.
   Aplica a ítems principales y sub-ítems (ambos derivan de esta variable).
   Además reduce el alto por ítem (padding vertical 8px -> 4px) para menos aire entre opciones. */
:root {
    --highdmin-menu-item-font-size: 0.75rem;
    --highdmin-menu-item-padding-y: 4px;
}

/* Título de sección del menú ("Menú"): un poco más grande que el default (x0.7 -> x0.85). */
.side-nav .side-nav-title { font-size: calc(var(--highdmin-menu-item-font-size) * 0.85); }

/* Logo del menú = logo del login (landfast.png, con eslogan). Necesita más alto que el
   logo original (26px) para ser legible. Scoped al sidenav: no agranda el logo del topbar. */
.sidenav-menu .logo .logo-lg img { height: 40px; width: auto; }
/* Centrar el logo horizontalmente en el menú lateral (el contenedor solo centra vertical). */
.sidenav-menu .logo { justify-content: center; }
/* El logo (<a> sticky a todo el ancho) no debe tapar los botones de colapsar/esconder:
   se elevan por encima para que reciban el clic. */
.sidenav-menu .button-sm-hover,
.sidenav-menu .button-close-fullsidebar { z-index: 5; }
.sidenav-menu .logo { z-index: 0; }

/* Sección de usuario del menú: badge "LF" en azul (reemplaza la imagen de avatar) y
   nombre en la tinta oscura de la propuesta. */
.sidenav-user .lf-avatar-badge {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 9px;
    background: var(--lf-primary);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
    align-items: center;
    justify-content: center;
}
.sidenav-user .sidebar-user-name .lf-user-name { color: #1c2836; }

/* Topbar: perfil con icono de usuario (círculo gris) en vez de imagen, como la propuesta. */
.nav-user .lf-user-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    color: #8996a5;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Menú superior (topbar): color hover de los ítems en azul oscuro LF. */
:root[data-topbar-color=light] {
    --highdmin-topbar-item-hover-color: var(--lf-primary);
}

/* Presets "Marcado" (menú) y "Gradiente" (topbar) del Customizer: el template los
   rellena con el aguamarina #02c0ce hardcodeado. Se repintan al azul oscuro LF. */
:root[data-menu-color=brand] {
    --highdmin-menu-bg: var(--lf-primary);
}
:root[data-topbar-color=brand] {
    --highdmin-topbar-bg: var(--lf-primary);
}

/* Buscador "Buscar Pedido" del topbar: más bajo (a la altura del círculo de usuario). */
.topbar-search { padding: 0.25rem 0.75rem; font-size: 0.75rem; line-height: 1.3; }
.topbar-search i { font-size: 0.9rem; }

/* Botón outline primary -> azul oscuro LF */
.btn-outline-primary {
    --highdmin-btn-color: var(--lf-primary);
    --highdmin-btn-border-color: var(--lf-primary);
    --highdmin-btn-hover-bg: var(--lf-primary);
    --highdmin-btn-hover-border-color: var(--lf-primary);
    --highdmin-btn-focus-shadow-rgb: var(--lf-primary-rgb);
    --highdmin-btn-active-bg: var(--lf-primary);
    --highdmin-btn-active-border-color: var(--lf-primary);
    --highdmin-btn-disabled-color: var(--lf-primary);
    --highdmin-btn-disabled-border-color: var(--lf-primary);
}

/* Botón "ghost neutro" (Cancelar / Exportar) == btn-outline-secondary.
   El secondary del tema es morado y al hover rellenaba de morado; se neutraliza a gris. */
.btn-outline-secondary {
    --highdmin-btn-color: #5c6b7a;
    --highdmin-btn-border-color: #ced4da;
    --highdmin-btn-hover-bg: #f1f3f5;
    --highdmin-btn-hover-color: #1c2836;
    --highdmin-btn-hover-border-color: #ced4da;
    --highdmin-btn-focus-shadow-rgb: 140, 150, 165;
    --highdmin-btn-active-bg: #e9ecef;
    --highdmin-btn-active-color: #1c2836;
    --highdmin-btn-active-border-color: #ced4da;
    --highdmin-btn-disabled-color: #8a93a5;
    --highdmin-btn-disabled-border-color: #ced4da;
}

/* =========================================================================
   Estilos de formularios Pedido / Despacho
   (Origen/Destino, panel de solo lectura, campos bloqueados, chips "Auto").
   Van aquí porque app.min.css se genera con gulp y puede estar desactualizado.
   ========================================================================= */

/* Campos bloqueados por modo solo lectura: se deshabilitan pero conservan
   la apariencia de un campo habilitado (sin el fondo gris de Bootstrap). */
/* Campos bloqueados en modo consulta. Los <input>/<textarea> se bloquean con READONLY, no con
   disabled: así el texto se puede seleccionar y copiar y el cursor es el de texto. Los <select> y
   los checkbox no admiten readonly, así que siguen con disabled — a esos se les quita al menos el
   cursor de "prohibido", que sugería un error donde solo hay un dato no editable. */
.campo-bloqueado[readonly] {
    background-color: #fff;
    opacity: 1;
    cursor: text;
}

.campo-bloqueado:disabled {
    background-color: #fff;
    opacity: 1;
    cursor: default;
}

.form-check-input.campo-bloqueado:disabled:checked {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* Panel de datos de solo lectura (pares etiqueta-valor). */
.panel-lectura {
    background-color: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: .75rem;
}

.dato-lectura {
    margin-bottom: .4rem;
}

/* Detalle de despacho: sus etiquetas van en "Cada Palabra En Mayúscula" (se escriben así en el
   markup), no en VERSALITAS. Se acota a esta página para no cambiar los paneles de lectura del
   resto del sitio, que sí usan mayúsculas. */
.lf-titulos-normales .dato-lectura-label { text-transform: none; letter-spacing: normal; }

.dato-lectura-label {
    display: block;
    font-size: .7rem;
    line-height: 1.1;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.dato-lectura-valor {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-body-color, #212529);
}

/* Tarjetas Origen/Destino/Info con acento direccional (--accent por tarjeta). */
.card-od {
    border-top: 3px solid var(--accent);
}

.card-od .od-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.od-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--accent);
    flex: none;
}

.od-icon svg {
    width: 15px;
    height: 15px;
}

.od-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.od-kicker {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.od-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--bs-body-color, #212529);
}

.od-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-secondary-color, #6c757d);
}

/* Chip que marca los campos autocompletados al elegir el cliente. */
.chip-auto {
    font-size: 9px;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-tertiary-bg, #f1f3f5);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.4;
}

/* Paleta de acentos del formulario (un solo lugar para editarlos). */
.pedido-form {
    --od-origen: #0e7c86;
    --od-origen-soft: #e7f3f4;
    --od-destino: #b26b12;
    --od-destino-soft: #f7efe2;
    --od-info: #5b6b7b;
    --od-info-soft: #eef1f4;
}

/* Elevación uniforme para todas las tarjetas del formulario. */
.pedido-form .sombra-soft {
    box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 4px 14px rgba(27, 39, 51, .05);
}

/* Espaciado del formulario Ingresar/Editar Pedido: un punto más de aire
   (labels separados del control y más separación vertical entre filas),
   equiparándolo al de Empresa/Clientes. Scoped a la página, no afecta VerEmpresa. */
.pedido-ingresar .form-label { margin-bottom: 0.25rem !important; }
.pedido-ingresar .row.g-2 { --bs-gutter-y: 0.65rem; }
.pedido-ingresar .row.g-2.mt-1 { margin-top: 0.5rem !important; }

/* Compactación del Tablero Despachos (scoped, no afecta otras páginas) */
.tablero-compacto .card-body { padding: 0.5rem 0.6rem; }
.tablero-compacto .accordion-button { padding: 0.4rem 0.6rem; }
.tablero-compacto .accordion-body { padding: 0.5rem 0.6rem; }

/* =====================================================================
   CAPA LF — MODO OSCURO
   El rediseño se calibró en claro; en oscuro el tema base usa aguamarina/cyan
   (resalta de más) y deja textos tenues con poco contraste. Aquí el acento pasa
   a un azul LF "aclarado" (#6ea8e6), legible sobre fondo oscuro, y se suben los
   textos secundarios. Solo afecta data-bs-theme=dark; no se toca app.css.
   ===================================================================== */
:root[data-bs-theme=dark] {
    /* Azul LF aclarado para acentos sobre fondo oscuro (el #1e4d8c se ve apagado). */
    --lf-primary-d: #6ea8e6;
    --lf-primary-d-rgb: 110, 168, 230;

    /* Primary global del tema -> azul LF claro (enlaces, acentos, focus, paginación). */
    --highdmin-primary: #6ea8e6;
    --highdmin-primary-rgb: 110, 168, 230;
    --highdmin-primary-text-emphasis: #9cc2ee;
    --highdmin-primary-bg-subtle: #16283b;
    --highdmin-primary-border-subtle: #2a4a6b;

    /* Equivalente en variables de Bootstrap (las usan los componentes de BlazorBootstrap). */
    --bs-primary: #6ea8e6;
    --bs-primary-rgb: 110, 168, 230;
    --bs-primary-text-emphasis: #9cc2ee;
    --bs-primary-bg-subtle: #16283b;
    --bs-primary-border-subtle: #2a4a6b;
    --bs-link-color: #6ea8e6;
    --bs-link-color-rgb: 110, 168, 230;
    --bs-link-hover-color: #9cc2ee;

    /* Enlace del template en oscuro (el theme lo fija en cyan #67d9e2): de aquí cuelga el tab
       activo de .nav-tabs, entre otros. */
    --highdmin-link-color: #8fb8ea;
    --highdmin-link-hover-color: #9cc2ee;

    /* Misma familia aguamarina/cyan del bloque claro, en su variante de oscuro. */
    --highdmin-nav-link-hover-color: #9cc2ee;
    --highdmin-nav-pills-link-active-bg: #2f6fb3;
    --highdmin-dropdown-link-active-bg: #2f6fb3;
    --highdmin-list-group-active-bg: #2f6fb3;
    --highdmin-list-group-active-border-color: #2f6fb3;
    --highdmin-progress-bar-bg: #6ea8e6;

    /* Menú lateral (cualquier variante en oscuro): acento e interacción en azul LF claro,
       fondo tenue en vez del bloque aguamarina sólido. */
    --highdmin-menu-item-hover-color: #cfe0f5;
    --highdmin-menu-item-active-color: #8fb8ea;
    --highdmin-menu-item-hover-bg: rgba(110, 168, 230, 0.12);
    --highdmin-menu-item-active-bg: rgba(110, 168, 230, 0.14);

    /* Acentos hover del topbar. */
    --highdmin-topbar-item-hover-color: #8fb8ea;
}

/* Refuerzo directo: el ítem del menú activo / con submenú abierto / en hover no debe
   pintarse en aguamarina. Se fuerza fondo tenue azul y texto claro. */
:root[data-bs-theme=dark] .side-nav .side-nav-item .side-nav-link:hover,
:root[data-bs-theme=dark] .side-nav .side-nav-item .side-nav-link:focus,
:root[data-bs-theme=dark] .side-nav > .side-nav-item.active > .side-nav-link,
:root[data-bs-theme=dark] .side-nav .side-nav-item .side-nav-link.active {
    background-color: rgba(110, 168, 230, 0.14) !important;
    color: #cfe0f5 !important;
    border-radius: 6px;
}

/* Textos tenues más legibles en oscuro (breadcrumb, muted, título de sección del menú). */
:root[data-bs-theme=dark] .text-muted { color: #aab6c6 !important; }
:root[data-bs-theme=dark] .breadcrumb-item,
:root[data-bs-theme=dark] .breadcrumb-item.active { color: #c3ccd8; }
:root[data-bs-theme=dark] .breadcrumb-item a { color: #8fb8ea; }
:root[data-bs-theme=dark] .side-nav .side-nav-title { color: #97aac1; opacity: 0.9; }

/* Enlaces en azul LF claro (no aguamarina). */
:root[data-bs-theme=dark] a:not(.btn):not(.dropdown-item):not(.side-nav-link):not(.page-link) { color: #8fb8ea; }

/* Título de página y de card: en claro se fijan en tinta oscura (#1c2836!) y quedaban
   ilegibles sobre el topbar/cards oscuros -> en oscuro van claros. */
:root[data-bs-theme=dark] .page-title { color: #e6ebf2 !important; }
:root[data-bs-theme=dark] .card .header-title { color: #e6ebf2; }

/* Ampliación del refuerzo del menú en oscuro: submenú abierto (aria-expanded), items del
   sub-menú y cualquier side-nav-link resaltado -> fondo tenue azul, nunca aguamarina. */
:root[data-bs-theme=dark] .side-nav .side-nav-link[aria-expanded="true"],
:root[data-bs-theme=dark] .side-nav .sub-menu .side-nav-link:hover,
:root[data-bs-theme=dark] .side-nav .sub-menu .side-nav-link:focus,
:root[data-bs-theme=dark] .side-nav .sub-menu .side-nav-link.active {
    background-color: rgba(110, 168, 230, 0.14) !important;
    color: #cfe0f5 !important;
    border-radius: 6px;
}

/* =====================================================================
   Menú CONDENSADO (sidenav "Condensado"): el tema pinta el hover del ítem de primer nivel
   con aguamarina #02c0ce HARDCODEADO (app.css, alta especificidad, en TODO tema). Se repinta
   a azul LF medio (destaca sobre el menú claro, "Marcado"/azul y oscuro). Aplica en claro y
   oscuro (no va dentro del bloque dark a propósito). El selector iguala al del tema + !important.
   ===================================================================== */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    background-color: #2f6fb3 !important;
    color: #fff !important;
}
/* Subitems del flyout condensado: hover en azul tenue, no aguamarina. */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .sub-menu .side-nav-link:hover,
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .sub-menu .side-nav-link.active {
    background-color: rgba(47, 111, 179, 0.30) !important;
    color: #fff !important;
}

/* =====================================================================
   Modales de resultado: identidad del header por tipo. Se aplica vía
   HeaderCssClass del Modal (BlazorBootstrap): "lf-modal-ok" (Éxito) o
   "lf-modal-error" (Error). Da acento de color + un check/cruz antes del título.
   ===================================================================== */
.lf-modal-ok { border-bottom-color: rgba(21, 115, 71, 0.35) !important; background: rgba(21, 115, 71, 0.06); }
.lf-modal-ok .modal-title { color: #157347; }
.lf-modal-ok .modal-title::before { content: "\2714\00a0\00a0"; font-weight: 700; }

.lf-modal-error { border-bottom-color: rgba(179, 66, 60, 0.35) !important; background: rgba(179, 66, 60, 0.06); }
.lf-modal-error .modal-title { color: #b3423c; }
.lf-modal-error .modal-title::before { content: "\2716\00a0\00a0"; font-weight: 700; }

/* En modo oscuro, acentos algo más claros para contraste. */
:root[data-bs-theme=dark] .lf-modal-ok .modal-title { color: #5cbd8a; }
:root[data-bs-theme=dark] .lf-modal-error .modal-title { color: #e08079; }

/* Columna "Archivo" de Factura Pedido: el InputFile necesita ancho para mostrar el nombre del
   PDF cargado; se anula el tope de ancho de celda del data-grid y se le da ancho mínimo. */
.lf-col-archivo { max-width: none !important; white-space: normal !important; }
.lf-col-archivo .form-control { min-width: 260px; }