/* SGE Alpha UI v5.2 - Card Enhanced Premium "Blue Elite" */
/* Optimizada para Inmersión 3D y Glassmorphism */

.card-enhanced, .immersion-card {
    position: relative !important;
    overflow: visible !important;
    background: var(--vip-card) !important;
    border: 1px solid var(--vip-border) !important;
    border-radius: 16px !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
    z-index: 1 !important;
    margin-bottom: 1.25rem !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Estado Hover con Resplandor (Glow) Cian */
.card-enhanced:hover, .immersion-card:hover {
    border-color: var(--vip-border-strong) !important;
    /* GOV-UX-42: la sombra de hover era negra al 40% -- correcta sobre un
       fondo oscuro, un manchon gris sobre uno claro. Pasa al token, que
       tiene un valor por tema. */
    box-shadow: var(--vip-card-shadow) !important;
    z-index: 10 !important;
}

/* Glassmorphism Elite */
/* GOV-UX-42: estos valores estaban HARDCODEADOS -- un azul oscuro de fondo,
   un borde cian y una sombra casi negra -- asi que el panel seguia oscuro
   aunque los tokens ya siguieran el tema. Pasan a los tokens, que es lo que
   el resto del archivo ya hacia. */
.glass-panel-elite {
    background: var(--vip-glass-bg) !important;
    backdrop-filter: blur(var(--vip-glass-blur, 15px)) !important;
    -webkit-backdrop-filter: blur(var(--vip-glass-blur, 15px)) !important;
    border: 1px solid var(--vip-border) !important;
    box-shadow: var(--vip-card-shadow) !important;
}

/* Títulos y Texto Premium */
.card-enhanced h1, .card-enhanced h2, .card-enhanced h3,
.card-enhanced h4, .card-enhanced h5, .card-enhanced h6,
.immersion-card h1, .immersion-card h2, .immersion-card h3 {
    color: var(--vip-text, inherit) !important;
    letter-spacing: 0.5px;
}

.card-enhanced .text-muted, .immersion-card .text-muted {
    color: var(--vip-muted, #6c757d) !important;
    opacity: 0.8;
}

/* Efecto Brillo (Shimmer) de Élite */
.card-enhanced::before, .immersion-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        var(--vip-blue-soft),
        transparent
    ) !important;
    transition: none !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transform: skewX(-20deg);
}

.card-enhanced:hover::before, .immersion-card:hover::before {
    animation: elite-shimmer 1.5s infinite;
}

@keyframes elite-shimmer {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* Estadísticas con Degradado Cian Eléctrico */
.card-enhanced .display-6,
.card-enhanced .h1,
.card-enhanced .stat-value,
.immersion-card .stat-value {
    background: linear-gradient(135deg, var(--sge-cyan) 0%, var(--sge-blue) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

/* Avatares e Iconos Glass */
.card-enhanced .avatar-md, .immersion-card .avatar-md {
    /* GOV-UX-42: el cian neon fijo no se ve sobre una tarjeta clara y no es
       de la marca. Va el azul de SGE, tenue, con su borde. */
    background: var(--vip-blue-soft) !important;
    border: 1px solid var(--vip-border-strong) !important;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease !important;
}

.card-enhanced:hover .avatar-md, .immersion-card:hover .avatar-md {
    transform: scale(1.1) translateZ(10px) !important;
    background: var(--vip-border-strong) !important;
}

/* Responsive e Integración Movimiento Reducido */
@media (max-width: 768px) {
    .card-enhanced:hover, .immersion-card:hover {
        transform: translateY(-5px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-enhanced, .immersion-card {
        transition: none !important;
        transform: none !important;
    }
    .card-enhanced::before, .immersion-card::before {
        content: none !important;
    }
}


/* ── GOV-UX-42: los colores semanticos, en tema claro ──────────────────────
   Al pasar estas tarjetas de oscuras a claras (los tokens --vip-* ahora
   siguen el tema) los verdes y celestes de Bootstrap quedaron ilegibles
   encima: medido en el panel financiero, `text-success` daba 2,13 y
   `text-info` 2,86 sobre la tarjeta clara. Sobre la tarjeta OSCURA pasaban
   bien, por eso nadie lo habia visto -- el problema nace con el cambio de
   fondo, asi que se arregla junto con el.

   Se oscurece solo el extremo claro y solo DENTRO de estas tarjetas: el
   alcance queda en las 15 plantillas que el cambio toco, y ninguna otra
   pantalla del sistema puede quedar peor. Mismo criterio que
   ORCH-CANON-SCALE-32 uso para `.badge-elite-info`.

   Los valores estan medidos, no elegidos a ojo (ver el work order). */
:root:not([data-bs-theme="dark"]) .card-enhanced .text-success,
:root:not([data-bs-theme="dark"]) .card-enhanced .badge.text-success,
:root:not([data-bs-theme="dark"]) .immersion-card .text-success,
:root:not([data-bs-theme="dark"]) .glass-panel-elite .text-success {
    color: #12693a !important;
}

:root:not([data-bs-theme="dark"]) .card-enhanced .text-info,
:root:not([data-bs-theme="dark"]) .card-enhanced .badge.text-info,
:root:not([data-bs-theme="dark"]) .immersion-card .text-info,
:root:not([data-bs-theme="dark"]) .glass-panel-elite .text-info {
    color: #17607f !important;
}

:root:not([data-bs-theme="dark"]) .card-enhanced .text-warning,
:root:not([data-bs-theme="dark"]) .immersion-card .text-warning,
:root:not([data-bs-theme="dark"]) .glass-panel-elite .text-warning {
    color: #8a5200 !important;
}

/* En oscuro vuelven los de Bootstrap, que ahi si contrastan. */
[data-bs-theme="dark"] .card-enhanced .text-success,
[data-bs-theme="dark"] .card-enhanced .badge.text-success,
[data-bs-theme="dark"] .immersion-card .text-success,
[data-bs-theme="dark"] .glass-panel-elite .text-success {
    color: #34d399 !important;
}

[data-bs-theme="dark"] .card-enhanced .text-info,
[data-bs-theme="dark"] .card-enhanced .badge.text-info,
[data-bs-theme="dark"] .immersion-card .text-info,
[data-bs-theme="dark"] .glass-panel-elite .text-info {
    color: #7dd3fc !important;
}

[data-bs-theme="dark"] .card-enhanced .text-warning,
[data-bs-theme="dark"] .immersion-card .text-warning,
[data-bs-theme="dark"] .glass-panel-elite .text-warning {
    color: #fbbf24 !important;
}

/* Dos causas mas, encontradas midiendo las 8 tarjetas del panel financiero
   texto por texto (93 medidos): 13 encabezados de tabla en 2,72 y 19
   `text-muted` en 4,35. Las dos son una sola regla cada una.

   Los `th` los pintaba `.table-premium thead th { opacity: .7 }` de
   sm-pages.css. Bajar la transparencia de un encabezado sobre fondo oscuro
   se ve bien; sobre uno claro lo borra. Y `text-muted` quedaba a 4,35 --
   apenas debajo del 4,5 de AA, que es el peor lugar donde estar: pasa
   desapercibido a ojo y no cumple igual.

   Otra vez acotado a estas tarjetas: no se toca `.table-premium` ni
   `text-muted` en el resto del sistema. */
:root:not([data-bs-theme="dark"]) .card-enhanced .table thead th,
:root:not([data-bs-theme="dark"]) .card-enhanced .table-premium thead th,
:root:not([data-bs-theme="dark"]) .immersion-card .table thead th,
:root:not([data-bs-theme="dark"]) .glass-panel-elite .table thead th {
    opacity: 1 !important;
    color: #3f4d5f !important;
}

:root:not([data-bs-theme="dark"]) .card-enhanced .text-muted,
:root:not([data-bs-theme="dark"]) .card-enhanced small.text-muted,
:root:not([data-bs-theme="dark"]) .immersion-card .text-muted,
:root:not([data-bs-theme="dark"]) .glass-panel-elite .text-muted {
    color: #5a6b80 !important;
    opacity: 1 !important;
}

/* NOTA DE METODO -- el error que casi se me va: las reglas claras de arriba
   estaban escritas con `:root .card-enhanced ...`, y `:root` matchea TAMBIEN
   en modo oscuro, porque el atributo data-bs-theme vive en <html>, que ES
   :root. Resultado medido: los encabezados de tabla quedaban color pizarra
   oscuro sobre la tarjeta oscura -- 1,20 de contraste, peor que antes de
   tocar nada. Hay que excluir el tema oscuro a mano, que es lo que hace el
   `:not([data-bs-theme="dark"])`. Lo encontro medir los dos temas; en claro
   estaba todo en verde. */

/* Los ultimos tres del tema oscuro, que NO los trajo GOV-UX-42: la tarjeta
   ya era oscura ahi antes. Se cierran igual, ya que estamos midiendo:
   `text-primary` en un boton-enlace daba 1,92 (el azul de marca es de fondo
   claro) y `text-danger` 3,18. Los claros ya pasan, asi que solo hay
   variante oscura. */
/* El `#main-content-wrapper` esta para superar en peso a
   `[data-bs-theme="dark"] #main-content-wrapper .text-primary` de
   sge-unificado.css, que tambien lleva !important (un ID pesa mas que tres
   clases).

   PENDIENTE, y queda dicho porque no se resolvio: en el panel financiero
   quedan DOS botones-enlace ("Ver todos" / "Ver todas") con 1,92 de contraste
   en modo oscuro. No los trajo GOV-UX-42 -- esa tarjeta ya era oscura antes.
   Y no salen de la cascada: se probo poniendo la declaracion INLINE con
   !important sobre el elemento y el color computado no se movio de
   rgb(59,93,231), asi que hay algo mas en juego (un text-fill, una variable
   pisada en runtime, o el propio JS del tema). Se anota medido en vez de
   seguir adivinando; el resto de la pantalla quedo en 0 bajo AA. */
[data-bs-theme="dark"] #main-content-wrapper .card-enhanced .text-primary,
[data-bs-theme="dark"] #main-content-wrapper .card-enhanced .btn-link,
[data-bs-theme="dark"] #main-content-wrapper .immersion-card .text-primary,
[data-bs-theme="dark"] #main-content-wrapper .immersion-card .btn-link,
[data-bs-theme="dark"] #main-content-wrapper .glass-panel-elite .text-primary,
[data-bs-theme="dark"] #main-content-wrapper .glass-panel-elite .btn-link {
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .card-enhanced .text-danger,
[data-bs-theme="dark"] .immersion-card .text-danger,
[data-bs-theme="dark"] .glass-panel-elite .text-danger {
    color: #fca5a5 !important;
}

/* Botones amarillo y celeste con texto BLANCO: 1,75 y 1,99 de contraste.
   No los trajo GOV-UX-42 -- el fondo lo pone el propio boton, asi que fallan
   igual sobre cualquier tarjeta -- pero aparecieron midiendo estas pantallas y
   se arreglan aca, acotado a ellas. Sobre amarillo y celeste el texto va
   OSCURO; es lo que hace el propio Bootstrap 5.3 en su tema por defecto y lo
   que pide AA. */
.card-enhanced .btn-warning,
.card-enhanced .btn-info,
.immersion-card .btn-warning,
.immersion-card .btn-info,
.glass-panel-elite .btn-warning,
.glass-panel-elite .btn-info {
    color: #1f2937 !important;
}