/*
 * css/brand.css — Identidad visual de Gestión de Talentos
 * Paleta corporativa: Tonos Pasteles Oficiales (Pizarra, Salvia y neutros)
 * Estética suave, luminosa, descansada y optimizada para encuestas y evaluaciones.
 */

/* ── 1. Variables globales ───────────────────────────────────────────── */
:root {
    /* ── Marca / Acento Pastel (Carmesí Campastro) ── */
    --clr-brand: #4F8FA3;
    /* Azul pizarra pastel — botones, acciones primarias */
    --clr-brand-dark: #3F7587;
    /* Tono de hover de botones y elementos activos */
    --clr-brand-light: #9CC3CF;
    /* Borde activo y acentos sutiles */

    /* ── Acento Secundario (Azul Cobalto) ── */
    --clr-secondary: #8E86BF;
    /* Azul cobalto pastel — barras de avance, pestañas */
    --clr-secondary-dark: #766EA8;
    /* Hover de elementos secundarios */
    --clr-secondary-light: #B9B3DA;
    /* Bordes y detalles secundarios */

    /* ── Neutros de lectura y estructura (Descanso visual) ── */
    --clr-text: #2C3137;
    /* Gris grafito de máxima legibilidad (no negro puro) */
    --clr-text-soft: #525C66;
    /* Cuerpo de texto suave y cómodo */
    --clr-muted: #76828E;
    /* Etiquetas, metadatos, placeholders y subtítulos */
    --clr-bg: #F7F8FA;
    /* Fondo general fresco y desaturado */

    /* ── Superficies ── */
    --clr-surface: #FFFFFF;
    /* Cards de preguntas y paneles blancos */
    --clr-surface-warm: #F3F6F9;
    /* Fondo secundario, cebras de tabla, bloques neutros */
    --clr-border: #E3E7EC;
    /* Bordes sutiles entre secciones y preguntas */

    /* ── Semánticos para Evaluaciones y Encuestas (Pasteles) ── */
    --clr-success: #5A9E80;
    /* Texto/Icono: Completado / Desempeño alto */
    --clr-warning: #D9A441;
    /* Texto/Icono: En progreso / Pendiente */
    --clr-info: #5F8FC0;
    /* Texto/Icono: Informativo / Pregunta neutra */
    --clr-danger: #CC7F7A;
    /* Texto/Icono: Incompleto / Alerta / Bajo puntaje */

    --clr-success-bg: #DFF1E8;
    /* Fondo pastel verde menta */
    --clr-warning-bg: #FCF0D5;
    /* Fondo pastel ámbar / crema */
    --clr-info-bg: #E3EEF9;
    /* Fondo pastel celeste / cielo */
    --clr-danger-bg: #F9E4E2;
    /* Fondo pastel rosa carmesí */

    /* ── Gradiente Hero Pastel (Carmesí Suave, Rosa & Azul Cobalto) ── */
    --gradient-hero: linear-gradient(135deg, #F3F8FA 0%, #EEF1F8 50%, #F1F0F9 100%);
    --gradient-hero-rev: linear-gradient(135deg, #F1F0F9 0%, #EEF1F8 50%, #F3F8FA 100%);

    /* ── Aliases y compatibilidad retroactiva ── */
    --brand: var(--clr-brand);
    --brand-dark: var(--clr-brand-dark);
    --brand-light: var(--clr-brand-light);
    --clr-primary: var(--clr-brand);
    --brand-pale: #E8F3F6;
    /* Selección de opciones y destacados suave */
    --brand-mist: #F7F8FA;

    /* ── Sombras y elevaciones sutiles ── */
    --shadow-sm: 0 1px 3px rgba(44, 49, 55, 0.04), 0 1px 2px rgba(44, 49, 55, 0.02);
    --shadow-md: 0 4px 16px rgba(79, 143, 163, 0.12);
    --radius: 10px;
}

/* ── 2. Fondo general y tipografía base ───────────────────────────────── */
body,
.gray-bg,
#page-wrapper {
    background-color: var(--clr-bg) !important;
    color: var(--clr-text-soft);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--clr-text);
}

/* ── 3. Sidebar / menú lateral ──────────────────────────────────────────
   Fuente única de verdad para colores, estados y layout del nav.
   style.css solo maneja estructura (flex, padding, transition).
   ─────────────────────────────────────────────────────────────────────── */

/* ─ 3.1 Contenedor ─ */
.navbar-default,
.navbar-static-side .navbar-default {
    background: var(--clr-surface) !important;
    border-right: 1px solid var(--clr-border) !important;
    box-shadow: 2px 0 10px rgba(44, 49, 55, 0.04) !important;
}

/* ─ 3.2 Cabecera del sidebar: neutralizar herencia de .nav>li>a ─ */
.nav-header,
li.nav-header,
li.sidebar-user-header,
li.nav-header.sidebar-user-header {
    background: var(--gradient-hero) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    padding: 18px 16px 14px !important;
    background-image: none !important;
}

/* El enlace del dropdown-toggle en el header NO hereda el flex cápsula de .nav>li>a */
li.nav-header > .dropdown > .dropdown-toggle,
li.sidebar-user-header > .dropdown > .dropdown-toggle,
li.nav-header .profile-element > .dropdown-toggle,
li.sidebar-user-header .profile-element > .dropdown-toggle {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-left: none !important;
    font-size: inherit !important;
}

/* Avatar circular con inicial */
.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-brand), var(--clr-brand-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(79, 143, 163, 0.30);
}

/* Badge del proyecto activo */
.sidebar-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(79, 143, 163, 0.10);
    border: 1px solid rgba(79, 143, 163, 0.22);
    border-radius: 20px;
    padding: 2px 9px 2px 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--clr-brand-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-project-badge i { font-size: 9px; opacity: 0.75; }

/* Nombre y rol */
.sidebar-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-text) !important;
    display: block;
    line-height: 1.3;
    margin: 0;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--clr-muted) !important;
    display: block;
    margin-top: 1px;
}

/* Texto en la cabecera */
.nav-header a,
li.sidebar-user-header a {
    color: var(--clr-text) !important;
    text-decoration: none !important;
}

.nav-header .text-muted { color: var(--clr-muted) !important; }
.nav-header .profile-element strong,
.nav-header .profile-element .font-bold { color: var(--clr-text) !important; }

/* ─ 3.3 Logo element (mini-navbar) ─ */
.logo-element {
    background: var(--clr-surface) !important;
    color: var(--clr-brand) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    font-size: 20px !important;
    padding: 18px 0 !important;
}

/* ─ 3.4 Ítems nivel 1 — color base ─ */
.navbar-default .nav > li > a,
#side-menu > li > a {
    color: var(--clr-text-soft) !important;
    font-weight: 500;
}

/* ─ 3.5 Hover ítems nivel 1 ─ */
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus,
#side-menu > li > a:hover,
#side-menu > li > a:focus {
    background: var(--clr-surface-warm) !important;
    color: var(--clr-text) !important;
}

/* ─ 3.6 Ítem activo terminal (ruta directa) ─ */
#side-menu > li.active > a:not([href="#"]),
.nav > li.active > a:not([href="#"]),
.nav > li.active > a:not([href="#"]):hover,
.nav > li.active > a:not([href="#"]):focus {
    background: var(--brand-pale) !important;
    color: var(--clr-brand) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--clr-brand) !important;
}

.nav > li.active > a:not([href="#"]) i {
    color: var(--clr-brand) !important;
}

/* li activo: sin fondo propio */
.nav > li.active {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
}

/* ─ 3.7 Acordeón padre abierto (href="#") — highlight suave sin píldora ─ */
#side-menu > li.active > a[href="#"],
.nav > li.active > a[href="#"],
.nav > li.active > a[href="#"]:hover,
.nav > li.active > a[href="#"]:focus {
    background: rgba(243, 246, 249, 0.8) !important;
    color: var(--clr-text) !important;
    font-weight: 600 !important;
    border-left: 3px solid transparent !important;
}

/* ─ 3.8 Flecha chevron animada — especificidad suficiente para vencer metismenu ─ */
.metismenu .fa.arrow,
.nav .fa.arrow,
.fa.arrow {
    float: right;
    font-style: normal;
    line-height: 1.4;
    transition: transform 0.2s ease;
}

.metismenu .fa.arrow::before,
.nav .fa.arrow::before,
.fa.arrow::before {
    content: "\f054" !important; /* fa-chevron-right */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 10px;
    color: var(--clr-muted);
    opacity: 0.7;
}

/* Activo: rota 90° */
.metismenu .active > a > .fa.arrow,
.nav > li.active > a > .fa.arrow {
    transform: rotate(90deg);
}

.metismenu .active > a > .fa.arrow::before,
.nav > li.active > a > .fa.arrow::before {
    color: var(--clr-brand) !important;
    opacity: 1;
}

/* ─ 3.9 Submenú nav-second-level — limpio, sin bordes duros ─ */
.nav-second-level {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 2px 0 6px 0 !important;
    border-radius: 0 !important;
}

.nav-second-level > li > a,
.nav-second-level li a {
    color: var(--clr-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 12px 7px 38px !important;
    margin: 1px 8px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    border-left: none !important;
    background: transparent !important;
}

.nav-second-level > li > a:hover,
.nav-second-level li a:hover,
.nav-second-level > li > a:focus,
.nav-second-level li a:focus {
    color: var(--clr-brand) !important;
    background: var(--brand-pale) !important;
}

.nav-second-level > li.active > a,
.nav-second-level li.active > a {
    color: var(--clr-brand) !important;
    font-weight: 700 !important;
    background: var(--brand-pale) !important;
    border-left: 2px solid var(--clr-brand) !important;
    padding-left: 36px !important;
}

/* Quitar padding-bottom extra del último ítem de submenú */
.nav-second-level li:last-child { padding-bottom: 0 !important; }

/* ─ 3.10 Mini-navbar colapsado ─ */
body.mini-navbar .nav-header,
body.mini-navbar li.sidebar-user-header {
    padding: 0 !important;
    background: var(--clr-surface) !important;
    border-bottom: 1px solid var(--clr-border) !important;
}

/* Flyout flotante en mini-navbar */
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover > .nav-second-level,
body.mini-navbar .nav li:focus > .nav-second-level {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 4px 4px 16px rgba(44, 49, 55, 0.10) !important;
    padding: 8px !important;
    margin: 0 !important;
}

body.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
    color: var(--clr-text-soft) !important;
    border-radius: 6px !important;
    padding-left: 16px !important;
}

/* ─ 3.11 Canvas-menu ─ */
body.canvas-menu .nav-header { padding: 24px 20px !important; }
body.canvas-menu nav.navbar-static-side { background: var(--clr-surface) !important; }

/* ── 4. Navbar top ───────────────────────────────────────────────────── */
.navbar-static-top {
    background: var(--clr-surface) !important;
    border-bottom: 1px solid var(--clr-border) !important;
}

.navbar-minimalize {
    background-color: var(--brand-pale) !important;
    border-color: var(--clr-danger-bg) !important;
    color: var(--clr-brand) !important;
}

.navbar-minimalize:hover,
.navbar-minimalize:focus {
    background-color: var(--clr-danger-bg) !important;
    border-color: var(--clr-brand-light) !important;
    color: var(--clr-brand-dark) !important;
}

/* ── 5. Botones y Componentes de Acción ─────────────────────────────── */
/* Botón base estándar con micro-interacciones suaves */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Primario: Azul pizarra pastel */
.btn-primary {
    background-color: var(--clr-brand) !important;
    border-color: var(--clr-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(79, 143, 163, 0.22) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--clr-brand-dark) !important;
    border-color: var(--clr-brand-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 143, 163, 0.32) !important;
}

/* Secundario / Blanco / Default (fondo blanco limpio con borde sutil) */
.btn-default,
.btn-white {
    background-color: #ffffff !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text-soft) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-white:hover,
.btn-white:focus {
    background-color: var(--clr-surface-warm) !important;
    border-color: #CBD5E1 !important;
    color: var(--clr-text) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Semánticos con pasteles de alto contraste */
.btn-success {
    background-color: var(--clr-success) !important;
    border-color: var(--clr-success) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(90, 158, 128, 0.22) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #46866A !important;
    border-color: #46866A !important;
    box-shadow: 0 4px 12px rgba(90, 158, 128, 0.3) !important;
}

.btn-danger {
    background-color: var(--clr-danger) !important;
    border-color: var(--clr-danger) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(204, 127, 122, 0.22) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #B2625D !important;
    border-color: #B2625D !important;
    box-shadow: 0 4px 12px rgba(204, 127, 122, 0.3) !important;
}

.btn-warning {
    background-color: var(--clr-warning) !important;
    border-color: var(--clr-warning) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(217, 164, 65, 0.22) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #BF8C2E !important;
    border-color: #BF8C2E !important;
    box-shadow: 0 4px 12px rgba(217, 164, 65, 0.3) !important;
}

.btn-info {
    background-color: var(--clr-info) !important;
    border-color: var(--clr-info) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(95, 143, 192, 0.22) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #4A77A6 !important;
    border-color: #4A77A6 !important;
    box-shadow: 0 4px 12px rgba(95, 143, 192, 0.3) !important;
}

/* Outline primario */
.btn-outline.btn-primary {
    background: transparent !important;
    border: 1.5px solid var(--clr-brand) !important;
    color: var(--clr-brand) !important;
}

.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:focus,
.btn-outline.btn-primary:active {
    background-color: var(--clr-brand) !important;
    border-color: var(--clr-brand) !important;
    color: #ffffff !important;
}

/* Variantes de tamaño y forma */
.btn-xs {
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
}

.btn-lg {
    padding: 10px 22px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
}

.btn-pill {
    border-radius: 20px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Botones en encabezados de página (Nuevo, Importar, etc. como en Proyectos) */
.page-heading .btn,
.page-heading-actions .btn {
    border-radius: 20px !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(44, 49, 55, 0.06) !important;
}

/* ── Botones de acción dentro de tablas (Editar, Eliminar, Ver) ── */
table td a.btn,
table td button.btn,
.delete-action-form button.btn,
.btn-action-edit,
.btn-action-delete {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Botón Editar dentro de tablas: suave pastel carmesí */
table td a.btn-primary,
.btn-action-edit {
    background-color: var(--brand-pale) !important;
    border: 1px solid #BFDDE5 !important;
    color: var(--clr-brand) !important;
    box-shadow: none !important;
}

table td a.btn-primary:hover,
.btn-action-edit:hover {
    background-color: var(--clr-brand) !important;
    border-color: var(--clr-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(79, 143, 163, 0.25) !important;
    transform: translateY(-1px);
}

/* Botón Eliminar dentro de tablas: suave pastel rosa carmesí */
.delete-action-form button.btn-danger,
table td button.btn-danger,
.btn-action-delete {
    background-color: var(--clr-danger-bg) !important;
    border: 1px solid #EFC6C3 !important;
    color: var(--clr-danger) !important;
    box-shadow: none !important;
}

.delete-action-form button.btn-danger:hover,
table td button.btn-danger:hover,
.btn-action-delete:hover {
    background-color: var(--clr-danger) !important;
    border-color: var(--clr-danger) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(204, 127, 122, 0.25) !important;
    transform: translateY(-1px);
}

/* Botón Ver / Secundario dentro de tablas: suave pastel celeste cobalto */
table td a.btn-default,
table td a.btn-info {
    background-color: var(--clr-info-bg) !important;
    border: 1px solid #C3D8EE !important;
    color: var(--clr-info) !important;
    box-shadow: none !important;
}

table td a.btn-default:hover,
table td a.btn-info:hover {
    background-color: var(--clr-info) !important;
    border-color: var(--clr-info) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(95, 143, 192, 0.25) !important;
    transform: translateY(-1px);
}

/* ── 6. Links ────────────────────────────────────────────────────────── */
a {
    color: var(--clr-brand);
}

a:hover,
a:focus {
    color: var(--clr-brand-dark);
}

/* ── 7. Ibox / Cards / Paneles ───────────────────────────────────────── */
.ibox {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--clr-border) !important;
    background: var(--clr-surface) !important;
}

.ibox-title {
    background: var(--clr-surface) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.ibox-title h5 {
    color: var(--clr-text) !important;
    font-weight: 700 !important;
}

.ibox-content {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

/* ── 8. Formularios y Controles ──────────────────────────────────────── */
.form-control {
    border-radius: 8px !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text-soft) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: var(--clr-brand-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 163, 0.18) !important;
    background-color: #ffffff !important;
}

/* Select2 inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--clr-border) !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    padding: 3px 6px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--clr-brand-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 163, 0.18) !important;
}

/* Divisores de formulario */
.hr-line-dashed {
    border-top: 1px dashed var(--clr-border) !important;
    margin: 20px 0 !important;
}

/* ── 9. Progress bars ────────────────────────────────────────────────── */
.progress-bar {
    background-color: var(--clr-secondary) !important;
    /* Azul cobalto pastel ideal para avance de encuestas */
}

.progress-bar-primary {
    background-color: var(--clr-brand) !important;
}

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

.progress-bar-warning {
    background-color: var(--clr-warning) !important;
}

.progress-bar-danger {
    background-color: var(--clr-danger) !important;
}

/* ── 10. Badges y Labels Pasteles Modulares ───────────────────────────── */
.label,
.badge {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.2 !important;
}

.label-pill,
.badge-pill {
    border-radius: 20px !important;
    padding: 5px 12px !important;
}

.label-primary,
.badge-primary {
    background-color: var(--brand-pale) !important;
    color: var(--clr-brand) !important;
    border: 1px solid #BFDDE5 !important;
}

.label-success,
.badge-success {
    background-color: var(--clr-success-bg) !important;
    color: var(--clr-success) !important;
    border: 1px solid #C9E3D6 !important;
}

.label-warning,
.badge-warning {
    background-color: var(--clr-warning-bg) !important;
    color: var(--clr-warning) !important;
    border: 1px solid #F1DCA8 !important;
}

.label-danger,
.badge-danger {
    background-color: var(--clr-danger-bg) !important;
    color: var(--clr-danger) !important;
    border: 1px solid #EFC6C3 !important;
}

.label-info,
.badge-info {
    background-color: var(--clr-info-bg) !important;
    color: var(--clr-info) !important;
    border: 1px solid #C3D8EE !important;
}

/* ── 11. Tablas y DataTables Modernas ─────────────────────────────────── */
/* Tarjeta contenedora de tablas (Table Card) */
.table-card,
.card-table {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.table-card:hover,
.card-table:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: #CBD5E1 !important;
}

.table-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.table-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.table-card-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--clr-muted);
    margin-top: 3px;
    display: block;
}

.table-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-card-body {
    padding: 0;
    background: var(--clr-surface);
}

.table-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--clr-border);
    background: var(--clr-surface-warm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Wrapper general de DataTables modernizado con estética de tarjeta */
.dataTables_wrapper {
    position: relative;
    clear: both;
    padding: 0 !important;
    margin-bottom: 24px !important;
}

/* Cuando DataTables se ubica directamente en col-lg-12 sin ibox, se eleva automáticamente como tarjeta */
.wrapper-content>.col-lg-12>.dataTables_wrapper,
.wrapper-content>.row>.col-lg-12>.dataTables_wrapper,
.dataTables_wrapper.table-card-wrapper {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 6px 0 12px 0 !important;
    overflow: hidden !important;
}

/* Barra de controles superior (Filtro y Selector de registros) */
.dataTables_wrapper .dataTables_length {
    float: left;
    padding: 14px 18px 10px !important;
    color: var(--clr-text-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    color: var(--clr-text-soft) !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--clr-border) !important;
    border-radius: 8px !important;
    padding: 6px 30px 6px 12px !important;
    color: var(--clr-text) !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2376828E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--clr-brand-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 163, 0.18) !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    padding: 14px 18px 10px !important;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    color: var(--clr-text-soft) !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--clr-border) !important;
    border-radius: 20px !important;
    padding: 6px 16px 6px 34px !important;
    color: var(--clr-text) !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%2376828E' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    font-size: 13px !important;
    outline: none !important;
    min-width: 220px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--clr-brand-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 163, 0.18) !important;
    min-width: 260px !important;
    background-color: #ffffff !important;
}

/* Tabla base, DataTables y variantes modernas */
table.dataTable,
.table,
.table-modern {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background-color: var(--clr-surface) !important;
    border: none !important;
}

/* Encabezados de tabla (Thead) */
table.dataTable thead th,
table.dataTable thead td,
.table>thead>tr>th,
.table>thead>tr>td {
    background-color: var(--clr-surface-warm) !important;
    color: var(--clr-text) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--clr-border) !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 13px 18px !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}

/* Neutralización de bordes verticales excesivos de Bootstrap .table-bordered */
.table-bordered {
    border: none !important;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border-left: none !important;
    border-right: none !important;
}

/* Filas y celdas de datos (Tbody) */
table.dataTable tbody td,
.table>tbody>tr>td {
    padding: 13px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--clr-border) !important;
    border-bottom: none !important;
    color: var(--clr-text-soft) !important;
    font-size: 13px !important;
    background-color: transparent;
    line-height: 1.45 !important;
    transition: background-color 0.15s ease;
}

/* Eliminación de la línea inferior negra rígida por defecto de DataTables */
table.dataTable.no-footer {
    border-bottom: 1px solid var(--clr-border) !important;
}

/* Cebra suave y elegante */
.table-striped>tbody>tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd {
    background-color: var(--clr-surface-warm) !important;
}

.table-striped>tbody>tr:nth-of-type(even),
table.dataTable.stripe tbody tr.even {
    background-color: var(--clr-surface) !important;
}

/* Micro-interacción al pasar el mouse por las filas */
.table-hover>tbody>tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #F8ECEE !important;
    /* Tono carmesí ultra suave al hacer hover */
}

/* Fila activa o seleccionada */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.is-active,
.table>tbody>tr.is-selected {
    background-color: var(--brand-pale) !important;
    /* Azul pizarra pastel (#E8F3F6) */
}

table.dataTable tbody tr.selected td,
table.dataTable tbody tr.is-active td,
.table>tbody>tr.is-selected td {
    color: var(--clr-brand) !important;
    font-weight: 600 !important;
}

/* Iconos modernos de ordenamiento DataTables (reemplazan los gifs/png anticuados) */
/* 1. Neutralización absoluta de pseudo-elementos conflictivos de DataTables / Inspinia / Glyphicons */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead td.sorting:before,
table.dataTable thead td.sorting_asc:before,
table.dataTable thead td.sorting_desc:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead td.sorting:after,
table.dataTable thead td.sorting_asc:after,
table.dataTable thead td.sorting_desc:after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    display: none !important;
    content: "" !important;
    background-image: none !important;
}

/* 2. Definición limpia, moderna y no repetitiva directamente en la celda del encabezado */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc {
    cursor: pointer !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 32px !important;
    user-select: none !important;
}

/* Estado neutro: flecha doble (indica columna ordenable) */
table.dataTable thead th.sorting,
table.dataTable thead td.sorting {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
}

/* Hover en estado neutro */
table.dataTable thead th.sorting:hover,
table.dataTable thead td.sorting:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
}

/* Ascendente (A -> Z, menor a mayor): flecha hacia arriba activa con color de marca */
table.dataTable thead th.sorting_asc,
table.dataTable thead td.sorting_asc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A67D8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important;
}

/* Descendente (Z -> A, mayor a menor): flecha hacia abajo activa con color de marca */
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting_desc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A67D8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Deshabilitados */
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled,
table.dataTable thead td.sorting_asc_disabled,
table.dataTable thead td.sorting_desc_disabled {
    background-image: none !important;
    cursor: default !important;
}

/* Pie de controles de DataTables (Info y Paginación) */
.dataTables_wrapper .dataTables_info {
    float: left;
    padding: 14px 18px 6px !important;
    color: var(--clr-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    clear: both;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding: 12px 18px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--clr-border) !important;
    padding: 5px 12px !important;
    margin: 0 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--clr-text-soft) !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    min-width: 32px !important;
    text-align: center !important;
    user-select: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--brand-pale) !important;
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand) !important;
    border-color: #BFDDE5 !important;
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--clr-brand) !important;
    color: #ffffff !important;
    border-color: var(--clr-brand) !important;
    box-shadow: 0 2px 6px rgba(79, 143, 163, 0.28) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    background: var(--clr-surface-warm) !important;
    color: var(--clr-muted) !important;
    border-color: var(--clr-border) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Contenedor responsivo con scrollbar sutil */
.table-responsive {
    border: none !important;
    margin-bottom: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 4px;
}

/* ── Micro-componentes para celdas de tabla ── */
/* Contenedor flex para acciones alineadas */
.table-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

/* Dropdown moderno y compacto para acciones en tablas */
.table-actions-dropdown {
    position: relative;
    display: inline-block;
}

.table-actions-dropdown .dropdown-toggle::after {
    display: none !important; /* Ocultar flecha estándar de bootstrap para usar icono limpio de tres puntos */
}

.table-actions-dropdown .btn-pill {
    padding: 4px 9px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.table-actions-dropdown .dropdown-menu {
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
    min-width: 210px !important;
    font-size: 13px !important;
    z-index: 1060 !important;
}

.table-actions-dropdown .dropdown-menu > li > a,
.table-actions-dropdown .dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.table-actions-dropdown .dropdown-menu > li > a:hover,
.table-actions-dropdown .dropdown-item:hover {
    background-color: #f8fafc !important;
    color: var(--clr-brand) !important;
}

.table-actions-dropdown .dropdown-menu > li > a.text-danger:hover,
.table-actions-dropdown .dropdown-item.text-danger:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.table-actions-dropdown .dropdown-menu .divider {
    margin: 5px 0 !important;
    height: 1px !important;
    background-color: #e2e8f0 !important;
}

/* Evitar que el dropdown quede cortado por el overflow de la tabla */
.table-responsive {
    overflow: visible;
}

@media (max-width: 991px) {
    .table-responsive {
        overflow-x: auto;
    }
}

td.text-right {
    white-space: nowrap !important;
}

/* Chip de usuario/colaborador con avatar pastel carmesí */
.table-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.table-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--clr-brand);
    background: var(--brand-pale);
    /* Azul pizarra pastel (#E8F3F6) */
    border: 1.5px solid #BFDDE5;
    flex-shrink: 0;
    text-transform: uppercase;
}

.table-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.table-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.table-user-name {
    font-weight: 700;
    color: var(--clr-text);
    font-size: 13px;
}

.table-user-sub {
    font-size: 11px;
    color: var(--clr-muted);
    margin-top: 2px;
}

/* Barra de progreso para celdas de tabla */
.table-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.table-progress-bar {
    flex: 1;
    height: 7px;
    background: var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.table-progress-fill {
    height: 100%;
    border-radius: 10px;
    background-color: var(--clr-secondary);
    /* Azul cobalto pastel por defecto */
    transition: width 0.3s ease;
}

.table-progress-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--clr-text-soft);
    min-width: 32px;
    text-align: right;
}

/* Estado vacío estilizado para tablas */
.table-empty-state {
    padding: 35px 20px;
    text-align: center;
    color: var(--clr-muted);
}

.table-empty-state i {
    font-size: 34px;
    color: #CBD5E1;
    margin-bottom: 10px;
    display: block;
}

.table-empty-state h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 5px 0;
}

.table-empty-state p {
    font-size: 12px;
    color: var(--clr-muted);
    margin: 0;
}

/* ── 12. Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb-nav {
    display: inline-block;
    margin-top: 4px;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
}

.breadcrumb > li,
.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb > li + li::before,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    padding: 0 7px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.breadcrumb a {
    color: var(--clr-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.breadcrumb a:hover {
    color: #b84351 !important;
    text-decoration: underline !important;
    opacity: 0.9;
}

.breadcrumb > .active,
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active strong {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* ── 13. Page heading ────────────────────────────────────────────────── */
.page-heading {
    background: var(--clr-surface) !important;
    border-bottom: 1px solid var(--clr-border) !important;
}

.page-heading h2 {
    color: var(--clr-text) !important;
    font-weight: 700 !important;
}

/* ── 14. Footer ──────────────────────────────────────────────────────── */
.footer {
    background: var(--clr-surface) !important;
    border-top: 1px solid var(--clr-border) !important;
    color: var(--clr-muted) !important;
}

/* ── 15. Login page ──────────────────────────────────────────────────── */
.loginscreen.middle-box h3 {
    color: var(--clr-brand) !important;
    font-weight: 700 !important;
}

/* ── 16. Toastr notifications ────────────────────────────────────────── */
.toast-success {
    background-color: var(--clr-success) !important;
}

.toast-error {
    background-color: var(--clr-danger) !important;
}

.toast-warning {
    background-color: var(--clr-warning) !important;
}

.toast-info {
    background-color: var(--clr-info) !important;
}

/* ── 17. Componentes Hero y Dashboard ────────────────────────────────── */
.dash-hero,
.proj-hero {
    background: var(--gradient-hero) !important;
    color: var(--clr-text) !important;
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
    border: 1px solid #BFDDE5 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.dash-hero h2,
.proj-hero h2 {
    margin: 0 0 6px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-text) !important;
}

.dash-hero p,
.proj-hero p {
    margin: 0;
    font-size: 14px;
    color: var(--clr-text-soft) !important;
}

.badge-role {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--clr-brand) !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid #BFDDE5;
}

.badge-project {
    background: #FFFFFF !important;
    color: var(--clr-brand) !important;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    border: 1px solid #BFDDE5;
}

.kpi-card {
    background: var(--clr-surface) !important;
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
    border-color: #BFDDE5 !important;
}

.kpi-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--clr-muted) !important;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--clr-text) !important;
    line-height: 1.1;
    margin-bottom: 8px;
}

.kpi-footer {
    font-size: 12px;
    color: var(--clr-muted) !important;
    margin: 0;
}

.quick-action-btn {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--clr-text-soft) !important;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    border-color: #BFDDE5 !important;
    background: var(--brand-pale) !important;
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand) !important;
    transform: translateX(4px);
}

.quick-action-btn:hover .quick-action-arrow {
    color: var(--clr-brand) !important;
}

/* ── 18. Componentes de Pantalla Proyectos ────────────────────────────── */
.alert-no-proyecto {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
    border-left: 4px solid var(--clr-warning);
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 500;
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.proj-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.proj-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #BFDDE5;
}

.proj-card.is-active {
    border-left: 5px solid var(--clr-brand);
}

.proj-card.is-inactive {
    opacity: 0.72;
}

.proj-badge-selected {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--brand-pale);
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand);
    border: 1px solid #BFDDE5;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.proj-badge-active {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--clr-success-bg);
    color: var(--clr-success);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.proj-badge-inactive {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--clr-surface-warm);
    color: var(--clr-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.proj-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    padding-right: 70px;
}

.proj-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--clr-border);
}

.proj-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brand-pale);
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #BFDDE5;
}

.proj-card-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-text);
}

.proj-card-meta {
    margin: 0;
    font-size: 12px;
    color: var(--clr-muted);
}

.proj-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--clr-border);
}

.btn-select {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    background: var(--clr-brand);
    color: #ffffff !important;
    transition: background 0.2s ease;
}

.btn-select:hover {
    background: var(--clr-brand-dark);
    color: #ffffff !important;
}

.btn-select.selected {
    background: var(--brand-pale);
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand) !important;
    border: 1px solid #BFDDE5;
}

.btn-select.selected:hover {
    background: #BFDDE5;
}

.btn-edit-proj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid var(--clr-border);
    background: #ffffff;
    color: var(--clr-muted) !important;
    transition: all 0.2s ease;
}

.btn-edit-proj:hover {
    border-color: var(--clr-brand);
    color: var(--clr-brand) !important;
    background: var(--brand-pale);
}

.proj-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--clr-muted);
    font-size: 16px;
}

.proj-empty i {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--clr-border);
    display: block;
}

/* ── 19. Utilitarios y Helpers de Marca ───────────────────────────────── */
.text-brand {
    color: var(--clr-brand) !important;
}

.text-secondary {
    color: var(--clr-secondary) !important;
}

.text-navy {
    color: var(--clr-brand) !important;
}

.bg-brand {
    background-color: var(--clr-brand) !important;
    color: #ffffff !important;
}

.bg-brand-pale {
    background-color: var(--brand-pale) !important;
    color: var(--clr-brand) !important;
}

.border-brand {
    border-color: var(--clr-brand) !important;
}

/* ── 20. Scrollbar sutil y moderno ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--clr-bg);
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ── 21. Estructura Organizacional - Pill Tabs & Badges (Opción A) ────── */
.nav-pills-estructura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid var(--clr-border);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    list-style: none;
}

.nav-pills-estructura .nav-item {
    margin: 0;
}

.nav-pills-estructura .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text-soft) !important;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
}

.nav-pills-estructura .nav-link i {
    font-size: 14px;
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

.nav-pills-estructura .nav-link:hover {
    background: var(--clr-surface-warm);
    color: var(--clr-text) !important;
    border-color: var(--clr-border);
}

.nav-pills-estructura .nav-link:hover i {
    color: var(--clr-brand);
}

.nav-pills-estructura .nav-link.active,
.nav-pills-estructura .nav-link.active:hover,
.nav-pills-estructura .nav-link.active:focus {
    background: var(--brand-pale) !important;
    /* Azul pizarra pastel (#E8F3F6) */
    color: var(--clr-brand) !important;
    border: 1px solid #BFDDE5 !important;
    box-shadow: 0 1px 3px rgba(79, 143, 163, 0.18);
}

.nav-pills-estructura .nav-link.active i {
    color: var(--clr-brand) !important;
}

.nav-pills-estructura .badge-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--clr-surface-warm);
    color: var(--clr-muted);
    transition: all 0.2s ease;
}

.nav-pills-estructura .nav-link.active .badge-pill-count {
    background: var(--clr-brand);
    color: #FFFFFF;
}

.nav-pills-estructura .nav-link:hover:not(.active) .badge-pill-count {
    background: var(--clr-border);
    color: var(--clr-text-soft);
}

/* Card contenedora de tabla de estructura */
.estructura-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
}

.estructura-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--clr-border);
    flex-wrap: wrap;
    gap: 12px;
}

.estructura-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.estructura-card-subtitle {
    font-size: 13px;
    color: var(--clr-muted);
    font-weight: 400;
}

/* ── Desactivar y eliminar botón de más (+) de DataTables Responsive en todas las tablas ── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable > tbody > tr > td.dtr-control:before,
table.dataTable > tbody > tr > th.dtr-control:before,
.dtr-control:before,
td.dtr-control:before,
th.dtr-control:before,
table.dataTable tr.parent td.dtr-control:before,
table.dataTable tr.parent th.dtr-control:before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
table.dataTable > tbody > tr > td.dtr-control,
table.dataTable > tbody > tr > th.dtr-control,
td.dtr-control,
th.dtr-control {
    padding-left: 12px !important;
}


/* Warning: texto oscuro para legibilidad sobre ámbar pastel */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active { color: #4A3410 !important; }

/* ── Menú lateral completo (sin cortes) ───────────────────────────────── */
@media (min-width: 769px) {
    .navbar-static-side {
        width: 260px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }
    #page-wrapper { margin-left: 260px; }
    body.mini-navbar .navbar-static-side { overflow: visible; }
}
.navbar-static-side .sidebar-collapse,
.navbar-static-side #side-menu { height: auto !important; max-height: none !important; overflow: visible !important; }
#side-menu > li > a,
.nav-second-level li a {
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
}
body:not(.mini-navbar) .nav-second-level.collapsing li a,
body:not(.mini-navbar) .nav-second-level li a { min-width: 0 !important; }
.navbar-static-side { padding-bottom: 24px; }

/* ── Colaboradores: adaptación a pantallas ────────────────────────────── */
.table-card, .card-table { overflow-x: auto !important; }
.colaboradores-table { width: 100% !important; }
.colaboradores-table td, .colaboradores-table th { vertical-align: middle; word-break: break-word; }
.colaboradores-table td.text-right { white-space: nowrap; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background-color: var(--clr-brand) !important; box-shadow: none !important; }
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { padding: 8px 12px; }
.dataTables_wrapper .dataTables_filter input { max-width: 100%; }
.page-heading .page-heading-actions, .page-heading .text-right { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.page-heading .btn { margin-right: 0 !important; }
@media (max-width: 767px) {
    .page-heading .col-lg-3, .page-heading .col-lg-9, .page-heading .col-lg-4, .page-heading .col-lg-8 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .page-heading .page-heading-actions, .page-heading .text-right { justify-content: flex-start; padding-top: 10px !important; }
    .wrapper-content { padding: 15px 8px !important; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { float: none; text-align: left; }
}

/* Botones del encabezado: no se estiran a lo alto */
.page-heading .page-heading-actions, .page-heading .text-right { align-items: flex-start; align-content: flex-start; }
.page-heading .btn { height: auto !important; min-height: 0 !important; align-self: flex-start; }