/*
    theme.css — capa de diseño (se carga DESPUÉS de base.css y site.css).

    Reestiliza los componentes de Bootstrap 4 con un lenguaje visual unificado:
    superficies oscuras muy neutras, bordes sutiles, esquinas redondeadas,
    tipografía con jerarquía por color (texto / texto atenuado) y acento teal.

    Los tres modos existentes se mantienen y se controlan con la clase del body,
    igual que antes (js/base.js):
        body.bg-dark2  -> "dark"  (casi negro, el de las referencias)
        body.bg-dark   -> "dim"   (pizarra)
        body.bg-light  -> "light"

    Todos los colores salen de las variables --ch-*. Para retocar la paleta
    basta con cambiarlas aquí; no hay colores sueltos en los componentes.
*/

/*#region Tokens*/

:root {
    /* --primary lo usan .slider, .lock, .list-group-item-check:checked y
       #btnFicharGrid en base.css/site.css; se reapunta al nuevo acento. */
    --primary: #0b7f8a;

    --ch-accent: #0b7f8a;
    --ch-accent-hover: #096e78;
    --ch-accent-active: #085f68;

    --ch-r-xs: 6px;
    --ch-r-sm: 8px;
    --ch-r-md: 12px;
    --ch-r-lg: 16px;
    --ch-r-pill: 999px;

    --ch-font: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

    --ch-transition: 150ms ease;
}

/* Modo "dark" (body.bg-dark2). Es también el valor por defecto del body para
   que cualquier página sin clase de tema resuelva a algo coherente. */
body,
body.bg-dark2 {
    --ch-bg: #08090a;
    --ch-surface: #101114;
    --ch-surface-2: #16181c;
    --ch-surface-3: #1e2126;
    --ch-nav-bg: #0c0d0f;
    --ch-input-bg: #16181c;
    --ch-input-disabled: #1b1e22;

    --ch-border: #23262b;
    --ch-border-soft: #191b1f;
    --ch-border-strong: #33383f;

    --ch-text: #e9ebee;
    --ch-text-muted: #9aa0a8;
    --ch-text-faint: #6d737b;

    --ch-accent-text: #2ab0bd;
    --ch-accent-soft: rgba(42, 176, 189, .14);
    --ch-accent-ring: rgba(42, 176, 189, .25);

    --ch-success: #3ecf8e;
    --ch-success-soft: rgba(62, 207, 142, .14);
    --ch-danger: #f2555a;
    --ch-danger-soft: rgba(242, 85, 90, .14);
    --ch-warning: #f5b544;
    --ch-warning-soft: rgba(245, 181, 68, .15);
    --ch-info: #56a8f5;
    --ch-info-soft: rgba(86, 168, 245, .14);

    --ch-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --ch-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --ch-shadow-lg: 0 18px 48px rgba(0, 0, 0, .60);

    --ch-scroll-thumb: #3a3f46;
    --ch-overlay: rgba(0, 0, 0, .65);
}

/* Modo "dim" (body.bg-dark) */
body.bg-dark {
    --ch-bg: #15171b;
    --ch-surface: #1c1f24;
    --ch-surface-2: #23272d;
    --ch-surface-3: #2b3038;
    --ch-nav-bg: #191c20;
    --ch-input-bg: #23272d;
    --ch-input-disabled: #2b3038;

    --ch-border: #32373f;
    --ch-border-soft: #272b31;
    --ch-border-strong: #434952;

    --ch-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --ch-shadow-md: 0 4px 16px rgba(0, 0, 0, .40);
    --ch-shadow-lg: 0 18px 48px rgba(0, 0, 0, .50);

    --ch-scroll-thumb: #464c55;
}

/* Modo "light" (body.bg-light) */
body.bg-light {
    --ch-bg: #f5f6f8;
    --ch-surface: #ffffff;
    --ch-surface-2: #ffffff;
    --ch-surface-3: #eef0f3;
    --ch-nav-bg: #ffffff;
    --ch-input-bg: #ffffff;
    --ch-input-disabled: #f0f2f5;

    --ch-border: #e3e6ea;
    --ch-border-soft: #edeff2;
    --ch-border-strong: #cfd4db;

    --ch-text: #12161c;
    --ch-text-muted: #667085;
    --ch-text-faint: #98a1b0;

    --ch-accent-text: #0a7d88;
    --ch-accent-soft: rgba(11, 127, 138, .10);
    --ch-accent-ring: rgba(11, 127, 138, .18);

    --ch-success: #0f8b52;
    --ch-success-soft: rgba(15, 139, 82, .10);
    --ch-danger: #d92d34;
    --ch-danger-soft: rgba(217, 45, 52, .09);
    --ch-warning: #b3730a;
    --ch-warning-soft: rgba(179, 115, 10, .11);
    --ch-info: #1667c9;
    --ch-info-soft: rgba(22, 103, 201, .09);

    --ch-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ch-shadow-md: 0 4px 14px rgba(16, 24, 40, .07);
    --ch-shadow-lg: 0 18px 44px rgba(16, 24, 40, .14);

    --ch-scroll-thumb: #c9ced6;
    --ch-overlay: rgba(16, 24, 40, .45);
}

/*#endregion*/

/*#region Base y tipografía*/

body {
    font-family: var(--ch-font);
    color: var(--ch-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.006em;
}

/* base.css y Bootstrap marcan estos fondos con !important */
body.bg-dark2,
body.bg-dark,
body.bg-light {
    background-color: var(--ch-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.018em;
    color: inherit;
}

h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.0625rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9375rem; }

a {
    color: var(--ch-accent-text);
    text-decoration: none;
    transition: color var(--ch-transition);
}

a:hover {
    color: var(--ch-accent-text);
    text-decoration: none;
    filter: brightness(1.15);
}

/* Los helpers de color de Bootstrap se reconducen a los tokens del tema.
   js/base.js intercambia .text-light <-> .text-dark al cambiar de modo. */
body.bg-dark2 .text-light,
body.bg-dark .text-light,
body.bg-light .text-dark {
    color: var(--ch-text) !important;
}

.text-themed,
body.bg-dark2 .text-themed,
body.bg-dark .text-themed,
body.bg-light .text-themed {
    color: var(--ch-text);
}

body.bg-dark2 .text-themed-important,
body.bg-dark .text-themed-important,
body.bg-light .text-themed-important {
    color: var(--ch-text) !important;
}

.text-muted,
.text-secondary {
    color: var(--ch-text-muted) !important;
}

.text-success { color: var(--ch-success) !important; }
.text-danger { color: var(--ch-danger) !important; }
.text-warning { color: var(--ch-warning) !important; }
.text-info { color: var(--ch-info) !important; }
.text-primary { color: var(--ch-accent-text) !important; }

/* Superficies temáticas heredadas */
body.bg-dark2 .bg-themed,
body.bg-dark .bg-themed,
body.bg-light .bg-themed {
    background-color: var(--ch-surface);
}

body.bg-dark2 .bg-dark3,
body.bg-dark .bg-dark3,
body.bg-light .bg-dark3 {
    background-color: var(--ch-surface-2) !important;
}

hr {
    border-top: 1px solid var(--ch-border);
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--ch-border) !important;
}

body.bg-dark .border-dark,
body.bg-dark2 .border-dark,
body.bg-light .border-bottom,
body.bg-light .border-top {
    border-color: var(--ch-border) !important;
}

/* Scrollbars. La barra del viewport se resuelve en <html>, no en <body>, así que
   el token se duplica en :root (base.css la fija ahí con más especificidad). */
:root:has(body.bg-dark2) { --ch-scroll-root: #3a3f46; }
:root:has(body.bg-dark) { --ch-scroll-root: #464c55; }
:root:has(body.bg-light) { --ch-scroll-root: #c9ced6; }

html {
    scrollbar-width: thin;
    scrollbar-color: var(--ch-scroll-root, #3a3f46) transparent !important;
}

body.bg-dark2,
body.bg-dark,
body.bg-light,
body.bg-dark2 .overflow-auto,
body.bg-dark .overflow-auto,
body.bg-light .overflow-auto {
    scrollbar-color: var(--ch-scroll-thumb) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: var(--ch-scroll-thumb);
    border-radius: var(--ch-r-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--ch-border-strong);
}

/* Foco visible coherente en toda la app */
:focus-visible {
    outline: 2px solid var(--ch-accent-text);
    outline-offset: 2px;
}

/*#endregion*/

/*#region Navbar*/

body .navbar.fixed-top.bg-dark3,
body .navbar.fixed-bottom.bg-dark3 {
    background-color: var(--ch-nav-bg) !important;
    box-shadow: var(--ch-shadow-sm);
}

body .navbar.fixed-top {
    border-bottom: 1px solid var(--ch-border) !important;
}

body .navbar.fixed-bottom {
    border-top: 1px solid var(--ch-border) !important;
}

/* OJO: no tocar los márgenes laterales de .nav-item. site.css les pone
   `margin: auto` y son los márgenes automáticos los que reparten el espacio
   libre entre los elementos en pantallas anchas. Fijarlos (aunque sea a 1px)
   los amontona a la izquierda. */

.navbar .nav-item > .nav-link,
.navbar .nav-item .dropup > .nav-link,
.navbar .nav-item .dropdown > .nav-link {
    color: var(--ch-text-muted) !important;
    border-radius: var(--ch-r-sm);
    padding: 7px 11px;
    transition: background-color var(--ch-transition), color var(--ch-transition);
}

.navbar .nav-item i {
    font-size: 19px;
}

.navbar .nav-item span {
    font-weight: 500;
}

/* site.css baja la opacidad al pasar por encima; aquí se usa fondo en su lugar */
.navbar .nav-link:hover {
    opacity: 1;
}

.navbar .nav-item > .nav-link:hover,
.navbar .nav-item .dropup > .nav-link:hover,
.navbar .nav-item .dropdown > .nav-link:hover {
    background-color: var(--ch-surface-3);
    color: var(--ch-text) !important;
}

/* El elemento activo lo marca activarMenuItem() añadiendo .item-color al <i>.
   .item2 significa "apartado padre", que no se resalta. */
.item-color {
    color: var(--ch-accent-text) !important;
}

.navbar .nav-item > .nav-link:has(i.item-color:not(.item2)),
.navbar .nav-item .dropup > .nav-link:has(i.item-color:not(.item2)),
.navbar .nav-item .dropdown > .nav-link:has(i.item-color:not(.item2)) {
    background-color: var(--ch-accent-soft);
    color: var(--ch-accent-text) !important;
}

.navbar .nav-item > .nav-link:has(i.item-color:not(.item2)) span {
    color: var(--ch-accent-text);
}

/* Menús desplegables del navbar: sus hijos son .nav-link, no .dropdown-item */
.navbar .dropdown-menu {
    padding: 6px;
    margin-top: 8px;
}

.navbar .dropdown-menu .nav-link {
    color: var(--ch-text) !important;
    border-radius: var(--ch-r-sm);
    padding: 9px 12px;
    font-size: .9375rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.navbar .dropdown-menu .nav-link:hover {
    background-color: var(--ch-surface-3);
    color: var(--ch-text) !important;
}

.navbar .dropdown-menu .nav-link i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    color: var(--ch-text-muted);
}

#nav-logo img {
    filter: none;
}

#form-superadmin-impersonation input {
    color: var(--ch-text-faint);
}

/*#endregion*/

/*#region Contenedores: widget y card*/

.widget {
    background-color: var(--ch-surface) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-r-lg) !important;
    box-shadow: var(--ch-shadow-sm);
    color: var(--ch-text);
}

.widget .text-bottom {
    border-top: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
}

/* Cabecera de widget (.bg-header) — se define también en las vistas */
body.bg-dark2 .widget > .bg-header,
body.bg-dark .widget > .bg-header,
body.bg-light .widget > .bg-header,
body.bg-dark2 .widget > h5.bg-header,
body.bg-dark .widget > h5.bg-header,
body.bg-light .widget > h5.bg-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--ch-border);
    border-radius: var(--ch-r-lg) var(--ch-r-lg) 0 0;
    color: var(--ch-text) !important;
    font-size: .9375rem;
    font-weight: 600;
    height: 48px;
    padding: 0 16px;
}

/* Las cabeceras traen .text-white / style="color:#fff" heredados del diseño
   anterior (fondo gris sólido). Ahora el fondo es transparente, así que el
   texto tiene que seguir al token o desaparecería en modo claro. */
body.bg-dark2 .widget > .bg-header .text-white,
body.bg-dark .widget > .bg-header .text-white,
body.bg-light .widget > .bg-header .text-white,
body.bg-dark2 .widget > .bg-header h5,
body.bg-dark .widget > .bg-header h5,
body.bg-light .widget > .bg-header h5 {
    color: var(--ch-text) !important;
}

body.bg-dark2 .widget > .bg-header i,
body.bg-dark .widget > .bg-header i,
body.bg-light .widget > .bg-header i {
    color: var(--ch-text-muted) !important;
}

body.bg-dark2 .card,
body.bg-dark .card,
body.bg-light .card {
    background-color: var(--ch-surface-2);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-md);
    color: var(--ch-text);
}

/* Las tarjetas de OT las monta addCard() en site.js como
   `card text-white bg-secondary` (o bg-danger si está finalizada/pendiente).
   Los helpers .bg-* de Bootstrap son !important, así que el relleno saturado
   ganaba al tema: aquí se traducen a superficie neutra + tinte de estado. */
body .card.bg-secondary,
body .card.bg-light,
body .card.bg-dark,
body .card.bg-dark2 {
    background-color: var(--ch-surface-2) !important;
    border-color: var(--ch-border) !important;
}

body .card.bg-danger {
    background-color: var(--ch-danger-soft) !important;
    border-color: var(--ch-danger) !important;
}

body .card.bg-success {
    background-color: var(--ch-success-soft) !important;
    border-color: var(--ch-success) !important;
}

body .card.bg-warning {
    background-color: var(--ch-warning-soft) !important;
    border-color: var(--ch-warning) !important;
}

/* El .text-white venía del relleno saturado y ahora dejaría el texto ilegible
   en modo claro, así que se reconduce al token.

   IMPORTANTE: sólo en las tarjetas cuyo fondo cambia realmente el tema, es decir
   las que llevan un helper .bg-* de Bootstrap. Nada de descendientes: heredan del
   .card y así se respeta cualquier color puesto en el atributo style.
   Un !important genérico sobre `.card.text-white *` rompía Historial Fichaje, que
   monta las filas con el color del tipo de día en línea y el texto en negro,
   verde o granate según el dato (y en blanco sobre las filas #fff quedaba
   invisible). */
body .card.bg-secondary.text-white,
body .card.bg-danger.text-white,
body .card.bg-success.text-white,
body .card.bg-warning.text-white,
body .card.bg-light.text-white,
body .card.bg-dark.text-white {
    color: var(--ch-text) !important;
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--ch-border);
}

.card-header {
    border-radius: var(--ch-r-md) var(--ch-r-md) 0 0 !important;
    font-weight: 600;
}

.card-footer {
    border-radius: 0 0 var(--ch-r-md) var(--ch-r-md) !important;
}

/*#endregion*/

/*#region Botones*/

.btn {
    border-radius: var(--ch-r-sm);
    font-weight: 500;
    letter-spacing: -.005em;
    transition: background-color var(--ch-transition), border-color var(--ch-transition), color var(--ch-transition), box-shadow var(--ch-transition);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
}

.btn-primary,
.btn-info {
    color: #fff;
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
}

.btn-primary:hover,
.btn-info:hover {
    color: #fff;
    background-color: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-info:focus,
.btn-info.focus {
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
    background-color: var(--ch-accent-active);
    border-color: var(--ch-accent-active);
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-info.disabled,
.btn-info:disabled {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
    opacity: .5;
}

.btn-color {
    background-color: var(--ch-accent) !important;
    border-color: var(--ch-accent) !important;
    color: #fff;
}

.btn-color:enabled:hover {
    background-color: var(--ch-accent-hover) !important;
    border-color: var(--ch-accent-hover) !important;
}

.btn-secondary {
    background-color: var(--ch-surface-3);
    border-color: var(--ch-border);
    color: var(--ch-text);
}

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

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--ch-border);
    border-color: var(--ch-border-strong);
    color: var(--ch-text);
}

.btn-light {
    background-color: var(--ch-surface-3);
    border-color: var(--ch-border);
    color: var(--ch-text);
}

.btn-light:hover {
    background-color: var(--ch-border);
    border-color: var(--ch-border-strong);
    color: var(--ch-text);
}

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

.btn-outline-secondary:hover {
    color: var(--ch-text);
    background-color: var(--ch-surface-3);
    border-color: var(--ch-border-strong);
}

.btn-outline-primary {
    color: var(--ch-accent-text);
    border-color: var(--ch-accent);
    background-color: transparent;
}

/* Una acción destructiva que no es la principal de su modal (cerrar perdiendo lo escrito):
   se tiene que leer como peligrosa sin pesar más que el botón que no rompe nada. */
.btn-outline-danger {
    color: var(--ch-danger);
    border-color: var(--ch-danger);
    background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--ch-danger);
    border-color: var(--ch-danger);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
}

.btn-success {
    background-color: var(--ch-success);
    border-color: var(--ch-success);
    color: #fff;
}

.btn-danger {
    background-color: var(--ch-danger);
    border-color: var(--ch-danger);
    color: #fff;
}

.btn-warning {
    background-color: var(--ch-warning);
    border-color: var(--ch-warning);
    color: #fff;
}

.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover {
    filter: brightness(.92);
    color: #fff;
}

.btn-link {
    color: var(--ch-accent-text);
}

.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;
}

/*#endregion*/

/*#region Formularios*/

label {
    color: var(--ch-text);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .35rem;
}

/* Sin !important a propósito: hay vistas que quitan el borde o el fondo de un
   .form-control para montar controles compuestos (p. ej. el .viewbar invisible
   de #FiltroIdArticulo en Historial), y Bootstrap cuadra las esquinas de los
   .form-control dentro de un .input-group. Un !important aquí rompía las dos
   cosas. La especificidad necesaria se consigue con selectores temáticos. */
.form-control,
.custom-select,
textarea.form-control {
    background-color: var(--ch-input-bg);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-sm);
    color: var(--ch-text);
    box-shadow: none;
    transition: border-color var(--ch-transition), box-shadow var(--ch-transition);
}

/* Muchos inputs llevan la clase de tema en el markup (`form-control bg-dark2
   text-light`) y Bootstrap/base.css la marcan con !important. */
.form-control.bg-dark2,
.form-control.bg-dark,
.form-control.bg-light,
.form-control.bg-white,
.custom-select.bg-dark2,
.custom-select.bg-dark,
.custom-select.bg-light,
textarea.bg-dark2,
textarea.bg-dark,
textarea.bg-light {
    background-color: var(--ch-input-bg) !important;
}

/* Bootstrap fija `background-color: #fff; color: #495057` en :focus, así que hay
   que redeclarar ambos o el input se vuelve blanco al enfocarlo. */
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    background-color: var(--ch-input-bg);
    color: var(--ch-text);
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
}

.form-control.bg-dark2:focus,
.form-control.bg-dark:focus,
.form-control.bg-light:focus,
.form-control.bg-white:focus {
    background-color: var(--ch-input-bg) !important;
}

/* El autorrelleno de Chrome pinta su propio fondo claro; sólo se puede tapar
   con una sombra interior y forzando el color del texto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--ch-text);
    -webkit-box-shadow: 0 0 0 1000px var(--ch-input-bg) inset;
    box-shadow: 0 0 0 1000px var(--ch-input-bg) inset;
    caret-color: var(--ch-text);
    transition: background-color 9999s ease-out 0s;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ch-input-bg) inset, 0 0 0 3px var(--ch-accent-ring);
    box-shadow: 0 0 0 1000px var(--ch-input-bg) inset, 0 0 0 3px var(--ch-accent-ring);
}

.form-control::placeholder {
    color: var(--ch-text-faint);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--ch-input-disabled) !important;
    color: var(--ch-text-muted) !important;
    cursor: not-allowed;
}

.input-group-text {
    background-color: var(--ch-surface-3);
    border: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
}

/* Los botones de calendario son `input-group-text btn-primary`: al ser ambas
   reglas de una sola clase ganaba la última del archivo (input-group-text) y
   el botón salía gris. Aquí se le devuelve el acento. */
.input-group-text.btn-primary,
.input-group-text.btn-color,
.input-group-append > .btn-primary.input-group-text {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
    color: #fff;
}

.input-group-text.btn-primary:hover,
.input-group-text.btn-color:hover {
    background-color: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
    color: #fff;
}

/* Esquinas del grupo: sólo redondean los extremos exteriores */
.input-group > .input-group-prepend:first-child > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn {
    border-radius: var(--ch-r-sm) 0 0 var(--ch-r-sm);
}

.input-group > .input-group-append:last-child > .input-group-text,
.input-group > .input-group-append:last-child > .btn {
    border-radius: 0 var(--ch-r-sm) var(--ch-r-sm) 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Los date_picker meten el <label> dentro del .input-group, así que el input no
   es :first-child y las reglas de arriba (y las de Bootstrap) le quitarían el
   redondeo izquierdo. Necesita más especificidad que `> .form-control:not(...)`. */
.input-group > label + .form-control:not(:last-child),
.input-group > label + .custom-select:not(:last-child) {
    border-top-left-radius: var(--ch-r-sm);
    border-bottom-left-radius: var(--ch-r-sm);
}

/* <select> nativos.
   Hay ~43 repartidos por las vistas con el borde y el radio en el atributo
   style (`border: 1px solid #ced4da; border-radius: .25rem`), y muchos sin
   ninguna clase, así que se quedaban con el gris del UA o con el borde claro.
   Un estilo en línea sólo se puede vencer con !important, de ahí las marcas.
   Se excluye [multiple] porque filterMultiSelect lo oculta y lo sustituye. */
select:not([multiple]),
select.form-control,
select.custom-select {
    background-color: var(--ch-input-bg) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-r-sm) !important;
    color: var(--ch-text) !important;
    filter: none;
}

select:not([multiple]):focus {
    border-color: var(--ch-accent) !important;
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
    outline: none;
}

/* .custom-select dibuja su flecha con un SVG oscuro pensado para fondo claro y
   appearance:none. Se deja la flecha nativa para que iguale al resto de selects. */
.custom-select,
select.custom-select {
    background-image: none !important;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    padding-right: .75rem;
}

/* Los <select> nativos usaban filter: invert(1) para el modo oscuro;
   ahora se tematizan de verdad (el hack invertía también el texto). */
body.bg-dark2 .modal select,
body.bg-dark .modal select,
body.bg-dark2 select.form-control,
body.bg-dark select.form-control,
body.bg-dark2 select.custom-select,
body.bg-dark select.custom-select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-border) !important;
    filter: none;
}

body.bg-dark2 .modal select:disabled,
body.bg-dark .modal select:disabled {
    border-color: var(--ch-border) !important;
}

select option {
    background-color: var(--ch-surface-2);
    color: var(--ch-text);
}

.form-check-input,
.custom-control-input {
    accent-color: var(--ch-accent);
}

.form-check-label {
    color: var(--ch-text);
    font-weight: 400;
}

.custom-control-label::before {
    background-color: var(--ch-input-bg);
    border-color: var(--ch-border-strong);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
}

.eye {
    color: var(--ch-text-muted);
    border-radius: var(--ch-r-sm);
}

.eye:hover {
    color: var(--ch-text);
}

.invalid-feedback,
.text-danger {
    color: var(--ch-danger) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--ch-danger) !important;
}

/*#endregion*/

/*#region Modales*/

.modal-backdrop.show {
    opacity: 1;
    background-color: var(--ch-overlay);
}

body.bg-dark2 .modal .modal-content,
body.bg-dark .modal .modal-content,
body.bg-light .modal .modal-content {
    background-color: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-lg);
    box-shadow: var(--ch-shadow-lg);
    color: var(--ch-text);
}

body.bg-dark2 .modal .modal-header,
body.bg-dark .modal .modal-header,
body.bg-light .modal .modal-header {
    border-bottom: 1px solid var(--ch-border);
    padding: 20px 24px 16px;
    /* Bootstrap la deja en flex-start: el botón de cerrar cuelga de arriba en vez de
       alinearse con el título, y sólo cuadra si el título mide exactamente lo previsto.
       Centrado, la equis queda a la altura del título mida lo que mida (una línea, dos,
       o con icono delante). */
    align-items: center;
}

body.bg-dark2 .modal .modal-footer,
body.bg-dark .modal .modal-footer,
body.bg-light .modal .modal-footer {
    border-top: 1px solid var(--ch-border);
    padding: 16px 24px;
}

.modal-body {
    padding: 20px 24px;
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

/* Bootstrap le da a .close padding de 1rem y márgenes negativos de -1rem: con la
   cabecera ya espaciada por el tema, la caja (y su fondo al pasar por encima)
   acababa ocupando casi toda la altura del header. Botón cuadrado y compacto. */
body.bg-dark2 .modal .close,
body.bg-dark .modal .close,
body.bg-light .modal .close {
    filter: none;
    color: var(--ch-text-muted);
    text-shadow: none;
    opacity: 1;
    font-weight: 400;
    border-radius: var(--ch-r-sm);
    transition: color var(--ch-transition), background-color var(--ch-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    /* Sin margen vertical: de centrarlo se encarga ahora el align-items de la cabecera. El
       -8px de la derecha es sólo para que el botón muerda el padding y quede a ras. */
    margin: 0 -8px 0 auto;
    font-size: 1.375rem;
    line-height: 1;
    position: relative;
    flex: none;
}

/* La equis se dibuja, no se escribe.
   Bootstrap pone un &times; de texto, y ese carácter no está centrado en su caja: se apoya
   en la línea base y queda un par de píxeles alto respecto al título, en TODOS los modales
   de la aplicación. Centrar la caja con flex no lo arregla, porque lo descentrado es el
   glifo dentro de la caja, y cuánto depende de la fuente.
   Dos barras cruzadas con "inset: 0; margin: auto" quedan centradas al píxel y no dependen
   de la tipografía. El <span> del &times; lleva aria-hidden, así que esconderlo no le quita
   nada a quien use lector de pantalla: el botón ya tiene su aria-label. */
body.bg-dark2 .modal .close > span,
body.bg-dark .modal .close > span,
body.bg-light .modal .close > span {
    display: none;
}

body.bg-dark2 .modal .close::before,
body.bg-dark .modal .close::before,
body.bg-light .modal .close::before,
body.bg-dark2 .modal .close::after,
body.bg-dark .modal .close::after,
body.bg-light .modal .close::after {
    background-color: currentColor;
    border-radius: 1px;
    content: "";
    height: 1.5px;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 13px;
}

body.bg-dark2 .modal .close::before,
body.bg-dark .modal .close::before,
body.bg-light .modal .close::before {
    transform: rotate(45deg);
}

body.bg-dark2 .modal .close::after,
body.bg-dark .modal .close::after,
body.bg-light .modal .close::after {
    transform: rotate(-45deg);
}

body.bg-dark2 .modal .close:hover,
body.bg-dark .modal .close:hover,
body.bg-light .modal .close:hover {
    color: var(--ch-text);
    background-color: var(--ch-surface-3);
}

body.bg-dark2 .modal .modal-content .form-control,
body.bg-dark .modal .modal-content .form-control,
body.bg-light .modal .modal-content .form-control {
    background-color: var(--ch-input-bg);
    border-color: var(--ch-border);
    color: var(--ch-text);
}

body.bg-dark2 .modal .modal-content .form-control:disabled,
body.bg-dark .modal .modal-content .form-control:disabled,
body.bg-dark2 .modal .modal-content .form-control[readonly],
body.bg-dark .modal .modal-content .form-control[readonly] {
    background-color: var(--ch-input-disabled);
}

body.bg-dark2 .modal .modal-content .form-check-input,
body.bg-dark .modal .modal-content .form-check-input {
    background-color: var(--ch-input-bg);
    border-color: var(--ch-border);
}

/* Pestañas dentro de modales (patrón h5.tab > .btn) */
.modal:has(.tab) .modal-header {
    border-bottom: 1px solid var(--ch-border) !important;
}

.modal h5.tab .btn {
    border-radius: var(--ch-r-sm) var(--ch-r-sm) 0 0;
    color: var(--ch-text-muted);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}

.modal h5.tab .btn-secondary,
body.bg-light .modal h5.tab .btn-secondary {
    color: var(--ch-accent-text);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--ch-accent);
}

.modal h5.tab .btn.btn-outline-secondary,
body.bg-light .modal h5.tab .btn.btn-outline-secondary {
    color: var(--ch-text-muted);
    border-color: transparent;
    border-bottom-color: transparent;
}

.modal h5.tab .btn.btn-outline-secondary:hover,
body.bg-light .modal h5.tab .btn.btn-outline-secondary:hover {
    background-color: var(--ch-surface-3);
    color: var(--ch-text);
}

/* Aviso de cambios sin guardar (_ModalCambiosSinGuardar.cshtml). Sale encima de otro modal,
   asi que se hace estrecho a proposito: tiene que leerse como una pregunta corta, no como
   otra pantalla. Los campos cambiados van en chips ambar, que es lo unico que el usuario
   necesita mirar para decidir. */
#modal_cambios_sin_guardar .modal-dialog {
    max-width: 440px;
}

#modal_cambios_icono {
    color: var(--ch-warning);
    margin-right: 6px;
}

#modal_cambios_texto {
    margin-bottom: 16px;
}

#modal_cambios_lista_titulo {
    margin-bottom: 8px;
    font-size: .8125rem;
    color: var(--ch-text-muted);
}

#modal_cambios_lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#modal_cambios_lista > li {
    background-color: var(--ch-warning-soft);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-pill);
    padding: 3px 11px;
    font-size: .8125rem;
    color: var(--ch-text);
}

#modal_cambios_mas {
    margin: 10px 0 0;
    font-size: .8125rem;
    color: var(--ch-text-muted);
}

/* En un movil los dos botones no caben en una linea sin quedar apretados, y este es
   justo el modal en el que no interesa que se pulse el que no toca. */
@media (max-width: 420px) {
    #modal_cambios_sin_guardar .modal-footer {
        flex-direction: column-reverse;
    }

    #modal_cambios_sin_guardar .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    #modal_cambios_sin_guardar .modal-footer .btn + .btn {
        margin-bottom: 8px;
    }
}

/* Al volver a editar, el primer campo que se cambio se marca un momento: en un modal con
   scroll el usuario ha perdido de vista donde estaba. */
.campo-cambiado {
    animation: campo-cambiado 1.6s ease;
    border-radius: var(--ch-r-xs);
}

@keyframes campo-cambiado {
    0% {
        box-shadow: 0 0 0 0 var(--ch-warning-soft);
    }

    15%, 70% {
        box-shadow: 0 0 0 4px var(--ch-warning-soft);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/*#endregion*/

/*#region Desplegables, listas y tablas*/

body.bg-dark2 .dropdown-menu,
body.bg-dark .dropdown-menu,
body.bg-light .dropdown-menu {
    background-color: var(--ch-surface-2);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-lg);
    padding: 6px;
}

body.bg-dark2 .dropdown-menu label,
body.bg-dark .dropdown-menu label,
body.bg-light .dropdown-menu label,
body.bg-dark2 .dropdown-menu a,
body.bg-dark .dropdown-menu a,
body.bg-light .dropdown-menu a {
    color: var(--ch-text);
}

.dropdown-item {
    border-radius: var(--ch-r-sm);
    color: var(--ch-text);
    padding: 8px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ch-surface-3);
    color: var(--ch-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ch-accent-soft);
    color: var(--ch-accent-text);
}

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

body.bg-dark2 .list-group-item,
body.bg-dark .list-group-item,
body.bg-light .list-group-item {
    background-color: var(--ch-surface-2);
    border-color: var(--ch-border);
    color: var(--ch-text);
}

.list-group-item:hover {
    color: var(--ch-text);
}

.list-group-item-check:hover + .list-group-item {
    background-color: var(--ch-surface-3);
}

.list-group-item-check:checked + .list-group-item {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
    color: #fff;
}

.table {
    color: var(--ch-text);
}

.table thead th {
    border-bottom: 1px solid var(--ch-border);
    border-top: 0;
    color: var(--ch-text-muted);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: 10px 12px;
}

.table td,
.table th {
    border-top: 1px solid var(--ch-border-soft);
    padding: 12px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--ch-surface-3);
    color: var(--ch-text);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--ch-border);
}

.pagination .page-link {
    background-color: transparent;
    border: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
    border-radius: var(--ch-r-sm);
    margin: 0 2px;
}

.pagination .page-link:hover {
    background-color: var(--ch-surface-3);
    color: var(--ch-text);
}

.pagination .page-item.active .page-link {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
    color: #fff;
}

/*#endregion*/

/*#region Badges, alertas, toasts y progreso*/

.badge {
    border-radius: var(--ch-r-pill);
    font-weight: 500;
    font-size: .75rem;
    padding: .35em .75em;
    letter-spacing: 0;
}

.badge-primary { background-color: var(--ch-accent-soft); color: var(--ch-accent-text); }
.badge-secondary { background-color: var(--ch-surface-3); color: var(--ch-text-muted); }
.badge-success { background-color: var(--ch-success-soft); color: var(--ch-success); }
.badge-danger { background-color: var(--ch-danger-soft); color: var(--ch-danger); }
.badge-warning { background-color: var(--ch-warning-soft); color: var(--ch-warning); }
.badge-info { background-color: var(--ch-info-soft); color: var(--ch-info); }
.badge-light { background-color: var(--ch-surface-3); color: var(--ch-text); }
.badge-dark { background-color: var(--ch-surface-3); color: var(--ch-text); }

.alert {
    border-radius: var(--ch-r-md);
    border-width: 1px;
    padding: 12px 16px;
}

.alert-success { background-color: var(--ch-success-soft); border-color: var(--ch-success-soft); color: var(--ch-success); }
.alert-danger { background-color: var(--ch-danger-soft); border-color: var(--ch-danger-soft); color: var(--ch-danger); }
.alert-warning { background-color: var(--ch-warning-soft); border-color: var(--ch-warning-soft); color: var(--ch-warning); }
.alert-info,
.alert-primary { background-color: var(--ch-info-soft); border-color: var(--ch-info-soft); color: var(--ch-info); }
.alert-secondary { background-color: var(--ch-surface-3); border-color: var(--ch-border); color: var(--ch-text); }

.toast {
    background-color: var(--ch-surface-2);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-lg);
    color: var(--ch-text);
    backdrop-filter: none;
}

.toast-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-text);
    border-radius: var(--ch-r-md) var(--ch-r-md) 0 0;
}

.toast-header .close {
    color: var(--ch-text-muted);
    text-shadow: none;
    opacity: 1;
}

.toast-body {
    color: var(--ch-text-muted);
}

/* showToast() pinta el toast con bg-success/bg-danger/bg-info: sobre esos fondos
   el texto tiene que ser blanco, no el gris apagado de los toasts normales */
.toast.bg-success,
.toast.bg-danger,
.toast.bg-info,
.toast.bg-warning,
.toast.bg-primary,
.toast.bg-secondary,
.toast.bg-dark {
    color: #fff;
    border-color: transparent;
}

    .toast.bg-success .toast-header,
    .toast.bg-danger .toast-header,
    .toast.bg-info .toast-header,
    .toast.bg-warning .toast-header,
    .toast.bg-primary .toast-header,
    .toast.bg-secondary .toast-header,
    .toast.bg-dark .toast-header {
        background-color: transparent;
        border-bottom-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

    .toast.bg-success .toast-body,
    .toast.bg-danger .toast-body,
    .toast.bg-info .toast-body,
    .toast.bg-warning .toast-body,
    .toast.bg-primary .toast-body,
    .toast.bg-secondary .toast-body,
    .toast.bg-dark .toast-body {
        color: #fff;
    }

    .toast.bg-success .close,
    .toast.bg-danger .close,
    .toast.bg-info .close,
    .toast.bg-warning .close,
    .toast.bg-primary .close,
    .toast.bg-secondary .close,
    .toast.bg-dark .close {
        color: #fff;
        opacity: 0.85;
    }

.progress {
    background-color: var(--ch-surface-3) !important;
    border: 0 !important;
    border-radius: var(--ch-r-pill);
    height: 8px;
}

.progress-bar {
    background-color: var(--ch-accent);
    border-radius: var(--ch-r-pill);
}

.progress-bar.bg-success {
    background-color: var(--ch-success) !important;
}

/*#endregion*/

/*#region Datepicker (bootstrap-datepicker)*/

.datepicker {
    background-color: var(--ch-surface-2);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-lg);
    padding: 10px;
    color: var(--ch-text);
}

/* site.css desplaza el calendario con transform: translate(0, 3.1em), así que la
   flechita ya no apunta al input: sobra en todas sus variantes de orientación. */
.datepicker-dropdown:before,
.datepicker-dropdown:after,
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after,
.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}

/* site.css invertía toda la tabla en modo oscuro; se sustituye por color real */
body.bg-dark2 .datepicker table tr td,
body.bg-dark2 .datepicker table tr th,
body.bg-dark .datepicker table tr td,
body.bg-dark .datepicker table tr th,
body.bg-light .datepicker table tr td,
body.bg-light .datepicker table tr th {
    filter: none;
    color: var(--ch-text);
    border-radius: var(--ch-r-sm);
}

.datepicker table tr th.dow {
    color: var(--ch-text-faint);
    font-size: .75rem;
    font-weight: 500;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr td span:hover {
    background-color: var(--ch-surface-3) !important;
    background-image: none !important;
    color: var(--ch-text) !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: var(--ch-text-faint) !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: var(--ch-accent-soft) !important;
    background-image: none !important;
    color: var(--ch-accent-text) !important;
    font-weight: 600;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--ch-accent) !important;
    background-image: none !important;
    border-color: var(--ch-accent) !important;
    color: #fff !important;
    text-shadow: none !important;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: var(--ch-text-faint) !important;
    background: transparent !important;
}

body.bg-dark2 .datepicker-dropdown.datepicker-orient-top:after,
body.bg-dark .datepicker-dropdown.datepicker-orient-top:after {
    border-top: 0 !important;
}

.datepicker table tr th.datepicker-switch,
.datepicker table tr th.prev,
.datepicker table tr th.next {
    color: var(--ch-text);
    font-weight: 600;
}

/* bootstrap-datepicker mantiene algunos fondos claros en sus vistas de mes/año
   si no se declaran explícitamente. */
.datepicker table tr td,
.datepicker table tr th,
.datepicker table tr td span {
    background-color: transparent;
    color: var(--ch-text);
}

/*#endregion*/

/*#region filter-multi-select*/

.filter-multi-select > .viewbar,
.filter-multi-select > .dropdown-toggle,
.filter-multi-select > .dropdown-menu,
.filter-multi-select .form-control,
.filter-multi-select > .dropdown-menu > .filter > input,
body.bg-dark2 .filter-multi-select#FiltroArticulo > .viewbar,
body.bg-dark2 .filter-multi-select#FiltroArticulo > .dropdown-menu,
body.bg-dark2 .filter-multi-select#FiltroArticulo .form-control,
body.bg-dark .filter-multi-select#FiltroArticulo > .viewbar,
body.bg-dark .filter-multi-select#FiltroArticulo > .dropdown-menu,
body.bg-dark .filter-multi-select#FiltroArticulo .form-control {
    background-color: var(--ch-input-bg);
    border-color: var(--ch-border);
    color: var(--ch-text);
}

.filter-multi-select > .dropdown-menu {
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-lg);
}

.filter-multi-select .dropdown-item,
body.bg-dark .filter-multi-select#FiltroArticulo .dropdown-item,
body.bg-dark2 .filter-multi-select#FiltroArticulo .dropdown-item {
    color: var(--ch-text);
}

.filter-multi-select > .viewbar > .selected-items > .item {
    background-color: var(--ch-accent-soft);
    border-radius: var(--ch-r-pill);
    color: var(--ch-accent-text);
}

/* La viewbar tiene alto fijo (38px, lo fijan las vistas) y overflow: auto, así
   que al seleccionar varios usuarios sale una barra de scroll. El canal de la
   barra NO lo pinta el fondo del elemento, y el track global es transparente:
   se veía el fondo de la página dentro del campo, como un hueco de 10px al
   lado de las etiquetas. Aquí el track lleva el fondo del propio campo y
   redondea por la derecha para seguir su borde. */
.filter-multi-select > .viewbar {
    scrollbar-width: thin;
    scrollbar-color: var(--ch-scroll-thumb) var(--ch-input-bg);
}

.filter-multi-select > .viewbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.filter-multi-select > .viewbar::-webkit-scrollbar-track {
    background-color: var(--ch-input-bg);
    border-radius: 0 var(--ch-r-sm) var(--ch-r-sm) 0;
}

.filter-multi-select > .viewbar::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: var(--ch-scroll-thumb);
    border: 2px solid transparent;
    border-radius: var(--ch-r-pill);
}

/*#endregion*/

/*#region Otros componentes existentes*/

.slider {
    background-color: var(--ch-border-strong);
}

input:checked + .slider {
    background-color: var(--ch-accent);
}

.divBorder {
    border-color: var(--ch-border) !important;
    border-radius: var(--ch-r-sm) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--ch-surface-3) !important;
}

.accordion-hoverable.collapsed:hover {
    background-color: var(--ch-surface-3) !important;
}

/* El botón ocupa todo el ancho del item: al cambiar el fondo en hover debe
   recortar también las esquinas, no sólo el contenido interior. */
.accordion-item {
    border-radius: 0;
    overflow: hidden;
}
    .accordion-item:last-child {
        border-radius: 0 0 var(--ch-r-sm) var(--ch-r-sm);
    }

.accordion-item > .accordion-header > .accordion-button,
.accordion-item > .accordion-button {
    border-radius: inherit !important;
}

.accordion-item:has(.accordion-button:not(.collapsed)) > .accordion-header > .accordion-button,
.accordion-item:has(.accordion-button:not(.collapsed)) > .accordion-button {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.accordion-open-modal {
    border-color: var(--ch-border) !important;
    color: var(--ch-text-muted);
}

.accordion-open-modal:hover {
    background-color: var(--ch-surface-3) !important;
    color: var(--ch-text);
}

.accordion-modal-item {
    border-bottom-color: var(--ch-border) !important;
}

/* .badge-num-trabajadores NO se tematiza a propósito: el fondo viene del dato
   (style="background-color: X" o la clase .class-tipo-N que se inyecta con el
   color del tipo) y el texto lo decide quien lo pinta (#040404 por defecto,
   #fff en línea en getBadge). Forzarle color/fondo/radio desde aquí dejaba el
   número ilegible sobre los colores saturados de tipo y estado. */

.skeleton {
    background: var(--ch-surface-3);
    border-radius: var(--ch-r-sm);
}

body.bg-light .skeleton {
    background: var(--ch-surface-3);
}

.nav-pills .nav-link {
    border-radius: var(--ch-r-sm);
    color: var(--ch-text-muted);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ch-accent-soft);
    border-color: transparent;
    color: var(--ch-accent-text);
}

/* Pestañas del modal de añadir horario. `btn-outline-secondary` representa la
   pestaña activa en el JavaScript existente. */
#modal_add_calendario .calendar-modal-tab {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--ch-text-muted) !important;
    padding: .5rem .9rem !important;
    box-shadow: none !important;
}

#modal_add_calendario .calendar-modal-tab.btn-outline-secondary {
    border-bottom-color: var(--ch-accent) !important;
    color: var(--ch-accent-text) !important;
}

#modal_add_calendario .calendar-modal-tab:hover,
#modal_add_calendario .calendar-modal-tab:focus {
    background-color: var(--ch-surface-3) !important;
    color: var(--ch-text) !important;
}

/* Los inputs horarios del editor no llevan .form-control y por eso el navegador
   les aplicaba su fondo blanco. */
#modal_calendario_dia input[type="time"],
#modal_calendario_dia input[type="number"],
#modal_plantillas input[type="time"],
#modal_plantillas input[type="number"] {
    background-color: var(--ch-input-bg) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-r-sm) !important;
    color: var(--ch-text) !important;
    color-scheme: light;
}

body.bg-dark2 #modal_calendario_dia input[type="time"],
body.bg-dark2 #modal_calendario_dia input[type="number"],
body.bg-dark2 #modal_plantillas input[type="time"],
body.bg-dark2 #modal_plantillas input[type="number"],
body.bg-dark #modal_calendario_dia input[type="time"],
body.bg-dark #modal_calendario_dia input[type="number"],
body.bg-dark #modal_plantillas input[type="time"],
body.bg-dark #modal_plantillas input[type="number"] {
    color-scheme: dark;
}

#modal_calendario_dia input[type="time"]:focus,
#modal_calendario_dia input[type="number"]:focus,
#modal_plantillas input[type="time"]:focus,
#modal_plantillas input[type="number"]:focus {
    border-color: var(--ch-accent) !important;
    box-shadow: 0 0 0 3px var(--ch-accent-ring);
    outline: 0;
}

#modal_calendario_dia input[type="time"]:disabled,
#modal_plantillas input[type="time"]:disabled {
    background-color: var(--ch-input-disabled) !important;
    color: var(--ch-text-muted) !important;
}

.tooltip-inner {
    background-color: var(--ch-surface-3);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-sm);
    color: var(--ch-text);
    font-size: .8125rem;
    padding: 6px 10px;
}

.tooltip .arrow::before {
    display: none;
}

/*#endregion*/

/*#region Utilidades del nuevo lenguaje visual*/

/* Título de página al estilo de las referencias */
.page-header {
    margin-bottom: 24px;
}

.page-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0;
    color: var(--ch-text);
}

.page-subtitle {
    color: var(--ch-text-muted);
    font-size: .9375rem;
    margin: 6px 0 0;
}

/* Etiqueta de grupo (tipo "Principal", "Ventas", "Trabajo") */
.section-label {
    color: var(--ch-text-faint);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: 8px;
}

/* Panel neutro reutilizable */
.surface {
    background-color: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-lg);
    box-shadow: var(--ch-shadow-sm);
}

.surface-2 {
    background-color: var(--ch-surface-2);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-md);
}

/* Tarjeta de métrica: etiqueta atenuada + cifra grande + icono en cuadro suave */
.stat-card {
    background-color: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-r-lg);
    box-shadow: var(--ch-shadow-sm);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
}

.stat-label {
    color: var(--ch-text-muted);
    font-size: .8125rem;
    margin-bottom: 6px;
}

.stat-value {
    color: var(--ch-text);
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.stat-meta {
    color: var(--ch-text-faint);
    font-size: .8125rem;
    margin-top: 6px;
}

.stat-icon {
    align-items: center;
    background-color: var(--ch-accent-soft);
    border-radius: var(--ch-r-md);
    color: var(--ch-accent-text);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 16px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.stat-icon.is-success { background-color: var(--ch-success-soft); color: var(--ch-success); }
.stat-icon.is-danger { background-color: var(--ch-danger-soft); color: var(--ch-danger); }
.stat-icon.is-warning { background-color: var(--ch-warning-soft); color: var(--ch-warning); }
.stat-icon.is-info { background-color: var(--ch-info-soft); color: var(--ch-info); }

/* Píldora suave para estados */
.chip {
    align-items: center;
    background-color: var(--ch-surface-3);
    border-radius: var(--ch-r-pill);
    color: var(--ch-text-muted);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 500;
    gap: 5px;
    padding: 3px 10px;
}

.chip.is-accent { background-color: var(--ch-accent-soft); color: var(--ch-accent-text); }
.chip.is-success { background-color: var(--ch-success-soft); color: var(--ch-success); }
.chip.is-danger { background-color: var(--ch-danger-soft); color: var(--ch-danger); }
.chip.is-warning { background-color: var(--ch-warning-soft); color: var(--ch-warning); }
.chip.is-info { background-color: var(--ch-info-soft); color: var(--ch-info); }

/* Pestañas. Bootstrap pinta la pestaña activa con fondo blanco fijo (#fff, tanto en
   .nav-link.active como en el borde inferior), que sobre el fondo oscuro se ve como un
   recorte blanco. Aquí se reescribe entera con los tokens del tema: la activa se marca
   con el color de acento y una línea inferior, no con un fondo de otro color. */
.nav-tabs {
    border-bottom: 1px solid var(--ch-border);
}

.nav-tabs .nav-link {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ch-text-muted);
    font-weight: 500;
    padding: 8px 14px;
    transition: color var(--ch-transition), border-color var(--ch-transition);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    background-color: transparent;
    border-color: transparent transparent var(--ch-border-strong);
    color: var(--ch-text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-color: transparent transparent var(--ch-accent);
    color: var(--ch-accent-text);
}

.nav-tabs .nav-link.disabled {
    color: var(--ch-text-faint);
}

/*#endregion*/

/*#region Pantallas de acceso (login, 2FA, contraseñas)*/

.auth-page {
    /* 100dvh evita que la barra del navegador móvil provoque scroll */
    min-height: 100dvh;
    /* Sin padding: el panel de marca ocupa todo el lado izquierdo, de borde a
       borde y de arriba abajo. El aire lo pone cada columna por dentro. */
    padding: 0;
    /* base.css reserva 60px para el navbar inferior; aquí no hay navbar */
    margin-bottom: 0;
    overflow-x: hidden;
}

.auth-shell {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    margin: 0;
    max-width: none;
    /* min-height, no height: si el contenido crece, la página hace scroll en
       lugar de recortarse. */
    min-height: 100dvh;
}

@media (min-width: 992px) {
    .auth-shell {
        /* El panel de marca lleva más texto que la columna del formulario */
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }
}

/* Variante sin panel de marca (2FA, restablecer/cambiar contraseña) */
.auth-shell.is-single {
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 520px;
    padding: 16px;
}

/* Panel de marca teal. Va a sangre en el lado izquierdo: sin esquinas
   redondeadas y con el padding lateral en una variable porque el pie es
   absoluto y tiene que alinearse con el texto. */
.auth-brand {
    --auth-brand-pad: clamp(44px, 5vw, 88px);
    display: none;
    background:
        radial-gradient(115% 85% at 88% -5%, rgba(255, 255, 255, .16), transparent 62%),
        radial-gradient(90% 70% at 0% 105%, rgba(0, 0, 0, .18), transparent 60%),
        linear-gradient(152deg, var(--ch-accent) 0%, var(--ch-accent-active) 100%);
    border-radius: 0;
    color: #fff;
    flex-direction: column;
    /* El bloque (titular + texto + ilustración) queda centrado verticalmente;
       el pie va absoluto para no descentrarlo, con padding-bottom reservado. */
    justify-content: center;
    overflow: hidden;
    padding: 48px var(--auth-brand-pad) 68px;
    position: relative;
}

@media (min-width: 992px) {
    .auth-brand {
        display: flex;
    }
}

.auth-brand-title {
    font-size: clamp(1.75rem, 2.5vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin: 0;
    max-width: 22ch;
}

.auth-brand-text {
    color: rgba(255, 255, 255, .8);
    font-size: .9375rem;
    line-height: 1.65;
    margin: 16px 0 0;
    max-width: 48ch;
}

/* Ilustración: SVG en línea, sin dependencias externas ni assets nuevos */
.auth-brand-art {
    align-self: center;
    /* flex-shrink activo + min-height 0 para que se comprima antes de desbordar */
    flex: 0 1 auto;
    margin: 32px 0 0;
    max-width: 420px;
    min-height: 0;
    width: 100%;
}

.auth-brand-art svg {
    display: block;
    height: auto;
    /* techo de altura para pantallas bajas y anchas */
    max-height: 42dvh;
    margin: 0 auto;
    width: 100%;
}

.auth-brand-foot {
    bottom: 30px;
    color: rgba(255, 255, 255, .62);
    font-size: .8125rem;
    left: var(--auth-brand-pad);
    letter-spacing: .01em;
    position: absolute;
    right: var(--auth-brand-pad);
}

/* En pantallas bajas el panel se aprieta por pasos para no generar scroll:
   primero se recorta la ilustración y el padding, y por debajo de 600px de alto
   la ilustración se retira y queda sólo el mensaje. */
@media (max-height: 860px) {
    .auth-brand {
        --auth-brand-pad: clamp(40px, 4.5vw, 76px);
        padding-top: 36px;
        padding-bottom: 56px;
    }

    .auth-brand-art {
        margin-top: 24px;
    }

    .auth-brand-art svg {
        max-height: 34dvh;
    }

    .auth-logo {
        margin-bottom: 22px;
        max-height: 74px;
    }
}

@media (max-height: 700px) {
    .auth-brand {
        --auth-brand-pad: clamp(36px, 4vw, 68px);
        padding-top: 28px;
        padding-bottom: 46px;
    }

    .auth-brand-title {
        font-size: 1.5rem;
    }

    .auth-brand-text {
        font-size: .875rem;
        margin-top: 12px;
    }

    .auth-brand-art {
        margin-top: 16px;
    }

    .auth-brand-art svg {
        max-height: 26dvh;
    }

    .auth-brand-foot {
        bottom: 18px;
    }

    .auth-logo {
        margin-bottom: 18px;
        max-height: 60px;
    }

    .auth-text {
        margin-bottom: 22px;
    }
}

@media (max-height: 600px) {
    .auth-brand-art {
        display: none;
    }
}

/* Columna del formulario */
.auth-form-col {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 24px 20px;
}

.auth-card {
    max-width: 400px;
    width: 100%;
}

.auth-logo {
    display: block;
    margin: 0 auto 28px;
    max-height: 88px;
    max-width: 70%;
}

.auth-title {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
    text-align: center;
    color: var(--ch-text);
}

.auth-text {
    color: var(--ch-text-muted);
    font-size: .9375rem;
    margin: 8px 0 28px;
    text-align: center;
}

.auth-card .form-group {
    margin-bottom: 18px;
}

.auth-card .form-control {
    height: 44px;
    padding: 10px 14px;
}

/* El ojo de "mostrar contraseña" se centra sobre el input de 44px */
.auth-card .form-group .eye {
    align-items: center;
    bottom: 0;
    display: flex;
    height: 44px;
    padding: 0 12px;
    right: 0;
}

.auth-label-row {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.auth-link {
    color: var(--ch-accent-text);
    font-size: .8125rem;
    font-weight: 500;
}

.auth-submit {
    height: 44px;
    width: 100%;
    font-weight: 500;
}

.auth-foot {
    color: var(--ch-text-muted);
    font-size: .875rem;
    margin-top: 20px;
    text-align: center;
}

/*#endregion*/

/*#region Compatibilidad con estilos propios de pantallas concretas

   Estos overrides viven aquí (y no en la vista) para centralizar el diseño en un solo sitio.
   Los bloques <style> de las vistas se cargan DESPUÉS de este archivo, así que
   hay que ganarles por especificidad. */

/* Home/Index y Home/EntrarHorasMultiple fuerzan los inputs a #4a4a4a */
body input.bg-dark2,
body textarea.bg-dark2,
body select.bg-dark2,
body input.bg-light,
body textarea.bg-light,
body select.bg-light {
    background-color: var(--ch-input-bg) !important;
}

body #tablaLineas th {
    border-bottom-color: var(--ch-border);
}

/* Fichaje/Historial: #displayNameHistorial es el control visible del filtro de
   trabajador (el .viewbar del multiselect se le superpone invisible). Lleva el
   borde en el atributo style, de ahí los !important. */
body #displayNameHistorial {
    background-color: var(--ch-input-bg) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-r-sm) !important;
    color: var(--ch-text) !important;
}

#filtrosHistorialFichaje #FiltroIdArticulo > .viewbar {
    background-color: transparent;
    box-shadow: none;
}

/* Fichaje/Historial + Entradas: .cardCalculo son las pastillas de totales
   (Previstas / Ordinarias / ... / Total), con el fondo en línea a var(--primary).
   El valor de "Total" se pinta con el color semántico del día (verde si sobran
   horas, granate si faltan) y sobre el teal ninguno de los dos llega a 3:1,
   ni oscuro ni claro. El tema las convierte en tarjetas neutras —que además es
   el patrón de métricas de la referencia— y así el color del valor se lee. */
body .card.cardCalculo {
    background-color: var(--ch-surface-2) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-r-md) !important;
}

body .card.cardCalculo > .card-title {
    background-color: transparent !important;
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
    font-size: .8125rem;
    padding: 4px 8px;
}

body .card.cardCalculo > .card-body {
    color: var(--ch-text);
    font-weight: 600;
    padding: 6px 8px !important;
}

/* Fichaje/Index: cabeceras de widget con fondo gris sólido */
body.bg-dark2 .widget > .bg-header,
body.bg-dark .widget > .bg-header,
body.bg-light .widget > .bg-header {
    background-color: transparent !important;
}

/*#endregion*/

/*#region Layout general*/

main[role="main"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (min-width: 768px) {
    main[role="main"] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

#toasts .toast {
    min-width: 260px;
}

/*#endregion*/

/*#region Barra de estado de conexión*/

/*
    Barra fina fija en la parte superior (js/conexion.js). Cuando está visible
    el navbar fixed-top y el contenido bajan su altura, así que no tapa nada.

    Los colores son fijos en los tres modos: es una capa de sistema, como la de
    "sin conexión" de otras webs, y debe leerse igual en claro y en oscuro.
*/

:root {
    --ch-conn-h: 20px;
    --ch-conn-retry: #c27a16; /* ámbar: problema temporal / reintentando */
    --ch-conn-down: #a83232; /* rojo: conexión caída */
    --ch-conn-ok: #1c7a4f; /* verde: conexión recuperada */
}

.barra-conexion {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080; /* por encima de los modales de Bootstrap (1050): el aviso de
                      caída importa también mientras hay un modal abierto */
    height: var(--ch-conn-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 10px;
    background-color: var(--ch-conn-retry);
    color: #fff;
    font-family: var(--ch-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    /* visibility con retardo: al ocultarse espera a que acabe el deslizamiento,
       al mostrarse cambia de inmediato para que el deslizamiento se vea */
    transition: transform 220ms ease, background-color 260ms ease, visibility 0s linear 220ms;
}

.barra-conexion.is-visible {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 220ms ease, background-color 260ms ease, visibility 0s;
}

/* Capa de rayas en movimiento: indica que se está reintentando */
.barra-conexion::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .16) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .16) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    opacity: 0;
    transition: opacity 220ms ease;
}

.barra-conexion.estado-reintentando::before {
    opacity: 1;
    animation: ch-conn-rayas 1s linear infinite;
}

/* Mientras hay una comprobación en vuelo las rayas corren más deprisa */
.barra-conexion.estado-reintentando.sondeando::before {
    animation-duration: 450ms;
}

/* La posición crece, así que el patrón se desplaza hacia la derecha */
@keyframes ch-conn-rayas {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

.barra-conexion.estado-caido {
    background-color: var(--ch-conn-down);
}

.barra-conexion.estado-recuperado {
    background-color: var(--ch-conn-ok);
    cursor: default;
}

.barra-conexion-contenido {
    position: relative; /* por encima de las rayas */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.barra-conexion-icono {
    font-size: 12px;
    flex: none;
}

.barra-conexion.estado-reintentando.sondeando .barra-conexion-icono {
    animation: ch-conn-giro 900ms linear infinite;
}

@keyframes ch-conn-giro {
    to {
        transform: rotate(360deg);
    }
}

.barra-conexion-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-conexion-detalle {
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
    white-space: nowrap;
}

.barra-conexion-detalle:empty {
    display: none;
}

.barra-conexion-btn {
    flex: none;
    margin-left: 4px;
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--ch-r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: 11.5px;
    line-height: 1.35;
    transition: background-color var(--ch-transition), border-color var(--ch-transition);
}

.barra-conexion-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.barra-conexion-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.barra-conexion-btn[disabled] {
    opacity: .55;
    cursor: default;
}

.barra-conexion.estado-recuperado .barra-conexion-btn {
    display: none;
}

/* Hueco para la barra: baja el navbar superior y el contenido */
body .navbar.fixed-top {
    transition: top 220ms ease;
}

body.conexion-visible .navbar.fixed-top {
    top: var(--ch-conn-h);
}

body main[role="main"] {
    transition: margin-top 220ms ease;
}

body.conexion-visible main[role="main"] {
    margin-top: var(--ch-conn-h);
}

/* .mg-top (base.css) reserva los 60px del navbar; hay que sumarle la barra */
body.conexion-visible main[role="main"].mg-top {
    margin-top: calc(60px + var(--ch-conn-h));
}

@media (max-width: 420px) {
    /* En pantallas estrechas se reintenta tocando la propia barra */
    .barra-conexion-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-conexion,
    body .navbar.fixed-top,
    body main[role="main"] {
        transition: none;
    }

    .barra-conexion.estado-reintentando::before,
    .barra-conexion.estado-reintentando.sondeando .barra-conexion-icono {
        animation: none;
    }
}

/*#endregion*/