/* =====================================================
   AUDIA — CHASIS SaaS PREMIUM
   Capa transversal. Se carga DESPUÉS de style.css y de
   los CSS por vista, así que gana en cascada sin que
   haya que reescribir nada de lo anterior.

   Estrategia en dos partes:

   1. PUENTE. Las 33 vistas de la app pintan con las
      variables antiguas (--primary-color, --card-bg,
      --border-color…). Aquí se redefinen apuntando a los
      tokens --ds-* de tokens.css. Resultado: toda la app
      adopta la paleta nueva sin tocar ni un .php.
      Efecto secundario buscado: el modo oscuro deja de
      estar duplicado. Los --ds-* ya se invierten solos
      con [data-theme="dark"], y como las variables
      antiguas ahora derivan de ellos, heredan el cambio.

   2. COMPONENTES. Refinado del chasis compartido:
      sidebar, cabecera, tarjetas, tablas, botones,
      formularios, badges y modales.

   Convenciones: sin !important salvo donde haya que
   ganarle a un !important previo (marcado con  <-- gana a).
   ===================================================== */

/* =====================================================
   1. PUENTE — variables antiguas -> tokens
   ===================================================== */

:root {
    /* --- Marca --- */
    --primary-color: var(--ds-color-primary);
    --secondary-color: var(--ds-color-tertiary);
    --dark-accent: var(--ds-color-primary-container);
    --accent-color: var(--ds-color-cta-bg);
    --hover-color: var(--ds-color-cta-bg-hover);

    /* --- Superficies ---
       El lienzo es un pelín más frío que la tarjeta: es lo que
       hace que una tarjeta blanca se lea como elevada sin
       necesidad de sombra. */
    --background-color: var(--ds-color-surface);
    --card-bg: var(--ds-color-surface-container-lowest);
    --sidebar-bg: var(--ds-color-surface-container-lowest);
    --elevated-bg: var(--ds-color-surface-container-low);

    /* --- Texto --- */
    --text-color: var(--ds-color-on-surface);
    --text-secondary: #4a5a75;
    --text-muted: #7c8798;

    /* --- Bordes --- */
    --border-color: #e2e9f5;
    --border-light: #cfdcf0;

    /* --- Estado --- */
    --success-color: var(--ds-color-success);
    --warning-color: var(--ds-color-warning);
    --danger-color: var(--ds-color-error);
    --info-color: var(--ds-color-tertiary);

    /* --- Radios: más generosos que los 6/10/16 de antes --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* --- Sombras: tinte navy, muy bajas.
       En una interfaz densa la sombra no debe "verse", solo
       despegar el plano lo justo. --- */
    --shadow-sm: 0 1px 2px rgba(20, 43, 87, 0.05);
    --shadow-md: 0 2px 8px rgba(20, 43, 87, 0.07), 0 1px 2px rgba(20, 43, 87, 0.04);
    --shadow-lg: 0 12px 32px rgba(20, 43, 87, 0.10), 0 4px 8px rgba(20, 43, 87, 0.05);
    --glow-sm: none;
    --glow-accent: none;

    /* --- Fondo plano. El degradado diagonal era lo que más
       delataba la interfaz como "de plantilla". --- */
    --body-gradient: var(--ds-color-surface);
    --modal-backdrop-color: rgba(11, 28, 48, 0.45);

    /* --- Anchos del chasis --- */
    --shell-sidebar-width: 264px;
    --shell-content-padding: 28px;
}

[data-theme="dark"] {
    /* Solo lo que NO deriva de un token: el resto ya se
       invierte solo a través de --ds-*. */
    --text-secondary: #a8b3c4;
    --text-muted: #78859a;

    --border-color: #26314a;
    --border-light: #34415e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);

    --modal-backdrop-color: rgba(0, 0, 0, 0.6);
}

/* =====================================================
   2. BASE
   ===================================================== */

body {
    background: var(--ds-color-surface);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

/* Los números de un panel de control se leen en columna:
   sin cifras de ancho fijo, las cantidades bailan. */
.kpi-value,
.stat-value,
.stats-value,
.metric-value,
.table td,
.table th,
.info-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Foco visible y consistente. El navegador lo pinta solo en
   navegación por teclado, así que no ensucia el ratón. */
:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

[data-theme="dark"] :focus-visible {
    outline-color: var(--ds-color-primary);
}

::selection {
    background: rgba(20, 43, 87, 0.14);
    color: var(--text-color);
}

[data-theme="dark"] ::selection {
    background: rgba(177, 198, 251, 0.24);
}

/* Barras de desplazamiento finas: en un panel con tablas
   largas, la barra gruesa del sistema come espacio y ruido. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

*::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: content-box;
}

/* =====================================================
   3. SHELL — sidebar
   ===================================================== */

.sidebar {
    width: var(--shell-sidebar-width);
    padding: 20px 14px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-theme="dark"] .sidebar {
    box-shadow: none;                       /* <-- gana a style.css:152 */
    background: var(--ds-color-surface-container-low);
}

.sidebar-header {
    padding: 4px 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-brand-logo {
    width: 168px;
}

/* Las secciones son etiquetas, no títulos: pequeñas,
   espaciadas y sin competir con los enlaces. */
.nav-section {
    margin-bottom: 18px;
}

.nav-item {
    margin-bottom: 1px;
}

.nav-link {
    position: relative;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 0.935rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background-color 140ms ease, color 140ms ease;
}

/* El desplazamiento lateral al pasar el ratón hacía "saltar"
   el menú entero. Se sustituye por un cambio de fondo. */
.nav-link:hover,
.nav-link:focus {
    background-color: var(--elevated-bg);
    color: var(--text-color);               /* <-- gana a style.css:374 */
    transform: none;
}

.nav-link i,
.nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 15px;
    text-align: center;
    color: var(--text-muted);
    transition: color 140ms ease;
}

.nav-link:hover i,
.nav-link:hover svg {
    color: var(--text-secondary);
}

/* Activo: fondo navy muy diluido, texto navy y una barra
   a la izquierda. Tres señales redundantes, porque el color
   solo no basta para quien no lo distingue. */
.sidebar .nav-link.active {
    background-color: rgba(20, 43, 87, 0.07);
    color: var(--ds-color-primary);         /* <-- gana a style.css:382 */
    font-weight: 600;
}

.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--ds-color-primary);
}

.sidebar .nav-link.active i,
.sidebar .nav-link.active svg {
    color: var(--ds-color-primary);
}

/* Mismo motivo que en .btn-primary: en oscuro el color de marca
   legible es --ds-color-primary (#b1c6fb), no inverse-primary
   (#495e8c), que sobre fondo oscuro apenas se distingue. */
[data-theme="dark"] .sidebar .nav-link.active {
    background-color: rgba(177, 198, 251, 0.11);
    color: var(--ds-color-primary);
}

[data-theme="dark"] .sidebar .nav-link.active::before {
    background: var(--ds-color-primary);
}

[data-theme="dark"] .sidebar .nav-link.active i,
[data-theme="dark"] .sidebar .nav-link.active svg {
    color: var(--ds-color-primary);
}

/* El contador de pendientes va al final de la fila. */
.sidebar-nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* =====================================================
   4. SHELL — área de contenido
   ===================================================== */

.main-content {
    margin-left: var(--shell-sidebar-width);
    padding: var(--shell-content-padding);
    background: var(--ds-color-surface);    /* <-- gana a style.css:509 (!important) */
}

/* La regla de arriba tiene que superar un !important previo.
   Se repite con selector más específico en vez de encadenar
   otro !important. */
body .main-content {
    background: var(--ds-color-surface) !important;
}

h1.page-title {
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text-color);
    margin-bottom: 2px;
}

.page-subtitle,
.section-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* .section-title vive ahora en components.css, agrupado con el
   resto de nombres que los módulos usan para lo mismo. */

/* =====================================================
   5. TARJETAS
   ===================================================== */

.card,
.stats-card,
.chart-card,
.info-card,
.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 18px;
}

/* Nada de levantar la tarjeta al pasar por encima si no es
   pulsable: el movimiento promete una acción que no existe. */
.card:hover,
.stats-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
}

/* Solo las que sí llevan a algún sitio reaccionan. */
a > .card:hover,
a > .stats-card:hover,
a > .kpi-card:hover,
.card--clickable:hover,
.summary-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-light);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 18px;
    font-weight: 600;
    color: var(--text-color);
}

/* --- Tarjetas de indicador --- */

.kpi-card,
.stats-card {
    padding: 16px 18px;
}

.kpi-label,
.stats-title,
.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.kpi-value,
.stats-value,
.stat-value {
    font-size: 1.9rem;
    font-weight: 680;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-color);
}

/* El icono deja de ser un cuadrado de color saturado y pasa a
   ser una pastilla tonal: acompaña, no compite con la cifra. */
.stats-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--ds-color-primary-fixed);
    color: var(--ds-color-primary);
    font-size: 16px;
    margin-bottom: 12px;
}

[data-theme="dark"] .stats-icon {
    background: rgba(177, 198, 251, 0.14);
    color: var(--ds-color-primary);
}

.stats-trend {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Los pares etiqueta/valor (.info-item, .info-label, .info-value)
   y .info-card-title viven ahora en components.css, junto a sus
   equivalentes .ui-field-* y .ui-card-title. */

/* =====================================================
   6. TABLAS
   ===================================================== */

.table {
    --bs-table-bg: transparent;
    border-color: var(--border-color);
    margin-bottom: 0;
    color: var(--text-color);
}

.table > thead > tr > th {
    padding: 10px 14px;
    background: var(--elevated-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    border-top: 0;
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--text-color);
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table > tbody > tr {
    transition: background-color 120ms ease;
}

.table > tbody > tr:hover > td {
    background-color: var(--elevated-bg);
}

/* Zebra de Bootstrap: se apaga. Con el hover y los separadores
   de 1px ya hay guía suficiente, y el rayado ensucia.
   Bootstrap 5.3 no pinta la franja con background-color, sino
   resolviendo --bs-table-bg-type sobre la celda; anular solo el
   background-color deja la franja visible. */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    color: var(--text-color);
}

/* Y el hover de Bootstrap va por la misma vía. */
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
}

/* Una tabla dentro de una tarjeta no necesita bordes propios:
   los pone el contenedor. */
.card > .table-responsive,
.card > .table {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}

.table-responsive {
    border-radius: var(--radius-lg);
}

/* =====================================================
   7. BOTONES
   ===================================================== */

.btn {
    border-radius: var(--radius-md);
    font-weight: 550;
    font-size: 0.88rem;
    padding: 0.5rem 0.95rem;
    line-height: 1.35;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

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

.btn-sm {
    padding: 0.34rem 0.65rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.65rem 1.3rem;
    font-size: 0.95rem;
}

/* Primario = navy. Es la acción normal de la aplicación.
   No lleva variante para oscuro a propósito: el par
   primary / on-primary ya se invierte solo en tokens.css
   (#142b57 sobre blanco en claro, #b1c6fb sobre #001944 en
   oscuro). Escribir aquí un override con inverse-primary daba
   texto casi negro sobre navy medio: 3:1, ilegible. */
.btn-primary {
    background-color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1d3a6f;
    border-color: #1d3a6f;
    color: #fff;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
    background-color: #cbd9ff;
    border-color: #cbd9ff;
    color: #001944;
}

/* Naranja = llamada a la acción, una por pantalla.
   Reservado a .btn-cta y al botón de acceso. */
.btn-cta,
.btn-login {
    background-color: var(--ds-color-cta-bg);    /* <-- gana a style.css:484 */
    border: none;
    color: var(--ds-color-cta-text);
    font-weight: 600;
}

.btn-cta:hover,
.btn-login:hover {
    background-color: var(--ds-color-cta-bg-hover);
    color: var(--ds-color-cta-text);
}

.btn-login {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-md);
}

.btn-outline-secondary {
    border-color: var(--border-light);
    color: var(--text-secondary);
    background: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--elevated-bg);
    border-color: var(--text-muted);
    color: var(--text-color);
}

.btn-secondary {
    background-color: var(--elevated-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

/* Los iconos de acción de las tablas eran un azul y un morado
   sin relación entre sí ni con la marca. Pasan a ser botones
   neutros que solo se colorean cuando se usan.
   Los !important son obligados: style.css:452-480 los declara
   así, y sin ellos esta regla no llega a aplicarse. */
.btn-info-custom,
.btn-download-custom {
    background-color: var(--elevated-bg) !important;   /* <-- gana a style.css:452/460 */
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-info-custom:hover,
.btn-info-custom:focus,
.btn-info-custom:active {
    background-color: var(--ds-color-primary) !important;
    color: #fff !important;
    border-color: var(--ds-color-primary) !important;
}

.btn-download-custom:hover,
.btn-download-custom:focus,
.btn-download-custom:active {
    background-color: var(--ds-color-tertiary) !important;
    color: #fff !important;
    border-color: var(--ds-color-tertiary) !important;
}

[data-theme="dark"] .btn-info-custom:hover,
[data-theme="dark"] .btn-info-custom:focus,
[data-theme="dark"] .btn-download-custom:hover,
[data-theme="dark"] .btn-download-custom:focus {
    color: #001944 !important;
}

/* Los grupos de botones de la tabla llevaban 3px de radio y
   0.7rem: quedaban como fichas sueltas. */
.btn-group .btn {
    border-radius: var(--radius-sm);
    padding: 0.34rem 0.55rem;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
}

/* style.css convierte .btn-group en flex, y dentro de una celda
   ancha los botones se estiraban hasta ocupar toda la columna. */
.btn-group {
    gap: 4px;
    width: fit-content;
}

.btn-group .btn {
    flex: 0 0 auto;
}

.text-end > .btn-group,
td.text-end > .btn-group {
    margin-left: auto;
}

.btn[name="search"],
.btn[name="play"] {
    background-color: var(--ds-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
}

.btn[name="search"]:hover,
.btn[name="play"]:hover {
    background-color: #1d3a6f;
    transform: none;
}

/* =====================================================
   8. FORMULARIOS
   ===================================================== */

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.form-control,
.form-select {
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

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

.form-control:focus,
.form-select:focus {
    background-color: var(--card-bg);
    border-color: var(--ds-color-primary);
    box-shadow: 0 0 0 3px rgba(20, 43, 87, 0.10);
    color: var(--text-color);
    outline: none;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--ds-color-primary);
    box-shadow: 0 0 0 3px rgba(177, 198, 251, 0.16);
}

.input-group-text {
    background-color: var(--elevated-bg);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    border-radius: var(--radius-md);
}

.form-check-input {
    border-color: var(--border-light);
    background-color: var(--card-bg);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(20, 43, 87, 0.10);
    border-color: var(--ds-color-primary);
}

/* =====================================================
   9. BADGES Y ESTADOS
   Bootstrap los pinta en color plano y saturado. En una
   tabla con muchas filas eso grita. Se convierten en
   pastillas tonales: fondo suave, texto oscuro del mismo
   tono, que es lo que se lee sin cansar.
   ===================================================== */

.badge {
    padding: 0.32em 0.62em;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.bg-success {
    background-color: var(--ds-color-success-container) !important;
    color: var(--ds-color-on-success-container) !important;
}

.badge.bg-danger {
    background-color: var(--ds-color-error-container) !important;
    color: var(--ds-color-on-error-container) !important;
}

.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: var(--ds-color-warning-container) !important;
    color: var(--ds-color-on-warning-container) !important;
}

.badge.bg-primary {
    background-color: var(--ds-color-primary-fixed) !important;
    color: var(--ds-color-on-primary-fixed) !important;
}

.badge.bg-info {
    background-color: var(--ds-color-tertiary-fixed) !important;
    color: var(--ds-color-on-tertiary-fixed) !important;
}

.badge.bg-secondary {
    background-color: var(--elevated-bg) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-info {
    color: var(--ds-color-on-surface) !important;
}

[data-theme="dark"] .badge.bg-success  { background-color: rgba(125, 212, 152, 0.18) !important; color: #9fe3b3 !important; }
[data-theme="dark"] .badge.bg-danger   { background-color: rgba(255, 180, 171, 0.18) !important; color: #ffb4ab !important; }
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.text-dark { background-color: rgba(255, 197, 110, 0.18) !important; color: #ffc56e !important; }
[data-theme="dark"] .badge.bg-primary  { background-color: rgba(177, 198, 251, 0.18) !important; color: #b1c6fb !important; }
[data-theme="dark"] .badge.bg-info     { background-color: rgba(171, 199, 255, 0.16) !important; color: #abc7ff !important; }

/* =====================================================
   10. AVISOS
   ===================================================== */

/* Los contenedores tonales de tokens.css (#ffdf99, #ffdad6…)
   funcionan en una pastilla de 20px, pero aplicados a una banda
   de ancho completo saturan la pantalla. Los avisos usan tintes
   más lavados, con un borde del mismo tono que los sostiene. */

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 15px;
    font-size: 0.9rem;
}

.alert-success {
    background-color: #e9f6ed;
    border-color: #c7e7d1;
    color: #1c5130;
}

.alert-danger {
    background-color: #fdeceb;
    border-color: #f6cfcb;
    color: #8c1d18;
}

.alert-warning {
    background-color: #fdf5e6;
    border-color: #f0e1be;
    color: #6b4d07;
}

.alert-info {
    background-color: #ecf2fe;
    border-color: #d2e1fb;
    color: #1b3c6e;
}

[data-theme="dark"] .alert-success { background-color: rgba(125, 212, 152, 0.12); border-color: rgba(125, 212, 152, 0.28); color: #9fe3b3; }
[data-theme="dark"] .alert-danger  { background-color: rgba(255, 180, 171, 0.12); border-color: rgba(255, 180, 171, 0.28); color: #ffb4ab; }
[data-theme="dark"] .alert-warning { background-color: rgba(255, 197, 110, 0.12); border-color: rgba(255, 197, 110, 0.28); color: #ffc56e; }
[data-theme="dark"] .alert-info    { background-color: rgba(171, 199, 255, 0.12); border-color: rgba(171, 199, 255, 0.28); color: #abc7ff; }

/* Un botón dentro de un aviso hereda el tono del aviso, para no
   quedar como una pieza pegada de otro sitio. */
.alert .btn-outline-secondary {
    border-color: currentColor;
    color: inherit;
    opacity: 0.85;
}

.alert .btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.06);
    border-color: currentColor;
    color: inherit;
    opacity: 1;
}

/* =====================================================
   11. MODALES
   ===================================================== */

.modal-content,
.ds-modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--card-bg);
}

.ds-modal-header,
.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.ds-modal-footer,
.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 14px 20px;
    gap: 8px;
}

.modal-backdrop.show {
    background-color: #0b1c30;
    opacity: 0.45;
}

/* Las fichas de sección del formulario de subida: el borde
   izquierdo de 4px se afina y el fondo se aclara. */
.upload-section {
    background: var(--elevated-bg);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

/* =====================================================
   12. NAVEGACIÓN SECUNDARIA Y PAGINACIÓN
   ===================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 2px;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-weight: 550;
    padding: 9px 14px;
}

.nav-tabs .nav-link:hover {
    background: transparent;
    color: var(--text-color);
    border-bottom-color: var(--border-light);
}

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

.page-link {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--card-bg);
    padding: 0.4rem 0.7rem;
    font-size: 0.86rem;
}

.page-link:hover {
    background: var(--elevated-bg);
    color: var(--text-color);
    border-color: var(--border-light);
}

.page-item.active .page-link {
    background: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
    color: #fff;
}

/* =====================================================
   13. DETALLES
   ===================================================== */

/* Separadores más discretos. */
hr {
    border-color: var(--border-color);
    opacity: 1;
}

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--card-bg);
    padding: 5px;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--elevated-bg);
    color: var(--text-color);
}

/* El botón flotante de tema, alineado con el resto. */
#themeToggleFloating {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--card-bg) !important;
    color: var(--text-secondary) !important;
}

#themeToggleFloating:hover {
    transform: none !important;
    background: var(--elevated-bg) !important;
}

/* =====================================================
   14. RESPUESTA A PANTALLAS PEQUEÑAS
   El sidebar es fijo de 264px y el contenido lleva ese
   margen. Por debajo de 992px el margen se quita para que
   el contenido no quede fuera de la pantalla.
   ===================================================== */

@media (max-width: 991.98px) {
    :root {
        --shell-content-padding: 16px;
    }

    .main-content {
        margin-left: 0;
        padding: var(--shell-content-padding);
    }

    .kpi-value,
    .stats-value,
    .stat-value {
        font-size: 1.6rem;
    }
}

/* =====================================================
   15. MOVIMIENTO
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}