/*
 * Capa comun de los skins del catalogo (fase 1). Ver ~/context/gestioncebi/ui-3.0/Catalogo-skins-SaaS.md
 *
 * Como funciona:
 *   - Cada skin (skins/<nombre>.css) SOLO define tokens --gc-* para claro y oscuro, y como mucho
 *     cuatro retoques propios. Esta hoja traduce esos tokens a Bootstrap 5.3 (--bs-*) y AdminLTE 4
 *     (--lte-*) y pule los componentes que usa la app.
 *   - Todo cuelga de html[data-gc-skin] (especificidad 0,1,1 + lo que siga): asi gana a los :root y a
 *     las clases sueltas con !important que pinta PaletaLte4 y a la cabecera por tenant de lte4.php.
 *     Sin el atributo, esta hoja no hace nada.
 *   - Lo derivado (fondos suaves de estados, hover, anillo de foco) se calcula con color-mix(), asi
 *     que un skin solo da los colores base. Navegadores: Chrome/Edge 111+, Firefox 113+, Safari 16.2+.
 *   - La entidad (IDUE / AMALTEA) llega como --gc-tenant desde lte4.php; los skins la usan en la
 *     franja superior y en la marca, no en toda la barra.
 */

/* ---------- Fuentes autoalojadas (SIL OFL 1.1, ver fonts/gc/LEEME.txt). Solo se descarga la que use el skin. */
@font-face { font-family: "GC Inter"; src: url("../../fonts/gc/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Geist"; src: url("../../fonts/gc/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Geist Mono"; src: url("../../fonts/gc/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Plex Sans"; src: url("../../fonts/gc/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Plex Sans"; src: url("../../fonts/gc/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Plex Sans"; src: url("../../fonts/gc/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Plex Mono"; src: url("../../fonts/gc/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Plex Mono"; src: url("../../fonts/gc/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GC Source Serif"; src: url("../../fonts/gc/source-serif-4-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* ---------- 0. Valores por defecto de forma y densidad (los skins pisan lo que cambian; los colores
   no tienen defecto: cada skin los da todos, en claro y en oscuro) */
html[data-gc-skin] {
    --gc-font-sans: "GC Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gc-font-display: var(--gc-font-sans);
    --gc-font-mono: "GC Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --gc-font-features: "cv11", "calt";
    --gc-tracking: -0.003em;
    --gc-heading-weight: 600;
    --gc-heading-tracking: -0.012em;
    --gc-root-size: 14px;
    --gc-font-size: .9375rem;
    --gc-line-height: 1.5;
    --gc-title-size: 1.375rem;
    --gc-card-title-size: .9375rem;
    --gc-table-size: .875rem;
    --gc-table-head-size: .8125rem;
    --gc-label-size: .8125rem;
    --gc-control-size: .875rem;
    --gc-badge-size: .75rem;
    --gc-menu-size: .875rem;
    --gc-radius-sm: 4px;
    --gc-radius: 6px;
    --gc-radius-lg: 8px;
    --gc-badge-radius: 999px;
    --gc-marker-radius: 2px;
    --gc-control-h: 2.25rem;
    --gc-control-py: .375rem;
    --gc-control-px: .625rem;
    --gc-btn-py: .375rem;
    --gc-btn-px: .75rem;
    --gc-cell-py: .5rem;
    --gc-cell-px: .75rem;
    --gc-card-px: 1rem;
    --gc-card-py: 1rem;
    --gc-card-head-py: .75rem;
    --gc-menu-py: .4rem;
    --gc-header-h: 3.5rem;
    --gc-sidebar-width: 248px;
    --gc-tenant-strip: 3px;
    --gc-table-head-transform: none;
    --gc-table-head-tracking: 0;
    --gc-table-vline: 0;
    --gc-logo-filter: none;
    --gc-sidebar-active-shadow: none;
    --gc-btn-shadow: none;
    --gc-input-shadow: none;
}

/* ---------- 1. Derivados de los tokens del skin */
html[data-gc-skin] {
    /* --gc-tenant NO se declara aqui: lo pone lte4.php en :root y esta regla le ganaria. Se usa con
       var(--gc-tenant, ...) para el login, que no pasa por lte4.php. */
    --gc-accent-hover: color-mix(in oklab, var(--gc-accent) 88%, var(--gc-fg));
    --gc-accent-soft: color-mix(in oklab, var(--gc-accent) 12%, var(--gc-surface));
    --gc-accent-border: color-mix(in oklab, var(--gc-accent) 35%, var(--gc-surface));
    --gc-focus-ring: 0 0 0 3px color-mix(in oklab, var(--gc-accent) 28%, transparent);
    --gc-success-soft: color-mix(in oklab, var(--gc-success) 13%, var(--gc-surface));
    --gc-warning-soft: color-mix(in oklab, var(--gc-warning) 16%, var(--gc-surface));
    --gc-danger-soft: color-mix(in oklab, var(--gc-danger) 12%, var(--gc-surface));
    --gc-info-soft: color-mix(in oklab, var(--gc-info) 13%, var(--gc-surface));
    --gc-neutral-soft: var(--gc-surface-2);
    --gc-success-line: color-mix(in oklab, var(--gc-success) 32%, var(--gc-surface));
    --gc-warning-line: color-mix(in oklab, var(--gc-warning) 38%, var(--gc-surface));
    --gc-danger-line: color-mix(in oklab, var(--gc-danger) 32%, var(--gc-surface));
    --gc-info-line: color-mix(in oklab, var(--gc-info) 32%, var(--gc-surface));

    /* ---------- 2. Bootstrap 5.3 */
    font-size: var(--gc-root-size);
    --bs-font-sans-serif: var(--gc-font-sans);
    --bs-font-monospace: var(--gc-font-mono);
    --bs-body-font-family: var(--gc-font-sans);
    --bs-body-font-size: var(--gc-font-size);
    --bs-body-line-height: var(--gc-line-height);
    --bs-body-bg: var(--gc-surface);
    --bs-body-color: var(--gc-fg);
    --bs-body-color-rgb: var(--gc-fg-rgb);
    --bs-body-bg-rgb: var(--gc-surface-rgb);
    --bs-emphasis-color: var(--gc-fg);
    --bs-heading-color: var(--gc-fg);
    --bs-secondary-color: var(--gc-fg-muted);
    --bs-tertiary-color: var(--gc-fg-subtle);
    --bs-secondary-bg: var(--gc-surface-2);
    --bs-tertiary-bg: var(--gc-bg);
    --bs-border-color: var(--gc-border);
    --bs-border-color-translucent: var(--gc-border);
    --bs-border-radius: var(--gc-radius);
    --bs-border-radius-sm: var(--gc-radius-sm);
    --bs-border-radius-lg: var(--gc-radius-lg);
    --bs-border-radius-xl: var(--gc-radius-lg);
    --bs-border-radius-xxl: var(--gc-radius-lg);
    --bs-box-shadow: var(--gc-shadow);
    --bs-box-shadow-sm: var(--gc-shadow-sm);
    --bs-box-shadow-lg: var(--gc-shadow-lg);
    --bs-link-color: var(--gc-link);
    --bs-link-hover-color: color-mix(in oklab, var(--gc-link) 80%, var(--gc-fg));
    --bs-link-color-rgb: var(--gc-link-rgb);
    --bs-link-hover-color-rgb: var(--gc-link-rgb);
    --bs-primary: var(--gc-accent);
    --bs-primary-rgb: var(--gc-accent-rgb);
    --bs-success: var(--gc-success);
    --bs-warning: var(--gc-warning);
    --bs-danger: var(--gc-danger);
    --bs-info: var(--gc-info);
    --bs-secondary: var(--gc-fg-muted);
    --bs-primary-text-emphasis: var(--gc-accent-text);
    --bs-success-text-emphasis: var(--gc-success-text);
    --bs-warning-text-emphasis: var(--gc-warning-text);
    --bs-danger-text-emphasis: var(--gc-danger-text);
    --bs-info-text-emphasis: var(--gc-info-text);
    --bs-primary-bg-subtle: var(--gc-accent-soft);
    --bs-success-bg-subtle: var(--gc-success-soft);
    --bs-warning-bg-subtle: var(--gc-warning-soft);
    --bs-danger-bg-subtle: var(--gc-danger-soft);
    --bs-info-bg-subtle: var(--gc-info-soft);
    --bs-primary-border-subtle: var(--gc-accent-border);
    --bs-success-border-subtle: var(--gc-success-line);
    --bs-warning-border-subtle: var(--gc-warning-line);
    --bs-danger-border-subtle: var(--gc-danger-line);
    --bs-info-border-subtle: var(--gc-info-line);
    --bs-focus-ring-color: color-mix(in oklab, var(--gc-accent) 28%, transparent);
    --bs-form-valid-color: var(--gc-success-text);
    --bs-form-valid-border-color: var(--gc-success);
    --bs-form-invalid-color: var(--gc-danger-text);
    --bs-form-invalid-border-color: var(--gc-danger);
    --bs-highlight-bg: var(--gc-warning-soft);
    --bs-code-color: var(--gc-accent-text);

    /* ---------- 3. AdminLTE 4 */
    --lte-sidebar-width: var(--gc-sidebar-width);
    --lte-sidebar-color: var(--gc-sidebar-fg-muted);
    --lte-sidebar-hover-color: var(--gc-sidebar-fg);
    --lte-sidebar-hover-bg: var(--gc-sidebar-hover);
    --lte-sidebar-active-color: var(--gc-sidebar-fg);
    --lte-sidebar-menu-active-bg: var(--gc-sidebar-active-bg);
    --lte-sidebar-menu-active-color: var(--gc-sidebar-active-fg);
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: var(--gc-sidebar-fg-muted);
    --lte-sidebar-submenu-hover-bg: var(--gc-sidebar-hover);
    --lte-sidebar-submenu-hover-color: var(--gc-sidebar-fg);
    --lte-sidebar-submenu-active-bg: var(--gc-sidebar-active-bg);
    --lte-sidebar-submenu-active-color: var(--gc-sidebar-active-fg);
    --lte-sidebar-header-color: var(--gc-sidebar-fg-subtle);
    color-scheme: light;
    accent-color: var(--gc-accent);
}
html[data-gc-skin][data-bs-theme="dark"] { color-scheme: dark; }

/* ---------- 4. Base tipografica */
html[data-gc-skin] body {
    background: var(--gc-bg) !important;
    color: var(--gc-fg);
    font-family: var(--gc-font-sans);
    font-feature-settings: var(--gc-font-features);
    letter-spacing: var(--gc-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html[data-gc-skin] ::selection { background: color-mix(in oklab, var(--gc-accent) 26%, transparent); }
html[data-gc-skin] h1, html[data-gc-skin] h2, html[data-gc-skin] h3,
html[data-gc-skin] h4, html[data-gc-skin] h5, html[data-gc-skin] h6 {
    font-family: var(--gc-font-display);
    font-weight: var(--gc-heading-weight);
    letter-spacing: var(--gc-heading-tracking);
    color: var(--gc-fg);
}
html[data-gc-skin] .app-content-header h3 { font-size: var(--gc-title-size); }
html[data-gc-skin] code, html[data-gc-skin] kbd, html[data-gc-skin] pre, html[data-gc-skin] .font-monospace { font-family: var(--gc-font-mono); }
html[data-gc-skin] .text-muted,
html[data-gc-skin] .text-body-secondary,
html[data-gc-skin] .text-secondary { color: var(--gc-fg-muted) !important; }
html[data-gc-skin] small, html[data-gc-skin] .small { font-size: .8125em; }
html[data-gc-skin] a { text-underline-offset: .18em; }
html[data-gc-skin] hr { border-color: var(--gc-border); opacity: 1; }
html[data-gc-skin] :focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; }
html[data-gc-skin] * { scrollbar-width: thin; scrollbar-color: var(--gc-border-strong) transparent; }

/* ---------- 5. Cabecera, menu y marco */
html[data-gc-skin] .app-header {
    background: var(--gc-header-bg) !important;
    color: var(--gc-header-fg);
    border-bottom: 1px solid var(--gc-header-border) !important;
    box-shadow: inset 0 var(--gc-tenant-strip) 0 var(--gc-tenant, transparent) !important;
    min-height: var(--gc-header-h);
}
html[data-gc-skin] .app-header > .container-fluid > .navbar-nav > .nav-item > .nav-link {
    color: var(--gc-header-fg-muted);
    border-radius: var(--gc-radius-sm);
}
html[data-gc-skin] .app-header > .container-fluid > .navbar-nav > .nav-item > .nav-link:hover,
html[data-gc-skin] .app-header > .container-fluid > .navbar-nav > .nav-item > .nav-link:focus {
    color: var(--gc-header-fg);
    background-color: var(--gc-header-hover);
}
html[data-gc-skin] .app-header .navbar-badge { font-size: .625rem; font-weight: 600; padding: .15em .4em; }
html[data-gc-skin] .app-sidebar {
    background: var(--gc-sidebar-bg) !important;
    color: var(--gc-sidebar-fg);
    border-right: 1px solid var(--gc-sidebar-border);
    box-shadow: none !important;
}
html[data-gc-skin] .app-sidebar .sidebar-brand {
    background: var(--gc-sidebar-brand-bg) !important;
    border-bottom: 1px solid var(--gc-sidebar-border);
    box-shadow: inset 0 var(--gc-tenant-strip) 0 var(--gc-tenant, transparent);
    height: var(--gc-header-h);
}
html[data-gc-skin] .app-sidebar .sidebar-brand,
html[data-gc-skin] .app-sidebar .brand-text { color: var(--gc-sidebar-fg) !important; }
html[data-gc-skin] .app-sidebar .brand-image { filter: var(--gc-logo-filter); }
html[data-gc-skin] .app-sidebar .sidebar-menu > .nav-item > .nav-link,
html[data-gc-skin] .app-sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: var(--gc-radius-sm);
    padding: var(--gc-menu-py) .625rem;
    margin: 1px .5rem;
    width: auto;
    font-size: var(--gc-menu-size);
    font-weight: 450;
}
html[data-gc-skin] .app-sidebar .nav-link,
html[data-gc-skin] .app-sidebar .nav-link p,
html[data-gc-skin] .app-sidebar .nav-link i { color: var(--gc-sidebar-fg-muted) !important; }
html[data-gc-skin] .app-sidebar .nav-link i { opacity: .9; }
html[data-gc-skin] .app-sidebar .nav-link:hover { background-color: var(--gc-sidebar-hover) !important; }
html[data-gc-skin] .app-sidebar .nav-link:hover,
html[data-gc-skin] .app-sidebar .nav-link:hover p,
html[data-gc-skin] .app-sidebar .nav-link:hover i { color: var(--gc-sidebar-fg) !important; }
html[data-gc-skin] .app-sidebar .nav-link.active { background-color: var(--gc-sidebar-active-bg) !important; box-shadow: var(--gc-sidebar-active-shadow); }
html[data-gc-skin] .app-sidebar .nav-link.active,
html[data-gc-skin] .app-sidebar .nav-link.active p,
html[data-gc-skin] .app-sidebar .nav-link.active i { color: var(--gc-sidebar-active-fg) !important; font-weight: 550; }
html[data-gc-skin] .app-sidebar .nav-header {
    color: var(--gc-sidebar-fg-subtle) !important;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 1rem 1.125rem .375rem;
}
html[data-gc-skin] .app-sidebar .badge { font-size: .625rem; }
/* Submenus con guia vertical (patron de Linear). Una linea fina baja desde el
   centro del icono del padre (.5rem de margen + .625rem de padding + la mitad
   de los 1.5rem de .nav-icon); los hijos van sin icono, un punto mas pequenos,
   y la pagina activa pinta un tramo de la linea con el acento de la entidad.
   El padre de la activa (Lte4Menu le pone .active) se queda en negrita sin
   relieve, para que el relieve solo marque una pagina. Anula el panel
   oscurecido y el borde blanco de lte4-compat.css, que eran del menu oscuro.
   Sin --gc-sidebar-guide en el skin, la guia sale del texto del menu al 28 %,
   que se ve igual sobre menu claro (lineal, vertice) que oscuro (tabler). */
html[data-gc-skin] .app-sidebar .nav-treeview {
    background: none;
    margin: 1px 0 6px calc(1.875rem - .5px);
    border-left: 1px solid var(--gc-sidebar-guide, color-mix(in srgb, var(--gc-sidebar-fg-muted) 28%, transparent));
}
html[data-gc-skin] .app-sidebar .nav-treeview .nav-treeview { margin-left: calc(6px + .625rem); }
html[data-gc-skin] .app-sidebar .nav-treeview > .nav-item > .nav-link {
    margin: 1px .5rem 1px 6px;
    font-size: calc(var(--gc-menu-size) - .03125rem);
    border-left: 0;
}
html[data-gc-skin] .app-sidebar .nav-treeview .nav-link > .nav-icon { display: none; }
html[data-gc-skin] .app-sidebar .nav-treeview .nav-link > p { padding-left: 0; }
html[data-gc-skin] .app-sidebar .nav-treeview .nav-item:not(:has(> .nav-treeview)) > .nav-link.active::before {
    content: "";
    position: absolute;
    left: -7.5px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: var(--gc-accent);
}
html[data-gc-skin] .app-sidebar .nav-item:has(> .nav-treeview) > .nav-link.active:not(:hover) {
    background-color: transparent !important;
    box-shadow: none;
}
html[data-gc-skin] .app-main { background: var(--gc-bg); }
html[data-gc-skin] .app-content-header { padding: 1rem 0 .5rem; }
html[data-gc-skin] .breadcrumb { font-size: .8125rem; --bs-breadcrumb-divider-color: var(--gc-fg-subtle); --bs-breadcrumb-item-active-color: var(--gc-fg-muted); }
html[data-gc-skin] .app-footer { background: var(--gc-bg) !important; color: var(--gc-fg-subtle); border-top: 1px solid var(--gc-border); font-size: .75rem; }

/* ---------- 6. Tarjetas (card / box) */
html[data-gc-skin] .card {
    --bs-card-bg: var(--gc-surface);
    --bs-card-border-color: var(--gc-border);
    --bs-card-border-radius: var(--gc-radius-lg);
    --bs-card-inner-border-radius: calc(var(--gc-radius-lg) - 1px);
    --bs-card-cap-bg: var(--gc-card-head-bg);
    --bs-card-cap-padding-y: var(--gc-card-head-py);
    --bs-card-cap-padding-x: var(--gc-card-px);
    --bs-card-spacer-y: var(--gc-card-py);
    --bs-card-spacer-x: var(--gc-card-px);
    border: 1px solid var(--gc-border);
    box-shadow: var(--gc-card-shadow);
}
html[data-gc-skin] .card > .card-header {
    background: var(--gc-card-head-bg);
    color: var(--gc-fg);
    border-bottom: 1px solid var(--gc-border);
}
html[data-gc-skin] .card-title { font-size: var(--gc-card-title-size); font-weight: 600; letter-spacing: var(--gc-heading-tracking); }
/* card-outline (AdminLTE: borde superior grueso de color) y card-<color> con cabecera rellena: en los skins
   el color de la familia de datos (Patron-de-formularios-LTE4) pasa a una marca junto al titulo. */
html[data-gc-skin] .card.card-outline { border-top: 1px solid var(--gc-border) !important; }
html[data-gc-skin] .card[class*="card-"]:not(.card-body):not(.card-header) > .card-header {
    background: var(--gc-card-head-bg) !important;
    color: var(--gc-fg) !important;
}
html[data-gc-skin] .card[class*="card-"] > .card-header .card-title::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem;
    border-radius: var(--gc-marker-radius); vertical-align: .08em;
    background: var(--gc-marker, transparent);
}
html[data-gc-skin] .card.card-primary { --gc-marker: var(--gc-accent); }
html[data-gc-skin] .card.card-info { --gc-marker: var(--gc-info); }
html[data-gc-skin] .card.card-success { --gc-marker: var(--gc-success); }
html[data-gc-skin] .card.card-warning { --gc-marker: var(--gc-warning); }
html[data-gc-skin] .card.card-danger { --gc-marker: var(--gc-danger); }
html[data-gc-skin] .card.card-secondary { --gc-marker: var(--gc-fg-subtle); }
html[data-gc-skin] .card-header .btn-tool { color: var(--gc-fg-subtle); }
html[data-gc-skin] .card-header .btn-tool:hover { color: var(--gc-fg); }
html[data-gc-skin] .card-footer { background: var(--gc-card-head-bg); border-top: 1px solid var(--gc-border); }

/* small-box / info-box: tarjeta neutra con la cifra grande y el icono tintado */
html[data-gc-skin] .small-box,
html[data-gc-skin] .info-box {
    background: var(--gc-surface) !important;
    color: var(--gc-fg) !important;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-card-shadow);
}
html[data-gc-skin] .small-box .inner h3,
html[data-gc-skin] .info-box .info-box-number { font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.02em; color: var(--gc-fg) !important; }
html[data-gc-skin] .small-box .inner p,
html[data-gc-skin] .info-box .info-box-text { color: var(--gc-fg-muted) !important; }
html[data-gc-skin] .small-box .small-box-icon,
html[data-gc-skin] .small-box .icon { color: var(--gc-box-icon, var(--gc-fg-subtle)) !important; opacity: .28; }
html[data-gc-skin] .small-box .small-box-footer {
    background: var(--gc-surface-2) !important; color: var(--gc-fg-muted) !important;
    border-top: 1px solid var(--gc-border); border-radius: 0 0 var(--gc-radius-lg) var(--gc-radius-lg);
}
html[data-gc-skin] .info-box .info-box-icon { border-radius: var(--gc-radius); background: var(--gc-box-soft, var(--gc-surface-2)) !important; color: var(--gc-box-icon, var(--gc-fg-muted)) !important; }
html[data-gc-skin] :is(.small-box, .info-box, .info-box-icon):is(.text-bg-primary, .bg-primary) { --gc-box-icon: var(--gc-accent); --gc-box-soft: var(--gc-accent-soft); }
html[data-gc-skin] :is(.small-box, .info-box, .info-box-icon):is(.text-bg-success, .bg-success) { --gc-box-icon: var(--gc-success); --gc-box-soft: var(--gc-success-soft); }
html[data-gc-skin] :is(.small-box, .info-box, .info-box-icon):is(.text-bg-warning, .bg-warning) { --gc-box-icon: var(--gc-warning); --gc-box-soft: var(--gc-warning-soft); }
html[data-gc-skin] :is(.small-box, .info-box, .info-box-icon):is(.text-bg-danger, .bg-danger) { --gc-box-icon: var(--gc-danger); --gc-box-soft: var(--gc-danger-soft); }
html[data-gc-skin] :is(.small-box, .info-box, .info-box-icon):is(.text-bg-info, .bg-info) { --gc-box-icon: var(--gc-info); --gc-box-soft: var(--gc-info-soft); }
html[data-gc-skin] .small-box :is(.text-white, .text-white-50, .text-light) { color: var(--gc-fg-muted) !important; }

/* ---------- 7. Tablas (GridView, table-sm, striped, bordered) */
html[data-gc-skin] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gc-fg);
    --bs-table-border-color: var(--gc-border);
    --bs-table-striped-bg: var(--gc-table-stripe);
    --bs-table-striped-color: var(--gc-fg);
    --bs-table-hover-bg: var(--gc-table-hover);
    --bs-table-hover-color: var(--gc-fg);
    --bs-table-active-bg: var(--gc-accent-soft);
    font-variant-numeric: tabular-nums;
    font-size: var(--gc-table-size);
    margin-bottom: 0;
}
html[data-gc-skin] .table > :not(caption) > * > * {
    padding: var(--gc-cell-py) var(--gc-cell-px);
    border-bottom-color: var(--gc-table-line);
    vertical-align: middle;
}
html[data-gc-skin] .table.table-sm > :not(caption) > * > * { padding: calc(var(--gc-cell-py) * .7) calc(var(--gc-cell-px) * .8); }
html[data-gc-skin] .table > thead > tr > th,
html[data-gc-skin] .table > thead > tr > td {
    background: var(--gc-table-head-bg);
    color: var(--gc-table-head-fg);
    font-size: var(--gc-table-head-size);
    font-weight: 550;
    text-transform: var(--gc-table-head-transform);
    letter-spacing: var(--gc-table-head-tracking);
    white-space: nowrap;
    border-bottom: 1px solid var(--gc-border) !important;
}
html[data-gc-skin] .table > thead > tr > th a { color: inherit; text-decoration: none; }
html[data-gc-skin] .table > thead > tr > th a:hover { color: var(--gc-fg); }
html[data-gc-skin] .table > thead > tr > th a.asc,
html[data-gc-skin] .table > thead > tr > th a.desc { color: var(--gc-fg); }
html[data-gc-skin] .table > thead > tr.filters > td,
html[data-gc-skin] .table > thead > tr#filters > td { background: var(--gc-surface); padding-top: .375rem; padding-bottom: .375rem; text-transform: none; }
html[data-gc-skin] .table-bordered > :not(caption) > * > * { border-width: 0 var(--gc-table-vline) 1px 0; }
html[data-gc-skin] .table-bordered > :not(caption) > * { border-width: 0; }
html[data-gc-skin] .table-bordered { border: 1px solid var(--gc-border); }
html[data-gc-skin] .table > tbody > tr:last-child > * { border-bottom-width: 0; }
html[data-gc-skin] .table td.text-end, html[data-gc-skin] .table th.text-end,
html[data-gc-skin] .table td.text-right, html[data-gc-skin] .table td[style*="right"] { font-variant-numeric: tabular-nums; }
html[data-gc-skin] .grid-view .summary { color: var(--gc-fg-muted); font-size: .75rem; margin: .25rem 0 .5rem; }
html[data-gc-skin] .grid-view .empty { color: var(--gc-fg-subtle); }
/* Paginador separado de la tabla y de los botones de debajo */
html[data-gc-skin] .grid-view .pagination { margin-top: .75rem; margin-bottom: 1rem; }
html[data-gc-skin] .card > .table-responsive,
html[data-gc-skin] .card-body > .grid-view > .table-responsive { border-radius: var(--gc-radius); }

/* ---------- 8. Formularios (ActiveForm bootstrap5, select2 krajee-bs5, input-group) */
html[data-gc-skin] .form-label,
html[data-gc-skin] .control-label,
html[data-gc-skin] label:not(.form-check-label):not(.btn) {
    font-size: var(--gc-label-size);
    font-weight: 550;
    color: var(--gc-fg-muted);
    margin-bottom: .3rem;
}
html[data-gc-skin] .form-control,
html[data-gc-skin] .form-select {
    background-color: var(--gc-input-bg);
    color: var(--gc-fg);
    border: 1px solid var(--gc-input-border);
    border-radius: var(--gc-radius);
    min-height: var(--gc-control-h);
    padding: var(--gc-control-py) var(--gc-control-px);
    font-size: var(--gc-control-size);
    box-shadow: var(--gc-input-shadow);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
html[data-gc-skin] .form-select { padding-right: 2rem; background-position: right .6rem center; }
html[data-gc-skin] .form-control-sm, html[data-gc-skin] .form-select-sm { min-height: calc(var(--gc-control-h) - 4px); font-size: .8125rem; }
html[data-gc-skin] .form-control:hover:not(:disabled):not(:focus),
html[data-gc-skin] .form-select:hover:not(:disabled):not(:focus) { border-color: var(--gc-border-strong); }
html[data-gc-skin] .form-control:focus,
html[data-gc-skin] .form-select:focus {
    border-color: var(--gc-accent) !important;
    box-shadow: var(--gc-focus-ring) !important;
    background-color: var(--gc-input-bg);
    color: var(--gc-fg);
}
html[data-gc-skin] .form-control::placeholder { color: var(--gc-fg-subtle); opacity: 1; }
html[data-gc-skin] .form-control:disabled, html[data-gc-skin] .form-select:disabled,
html[data-gc-skin] .form-control[readonly] { background-color: var(--gc-surface-2); color: var(--gc-fg-muted); border-color: var(--gc-border); box-shadow: none; }
html[data-gc-skin] .form-control.is-invalid, html[data-gc-skin] .has-error .form-control { border-color: var(--gc-danger); }
html[data-gc-skin] .invalid-feedback, html[data-gc-skin] .help-block-error { font-size: .75rem; color: var(--gc-danger-text); }
html[data-gc-skin] .form-text, html[data-gc-skin] .help-block, html[data-gc-skin] .hint-block { font-size: .75rem; color: var(--gc-fg-subtle); }
html[data-gc-skin] .input-group-text { background: var(--gc-surface-2); color: var(--gc-fg-muted); border-color: var(--gc-input-border); font-size: var(--gc-control-size); }
html[data-gc-skin] .form-check-input { border-color: var(--gc-border-strong); background-color: var(--gc-input-bg); }
html[data-gc-skin] .form-check-input:checked { background-color: var(--gc-accent) !important; border-color: var(--gc-accent) !important; }
html[data-gc-skin] .form-check-input:focus { box-shadow: var(--gc-focus-ring); border-color: var(--gc-accent); }
html[data-gc-skin] .form-check-label { font-size: var(--gc-control-size); }
html[data-gc-skin] .card-body h6.border-bottom { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--gc-fg-subtle) !important; border-color: var(--gc-border) !important; padding-bottom: .375rem; }
html[data-gc-skin] legend { font-size: .875rem; font-weight: 600; }
/* select2 (tema krajee-bs5) */
html[data-gc-skin] .select2-container--krajee-bs5 .select2-selection {
    background-color: var(--gc-input-bg); border: 1px solid var(--gc-input-border); border-radius: var(--gc-radius);
    min-height: var(--gc-control-h); font-size: var(--gc-control-size); color: var(--gc-fg); box-shadow: var(--gc-input-shadow);
}
html[data-gc-skin] .select2-container--krajee-bs5.select2-container--focus .select2-selection,
html[data-gc-skin] .select2-container--krajee-bs5.select2-container--open .select2-selection { border-color: var(--gc-accent); box-shadow: var(--gc-focus-ring); }
/* simple: el texto centrado en vertical con flex (el line-height del alto entero mas el relleno de vendor lo bajaba) y cortado antes de la flecha */
html[data-gc-skin] .select2-container--krajee-bs5 .select2-selection--single {
    display: flex; align-items: center; box-sizing: border-box; height: var(--gc-control-h);
    padding: 0 2rem 0 var(--gc-control-px); background-position: right .6rem center;
}
/* la flecha de vendor es gris oscuro fijo: en el tema oscuro, la de los .form-select oscuros de Bootstrap */
html[data-gc-skin][data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-gc-skin] .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto; min-width: 0; color: var(--gc-fg); line-height: 1.4; padding: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-gc-skin] .select2-container--krajee-bs5 .select2-selection__placeholder { color: var(--gc-fg-subtle); }
html[data-gc-skin] .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice { background: var(--gc-surface-2); border: 1px solid var(--gc-border); color: var(--gc-fg); border-radius: var(--gc-radius-sm); font-size: .75rem; }
html[data-gc-skin] .select2-container--krajee-bs5 .select2-dropdown { background: var(--gc-surface); border-color: var(--gc-border); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow-lg); color: var(--gc-fg); }
html[data-gc-skin] .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected],
html[data-gc-skin] .select2-container--krajee-bs5 .select2-results__option--highlighted { background: var(--gc-accent-soft); color: var(--gc-fg); }
html[data-gc-skin] .select2-container--krajee-bs5 .select2-search__field { background: var(--gc-input-bg); color: var(--gc-fg); border-color: var(--gc-input-border); }

/* ---------- 9. Botones */
html[data-gc-skin] .btn {
    --bs-btn-font-weight: 550;
    --bs-btn-font-size: var(--gc-control-size);
    --bs-btn-padding-y: var(--gc-btn-py);
    --bs-btn-padding-x: var(--gc-btn-px);
    --bs-btn-border-radius: var(--gc-radius);
    --bs-btn-focus-box-shadow: var(--gc-focus-ring);
    letter-spacing: var(--gc-tracking);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
html[data-gc-skin] .btn-sm, html[data-gc-skin] .btn-group-sm > .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .75rem; --bs-btn-border-radius: var(--gc-radius-sm); }
html[data-gc-skin] .btn-lg { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .9375rem; }
html[data-gc-skin] .btn-primary {
    --bs-btn-bg: var(--gc-accent); --bs-btn-border-color: var(--gc-accent); --bs-btn-color: var(--gc-accent-fg);
    --bs-btn-hover-bg: var(--gc-accent-hover); --bs-btn-hover-border-color: var(--gc-accent-hover); --bs-btn-hover-color: var(--gc-accent-fg);
    --bs-btn-active-bg: var(--gc-accent-hover); --bs-btn-active-border-color: var(--gc-accent-hover); --bs-btn-active-color: var(--gc-accent-fg);
    --bs-btn-disabled-bg: var(--gc-accent); --bs-btn-disabled-border-color: var(--gc-accent); --bs-btn-disabled-color: var(--gc-accent-fg);
    box-shadow: var(--gc-btn-shadow);
}
/* secundario = boton neutro con borde (el gris macizo de Bootstrap no existe en ninguno de los referentes) */
html[data-gc-skin] .btn-secondary, html[data-gc-skin] .btn-default, html[data-gc-skin] .btn-light, html[data-gc-skin] .btn-outline-secondary {
    --bs-btn-bg: var(--gc-surface); --bs-btn-border-color: var(--gc-input-border); --bs-btn-color: var(--gc-fg);
    --bs-btn-hover-bg: var(--gc-surface-2); --bs-btn-hover-border-color: var(--gc-border-strong); --bs-btn-hover-color: var(--gc-fg);
    --bs-btn-active-bg: var(--gc-surface-3); --bs-btn-active-border-color: var(--gc-border-strong); --bs-btn-active-color: var(--gc-fg);
    --bs-btn-disabled-bg: var(--gc-surface); --bs-btn-disabled-border-color: var(--gc-border); --bs-btn-disabled-color: var(--gc-fg-subtle);
    box-shadow: var(--gc-btn-shadow);
}
html[data-gc-skin] .btn-outline-primary { --bs-btn-color: var(--gc-accent-text); --bs-btn-border-color: var(--gc-accent-border); --bs-btn-hover-bg: var(--gc-accent-soft); --bs-btn-hover-border-color: var(--gc-accent); --bs-btn-hover-color: var(--gc-accent-text); --bs-btn-active-bg: var(--gc-accent-soft); --bs-btn-active-color: var(--gc-accent-text); }
html[data-gc-skin] .btn-outline-danger { --bs-btn-color: var(--gc-danger-text); --bs-btn-border-color: var(--gc-danger-line); --bs-btn-hover-bg: var(--gc-danger-soft); --bs-btn-hover-border-color: var(--gc-danger); --bs-btn-hover-color: var(--gc-danger-text); --bs-btn-active-bg: var(--gc-danger-soft); --bs-btn-active-color: var(--gc-danger-text); }
html[data-gc-skin] .btn-outline-success { --bs-btn-color: var(--gc-success-text); --bs-btn-border-color: var(--gc-success-line); --bs-btn-hover-bg: var(--gc-success-soft); --bs-btn-hover-border-color: var(--gc-success); --bs-btn-hover-color: var(--gc-success-text); }
html[data-gc-skin] .btn-link { --bs-btn-color: var(--gc-link); --bs-btn-hover-color: var(--gc-fg); box-shadow: none; }
html[data-gc-skin] .btn:disabled, html[data-gc-skin] .btn.disabled { opacity: .5; box-shadow: none; }

/* ---------- 10. Insignias: suaves (fondo tintado, texto del estado, filo fino) */
html[data-gc-skin] .badge {
    font-size: var(--gc-badge-size);
    font-weight: 550;
    padding: .25em .55em;
    border-radius: var(--gc-badge-radius);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
html[data-gc-skin] .badge.text-bg-primary, html[data-gc-skin] .badge.bg-primary { background: var(--gc-accent-soft) !important; color: var(--gc-accent-text) !important; box-shadow: inset 0 0 0 1px var(--gc-accent-border); }
html[data-gc-skin] .badge.text-bg-success, html[data-gc-skin] .badge.bg-success { background: var(--gc-success-soft) !important; color: var(--gc-success-text) !important; box-shadow: inset 0 0 0 1px var(--gc-success-line); }
html[data-gc-skin] .badge.text-bg-warning, html[data-gc-skin] .badge.bg-warning { background: var(--gc-warning-soft) !important; color: var(--gc-warning-text) !important; box-shadow: inset 0 0 0 1px var(--gc-warning-line); }
html[data-gc-skin] .badge.text-bg-danger, html[data-gc-skin] .badge.bg-danger { background: var(--gc-danger-soft) !important; color: var(--gc-danger-text) !important; box-shadow: inset 0 0 0 1px var(--gc-danger-line); }
html[data-gc-skin] .badge.text-bg-info, html[data-gc-skin] .badge.bg-info { background: var(--gc-info-soft) !important; color: var(--gc-info-text) !important; box-shadow: inset 0 0 0 1px var(--gc-info-line); }
html[data-gc-skin] .badge.text-bg-secondary, html[data-gc-skin] .badge.bg-secondary,
html[data-gc-skin] .badge.text-bg-light, html[data-gc-skin] .badge.bg-light { background: var(--gc-neutral-soft) !important; color: var(--gc-fg-muted) !important; box-shadow: inset 0 0 0 1px var(--gc-border); }
html[data-gc-skin] .badge.text-bg-dark, html[data-gc-skin] .badge.bg-dark { background: var(--gc-fg) !important; color: var(--gc-surface) !important; }

/* Fondos y textos de estado sueltos (fuera de .badge): mismos tonos que el skin, sin el !important de la paleta */
html[data-gc-skin] .text-bg-primary:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon), html[data-gc-skin] .bg-primary:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon):not(.progress-bar) { background-color: var(--gc-accent) !important; color: var(--gc-accent-fg) !important; }
html[data-gc-skin] .text-bg-success:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon), html[data-gc-skin] .bg-success:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon):not(.progress-bar) { background-color: var(--gc-success-soft) !important; color: var(--gc-success-text) !important; }
html[data-gc-skin] .text-bg-warning:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon), html[data-gc-skin] .bg-warning:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon):not(.progress-bar) { background-color: var(--gc-warning-soft) !important; color: var(--gc-warning-text) !important; }
html[data-gc-skin] .text-bg-danger:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon), html[data-gc-skin] .bg-danger:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon):not(.progress-bar) { background-color: var(--gc-danger-soft) !important; color: var(--gc-danger-text) !important; }
html[data-gc-skin] .text-bg-info:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon), html[data-gc-skin] .bg-info:not(.badge):not(.small-box):not(.info-box):not(.info-box-icon):not(.progress-bar) { background-color: var(--gc-info-soft) !important; color: var(--gc-info-text) !important; }
html[data-gc-skin] .text-bg-secondary:not(.badge):not(.small-box):not(.info-box), html[data-gc-skin] .bg-secondary:not(.badge):not(.small-box):not(.info-box):not(.progress-bar) { background-color: var(--gc-surface-2) !important; color: var(--gc-fg-muted) !important; }
html[data-gc-skin] .app-sidebar .text-primary, html[data-gc-skin] .text-primary { color: var(--gc-accent-text) !important; }
html[data-gc-skin] .text-success { color: var(--gc-success-text) !important; }
html[data-gc-skin] .text-warning { color: var(--gc-warning-text) !important; }
html[data-gc-skin] .text-danger { color: var(--gc-danger-text) !important; }
html[data-gc-skin] .text-info { color: var(--gc-info-text) !important; }
html[data-gc-skin] .border-primary { border-color: var(--gc-accent) !important; }
html[data-gc-skin] .border-success { border-color: var(--gc-success) !important; }
html[data-gc-skin] .border-warning { border-color: var(--gc-warning) !important; }
html[data-gc-skin] .border-danger { border-color: var(--gc-danger) !important; }
html[data-gc-skin] .border-info { border-color: var(--gc-info) !important; }
html[data-gc-skin] .bg-body:not(.app-header):not(.app-sidebar), html[data-gc-skin] .bg-white { background-color: var(--gc-surface) !important; }
html[data-gc-skin] .bg-body-secondary:not(.app-header):not(.app-sidebar), html[data-gc-skin] .bg-light { background-color: var(--gc-surface-2) !important; }
html[data-gc-skin] .bg-body-tertiary:not(.app-header):not(.app-sidebar) { background-color: var(--gc-bg) !important; }
html[data-gc-skin] .progress { --bs-progress-height: .5rem; --bs-progress-bg: var(--gc-surface-3); --bs-progress-border-radius: 999px; }
html[data-gc-skin] .progress-bar.bg-success, html[data-gc-skin] .progress-bar.text-bg-success { background-color: var(--gc-success) !important; }
html[data-gc-skin] .progress-bar.bg-warning, html[data-gc-skin] .progress-bar.text-bg-warning { background-color: var(--gc-warning) !important; }
html[data-gc-skin] .progress-bar.bg-danger, html[data-gc-skin] .progress-bar.text-bg-danger { background-color: var(--gc-danger) !important; }
html[data-gc-skin] .progress-bar:not([class*="bg-"]), html[data-gc-skin] .progress-bar.bg-primary, html[data-gc-skin] .progress-bar.bg-info { background-color: var(--gc-accent) !important; }

/* ---------- 11. Avisos, callouts, listas */
html[data-gc-skin] .alert {
    --bs-alert-padding-y: .625rem; --bs-alert-padding-x: .875rem;
    --bs-alert-border-radius: var(--gc-radius);
    font-size: .8125rem;
    border-width: 1px;
}
html[data-gc-skin] .alert-primary { --bs-alert-bg: var(--gc-accent-soft); --bs-alert-border-color: var(--gc-accent-border); --bs-alert-color: var(--gc-accent-text); --bs-alert-link-color: var(--gc-accent-text); }
html[data-gc-skin] .alert-success { --bs-alert-bg: var(--gc-success-soft); --bs-alert-border-color: var(--gc-success-line); --bs-alert-color: var(--gc-success-text); --bs-alert-link-color: var(--gc-success-text); }
html[data-gc-skin] .alert-warning { --bs-alert-bg: var(--gc-warning-soft); --bs-alert-border-color: var(--gc-warning-line); --bs-alert-color: var(--gc-warning-text); --bs-alert-link-color: var(--gc-warning-text); }
html[data-gc-skin] .alert-danger { --bs-alert-bg: var(--gc-danger-soft); --bs-alert-border-color: var(--gc-danger-line); --bs-alert-color: var(--gc-danger-text); --bs-alert-link-color: var(--gc-danger-text); }
html[data-gc-skin] .alert-info { --bs-alert-bg: var(--gc-info-soft); --bs-alert-border-color: var(--gc-info-line); --bs-alert-color: var(--gc-info-text); --bs-alert-link-color: var(--gc-info-text); }
html[data-gc-skin] .alert-secondary, html[data-gc-skin] .alert-light { --bs-alert-bg: var(--gc-surface-2); --bs-alert-border-color: var(--gc-border); --bs-alert-color: var(--gc-fg); }
html[data-gc-skin] .callout { --lte-callout-bg: var(--gc-surface); --lte-callout-color: var(--gc-fg); border: 1px solid var(--gc-border); border-left-width: 3px; border-radius: var(--gc-radius); box-shadow: none; }
html[data-gc-skin] .list-group { --bs-list-group-bg: var(--gc-surface); --bs-list-group-border-color: var(--gc-border); --bs-list-group-color: var(--gc-fg); --bs-list-group-action-hover-bg: var(--gc-surface-2); --bs-list-group-active-bg: var(--gc-accent-soft); --bs-list-group-active-color: var(--gc-accent-text); --bs-list-group-active-border-color: var(--gc-accent-border); --bs-list-group-border-radius: var(--gc-radius); font-size: .8125rem; }

/* ---------- 12. Pestanas, paginacion, desplegables, modales, tooltips */
html[data-gc-skin] .nav-tabs {
    --bs-nav-tabs-border-color: var(--gc-border);
    --bs-nav-tabs-border-width: 1px;
    gap: .25rem;
}
html[data-gc-skin] .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--gc-fg-muted) !important; font-weight: 500; font-size: .8125rem;
    padding: .5rem .75rem; margin-bottom: -1px; background: transparent;
}
html[data-gc-skin] .nav-tabs .nav-link:hover { color: var(--gc-fg) !important; border-bottom-color: var(--gc-border-strong); }
html[data-gc-skin] .nav-tabs .nav-link.active,
html[data-gc-skin] .nav-tabs .nav-item.show .nav-link { color: var(--gc-fg) !important; border-bottom-color: var(--gc-tab-indicator); background: transparent; font-weight: 600; }
html[data-gc-skin] .nav-pills { --bs-nav-pills-border-radius: var(--gc-radius); --bs-nav-pills-link-active-bg: var(--gc-surface-3); --bs-nav-pills-link-active-color: var(--gc-fg); }
html[data-gc-skin] .nav-pills .nav-link { color: var(--gc-fg-muted); font-size: .8125rem; font-weight: 500; }
html[data-gc-skin] .pagination {
    --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .25rem; --bs-pagination-font-size: .8125rem;
    --bs-pagination-color: var(--gc-fg-muted); --bs-pagination-bg: var(--gc-surface); --bs-pagination-border-color: var(--gc-border);
    --bs-pagination-hover-color: var(--gc-fg); --bs-pagination-hover-bg: var(--gc-surface-2); --bs-pagination-hover-border-color: var(--gc-border);
    --bs-pagination-active-color: var(--gc-page-active-fg); --bs-pagination-active-bg: var(--gc-page-active-bg); --bs-pagination-active-border-color: var(--gc-page-active-bg);
    --bs-pagination-disabled-color: var(--gc-fg-subtle); --bs-pagination-disabled-bg: var(--gc-surface); --bs-pagination-disabled-border-color: var(--gc-border);
    --bs-pagination-border-radius: var(--gc-radius); --bs-pagination-focus-box-shadow: var(--gc-focus-ring);
    font-variant-numeric: tabular-nums;
}
html[data-gc-skin] .dropdown-menu {
    --bs-dropdown-bg: var(--gc-surface); --bs-dropdown-color: var(--gc-fg); --bs-dropdown-border-color: var(--gc-border);
    --bs-dropdown-border-radius: var(--gc-radius-lg); --bs-dropdown-box-shadow: var(--gc-shadow-lg);
    --bs-dropdown-link-color: var(--gc-fg); --bs-dropdown-link-hover-bg: var(--gc-surface-2); --bs-dropdown-link-hover-color: var(--gc-fg);
    --bs-dropdown-link-active-bg: var(--gc-accent-soft); --bs-dropdown-link-active-color: var(--gc-accent-text);
    --bs-dropdown-font-size: .8125rem; --bs-dropdown-item-padding-y: .35rem; --bs-dropdown-padding-x: .25rem;
    --bs-dropdown-divider-bg: var(--gc-border); --bs-dropdown-header-color: var(--gc-fg-subtle);
    box-shadow: var(--gc-shadow-lg);
}
html[data-gc-skin] .dropdown-item { border-radius: var(--gc-radius-sm); }
html[data-gc-skin] .user-header.text-bg-primary { background: var(--gc-surface-2) !important; color: var(--gc-fg) !important; }
html[data-gc-skin] .modal {
    --bs-modal-bg: var(--gc-surface); --bs-modal-color: var(--gc-fg); --bs-modal-border-color: var(--gc-border);
    --bs-modal-border-radius: var(--gc-radius-lg); --bs-modal-box-shadow: var(--gc-shadow-lg);
    --bs-modal-header-border-color: var(--gc-border); --bs-modal-footer-border-color: var(--gc-border);
    --bs-modal-header-padding: .875rem 1.125rem; --bs-modal-padding: 1.125rem;
}
html[data-gc-skin] .modal-title { font-size: .9375rem; font-weight: 600; }
html[data-gc-skin] .modal-backdrop { --bs-backdrop-bg: var(--gc-backdrop); --bs-backdrop-opacity: .55; }
html[data-gc-skin] .tooltip { --bs-tooltip-bg: var(--gc-tooltip-bg); --bs-tooltip-color: var(--gc-tooltip-fg); --bs-tooltip-font-size: .75rem; --bs-tooltip-border-radius: var(--gc-radius-sm); --bs-tooltip-padding-y: .3rem; --bs-tooltip-padding-x: .5rem; }
html[data-gc-skin] .popover { --bs-popover-bg: var(--gc-surface); --bs-popover-border-color: var(--gc-border); --bs-popover-header-bg: var(--gc-surface-2); --bs-popover-body-color: var(--gc-fg); --bs-popover-border-radius: var(--gc-radius-lg); --bs-popover-box-shadow: var(--gc-shadow-lg); --bs-popover-font-size: .8125rem; }
html[data-gc-skin] #toast-container > div { border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-lg); opacity: 1; font-size: .8125rem; }

/* ---------- 12b. Filas de color de tabla (lte4-compat.css solo las define en claro) */
html[data-gc-skin] .table-success { --bs-table-bg: var(--gc-success-soft); --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-success-line); --bs-table-striped-bg: var(--gc-success-soft); --bs-table-hover-bg: var(--gc-success-line); }
html[data-gc-skin] .table-warning { --bs-table-bg: var(--gc-warning-soft); --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-warning-line); --bs-table-striped-bg: var(--gc-warning-soft); --bs-table-hover-bg: var(--gc-warning-line); }
html[data-gc-skin] .table-danger { --bs-table-bg: var(--gc-danger-soft); --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-danger-line); --bs-table-striped-bg: var(--gc-danger-soft); --bs-table-hover-bg: var(--gc-danger-line); }
html[data-gc-skin] .table-info { --bs-table-bg: var(--gc-info-soft); --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-info-line); --bs-table-striped-bg: var(--gc-info-soft); --bs-table-hover-bg: var(--gc-info-line); }
html[data-gc-skin] .table-light, html[data-gc-skin] .table-secondary { --bs-table-bg: var(--gc-surface-2); --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-border); }

/* Filas neutras (listado de alumnos del curso, #miGridView, AlumnosListado::estadoFila; rejilla de cursos y
   programados, #alumnos-curso-table, CursosListado::estadoFila). El estado va en una barra de 3px a la izquierda:
   en alumnos solo donde hay algo (pendiente, baja, abandono) y el motivo en insignias, «al dia» no lleva color;
   en cursos, el momento del curso (sin empezar, en curso, terminado). */
html[data-gc-skin] :is(#miGridView, #alumnos-curso-table, #solicitudes-table) tr.gc-fila {
    --bs-table-bg: transparent; --bs-table-color: var(--gc-fg); --bs-table-border-color: var(--gc-border);
    --bs-table-striped-bg: var(--gc-table-stripe); --bs-table-hover-bg: var(--gc-table-hover);
}
html[data-gc-skin] :is(#miGridView, #alumnos-curso-table, #solicitudes-table) tr.gc-fila:hover > * { background-color: var(--gc-table-hover); }
html[data-gc-skin] #miGridView tr.gc-fila-pendiente { --gc-fila-marca: var(--gc-warning); }
html[data-gc-skin] #miGridView tr.gc-fila-baja { --gc-fila-marca: var(--gc-danger); }
html[data-gc-skin] #miGridView tr.gc-fila-abandono { --gc-fila-marca: var(--gc-border-strong); }
html[data-gc-skin] #alumnos-curso-table tr.gc-fila-sin-empezar { --gc-fila-marca: var(--gc-info); }
html[data-gc-skin] #alumnos-curso-table tr.gc-fila-en-curso { --gc-fila-marca: var(--gc-warning); }
html[data-gc-skin] #alumnos-curso-table tr.gc-fila-terminado { --gc-fila-marca: var(--gc-fg-subtle); }
html[data-gc-skin] #solicitudes-table tr.gc-fila-nueva { --gc-fila-marca: var(--gc-warning); }
html[data-gc-skin] #solicitudes-table tr.gc-fila-revision { --gc-fila-marca: var(--gc-info); }
html[data-gc-skin] #solicitudes-table tr.gc-fila-correcta { --gc-fila-marca: var(--gc-success); }
html[data-gc-skin] #solicitudes-table tr.gc-fila-descartada { --gc-fila-marca: var(--gc-border-strong); }
html[data-gc-skin] #solicitudes-table tr.gc-fila-descartada > td, html[data-gc-skin] #solicitudes-table tr.gc-fila-descartada :is(.gc-curso-af, .gc-fechas-rango) { color: var(--gc-fg-muted); }
html[data-gc-skin] :is(#miGridView, #alumnos-curso-table, #solicitudes-table) tr:is(.gc-fila-pendiente, .gc-fila-baja, .gc-fila-abandono, .gc-fila-sin-empezar, .gc-fila-en-curso, .gc-fila-terminado, .gc-fila-nueva, .gc-fila-revision, .gc-fila-correcta, .gc-fila-descartada) > td:first-child { box-shadow: inset 3px 0 0 var(--gc-fila-marca); }
/* La rejilla de cursos lleva la barra mas gruesa (4px) */
html[data-gc-skin] #alumnos-curso-table tr:is(.gc-fila-sin-empezar, .gc-fila-en-curso, .gc-fila-terminado) > td:first-child { box-shadow: inset 4px 0 0 var(--gc-fila-marca); }
/* Sin empezar y en curso llevan ademas la fila tenida (5 %, 11 % al pasar el raton); los terminados sin fondo */
html[data-gc-skin] #alumnos-curso-table tr:is(.gc-fila-sin-empezar, .gc-fila-en-curso) { --bs-table-bg: color-mix(in srgb, var(--gc-fila-marca) 5%, transparent); }
html[data-gc-skin] #alumnos-curso-table tr:is(.gc-fila-sin-empezar, .gc-fila-en-curso):hover > * { background-color: color-mix(in srgb, var(--gc-fila-marca) 11%, transparent); }
html[data-gc-skin] #miGridView tr.gc-fila-abandono > td { color: var(--gc-fg-muted); }
html[data-gc-skin] .gc-fila-avisos { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
/* Rejilla de cursos: la celda Alumnos pierde su fondo y su banda (la barra de la fila es la del momento del
   curso; dentro quedan los numeros por matricular/comunicar) y la leyenda de colores de fila se cambia por
   la de barras. */
html[data-gc-skin] #alumnos-curso-table td:is(.aviso-alumnos-matricula, .aviso-alumnos-convenio) {
    --bs-table-bg-state: initial; border-left-width: var(--bs-border-width); border-left-color: var(--bs-table-border-color); /* initial: vuelve al rayado de la fila */
}
html[data-gc-skin] .gc-leyenda-filas-clasica { display: none; }
html[data-gc-skin] .gc-leyenda-filas-lineal { display: block; }
html[data-gc-skin] .gc-leyenda-barra--sin-empezar { background: var(--gc-info); }
html[data-gc-skin] .gc-leyenda-barra--en-curso { background: var(--gc-warning); }
html[data-gc-skin] .gc-leyenda-barra--terminado { background: var(--gc-fg-subtle); }
html[data-gc-skin] .gc-leyenda-barra--pendiente { background: var(--gc-warning); }
html[data-gc-skin] .gc-leyenda-barra--baja { background: var(--gc-danger); }
html[data-gc-skin] .gc-leyenda-barra--abandono { background: var(--gc-border-strong); }
html[data-gc-skin] .gc-leyenda-barra--nueva { background: var(--gc-warning); }
html[data-gc-skin] .gc-leyenda-barra--revision { background: var(--gc-info); }
html[data-gc-skin] .gc-leyenda-barra--correcta { background: var(--gc-success); }
html[data-gc-skin] .gc-leyenda-barra--descartada { background: var(--gc-border-strong); }
/* Tipografia de la tabla: un solo tamano (el de la tabla); lo secundario se distingue por el tono, no por letra mas pequena.
   Identificacion: el nombre manda, NIF y correo apagados; precio a la derecha con cifras tabulares. */
html[data-gc-skin] #miGridView .gc-id-nombre { font-weight: 550; color: var(--gc-fg); }
html[data-gc-skin] #miGridView :is(.gc-id-nif, .gc-id-correo) { font-size: .75rem; color: var(--gc-fg-muted); }
html[data-gc-skin] #miGridView .gc-id-nif { font-variant-numeric: tabular-nums; }
html[data-gc-skin] #miGridView .gc-col-precio { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-gc-skin] #miGridView .gc-precio-tachado { display: block; font-size: .75rem; color: var(--gc-fg-subtle); }
html[data-gc-skin] #miGridView td.gc-col-secundaria { color: var(--gc-fg-muted); }
html[data-gc-skin] #miGridView td.gc-col-secundaria small { font-size: inherit; color: inherit; }

/* Listado de alumnos (#miGridView): acciones fantasma (iconos grises, color solo al pasar el raton), chips de
   situacion y estado de una sola forma (Apto en verde), centro en dos lineas, identificacion sin recortes,
   facturas como texto y columnas de icono centradas. */
html[data-gc-skin] #miGridView :is(thead th.gc-col-acciones, td.gc-col-acciones) { white-space: nowrap; width: 1%; }
html[data-gc-skin] #miGridView td.gc-col-acciones { font-size: 0; }
html[data-gc-skin] #miGridView td.gc-col-acciones .btn-xs { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--gc-fg-muted) !important; width: 26px; height: 26px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: .8125rem !important; border-radius: 6px !important; vertical-align: middle; margin: 0 !important; }
html[data-gc-skin] #miGridView td.gc-col-acciones .btn-xs i { font-size: .8125rem; }
html[data-gc-skin] #miGridView td.gc-col-acciones :is(.btn-xs:hover, a:hover > .btn-xs) { background: var(--gc-neutral-soft) !important; color: var(--gc-fg) !important; }
html[data-gc-skin] #miGridView td.gc-col-acciones :is(.fa-trash:hover, a:hover > .fa-trash) { background: var(--gc-danger-soft) !important; color: var(--gc-danger-text) !important; }
html[data-gc-skin] #miGridView td.gc-col-acciones :is(.js-solicitar-baja, .js-resolver-directo):hover { background: var(--gc-warning-soft) !important; color: var(--gc-warning-text) !important; }
html[data-gc-skin] #miGridView td.gc-col-acciones .fa-lock { opacity: .5; cursor: not-allowed; }
html[data-gc-skin] #miGridView td.gc-col-acciones .btn-xs:focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 1px; }
html[data-gc-skin] #miGridView td.gc-col-acciones .badge { font-size: .6875rem; }
html[data-gc-skin] #miGridView td.gc-col-acciones small { font-size: .75rem; }
html[data-gc-skin] #miGridView tbody :is(.badge, .finalizaAbandona-grupo > .btn-xs, .finalizaAbandona-bloqueado) {
    display: inline-flex; align-items: center; gap: .3rem; width: auto !important; height: 20px; line-height: 20px; padding: 0 .5rem !important;
    font-size: .6875rem; font-weight: 550; border: 0 !important; border-radius: 6px; vertical-align: middle;
}
html[data-gc-skin] #miGridView tbody :is(.badge, .finalizaAbandona-grupo > .btn-xs, .finalizaAbandona-bloqueado).dropdown-toggle::after { border-width: .28em .28em 0; margin: 0; opacity: .6; }
html[data-gc-skin] #miGridView tbody .badge:is(.bg-success, .bg-info, .bg-secondary, .bg-light, .bg-primary) { background: var(--gc-neutral-soft) !important; color: var(--gc-fg-muted) !important; box-shadow: inset 0 0 0 1px var(--gc-border) !important; }
html[data-gc-skin] #miGridView tbody :is(.finalizaAbandona-grupo > .btn-xs, .finalizaAbandona-bloqueado):is(.btn-primary, .btn-success) { background: var(--gc-success-soft) !important; color: var(--gc-success-text) !important; box-shadow: inset 0 0 0 1px var(--gc-success-line) !important; }
html[data-gc-skin] #miGridView tbody :is(.badge:is(.bg-warning, .text-bg-warning), :is(.finalizaAbandona-grupo > .btn-xs, .finalizaAbandona-bloqueado).btn-warning) { background: var(--gc-warning-soft) !important; color: var(--gc-warning-text) !important; box-shadow: inset 0 0 0 1px var(--gc-warning-line) !important; }
html[data-gc-skin] #miGridView tbody :is(.badge:is(.bg-danger, .text-bg-danger), :is(.finalizaAbandona-grupo > .btn-xs, .finalizaAbandona-bloqueado).btn-danger) { background: var(--gc-danger-soft) !important; color: var(--gc-danger-text) !important; box-shadow: inset 0 0 0 1px var(--gc-danger-line) !important; }
html[data-gc-skin] #miGridView td.gc-col-centro small { display: block; font-size: .6875rem; line-height: 1.25; white-space: normal; }
html[data-gc-skin] #miGridView td.campo-nombre { min-width: 13rem; }
html[data-gc-skin] #miGridView td.campo-nombre :is(.gc-id-nif, .gc-id-correo) { white-space: nowrap; }
html[data-gc-skin] #miGridView .gc-facturas { display: flex; flex-direction: column; gap: 2px; }
html[data-gc-skin] #miGridView .gc-factura { font-size: .75rem; white-space: nowrap; color: var(--gc-fg-muted); }
html[data-gc-skin] #miGridView .gc-factura i { opacity: .7; margin-right: .25rem; }
html[data-gc-skin] #miGridView a.gc-factura { color: var(--gc-link); text-decoration: none; }
html[data-gc-skin] #miGridView a.gc-factura:hover { text-decoration: underline; }
html[data-gc-skin] #miGridView .gc-factura.gc-factura-pendiente { color: var(--gc-fg-subtle); }
html[data-gc-skin] #miGridView :is(th, td).gc-col-icono { text-align: center; }
html[data-gc-skin] #miGridView :is(.gc-avanza-ok, .gc-matriculado-si) { color: var(--gc-fg-muted); }
html[data-gc-skin] #miGridView a.gc-avanza-ok:hover { color: var(--gc-link); }
html[data-gc-skin] #miGridView :is(.gc-avanza-pendiente, .gc-matriculado-no) { color: var(--gc-fg-subtle); }
html[data-gc-skin] #miGridView .gc-matriculado-no { font-size: .75rem; }

/* Rejilla de cursos (:is(#alumnos-curso-table, #solicitudes-table)) con skin: columnas de cursos/_columnas_lineal.php, celdas de
   backend/services/CursosCeldas. Color solo en lo que pide algo (ambar: por matricular, sin gestionar,
   procesando; rojo: por comunicar, anulado, incidentado). */
html[data-gc-skin] #alumnos-curso-table :is(th, td).gc-col-icono { text-align: center; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-secundaria { color: var(--gc-fg-muted); font-size: .8125rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-nada { color: var(--gc-fg-subtle); }
/* Columna Alumnos: ojo y personas con el numero, avisos debajo */
html[data-gc-skin] #alumnos-curso-table :is(th, td).gc-col-alumnos { width: 1%; white-space: nowrap; }
html[data-gc-skin] #alumnos-curso-table .gc-alu { display: grid; gap: 5px; justify-items: center; }
html[data-gc-skin] #alumnos-curso-table .gc-alu-acciones { display: inline-flex; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-accion { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: var(--gc-radius); color: var(--gc-fg-muted); font-size: .6875rem; font-weight: 600; text-decoration: none; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-accion i { font-size: .8125rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-accion:is(:hover, :focus-visible) { background: var(--gc-neutral-soft); color: var(--gc-fg); outline: none; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-accion-aviso { color: var(--gc-warning-text); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-accion-error { color: var(--gc-danger-text); }
html[data-gc-skin] #alumnos-curso-table .gc-aviso { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--gc-radius); font-size: .6875rem; font-weight: 550; white-space: nowrap; text-decoration: none; }
html[data-gc-skin] #alumnos-curso-table .gc-aviso b { font-weight: 650; }
html[data-gc-skin] #alumnos-curso-table .gc-aviso-texto { white-space: pre; }
html[data-gc-skin] #alumnos-curso-table .gc-aviso:hover :is(b, .gc-aviso-texto) { text-decoration: underline; }
html[data-gc-skin] #alumnos-curso-table .gc-aviso-matricular { background: var(--gc-warning-soft); color: var(--gc-warning-text); box-shadow: inset 0 0 0 1px var(--gc-warning-line); }
html[data-gc-skin] #alumnos-curso-table .gc-aviso-comunicar { background: var(--gc-danger-soft); color: var(--gc-danger-text); box-shadow: inset 0 0 0 1px var(--gc-danger-line); }
/* Los dos avisos: pastilla de 120 px partida al 50 %, el texto se desvanece y al pasar el raton por una
   mitad se ve su chip entero encima (sin mover la tabla) */
html[data-gc-skin] #alumnos-curso-table .gc-par { position: relative; display: flex; width: 120px; }
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso { flex: 1 1 50%; min-width: 0; overflow: hidden; }
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso:nth-child(1) { border-radius: var(--gc-radius) 0 0 var(--gc-radius); }
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso:nth-child(2) { border-radius: 0 var(--gc-radius) var(--gc-radius) 0; }
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso .gc-aviso-texto { overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(to right, black 60%, transparent); mask-image: linear-gradient(to right, black 60%, transparent); }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero { display: none; position: absolute; top: -3px; z-index: 5; }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero-1 { left: -4px; }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero-2 { right: -4px; }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero .gc-aviso { height: 26px; padding: 0 9px; font-size: .75rem; }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero .gc-aviso-matricular { box-shadow: var(--gc-shadow), inset 0 0 0 1px var(--gc-warning-line); }
html[data-gc-skin] #alumnos-curso-table .gc-par-entero .gc-aviso-comunicar { box-shadow: var(--gc-shadow), inset 0 0 0 1px var(--gc-danger-line); }
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso:nth-child(1):hover ~ .gc-par-entero-1,
html[data-gc-skin] #alumnos-curso-table .gc-par > .gc-aviso:nth-child(2):hover ~ .gc-par-entero-2,
html[data-gc-skin] #alumnos-curso-table .gc-par-entero:hover { display: block; }
/* Gestion: F | C | Ca. Ambar sin gestionar, gris gestionado, tachado descartado, rayado en proceso */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-gestion { white-space: nowrap; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-gestion { display: inline-flex; border-radius: var(--gc-radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--gc-border-strong); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 34px; height: 22px; padding: 0 6px; font: inherit; font-size: .6875rem; font-weight: 600; line-height: 1; border: 0; border-left: 1px solid var(--gc-border-strong); background: var(--gc-surface); color: var(--gc-fg-muted); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg:first-child { border-left: 0; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg i { font-size: .6875rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) button.gc-seg { cursor: pointer; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg-0 { background: var(--gc-warning-soft); color: var(--gc-warning-text); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg-1 { background: var(--gc-surface-2); color: var(--gc-fg); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg-2 { color: var(--gc-fg-subtle); text-decoration: line-through; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg-3 { background: repeating-linear-gradient(135deg, var(--gc-border-strong) 0 2px, var(--gc-surface) 2px 6px); color: var(--gc-fg); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-seg-na { color: var(--gc-border-strong); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) button.gc-seg:is(:focus-visible, [aria-expanded="true"]) { box-shadow: inset 0 0 0 2px var(--gc-accent); outline: none; }
/* Curso: accion formativa arriba (400, color de texto); debajo, a 13 px, expediente y tipos con su codigo */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-curso { min-width: 315px; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-curso { display: grid; gap: 3px; max-width: 300px; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-curso-af { color: var(--gc-fg); font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* La tabla no cabe en 1.600 px con el menu lateral: texto largo secundario en una linea con «…» (el completo, en title) y celdas algo mas juntas */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) thead td .d-flex > .form-control { min-width: 0; width: 5rem; flex: 1 1 5rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-trunca { display: block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Solicitudes: el nombre va en dos lineas (no en una de 90 px) y el centro con mas aire; Nº y Gestion ajustados a su contenido */
html[data-gc-skin] #solicitudes-table .gc-curso-af.gc-trunca { display: -webkit-box; max-width: none; white-space: normal; }
html[data-gc-skin] #solicitudes-table td.gc-col-centro .gc-trunca { max-width: 200px; }
html[data-gc-skin] #solicitudes-table :is(th, td).gc-col-gestion { width: 1%; }
html[data-gc-skin] #solicitudes-table thead :is(th, td):first-child { width: 1%; }
html[data-gc-skin] #solicitudes-table thead td.gc-col-curso .d-flex > .form-control:first-child { flex: 0 0 8rem; width: 8rem; }
html[data-gc-skin] #solicitudes-table thead :is(th, td):first-child .form-control { min-width: 4.5rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) > :not(caption) > * > * { padding-left: calc(var(--gc-cell-px) * .6); padding-right: calc(var(--gc-cell-px) * .6); }
html[data-gc-skin] :is(#alumnos-curso-table, .gc-leyenda-filas-lineal) .gc-curso-prog { color: var(--gc-link); margin-right: 6px; font-size: .8125rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-curso-linea { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: .8125rem; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-curso-exp { font-weight: 600; color: var(--gc-fg); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-tipo { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-tipo-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--gc-radius); font-size: .625rem; font-weight: 550; letter-spacing: .03em; background: var(--gc-neutral-soft); color: var(--gc-fg-muted); box-shadow: inset 0 0 0 1px var(--gc-border); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-tipo-cod { font-family: var(--gc-font-mono); font-size: .75rem; color: var(--gc-fg-subtle); }
/* Fechas en una columna */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-fechas { white-space: nowrap; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-fechas { display: grid; gap: 1px; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-fechas-rango { color: var(--gc-fg); font-weight: 500; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-fechas-pie { font-size: .8125rem; color: var(--gc-fg-muted); }
/* Solicitud, estado e iconos fantasma */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) a.gc-solicitud { font-weight: 550; text-decoration: none; }
html[data-gc-skin] #solicitudes-table span.gc-solicitud { font-weight: 550; font-variant-numeric: tabular-nums; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) a.gc-solicitud:hover { text-decoration: underline; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-estado { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--gc-radius); font-size: .6875rem; font-weight: 550; white-space: nowrap; background: var(--gc-neutral-soft); color: var(--gc-fg-muted); box-shadow: inset 0 0 0 1px var(--gc-border); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-estado-aviso { background: var(--gc-warning-soft); color: var(--gc-warning-text); box-shadow: inset 0 0 0 1px var(--gc-warning-line); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) .gc-estado-error { background: var(--gc-danger-soft); color: var(--gc-danger-text); box-shadow: inset 0 0 0 1px var(--gc-danger-line); }
html[data-gc-skin] #alumnos-curso-table .gc-estado-quien { display: block; margin-top: 2px; font-size: .8125rem; color: var(--gc-fg-muted); }
html[data-gc-skin] #alumnos-curso-table .gc-fantasma { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--gc-radius); color: var(--gc-fg-muted); text-decoration: none; }
html[data-gc-skin] #alumnos-curso-table :is(a.gc-fantasma, .gc-fantasma.obs-popover) { cursor: pointer; }
html[data-gc-skin] #alumnos-curso-table :is(a.gc-fantasma, .gc-fantasma.obs-popover):is(:hover, :focus-visible) { background: var(--gc-neutral-soft); color: var(--gc-fg); outline: none; }
html[data-gc-skin] #alumnos-curso-table .gc-fantasma.gc-fantasma-vacio { color: var(--gc-border-strong); background: none; }
/* Editar y borrar al final: muy claros hasta pasar por la fila; la papelera, roja al pasar por ella */
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) :is(thead th.gc-col-acciones, td.gc-col-acciones) { white-space: nowrap; width: 1%; }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-acciones .gc-accion { color: var(--gc-border-strong); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) tr:hover td.gc-col-acciones .gc-accion,
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-acciones .gc-accion:focus-visible { color: var(--gc-fg-muted); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-acciones .gc-accion:hover { color: var(--gc-fg); }
html[data-gc-skin] :is(#alumnos-curso-table, #solicitudes-table) td.gc-col-acciones .gc-accion-borrar:hover { background: var(--gc-danger-soft); color: var(--gc-danger-text); }
/* Menu de gestion (gestiones.js, cuelga de body) */
html[data-gc-skin] .gc-menu-gestion { min-width: 200px; padding: 4px; background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-lg); font-size: .8125rem; }
html[data-gc-skin] .gc-menu-gestion-cab { padding: 6px 10px 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-fg-muted); }
html[data-gc-skin] .gc-menu-gestion-op { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--gc-radius-sm); background: none; font: inherit; color: var(--gc-fg); text-align: left; cursor: pointer; }
html[data-gc-skin] .gc-menu-gestion-op i { width: 22px; text-align: center; color: var(--gc-fg-muted); }
html[data-gc-skin] .gc-menu-gestion-op:is(:hover, :focus-visible) { background: var(--gc-surface-2); outline: none; }
html[data-gc-skin] .gc-menu-gestion-op[aria-checked="true"] { font-weight: 600; }
html[data-gc-skin] .gc-menu-gestion-op[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--gc-link); }
html[data-gc-skin] .gc-menu-gestion-op:disabled { opacity: .6; cursor: wait; }
html[data-gc-skin] .gc-menu-gestion-quien { padding: 0 10px 6px 40px; font-size: .75rem; color: var(--gc-fg-muted); }

/* Bootstrap fija el texto de las filas rayadas/hover de cada variante a negro: en oscuro salia ilegible. */
html[data-gc-skin] :is(.table-success, .table-warning, .table-danger, .table-info, .table-light, .table-secondary) {
    --bs-table-striped-color: var(--gc-fg); --bs-table-hover-color: var(--gc-fg); --bs-table-active-color: var(--gc-fg);
}

/* ---------- 12a. Botones de estado suaves: el macizo queda solo para la accion principal (.btn-primary),
   como en los referentes; el color va en el texto, el fondo tintado y el filo. */
html[data-gc-skin] .btn-success { --gc-b: var(--gc-success); --gc-b-text: var(--gc-success-text); --gc-b-soft: var(--gc-success-soft); --gc-b-line: var(--gc-success-line); }
html[data-gc-skin] .btn-warning { --gc-b: var(--gc-warning); --gc-b-text: var(--gc-warning-text); --gc-b-soft: var(--gc-warning-soft); --gc-b-line: var(--gc-warning-line); }
html[data-gc-skin] .btn-danger { --gc-b: var(--gc-danger); --gc-b-text: var(--gc-danger-text); --gc-b-soft: var(--gc-danger-soft); --gc-b-line: var(--gc-danger-line); }
html[data-gc-skin] .btn-info { --gc-b: var(--gc-info); --gc-b-text: var(--gc-info-text); --gc-b-soft: var(--gc-info-soft); --gc-b-line: var(--gc-info-line); }
html[data-gc-skin] :is(.btn-success, .btn-warning, .btn-danger, .btn-info) {
    --bs-btn-bg: var(--gc-b-soft); --bs-btn-border-color: var(--gc-b-line); --bs-btn-color: var(--gc-b-text);
    --bs-btn-hover-bg: color-mix(in oklab, var(--gc-b) 22%, var(--gc-surface)); --bs-btn-hover-border-color: var(--gc-b); --bs-btn-hover-color: var(--gc-b-text);
    --bs-btn-active-bg: color-mix(in oklab, var(--gc-b) 30%, var(--gc-surface)); --bs-btn-active-border-color: var(--gc-b); --bs-btn-active-color: var(--gc-b-text);
    --bs-btn-disabled-bg: var(--gc-b-soft); --bs-btn-disabled-border-color: var(--gc-b-line); --bs-btn-disabled-color: var(--gc-b-text);
}
/* Resultado «Apto» del listado de alumnos (AlumnosCeldas y su repintado en alumnos/index.js): es .btn-primary, que
   aqui lleva el color de marca del tenant en macizo y desentonaba entre los estados suaves; en la skin es un exito suave */
html[data-gc-skin] :is(.finalizaAbandona-grupo > .btn-primary, .btn-primary.finalizaAbandona-bloqueado) {
    --bs-btn-bg: var(--gc-success-soft); --bs-btn-border-color: var(--gc-success-line); --bs-btn-color: var(--gc-success-text);
    --bs-btn-hover-bg: color-mix(in oklab, var(--gc-success) 22%, var(--gc-surface)); --bs-btn-hover-border-color: var(--gc-success); --bs-btn-hover-color: var(--gc-success-text);
    --bs-btn-active-bg: color-mix(in oklab, var(--gc-success) 30%, var(--gc-surface)); --bs-btn-active-border-color: var(--gc-success); --bs-btn-active-color: var(--gc-success-text);
    --bs-btn-disabled-bg: var(--gc-success-soft); --bs-btn-disabled-border-color: var(--gc-success-line); --bs-btn-disabled-color: var(--gc-success-text);
    box-shadow: none;
}
html[data-gc-skin] code { color: var(--gc-accent-text) !important; }

/* ---------- 12c. Selector de fecha eonasdan 4.17 (el «calendario»: CSS de Bootstrap 3 con colores fijos) */
html[data-gc-skin] .bootstrap-datetimepicker-widget.dropdown-menu {
    background: var(--gc-surface); color: var(--gc-fg); border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-lg); font-size: .8125rem; padding: .5rem;
}
html[data-gc-skin] .bootstrap-datetimepicker-widget.dropdown-menu.bottom::before,
html[data-gc-skin] .bootstrap-datetimepicker-widget.dropdown-menu.bottom::after { border-bottom-color: var(--gc-border); }
html[data-gc-skin] .bootstrap-datetimepicker-widget table th { color: var(--gc-fg-muted); font-weight: 600; }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td,
html[data-gc-skin] .bootstrap-datetimepicker-widget table th { border-radius: var(--gc-radius-sm); font-variant-numeric: tabular-nums; }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.minute:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td span:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget .picker-switch td span:hover { background: var(--gc-surface-2); color: var(--gc-fg); }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.old,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.new,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.disabled,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td span.disabled { color: var(--gc-fg-subtle); }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.active,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.active:hover,
html[data-gc-skin] .bootstrap-datetimepicker-widget table td span.active { background: var(--gc-accent); color: var(--gc-accent-fg); text-shadow: none; }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--gc-accent); }
html[data-gc-skin] .bootstrap-datetimepicker-widget table td.active.today::before { border-bottom-color: var(--gc-accent-fg); }
html[data-gc-skin] .bootstrap-datetimepicker-widget a[data-action] { color: var(--gc-fg-muted); }

/* ---------- 13. Red de seguridad LTE2/BS3 (los restos se ven bien sin limpiar las vistas) */
html[data-gc-skin] .btn-xs { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .6875rem; --bs-btn-border-radius: var(--gc-radius-sm); }
html[data-gc-skin] .label { display: inline-block; font-size: var(--gc-badge-size); font-weight: 550; padding: .25em .55em; border-radius: var(--gc-badge-radius); background: var(--gc-neutral-soft); color: var(--gc-fg-muted); line-height: 1.25; }
html[data-gc-skin] .label-success { background: var(--gc-success-soft); color: var(--gc-success-text); }
html[data-gc-skin] .label-warning { background: var(--gc-warning-soft); color: var(--gc-warning-text); }
html[data-gc-skin] .label-danger { background: var(--gc-danger-soft); color: var(--gc-danger-text); }
html[data-gc-skin] .label-info, html[data-gc-skin] .label-primary { background: var(--gc-info-soft); color: var(--gc-info-text); }
html[data-gc-skin] .box { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); box-shadow: var(--gc-card-shadow); margin-bottom: 1rem; }
html[data-gc-skin] .box-header { padding: var(--gc-card-head-py) var(--gc-card-px); border-bottom: 1px solid var(--gc-border); }
html[data-gc-skin] .box-body { padding: var(--gc-card-py) var(--gc-card-px); }
html[data-gc-skin] .panel { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); }
html[data-gc-skin] .bg-orange { background-color: var(--gc-warning-soft) !important; color: var(--gc-warning-text) !important; }
html[data-gc-skin] .bg-blue-gradient { background: var(--gc-accent) !important; color: var(--gc-accent-fg) !important; }

/* ---------- 14. Oscuro: parches blancos de style="" (red temporal hasta limpiar las vistas) */
html[data-gc-skin][data-bs-theme="dark"] :is([style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:white"], [style*="background: white"], [style*="background-color: white"], [style*="background:#f5f5f5"], [style*="background: #f5f5f5"], [style*="background:#f9f9f9"], [style*="background: #f9f9f9"], [style*="background:#fafafa"], [style*="background-color:#f8f9fa"]) { background: var(--gc-surface-2) !important; color: var(--gc-fg) !important; }
html[data-gc-skin][data-bs-theme="dark"] :is([style*="border:1px solid #ddd"], [style*="border: 1px solid #ddd"], [style*="border:1px solid #eee"], [style*="border: 1px solid #eee"]) { border-color: var(--gc-border) !important; }
html[data-gc-skin][data-bs-theme="dark"] :is([style*="color:#333"], [style*="color: #333"], [style*="color:#000"], [style*="color: #000"], [style*="color:#444"], [style*="color: #444"]) { color: var(--gc-fg) !important; }

/* ---------- 15. Fase 4: piezas de vista ya limpias, repintadas en oscuro ----------
   Los valores en claro de estas clases estan en lte4-compat.css (los de siempre,
   con y sin skin). Aqui solo el oscuro: la superficie y el texto salen de los
   tokens del skin. Las etiquetas y las cabeceras de color macizo (una pildora con
   su fondo y su texto) no necesitan nada: se leen igual sobre oscuro. */
html[data-gc-skin][data-bs-theme="dark"] .gc-chip { background-color: var(--gc-surface); border-color: var(--gc-border); box-shadow: none; }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip__num { color: var(--gc-fg); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip__year { color: var(--gc-fg-muted); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip__foot { background: var(--gc-surface-3); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip--vacio { border-color: var(--gc-border); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip--vacio .gc-chip__head { background: var(--gc-surface-2); color: var(--gc-fg-subtle); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip--vacio .gc-chip__num { color: var(--gc-fg-subtle); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip--vacio .gc-chip__foot { background: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip--cero .gc-chip__head { background: var(--gc-surface-3); color: var(--gc-fg-subtle); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chip__warn { background: var(--gc-warning); color: var(--gc-on-warning); }
html[data-gc-skin][data-bs-theme="dark"] .gc-icono { background: var(--gc-surface-2); border-color: var(--gc-border); color: var(--gc-fg-subtle); }
html[data-gc-skin][data-bs-theme="dark"] .gc-icono--si { background: var(--gc-success-soft); border-color: var(--gc-success-text); color: var(--gc-success-text); }
html[data-gc-skin][data-bs-theme="dark"] .gc-icono--info { background: var(--gc-info-soft); border-color: var(--gc-info-text); color: var(--gc-info-text); }
html[data-gc-skin][data-bs-theme="dark"] .gc-icono--tenue { color: var(--gc-fg-subtle); }
/* --gc-on-info, no blanco: en oscuro el info del skin es claro y el blanco se quedaba
   en 2,81:1. */
html[data-gc-skin][data-bs-theme="dark"] .gc-etiqueta--si { background: var(--gc-info); color: var(--gc-on-info); }
html[data-gc-skin][data-bs-theme="dark"] .gc-etiqueta--no { background: var(--gc-surface-3); color: var(--gc-fg-muted); }
html[data-gc-skin][data-bs-theme="dark"] .gc-panel-flotante { background: var(--gc-surface); border-color: var(--gc-border-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
html[data-gc-skin][data-bs-theme="dark"] .gc-scrollbar-flotante { background: var(--gc-surface); box-shadow: 0 -3px 15px rgba(0, 0, 0, .55); }
html[data-gc-skin][data-bs-theme="dark"] .gc-scrollbar-pista { background: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] #floatingScrollbar::-webkit-scrollbar { background: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] #floatingScrollbar::-webkit-scrollbar-thumb { background: var(--gc-border-strong); border-color: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] #floatingScrollbar::-webkit-scrollbar-thumb:hover { background: var(--gc-accent); }
/* Las filas de aviso de la rejilla de cursos (lte4-compat.css las fija en claro). */
html[data-gc-skin][data-bs-theme="dark"] .table > :not(caption) > * > *.aviso-alumnos-matricula { --bs-table-bg-state: color-mix(in srgb, #e67e22 18%, transparent); }
html[data-gc-skin][data-bs-theme="dark"] .table > :not(caption) > * > *.aviso-alumnos-convenio { --bs-table-bg-state: color-mix(in srgb, #c0392b 20%, transparent); }


/* ---------- 15. Fase 4: piezas de vista ya limpias, repintadas en oscuro ----------
   Los valores en claro estan en lte4-compat.css (los de siempre, con y sin skin).
   Aqui solo el oscuro, con los tokens del skin. */
html[data-gc-skin][data-bs-theme="dark"] .gc-cifra-consumido { color: var(--gc-danger); }
html[data-gc-skin][data-bs-theme="dark"] .gc-cifra-facturado { color: var(--gc-success); }
html[data-gc-skin][data-bs-theme="dark"] .gc-cifra-credito { color: var(--gc-info); }
html[data-gc-skin][data-bs-theme="dark"] .gc-aviso-credito { background: var(--gc-warning-soft); border-color: var(--gc-warning-line); }
html[data-gc-skin][data-bs-theme="dark"] .gc-fila-total { background: var(--gc-surface-2); }
/* Etiquetas y avisos de la rejilla de solicitudes. */
html[data-gc-skin][data-bs-theme="dark"] .gc-etiqueta--af { background: var(--gc-surface-3); color: var(--gc-fg-muted); }
html[data-gc-skin][data-bs-theme="dark"] .gc-aviso--borrador { background: var(--gc-accent); color: var(--gc-accent-fg); }
html[data-gc-skin][data-bs-theme="dark"] .gc-aviso--convenio { background: var(--gc-warning); color: var(--gc-on-warning); }

/* Anillo del filtro activo de la bandeja de FUNDAE: la regla de .info-box de aqui
   (que apaga la sombra del skin) pesa mas que la de lte4-compat.css, asi que el anillo
   se declara tambien con skin. */
html[data-gc-skin] .info-box.gc-filtro-activo--info { box-shadow: 0 0 0 2px #00c0ef; }
html[data-gc-skin] .info-box.gc-filtro-activo--success { box-shadow: 0 0 0 2px #00a65a; }
html[data-gc-skin] .info-box.gc-filtro-activo--warning { box-shadow: 0 0 0 2px #f39c12; }
html[data-gc-skin] .info-box.gc-filtro-activo--danger { box-shadow: 0 0 0 2px #dd4b39; }

/* Modal de FUNDAE: la cabecera del PDF y el filo del panel, sobre la superficie del tema. */
html[data-gc-skin][data-bs-theme="dark"] .gc-panel-pdf { background: var(--gc-surface-2); border-bottom-color: var(--gc-border); }
html[data-gc-skin][data-bs-theme="dark"] .gc-borde-derecho { border-right-color: var(--gc-border); }
html[data-gc-skin][data-bs-theme="dark"] .gc-filtro-activo--info { box-shadow: 0 0 0 2px var(--gc-info); }
html[data-gc-skin][data-bs-theme="dark"] .gc-filtro-activo--success { box-shadow: 0 0 0 2px var(--gc-success); }
html[data-gc-skin][data-bs-theme="dark"] .gc-filtro-activo--warning { box-shadow: 0 0 0 2px var(--gc-warning); }
html[data-gc-skin][data-bs-theme="dark"] .gc-filtro-activo--danger { box-shadow: 0 0 0 2px var(--gc-danger); }
/* Chapa del tenant: en oscuro el acento de la entidad (y el aviso si es vista GLOBAL). */
html[data-gc-skin][data-bs-theme="dark"] .gc-chapa-tenant { background: var(--gc-accent); color: var(--gc-accent-fg); }
html[data-gc-skin][data-bs-theme="dark"] .gc-chapa-tenant--global { background: var(--gc-warning); color: var(--gc-on-warning); }


/* Sincronizacion de Avanza y matricula de Moodle: superficies y fila cancelada. */
html[data-gc-skin][data-bs-theme="dark"] .gc-fila-grupo { background-color: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] .gc-separador { border-top-color: var(--gc-border); }
html[data-gc-skin][data-bs-theme="dark"] .gc-fila-cancelada { background: var(--gc-surface-2); color: var(--gc-fg-muted); }

/* Barras de progreso: Bootstrap les pone el texto en blanco fijo (--bs-progress-bar-color).
   En oscuro el color del estado es claro, asi que el texto va con el token de su pareja. */
html[data-gc-skin][data-bs-theme="dark"] .progress-bar.bg-success { color: var(--gc-on-success); }
html[data-gc-skin][data-bs-theme="dark"] .progress-bar.bg-warning { color: var(--gc-on-warning); }
html[data-gc-skin][data-bs-theme="dark"] .progress-bar.bg-danger { color: var(--gc-on-danger); }
html[data-gc-skin][data-bs-theme="dark"] .progress-bar.bg-info { color: var(--gc-on-info); }
html[data-gc-skin][data-bs-theme="dark"] .progress-bar.bg-primary { color: var(--gc-accent-fg); }


/* Pantalla de alumnos: banners, caja suave, lineas de estado y el pastel por usuario.
html[data-gc-skin][data-bs-theme="dark"] .gc-banner-moodle--programado { border-left-color: var(--gc-accent); }
html[data-gc-skin][data-bs-theme="dark"] .gc-banner-moodle--encurso { border-left-color: var(--gc-info); }
html[data-gc-skin][data-bs-theme="dark"] .gc-caja-suave { background: var(--gc-surface-2); }
html[data-gc-skin][data-bs-theme="dark"] .gc-linea--ok { color: var(--gc-success); }
html[data-gc-skin][data-bs-theme="dark"] .gc-linea--mal { color: var(--gc-danger); }
html[data-gc-skin][data-bs-theme="dark"] .gc-linea--aviso { color: var(--gc-warning); }
html[data-gc-skin][data-bs-theme="dark"] .gc-usuario { background: color-mix(in srgb, var(--gc-usuario-bg, var(--gc-surface-2)) 22%, var(--gc-surface)); }

html[data-gc-skin][data-bs-theme="dark"] .gc-miniatura { border-color: var(--gc-border); }