/* ═══════════════════════════════════════════════════════════════════════════
   core-light.css — Tema CLARO de Core, conservando el dorado característico

   Contexto: el bloque "CORE — Tema dorado/oscuro" de coreEmpresa.css
   (líneas ~23363 en adelante) pinta superficies oscuras SIN condicionar el
   tema (usa `html[data-bs-theme]`, que casa con claro y con oscuro). Por eso
   no basta con poner data-bs-theme="light": hay que devolver a claro esas
   superficies.

   Este archivo se carga DESPUÉS de coreEmpresa.css y sólo actúa cuando
   data-bs-theme="light". El tema oscuro (core-theme.css + el bloque de
   coreEmpresa.css) queda intacto: basta con volver a fijar el tema en
   _Layout.cshtml para recuperarlo.

   Regla de contraste del dorado:
     · #e8c24a (dorado brillante) se usa sólo como RELLENO, con texto #1c1c22.
     · Para TEXTO e ICONOS sobre superficies claras se usa #8a6508
       (mismo dorado, oscurecido) porque #e8c24a sobre blanco da 1.7:1.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] {
    /* ═══ Superficies ═══
       Los fondos secundarios NO usan gris neutro: usan el crema sutil del
       dorado, para que todo el tema quede en la misma familia de color.
       Las superficies de contenido siguen en blanco para destacar sobre él. */
    --core-surface: #ffffff;      /* cards, tablas, modales   */
    --core-subtle: #fdfcf9;       /* crema base: fondo general */
    --core-subtle-2: #f9f7f1;     /* crema profundo: thead, barras, zonas */
    --core-subtle-3: #f3f0e8;     /* crema para hover/estados sobre lo anterior */
    --core-surface-2: var(--core-subtle-2);
    --core-app-bg: var(--core-subtle);

    /* ═══ Texto ═══ */
    --core-text: #1f2430;
    --core-text-strong: #10131a;
    --core-muted: #6b7280;

    /* ═══ Bordes ═══ */
    --core-border: rgba(16, 19, 26, 0.12);
    --core-border-strong: rgba(16, 19, 26, 0.18);

    /* ═══ Dorado ═══ */
    --core-gold: #e8c24a;         /* relleno  */
    --core-gold-ink: #8a6508;     /* texto/iconos sobre claro */
    --core-gold-ink-hover: #6f5206;
    --core-on-gold: #1c1c22;      /* texto sobre dorado */
    --core-gold-tint: rgba(232, 194, 74, 0.18);
    --core-gold-tint-strong: rgba(232, 194, 74, 0.28);

    /* ═══ Variables del sistema (colors.css / style.css) ═══ */
    --primary-color: #8a6508;
    --primary-hover: #6f5206;
    --primary-active: #c79b2a;
    --primary-light: rgba(232, 194, 74, 0.16);

    --bg-body: var(--core-subtle);
    --bg-white: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;

    --text-dark: #1f2430;
    --text-heading: #10131a;
    --text-muted: #6b7280;

    --border-color: rgba(16, 19, 26, 0.12);

    /* ═══ Variables de Bootstrap ═══ */
    --bs-body-bg: var(--core-subtle);
    --bs-secondary-bg: var(--core-subtle-2);
    --bs-tertiary-bg: var(--core-subtle-3);
    --bs-body-color: #1f2430;
    --bs-heading-color: #10131a;
    --bs-emphasis-color: #10131a;
    --bs-secondary-color: #6b7280;
    --bs-border-color: rgba(16, 19, 26, 0.12);

    --bs-link-color: #8a6508;
    --bs-link-color-rgb: 138, 101, 8;
    --bs-link-hover-color: #6f5206;
    --bs-link-hover-color-rgb: 111, 82, 6;

    --bs-primary-text-emphasis: #6f5206;
    --bs-primary-bg-subtle: var(--core-subtle-2);
    --bs-primary-border-subtle: #f0dda6;
    --bs-focus-ring-color: rgba(232, 194, 74, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fondo general — mismo glow dorado del oscuro, en versión clara
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] body.page {
    background:
        radial-gradient(circle at 18% 12%, rgba(232, 194, 74, 0.07) 0%, rgba(232, 194, 74, 0) 42%),
        radial-gradient(circle at 85% 90%, rgba(232, 194, 74, 0.05) 0%, rgba(232, 194, 74, 0) 45%),
        linear-gradient(160deg, #fffefc 0%, var(--core-subtle) 55%, #f7f4ed 100%) fixed;
    color: var(--core-text);
}

/* Grises azulados que style.css deja fijos (#f6f9ff) en hovers de notificaciones,
   mensajes, perfil y acordeones: se homologan al crema. */
[data-bs-theme="light"] .header-nav .notifications .notification-item:hover,
[data-bs-theme="light"] .header-nav .messages .message-item:hover,
[data-bs-theme="light"] .header-nav .profile .dropdown-item:hover,
[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background-color: var(--core-subtle-2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cromo: header y sidebar en claro
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .header,
[data-bs-theme="light"] .sidebar {
    background-color: rgba(255, 255, 255, 0.96);
    border-color: var(--core-border);
}

[data-bs-theme="light"] .header {
    box-shadow: 0 1px 0 var(--core-border), 0 2px 12px rgba(16, 19, 26, 0.05);
}

/* El logotipo es dorado sobre transparente: sobre blanco pierde definición.
   Una sombra mínima le devuelve el borde sin tocar el layout. */
[data-bs-theme="light"] .header .logo img {
    filter: drop-shadow(0 1px 1px rgba(16, 19, 26, 0.45));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar — etiqueta oscura, icono dorado profundo, activo con pastilla dorada
   (los selectores del oscuro son html[data-bs-theme], misma especificidad:
    gana este archivo por orden de carga)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-bs-theme="light"] .sidebar-nav .nav-link,
html[data-bs-theme="light"] .sidebar-nav a.nav-link,
html[data-bs-theme="light"] .sidebar-nav .nav-link.collapsed,
html[data-bs-theme="light"] .sidebar-nav .nav-link:not(.collapsed),
html[data-bs-theme="light"] .sidebar-nav .nav-content a {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] .sidebar-nav .nav-link i,
html[data-bs-theme="light"] .sidebar-nav a.nav-link i,
html[data-bs-theme="light"] .sidebar-nav .nav-link .bi-chevron-down,
html[data-bs-theme="light"] .sidebar-nav .nav-content a i {
    color: var(--core-gold-ink) !important;
}

html[data-bs-theme="light"] .sidebar-nav .nav-link:hover,
html[data-bs-theme="light"] .sidebar-nav a.nav-link:hover,
html[data-bs-theme="light"] .sidebar-nav .nav-content a:hover {
    background: var(--core-gold-tint) !important;
    background-color: var(--core-gold-tint) !important;
    color: var(--core-gold-ink-hover) !important;
    border-radius: 8px;
}

html[data-bs-theme="light"] .sidebar-nav .nav-link:hover i,
html[data-bs-theme="light"] .sidebar-nav .nav-content a:hover i {
    color: var(--core-gold-ink-hover) !important;
}

html[data-bs-theme="light"] .sidebar-nav .nav-heading {
    color: var(--core-muted) !important;
}

/* El activo conserva la pastilla dorada con texto oscuro: es el acento de marca */
html[data-bs-theme="light"] .sidebar-nav .nav-link.active,
html[data-bs-theme="light"] .sidebar-nav a.nav-link.active,
html[data-bs-theme="light"] .sidebar-nav .nav-link.collapsed.active,
html[data-bs-theme="light"] .sidebar-nav .nav-link.active:not(.collapsed),
html[data-bs-theme="light"] .sidebar-nav .nav-content a.active {
    background: linear-gradient(135deg, #f4d877 0%, #e8c24a 50%, #c79b2a 100%) !important;
    background-color: var(--core-gold) !important;
    color: var(--core-on-gold) !important;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Superficies de contenido
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-bs-theme="light"] main .card,
html[data-bs-theme="light"] main .card-body,
html[data-bs-theme="light"] main .card-header,
html[data-bs-theme="light"] main .card-footer,
html[data-bs-theme="light"] main .borde-section,
html[data-bs-theme="light"] main .table-container,
html[data-bs-theme="light"] main .dataTables_wrapper,
html[data-bs-theme="light"] .modal-content {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border) !important;
}

html[data-bs-theme="light"] main [id$="_wrapper"] {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .offcanvas,
[data-bs-theme="light"] .list-group-item,
[data-bs-theme="light"] .accordion-item,
[data-bs-theme="light"] .accordion-button {
    background-color: var(--core-surface);
    color: var(--core-text);
    border-color: var(--core-border);
}

[data-bs-theme="light"] .dropdown-item {
    color: var(--core-text);
}

[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
    background-color: var(--core-gold-tint);
    color: var(--core-text-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tipografía del contenido — títulos en dorado profundo (acento de marca)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-bs-theme="light"] main,
html[data-bs-theme="light"] main p,
html[data-bs-theme="light"] main span,
html[data-bs-theme="light"] main div,
html[data-bs-theme="light"] main label,
html[data-bs-theme="light"] main td,
html[data-bs-theme="light"] main th,
html[data-bs-theme="light"] main li,
html[data-bs-theme="light"] main .text-dark {
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main h1,
html[data-bs-theme="light"] main h2,
html[data-bs-theme="light"] main h3,
html[data-bs-theme="light"] main h4,
html[data-bs-theme="light"] main h5,
html[data-bs-theme="light"] main h6,
html[data-bs-theme="light"] main .card-title,
html[data-bs-theme="light"] main .card-title-crm,
html[data-bs-theme="light"] main .pagetitle h1 {
    color: var(--core-gold-ink) !important;
}

html[data-bs-theme="light"] main .text-muted,
html[data-bs-theme="light"] main small {
    color: var(--core-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Acentos primarios — dorado legible sobre claro
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .text-primary,
[data-bs-theme="light"] a.text-primary:hover,
[data-bs-theme="light"] a.text-primary:focus,
[data-bs-theme="light"] .pagination .page-link,
[data-bs-theme="light"] .spinner-border-primary,
[data-bs-theme="light"] .spinner-grow-primary {
    color: var(--core-gold-ink) !important;
}

[data-bs-theme="light"] .btn-outline-primary {
    color: var(--core-gold-ink) !important;
    border-color: var(--core-gold-ink) !important;
}

[data-bs-theme="light"] .btn-outline-primary:hover,
[data-bs-theme="light"] .btn-outline-primary:active,
[data-bs-theme="light"] .btn-outline-primary.active {
    background-color: var(--core-gold) !important;
    border-color: var(--core-gold) !important;
    color: var(--core-on-gold) !important;
}

[data-bs-theme="light"] .pagination .page-link:hover,
[data-bs-theme="light"] .pagination .page-link:focus {
    color: var(--core-gold-ink-hover) !important;
    background-color: var(--core-gold-tint) !important;
    border-color: var(--core-gold) !important;
}

/* Botón secundario: en el oscuro es una superficie #1c1c24 sin condicionar tema */
[data-bs-theme="light"] .btn-secondary {
    background: var(--core-subtle-2) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border-strong) !important;
}

[data-bs-theme="light"] .btn-secondary:hover {
    background: var(--core-subtle-3) !important;
    border-color: var(--core-gold) !important;
    color: var(--core-text-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Formularios
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .input-group-text,
html[data-bs-theme="light"] main .form-control,
html[data-bs-theme="light"] main .form-select,
html[data-bs-theme="light"] main .input-group-text,
html[data-bs-theme="light"] main textarea {
    background-color: var(--core-surface) !important;
    background-image: none !important;
    border-color: var(--core-border-strong) !important;
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main .form-control::placeholder,
html[data-bs-theme="light"] main textarea::placeholder,
[data-bs-theme="light"] .form-control::placeholder {
    color: #9aa0ab !important;
}

[data-bs-theme="light"] .form-control:disabled,
[data-bs-theme="light"] .form-select:disabled,
html[data-bs-theme="light"] main .form-control[readonly],
html[data-bs-theme="light"] main .form-control.readOnly,
html[data-bs-theme="light"] main span.form-control.readOnly {
    background-color: var(--core-subtle-2) !important;
    color: #5b6673 !important;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: var(--core-surface) !important;
    border-color: var(--core-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 194, 74, 0.28) !important;
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main select:not(.etapa-select),
html[data-bs-theme="light"] main select.form-control:not(.etapa-select),
html[data-bs-theme="light"] main .form-select:not(.etapa-select),
html[data-bs-theme="light"] main select.etapa-select {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border-strong) !important;
}

html[data-bs-theme="light"] main select option,
html[data-bs-theme="light"] main .form-select option {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
}

/* Select2 */
[data-bs-theme="light"] .select2-container--default .select2-selection--single,
[data-bs-theme="light"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="light"] .select2-dropdown,
[data-bs-theme="light"] .select2-search--dropdown .select2-search__field {
    background-color: var(--core-surface) !important;
    border-color: var(--core-border-strong) !important;
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="light"] .select2-container--default .select2-results__option {
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .select2-container--default .select2-results__option {
    background-color: var(--core-surface) !important;
}

[data-bs-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--core-gold) !important;
    color: var(--core-on-gold) !important;
}

[data-bs-theme="light"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--core-gold-tint) !important;
    border-color: var(--core-gold) !important;
    color: var(--core-gold-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablas y DataTables
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] table,
[data-bs-theme="light"] .table,
html[data-bs-theme="light"] main table,
html[data-bs-theme="light"] main .table,
html[data-bs-theme="light"] main table.dataTable {
    --bs-table-bg: var(--core-surface) !important;
    --bs-table-color: var(--core-text) !important;
    --bs-table-striped-bg: rgba(232, 194, 74, 0.05) !important;
    --bs-table-striped-color: var(--core-text) !important;
    --bs-table-hover-bg: var(--core-gold-tint) !important;
    --bs-table-hover-color: var(--core-text-strong) !important;
    --bs-table-border-color: var(--core-border) !important;
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main table thead th,
html[data-bs-theme="light"] main .table thead th,
html[data-bs-theme="light"] main table.dataTable thead th,
html[data-bs-theme="light"] main table.dataTable thead td {
    background-color: var(--core-surface-2) !important;
    color: var(--core-gold-ink) !important;
    border-color: var(--core-border) !important;
}

html[data-bs-theme="light"] main table.dataTable,
html[data-bs-theme="light"] main table.dataTable > tbody,
html[data-bs-theme="light"] main table.dataTable > tbody > tr,
html[data-bs-theme="light"] main table.dataTable > tbody > tr > td,
html[data-bs-theme="light"] main table.dataTable > tbody > tr > th {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border) !important;
}

html[data-bs-theme="light"] main table.dataTable.stripe > tbody > tr.odd > *,
html[data-bs-theme="light"] main table.dataTable.display > tbody > tr.odd > *,
html[data-bs-theme="light"] main table.dataTable > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(232, 194, 74, 0.05) !important;
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .table-hover > tbody > tr:hover > *,
[data-bs-theme="light"] .table tbody tr:hover > *,
[data-bs-theme="light"] table.dataTable tbody tr:hover,
[data-bs-theme="light"] table.dataTable tbody tr:hover > td,
html[data-bs-theme="light"] main .table-hover > tbody > tr:hover > *,
html[data-bs-theme="light"] main table.dataTable tbody tr:hover > *,
html[data-bs-theme="light"] main table.dataTable.hover > tbody > tr:hover > *,
html[data-bs-theme="light"] main table.dataTable.display > tbody > tr:hover > * {
    background-color: var(--core-gold-tint) !important;
    color: var(--core-text-strong) !important;
}

html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_length,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_filter,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_info,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_processing,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_paginate,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_filter input,
html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_length select {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border-strong) !important;
}

html[data-bs-theme="light"] main .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--core-gold-tint) !important;
    border-color: var(--core-gold) !important;
    color: var(--core-gold-ink-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Módulo Permisos
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .page-header,
[data-bs-theme="light"] .filter-section,
[data-bs-theme="light"] .usuario-card,
[data-bs-theme="light"] .stats-card,
[data-bs-theme="light"] .no-usuarios,
[data-bs-theme="light"] .usuario-card:hover,
[data-bs-theme="light"] .form-card,
[data-bs-theme="light"] .form-section,
[data-bs-theme="light"] .total-card {
    background: var(--core-surface) !important;
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border) !important;
}

[data-bs-theme="light"] .form-section {
    box-shadow: 0 4px 12px rgba(16, 19, 26, 0.08) !important;
}

[data-bs-theme="light"] .total-card {
    border-left-color: var(--core-gold) !important;
}

[data-bs-theme="light"] .page-header h2,
[data-bs-theme="light"] .usuario-nombre,
[data-bs-theme="light"] .permisos-section-title,
[data-bs-theme="light"] .info-badge,
html[data-bs-theme="light"] main .project-title {
    color: var(--core-gold-ink) !important;
}

/* Pills de Permisos: pasan de contorno a relleno sólido con el primario, para
   que el texto vaya en blanco. El nombre del permiso va en un <span> y la ×
   en un <button>, así que ambos tienen que forzarse (la regla general de texto
   los dejaba oscuros). */
[data-bs-theme="light"] .permiso-pill,
html[data-bs-theme="light"] main .permiso-pill,
html[data-bs-theme="light"] main .permiso-pill span,
html[data-bs-theme="light"] main .permiso-pill .btn-remove,
html[data-bs-theme="light"] main .permiso-pill i {
    background-color: var(--core-gold-ink) !important;
    border-color: var(--core-gold-ink) !important;
    color: #ffffff !important;
}

html[data-bs-theme="light"] main .permiso-pill span,
html[data-bs-theme="light"] main .permiso-pill i {
    background-color: transparent !important;
}

html[data-bs-theme="light"] main .permiso-pill .btn-remove:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="light"] .info-badge {
    background: var(--core-gold-tint) !important;
    border-color: var(--core-gold) !important;
}

[data-bs-theme="light"] .usuario-username,
[data-bs-theme="light"] .stats-label,
[data-bs-theme="light"] .permiso-empty,
[data-bs-theme="light"] .no-usuarios,
[data-bs-theme="light"] .total-label {
    color: var(--core-muted) !important;
}

[data-bs-theme="light"] .stats-number {
    color: var(--core-gold-ink) !important;
}

[data-bs-theme="light"] .usuario-header,
[data-bs-theme="light"] .form-section,
html[data-bs-theme="light"] main .form-header {
    border-bottom-color: var(--core-border) !important;
}

[data-bs-theme="light"] .empty-permisos {
    background-color: var(--core-subtle-2) !important;
    color: var(--core-muted) !important;
}

[data-bs-theme="light"] .form-actions {
    background: var(--core-surface-2) !important;
}

[data-bs-theme="light"] .section-title,
[data-bs-theme="light"] .form-group label,
[data-bs-theme="light"] .total-value,
html[data-bs-theme="light"] main .divTotal {
    color: var(--core-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nuevo Proyecto / tableros / Gantt
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-bs-theme="light"] main .project-form-container,
html[data-bs-theme="light"] main .gantt-inner-wrapper,
html[data-bs-theme="light"] main .kanban-column,
html[data-bs-theme="light"] main .task-card,
html[data-bs-theme="light"] main .scrum-column,
html[data-bs-theme="light"] main .scrum-column-header,
html[data-bs-theme="light"] main .scrum-task-card,
html[data-bs-theme="light"] main .upload-area,
html[data-bs-theme="light"] main .table-container {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
    border-color: var(--core-border) !important;
}

html[data-bs-theme="light"] main .project-form-container .form-control,
html[data-bs-theme="light"] main .scrum-task-actions button {
    background-color: var(--core-surface) !important;
    border-color: var(--core-border-strong) !important;
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .gantt_container,
[data-bs-theme="light"] .gantt_layout,
[data-bs-theme="light"] .gantt_layout_root,
[data-bs-theme="light"] .gantt_layout_cell,
[data-bs-theme="light"] .gantt_layout_y,
[data-bs-theme="light"] .gantt_grid,
[data-bs-theme="light"] .gantt_grid_data,
[data-bs-theme="light"] .gantt_task,
[data-bs-theme="light"] .gantt_data_area,
[data-bs-theme="light"] .gantt_grid_scale,
[data-bs-theme="light"] .gantt_task_scale {
    background-color: var(--core-surface) !important;
    color: var(--core-text) !important;
}

[data-bs-theme="light"] .gantt_grid_scale,
[data-bs-theme="light"] .gantt_task_scale,
[data-bs-theme="light"] .gantt_scale_cell,
[data-bs-theme="light"] .gantt_grid_head_cell {
    color: var(--core-gold-ink) !important;
    border-color: var(--core-border) !important;
}

[data-bs-theme="light"] .gantt_grid_data .gantt_cell,
[data-bs-theme="light"] .gantt_tree_content,
[data-bs-theme="light"] .gantt_task_row,
[data-bs-theme="light"] .gantt_row,
[data-bs-theme="light"] .gantt_layout_cell_border_left,
[data-bs-theme="light"] .gantt_layout_cell_border_top,
[data-bs-theme="light"] .gantt_layout_cell_border_right,
[data-bs-theme="light"] .gantt_layout_cell_border_bottom {
    color: var(--core-text) !important;
    border-color: var(--core-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chips y badges — las variantes del oscuro son pasteles pensados para fondo
   negro; sobre blanco se sustituyen por el mismo matiz en versión oscura.
   ═══════════════════════════════════════════════════════════════════════════ */

/* coreEmpresa.css pone el texto de TODO .badge en blanco (pensado para fondos
   oscuros); un badge sin clase bg-* quedaría invisible sobre tarjeta blanca. */
html[data-bs-theme="light"] main .badge:not([class*="bg-"]):not([class*="text-bg-"]),
html[data-bs-theme="light"] main span.badge:not([class*="bg-"]):not([class*="text-bg-"]) {
    color: var(--core-text) !important;
}

html[data-bs-theme="light"] main .badge.bg-white,
html[data-bs-theme="light"] main .badge.bg-light.text-muted,
html[data-bs-theme="light"] main .badge.border {
    background-color: var(--core-gold-tint) !important;
    border-color: var(--core-gold) !important;
    color: var(--core-gold-ink) !important;
}

html[data-bs-theme="light"] main .etapa-chip-inicio,
html[data-bs-theme="light"] main .etapa-chip-cotizacion   { color: #1d5fb8 !important; }
html[data-bs-theme="light"] main .etapa-chip-terminado,
html[data-bs-theme="light"] main .etapa-chip-prospeccion  { color: #6b3fd4 !important; }
html[data-bs-theme="light"] main .etapa-chip-ejecucion     { color: #a35f06 !important; }
html[data-bs-theme="light"] main .etapa-chip-propuesta     { color: #8a6508 !important; }
html[data-bs-theme="light"] main .etapa-chip-negociacion   { color: #b3560a !important; }
html[data-bs-theme="light"] main .etapa-chip-cerrado,
html[data-bs-theme="light"] main .etapa-chip-cierre        { color: #0f7a56 !important; }
html[data-bs-theme="light"] main .etapa-chip-convertida    { color: #0f7a56 !important; }
html[data-bs-theme="light"] main .etapa-chip-sin           { color: #5b6673 !important; }

html[data-bs-theme="light"] main .role-creador     { background: rgba(59, 130, 246, .12) !important; color: #1d5fb8 !important; }
html[data-bs-theme="light"] main .role-responsable { background: rgba(139, 92, 246, .12) !important; color: #6b3fd4 !important; }
html[data-bs-theme="light"] main .role-coordinador { background: rgba(16, 185, 129, .12) !important; color: #0f7a56 !important; }
html[data-bs-theme="light"] main .role-vendedor    { background: rgba(249, 115, 22, .12) !important; color: #b3560a !important; }
html[data-bs-theme="light"] main .role-cotizador   { background: rgba(236, 72, 153, .12) !important; color: #b32a72 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Misceláneos
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .dropdown-divider,
[data-bs-theme="light"] hr {
    border-color: var(--core-border);
}

/* El acento dorado de los modales (iconos de input, foco) debe ser legible */
html[data-bs-theme="light"] .modal {
    --primary-color: #8a6508;
    --primary-hover: #6f5206;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard del usuario — los acentos de dashboard-usuario.css están fijados
   sin condicionar el tema y se eligieron para fondo oscuro (pasteles). Sobre
   tarjeta blanca se sustituyen por el mismo matiz oscurecido.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-bs-theme="light"] .kpi-card-primary .kpi-icon-wrap,
html[data-bs-theme="light"] .fin-margen {
    color: #8a6508 !important;
}

html[data-bs-theme="light"] .kpi-card-secondary .kpi-icon-wrap,
html[data-bs-theme="light"] .fin-facturado,
html[data-bs-theme="light"] .badge-estatus.en-curso {
    color: #0e7490 !important;
}

html[data-bs-theme="light"] .kpi-card-success .kpi-icon-wrap,
html[data-bs-theme="light"] .kpi-trend.up,
html[data-bs-theme="light"] .fin-cobrado,
html[data-bs-theme="light"] .badge-estatus.cerrado,
html[data-bs-theme="light"] .ganancia-mes-col {
    color: #0f7a56 !important;
}

html[data-bs-theme="light"] .kpi-trend.down,
html[data-bs-theme="light"] .fin-pendiente {
    color: #c22a37 !important;
}

html[data-bs-theme="light"] .fin-por-facturar,
html[data-bs-theme="light"] .badge-estatus.en-pausa {
    color: #a35f06 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPPORTUNITY — tabs y nodos de timeline

   1) Tabs: el icono va ARRIBA del texto, igual que en el tema estándar.
      core-theme.css ya lo hacía, pero sólo dentro de [data-bs-theme="dark"].

   2) Nodos redondos con fondo sólido (timeline vertical, pipeline horizontal,
      pasos): cada componente fija su propio color de texto para contrastar con
      su fondo, y el icono lo hereda vía `.vtl-dot i { color: inherit }`. Pero
      `main div, main span { color: … !important }` —regla de coreEmpresa.css,
      replicada arriba para el claro— pisa ese color y el icono sale oscuro
      sobre el círculo de color (icono negro sobre el café del primario).
      Aquí se restituye el color por estado, con !important para ganarle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sólo los tabs que traen el icono en d-block (Opportunity y Proyectos, que
   usan .nav-tabs-bordered). Los de RH, Panel de Usuario e Inventario llevan el
   icono en línea a propósito y no deben apilarse. */
[data-bs-theme="light"] .nav-tabs-bordered .nav-link[data-bs-toggle="tab"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem;
}

/* Tab activo: su fondo es var(--primary-color) —el dorado oscuro— así que el
   icono debe ir blanco como el texto. Sin esto queda café sobre café. */
html[data-bs-theme="light"] .nav-tabs-bordered .nav-link.active,
html[data-bs-theme="light"] .nav-tabs-bordered .nav-link.active i,
html[data-bs-theme="light"] .nav-tabs-bordered .nav-link.active span {
    color: #ffffff !important;
}

/* ── Timeline vertical (Opportunity › Home): todos los dots llevan fondo de
      color sólido (categoría, completado o activo) → icono blanco ── */
html[data-bs-theme="light"] main .vtl-item[class*="vtl-cat-"] .vtl-dot,
html[data-bs-theme="light"] main .vtl-item[class*="vtl-cat-"] .vtl-dot i,
html[data-bs-theme="light"] main .vtl-item.vtl-completed .vtl-dot,
html[data-bs-theme="light"] main .vtl-item.vtl-completed .vtl-dot i,
html[data-bs-theme="light"] main .vtl-item.vtl-active .vtl-dot,
html[data-bs-theme="light"] main .vtl-item.vtl-active .vtl-dot i {
    color: #ffffff !important;
}

/* ── Pipeline horizontal y timeline compacto de etapas ── */
html[data-bs-theme="light"] #main.opd-page .pipeline-step.completed .pip-node,
html[data-bs-theme="light"] #main.opd-page .pipeline-step.completed .pip-node i,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card.completed .sc-node,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card.completed .sc-node i {
    color: #ffffff !important;
}

/* En curso: el nodo va hueco, con el primario como borde y texto */
html[data-bs-theme="light"] #main.opd-page .pipeline-step.active .pip-node,
html[data-bs-theme="light"] #main.opd-page .pipeline-step.active .pip-node i,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card.active .sc-node,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card.active .sc-node i {
    color: var(--core-gold-ink) !important;
}

/* Pendientes: nodo hueco en gris tenue */
html[data-bs-theme="light"] #main.opd-page .pipeline-step.future .pip-node,
html[data-bs-theme="light"] #main.opd-page .pipeline-step.future .pip-node i,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card:not(.completed):not(.active) .sc-node,
html[data-bs-theme="light"] #main.opd-page .opd-timeline .stage-card:not(.completed):not(.active) .sc-node i {
    color: var(--core-muted) !important;
}

/* ── Pasos con icono circular de fondo sólido (.steps .step) ── */
html[data-bs-theme="light"] main .steps .step.completed .step-icon,
html[data-bs-theme="light"] main .steps .step.completed .step-icon i,
html[data-bs-theme="light"] main .etapa-link.active .step-icon,
html[data-bs-theme="light"] main .etapa-link.active .step-icon i {
    color: #ffffff !important;
}

/* ── Calendario: el día con evento lleva fondo de color por estilo inline
      (background: var(--primary-color)); su `color:#fff` lo pisaba la regla
      general de texto y el número salía oscuro sobre el café. ── */
html[data-bs-theme="light"] main .day.has-ev,
html[data-bs-theme="light"] main .crm-cal-grid .day.has-ev,
html[data-bs-theme="light"] main .opd-cal .day.has-ev {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES — separación icono/texto y contraste del contenido

   1) Igual que en el tema oscuro (core-theme.css): el botón pasa a inline-flex
      con gap, así el icono nunca queda pegado al texto. Las utilidades me-*/ms-*
      del icono se neutralizan para que el espacio no se duplique.

   2) Lo que va dentro de un botón (span/i) hereda SU color. Sin esto, la regla
      `main span { color: … !important }` pinta de oscuro la etiqueta de los
      botones de fondo sólido — por eso el botón de Excel salía con letra oscura
      sobre el verde (DataTables envuelve el texto en un <span>).
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

[data-bs-theme="light"] .btn > i[class*="me-"],
[data-bs-theme="light"] .btn > i[class*="ms-"] {
    margin-inline: 0 !important;
}

html[data-bs-theme="light"] main .btn span,
html[data-bs-theme="light"] main .btn i,
html[data-bs-theme="light"] main .dt-button span,
html[data-bs-theme="light"] main .dt-button i {
    color: inherit !important;
}

/* Excel: blanco garantizado sobre el verde, viva o no dentro de <main> */
[data-bs-theme="light"] #btnExportExcel,
[data-bs-theme="light"] #btnExportExcel span,
[data-bs-theme="light"] #btnExportExcel i,
[data-bs-theme="light"] .btn-excel,
[data-bs-theme="light"] .btn-excel span,
[data-bs-theme="light"] .btn-excel i,
[data-bs-theme="light"] .buttons-excel,
[data-bs-theme="light"] .buttons-excel span,
[data-bs-theme="light"] .buttons-excel i {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALES — botón de cierre (X)

   coreEmpresa.css saca la X fuera de la esquina del modal
   (`transform: translate(23px, -25px)` + posición absoluta) y dibuja el aspa
   con un ::before enmascarado. core-theme.css lo corregía sólo para el oscuro;
   aquí va el equivalente claro: X dentro de la cabecera, en su sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] .modal .btn-close {
    transform: none;
    filter: none;
    background-color: #5b6673;
    background-image: none;
    box-shadow: none;
    padding: 0.25em 0.25em;
    opacity: 0.7;
    -webkit-mask-image: var(--bs-btn-close-bg);
    mask-image: var(--bs-btn-close-bg);
    -webkit-mask-size: 1em;
    mask-size: 1em;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[data-bs-theme="light"] .modal .btn-close:hover,
[data-bs-theme="light"] .modal .btn-close:focus,
[data-bs-theme="light"] .modal .btn-close:active {
    transform: none;
    filter: none;
    background-color: #10131a;
    opacity: 1;
}

[data-bs-theme="light"] .modal .modal-header .btn-close {
    position: relative;
    inset-block-start: auto;
    inset-inline-end: auto;
}

[data-bs-theme="light"] .modal .btn-close::before {
    display: none;
}

/* Modal "Editar usuario": coreEmpresa.css le mete 1.5rem de padding a todo
   .tab-content, y sumado al margen el modal crece de más. */
html[data-bs-theme="light"] .modal #myTabContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN (LoginLayout + modules/Login/Index.css)

   Index.css ya trae esquema claro y oscuro, pero su esquema claro usa azul
   (#0d6efd) porque LoginLayout no carga los CSS de Core y --primary-color
   queda sin definir. Aquí se fijan las variables --login-* con el dorado.

   El botón conserva el dorado BRILLANTE con texto oscuro (#1c1c22 sobre
   #e8c24a ≈ 10:1): es el elemento de marca de la pantalla. Los iconos y el
   spinner, que van sobre blanco, usan el dorado oscurecido.

   Requisito de orden: este archivo debe cargarse DESPUÉS de Index.css, ya que
   sus variables viven en :root (misma especificidad que [data-bs-theme]).
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] {
    --login-primary: #e8c24a;
    --login-primary-light: #f4d877;
    --login-primary-dark: #c79b2a;
    --login-primary-rgb: 232, 194, 74;
    --login-ink: #1c1c22;

    --login-bg: var(--core-subtle);
    --login-panel: #ffffff;
    --login-text: #1f2430;
    --login-muted: rgba(28, 28, 34, 0.55);
    --login-input-bg: var(--core-subtle);
    --login-input-bg-focus: var(--core-subtle-2);
    --login-input-border: rgba(16, 19, 26, 0.15);
    --login-input-text: #1c1c22;
    --login-glow: rgba(232, 194, 74, 0.10);
}

/* El logotipo es dorado sobre transparente: sobre el panel blanco necesita
   contorno, no la sombra difusa pensada para fondo oscuro. */
[data-bs-theme="light"] .login-brand-image {
    filter: drop-shadow(0 1px 1px rgba(16, 19, 26, 0.45));
}

/* Iconos y spinner sobre blanco: dorado oscurecido para que se lean */
[data-bs-theme="light"] .login-input-group:focus-within .login-input-icon,
[data-bs-theme="light"] .login-visibility-toggle:hover,
[data-bs-theme="light"] .login-link:hover {
    color: var(--core-gold-ink);
}

[data-bs-theme="light"] .swal2-loader {
    border-color: var(--core-gold-ink) transparent var(--core-gold-ink) transparent !important;
}