html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ── Focus ring: luz en tema claro, oscuro en tema oscuro ───────────────── */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 121, 53, 0.5);
}

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #212529, 0 0 0 0.25rem rgba(77, 203, 126, 0.5);
}

/* ── Checkboxes y radios — color de verificación verde CargoBaja ─────────
   Bootstrap 5 hardcodea #0d6efd en :checked — se sobreescribe con --bs-primary
   para que todos los form-check-input del proyecto usen la paleta corporativa.
   ─────────────────────────────────────────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ── Paleta corporativa CargoBaja + overrides Bootstrap global ──────────────── */
:root {
    /* Login (no modificar) */
    --cb-login-bg-start: #1e3c72;
    --cb-login-bg-mid:   #2a5298;

    /* Paleta Verde CargoBaja */
    --cb-verde-100: #e0f5e9;
    --cb-verde-200: #a8d5ba;
    --cb-verde-500: #007935;
    --cb-verde-600: #006a2e;
    --cb-verde-700: #005728;
    --cb-verde-900: #003d1b;

    /* Paleta Teal (Info) */
    --cb-teal-100: #cff1f7;
    --cb-teal-200: #9fe0ed;
    --cb-teal-500: #0e7490;
    --cb-teal-700: #0a4a5e;

    /* Override Bootstrap primary → Verde */
    --bs-primary:               #007935;
    --bs-primary-rgb:           0, 121, 53;
    --bs-primary-bg-subtle:     #e0f5e9;
    --bs-primary-border-subtle: #a8d5ba;
    --bs-primary-text-emphasis: #003d1b;
    --bs-link-color:            #007935;
    --bs-link-color-rgb:        0, 121, 53;
    --bs-link-hover-color:      #005728;
    --bs-link-hover-color-rgb:  0, 87, 40;

    /* Override Bootstrap info → Teal */
    --bs-info:               #0e7490;
    --bs-info-rgb:           14, 116, 144;
    --bs-info-bg-subtle:     #cff1f7;
    --bs-info-border-subtle: #9fe0ed;
    --bs-info-text-emphasis: #0a4a5e;

    /* ── Selección de filas — fuente única compartida (Tabulator + DataTables) ──
     * Valores hex consumidos por tabulator-cb.css vía var().
     * Los overrides de DataTables 3.x (--dt_background-selected) viven en
     * datatables-cb.css, que carga DESPUÉS del bundle datatables.min.css.
     * ─────────────────────────────────────────────────────────────────────── */
    --cb-seleccion-bg         : #a8d5ba;   /* verde-200 — fondo selección claro  */
    --cb-seleccion-bg-hover   : #7dc5a0;   /* verde intermedio — hover claro     */
    --cb-seleccion-text       : #212529;   /* texto cuerpo claro                 */
}

[data-bs-theme="dark"] {
    /* Login (no modificar) */
    --cb-login-bg-start: #0d1117;
    --cb-login-bg-mid:   #161b22;

    /* Override primary dark */
    --bs-primary-bg-subtle:     #003d1b;
    --bs-primary-border-subtle: #005728;
    --bs-primary-text-emphasis: #4dcb7e;
    --bs-link-color:            #4dcb7e;
    --bs-link-color-rgb:        77, 203, 126;
    --bs-link-hover-color:      #7ddba0;

    /* Override info dark */
    --bs-info-bg-subtle:     #062832;
    --bs-info-border-subtle: #0a4a5e;
    --bs-info-text-emphasis: #67d4e9;

    /* Selección de filas dark — verde-900 + texto blanco */
    --cb-seleccion-bg         : #003d1b;   /* verde-900 — fondo oscuro           */
    --cb-seleccion-bg-hover   : #004d24;   /* hover oscuro                       */
    --cb-seleccion-text       : #ffffff;
}

body.cb-login-body {
    background: linear-gradient(135deg,
        var(--cb-login-bg-start) 0%,
        var(--cb-login-bg-mid)   50%,
        var(--cb-login-bg-start) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Dropdown de notificaciones del navbar ────────────────────────────────── */
/* Estados unread/read → Bootstrap: bg-info-subtle fw-medium / opacity-75 (aplicados desde JS) */
/* Layout flex → Bootstrap: d-flex gap-3 align-items-start flex-grow-1 min-w-0 (en HTML) */

.cb-notif-dropdown {
    width: 450px;
    max-width: 95vw;
    /* sombra: shadow-lg (Bootstrap) en HTML */
}

.cb-notif-dropdown-list {
    max-height: 400px;
    /* overflow: overflow-y-auto overflow-x-hidden (Bootstrap) en HTML */
}

.cb-notif-dropdown-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cb-notif-dropdown-item:last-child {
    border-bottom: none;
}

.cb-notif-dropdown-item:hover {
    background-color: var(--bs-tertiary-bg);
}

/* Icono circular — Bootstrap: rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 */
.cb-notif-dd-icon {
    width: 40px;
    height: 40px;
}

/* Asunto — Bootstrap: fw-semibold | multilinea sin truncamiento */
.cb-notif-dd-asunto {
    font-size: clamp(0.813rem, 0.75rem + 0.2vw, 0.875rem);
    line-height: 1.4;
    word-break: break-word;
}

/* Tiempo — Bootstrap: text-muted text-nowrap flex-shrink-0 */
.cb-notif-dd-time {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Chevron del collapse: tamano + animacion de rotacion */
.cb-notif-dd-chevron {
    font-size: 0.625rem;
    transition: transform 0.2s ease;
}

/* Rotar chevron cuando el collapse esta abierto (Bootstrap pone aria-expanded en el toggle) */
[aria-expanded="true"] .cb-notif-dd-chevron {
    transform: rotate(180deg);
}

/* Cuerpo del panel expandido: alineado bajo el texto (icono 40px + gap-3 ~16px = 56px = 3.5rem) */
.cb-notif-dd-collapse-body {
    padding: 0.25rem 0.5rem 0.5rem 3.5rem;
}

/* Toggle del header: evitar seleccion accidental de texto al hacer click */
.cb-notif-dd-toggle {
    user-select: none;
}

/* ── Media queries: ajustes responsivos para moviles ─────────────────────── */
@media (max-width: 576px) {
    .cb-notif-dropdown {
        width: 340px;
    }

    .cb-notif-dropdown-item {
        padding: 0.625rem 0.75rem;
    }

    .cb-notif-dd-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cb-notif-dd-asunto {
        font-size: 0.813rem;
    }

    .cb-notif-dd-time {
        font-size: 0.688rem;
    }

    /* Ajuste de padding para icono 36px + gap-3 a 14px base (~50px = 3.25rem) */
    .cb-notif-dd-collapse-body {
        padding-left: 3.25rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CB_BUSY — Overlay de bloqueo para contenedores (Offcanvas, Modal, Card)
   Compatible con tema claro/oscuro vía variables Bootstrap.
   Ver: wwwroot/js/core/cb-busy.js
   ─────────────────────────────────────────────────────────────────────────── */

/* Marca aplicada al contenedor host cuando su position es 'static' para que el
   overlay absoluto se ancle correctamente. */
.cb-busy-host {
    position: relative !important;
}

.cb-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 1080;                                  /* sobre offcanvas-body / modal-body */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bs-body-bg-rgb), 0.65);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    cursor: progress;
    animation: cb-busy-fade-in 120ms ease-out;
}

.cb-busy-overlay__content {
    text-align: center;
    color: var(--bs-body-color);
}

.cb-busy-overlay__texto {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

@keyframes cb-busy-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Botones en estado busy: cursor + opacidad sutil para reforzar el feedback */
.btn[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}

/* ───────────────────────────────────────────────────────────────────────────
   CB_AUTOCOMPLETAR — Componente reutilizable de autocompletar.
   Ver: wwwroot/js/core/cb-autocompletar.js + Views/Shared/_CbAutoCompletar.cshtml
   ─────────────────────────────────────────────────────────────────────────── */

.cb-ac-wrapper {
    /* position: relative ya viene en el HTML del partial, pero por defensa visual */
    position: relative;
}

.cb-ac-lista {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;                       /* sobre modales/offcanvas estándar */
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.125rem;
    padding: 0.25rem 0;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.cb-ac-item {
    padding: 0.4rem 0.875rem;
    font-size: 0.9rem;
    white-space: normal;                 /* permitir wrap si el texto es largo */
    line-height: 1.3;
}

.cb-ac-item.active,
.cb-ac-item:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* Marca visual cuando la resolución por ID falló (red, no encontrado) */
.cb-ac-texto.cb-ac-error {
    border-color: var(--bs-warning) !important;
    background-image: linear-gradient(transparent, transparent),
                      linear-gradient(transparent, transparent);
}

/* ── Título de página — verde corporativo CargoBaja ─────────────────────────
   Aplica --cb-verde-500 (#007935) en tema claro.
   En tema oscuro usa --bs-primary-text-emphasis (#4dcb7e) para cumplir WCAG AA
   sobre fondos oscuros de AdminLTE.
   ─────────────────────────────────────────────────────────────────────────── */
.app-content-header h3 {
    color: var(--cb-verde-500);
}
[data-bs-theme="dark"] .app-content-header h3 {
    color: var(--bs-primary-text-emphasis);
}

/* ── Overrides de botones Bootstrap (hover/active compilados en build) ──────── */

/* btn-primary → Verde CargoBaja */
.btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    #007935;
    --bs-btn-border-color:          #007935;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #006a2e;
    --bs-btn-hover-border-color:    #005728;
    --bs-btn-focus-shadow-rgb:      0, 121, 53;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #005728;
    --bs-btn-active-border-color:   #004d24;
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           #007935;
    --bs-btn-disabled-border-color: #007935;
}
.btn-outline-primary {
    --bs-btn-color:                 #007935;
    --bs-btn-border-color:          #007935;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #007935;
    --bs-btn-hover-border-color:    #007935;
    --bs-btn-focus-shadow-rgb:      0, 121, 53;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #007935;
    --bs-btn-active-border-color:   #007935;
    --bs-btn-disabled-color:        #007935;
    --bs-btn-disabled-bg:           transparent;
    --bs-btn-disabled-border-color: #007935;
}

/* btn-outline-primary dark mode — #007935 sobre #212529 = ~2.5:1 (falla WCAG AA).
   Se usa #4dcb7e (ratio ~6.1:1) para el estado sin seleccionar. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color:                 #4dcb7e;
    --bs-btn-border-color:          #4dcb7e;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #007935;
    --bs-btn-hover-border-color:    #007935;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #007935;
    --bs-btn-active-border-color:   #007935;
    --bs-btn-disabled-color:        #4dcb7e;
    --bs-btn-disabled-bg:           transparent;
    --bs-btn-disabled-border-color: #4dcb7e;
}

/* btn-info → Teal (texto blanco — fondo oscuro requiere white) */
.btn-info {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    #0e7490;
    --bs-btn-border-color:          #0e7490;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #0c6679;
    --bs-btn-hover-border-color:    #0a5a6b;
    --bs-btn-focus-shadow-rgb:      14, 116, 144;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #0a5a6b;
    --bs-btn-active-border-color:   #095060;
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           #0e7490;
    --bs-btn-disabled-border-color: #0e7490;
}
.btn-outline-info {
    --bs-btn-color:                 #0e7490;
    --bs-btn-border-color:          #0e7490;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #0e7490;
    --bs-btn-hover-border-color:    #0e7490;
    --bs-btn-focus-shadow-rgb:      14, 116, 144;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #0e7490;
    --bs-btn-active-border-color:   #0e7490;
    --bs-btn-disabled-color:        #0e7490;
    --bs-btn-disabled-bg:           transparent;
    --bs-btn-disabled-border-color: #0e7490;
}

/* text-bg-info: Bootstrap compila color:#000 — teal requiere texto blanco */
.text-bg-info { color: #fff !important; }

/* ── Tabulator TreeView: color de icono +/- ──────────────────────────────── */
/* site.css carga después de tabulator_bootstrap5.min.css — garantiza cascade. */
/* El tema define background:#ccc en ::before/::after — se sobreescribe aquí.  */
/* + icono: barra vertical = el elemento expand mismo; barra horizontal = ::after  */
/* - icono: barra horizontal = ::after del collapse (el elemento NO lleva background) */
.tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
.tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand::after,
.tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse::after {
    background: #007935 !important;
}
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand::after,
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse::after {
    background: #4dcb7e !important;
}