/* ============================================================================
DECLARACIÓN DE PROPIEDAD INTELECTUAL Y DERECHOS DE AUTOR REGISTRADOS
============================================================================

PROPIETARIO ÚNICO, DESARROLLADOR, DISEÑADOR Y PROGRAMADOR EXCLUSIVO:
----------------------------------------------------------------------------
Ing. Roel Arturo Copetillo Portela
COPR810501rm1

HISTORIAL DE REGISTRO DE DESARROLLO (FECHA DE INICIO):
----------------------------------------------------------------------------
- Inicio oficial de diseño y desarrollo: 14 de Mayo de 2026

DECLARACIÓN DE DERECHOS LEGALES:
----------------------------------------------------------------------------
Tanto esta versión de prueba (trial/beta) como cualquier versión posterior,
estable, modificada, compilada, autoejecutable o derivada del código de esta 
aplicación, pertenecen al 100% en exclusiva y de manera vitalicia a su único
dueño y desarrollador Roel Arturo Copetillo Portela. Queda prohibida la copia, 
distribución, alteración o venta no autorizada sin el consentimiento expreso
por escrito del autor.

Todos los Derechos Reservados © 2026.
============================================================================ */

/* ═══════════════════════════════════════════════════════
   OBSIDIANA PREMIUM THEME OVERRIDE
   (Carga después de app.css para reemplazar solo colores y fondos sin romper layout)
   ═══════════════════════════════════════════════════════ */

/* ── 1. Variables Globales Reemplazadas ── */
:root {
    --bg:            #000000;
    --bg2:           #050505;
    --surface:       #0A0A0A; /* Negro sólido */
    --surface2:      #0F0F0F; /* Negro sólido ligeramente gris */
    --border:        rgba(255, 255, 255, 0.07);
    --border-hi:     rgba(255, 255, 255, 0.22);
    --inset-hi:      inset 0 1px 0 rgba(255,255,255,0.10), inset 1px 0 0 rgba(255,255,255,0.04);
}

body {
    background: #000000 !important;
}

/* ── 2. Canvas y Frame ── */
#hud-bg {
    opacity: 0.85 !important; /* Resplandor dinámico restaurado */
}

.global-hud-frame {
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
    animation: none !important; /* Quitamos el pulso neón */
}

/* ── 3. Header y Logo ── */
/* Heredan de .header-visual-box en app.css para mantener fondo negro sólido y borde púrpura */

.app-header::after {
    display: none !important; /* Oculta la línea inferior de la cabecera */
}

.logo-title {
    background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0.7), #ffffff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

/* ── 4. Tabs Bar y Tabs ── */
/* Heredan de .header-visual-box en app.css para mantener fondo negro sólido y borde púrpura */

.tabs-bar::before, .tabs-bar::after {
    display: none !important; /* Ocultamos decoraciones neón */
}

.tab {
    background: #000000 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--muted) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.03) !important;
}

.tab:hover {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 0 14px rgba(255,255,255,0.20), var(--inset-hi) !important;
}

/* Colores de resplandor (hover) específicos para cada botón según su icono */
.tab[data-tab="upload"]:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.3), var(--inset-hi) !important;
}
.tab[data-tab="analyze"]:hover {
    border-color: rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.3), var(--inset-hi) !important;
}
.tab[data-tab="adjust"]:hover {
    border-color: rgba(255, 153, 0, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 153, 0, 0.3), var(--inset-hi) !important;
}
.tab[data-tab="ergonomics"]:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3), var(--inset-hi) !important;
}
.tab[data-tab="results"]:hover {
    border-color: rgba(0, 255, 102, 0.4) !important;
    box-shadow: 0 0 14px rgba(0, 255, 102, 0.3), var(--inset-hi) !important;
}
.tab[data-tab="nom036"]:hover {
    border-color: rgba(255, 107, 53, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 107, 53, 0.3), var(--inset-hi) !important;
}
.tab-help:hover {
    border-color: rgba(163, 255, 0, 0.4) !important;
    box-shadow: 0 0 14px rgba(163, 255, 0, 0.3), var(--inset-hi) !important;
}
.tab-clear:hover {
    border-color: rgba(255, 170, 0, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.3), var(--inset-hi) !important;
}
.tab-home:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.3), var(--inset-hi) !important;
    color: #ffffff !important;
}

/* INICIO en EFI: mismo acento cyan que el main (upload activo) */
.tab-home {
    color: #e2e8f0 !important;
    border-color: rgba(0, 229, 255, 0.45) !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.28), inset 0 0 6px rgba(0, 229, 255, 0.12) !important;
}
.tab-home .tab-icon {
    color: #00e5ff !important;
    stroke: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)) !important;
}
.tab-home:hover {
    border-color: rgba(0, 229, 255, 0.65) !important;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.45), inset 0 0 8px rgba(0, 229, 255, 0.18) !important;
    color: #ffffff !important;
}
.tab-home:focus,
.tab-home:focus-visible,
.tab-home:active {
    outline: none !important;
    background: #051014 !important;
    border-color: rgba(0, 229, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), inset 0 0 8px rgba(0, 229, 255, 0.15) !important;
}
.tab-close:hover {
    border-color: rgba(255, 51, 51, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 51, 51, 0.3), var(--inset-hi) !important;
}
.tab-save:hover {
    border-color: rgba(0, 255, 136, 0.4) !important;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.3), var(--inset-hi) !important;
}
.tab-open:hover {
    border-color: rgba(255, 204, 0, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.3), var(--inset-hi) !important;
}
.tab-import:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3), var(--inset-hi) !important;
}
.tab-admin:hover {
    border-color: rgba(255, 0, 119, 0.4) !important;
    box-shadow: 0 0 14px rgba(255, 0, 119, 0.3), var(--inset-hi) !important;
}



.tab.active {
    color: #ffffff !important;
    background: #051014 !important;
    border: 1px solid rgba(0, 229, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.35), inset 0 0 8px rgba(0, 229, 255, 0.15) !important;
}
.tab.active .tab-icon {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8)) !important;
    color: #00e5ff !important;
}

/* Preservar colores originales, solo apagando el resplandor neón */
.tab[data-tab] .tab-icon {
    filter: none !important;
}
.tab-help .tab-icon, .tab-clear .tab-icon {
    filter: none !important;
}
.tab-close .tab-icon, .tab-save .tab-icon, .tab-open .tab-icon {
    filter: none !important;
}

/* Sweep effect sutil para tabs */
.tab::after {
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%) !important;
}

/* ── 5. Cards y Paneles ── */
.card {
    background: #0A0B10 !important; /* Gris oscuro sutil para separar del negro del fondo */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--inset-hi), 0 4px 16px rgba(0,0,0,0.8) !important;
}
/* Efecto hover eliminado de .card general en el tema obsidian para mantener consistencia estática en contenedores de layout */
.card > h2::after, .card > h3::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, transparent 100%) !important;
}
.card h2 { color: rgba(255,255,255,0.90) !important; }
.card h3 { color: rgba(255,255,255,0.65) !important; }

/* ── 6. Botones ── */
.btn-primary {
    background: #0A0A0A !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    box-shadow: var(--inset-hi), 0 4px 16px rgba(0,0,0,0.7) !important;
}
.btn-primary:hover:not(:disabled) {
    border-color: rgba(255,255,255,0.38) !important;
    box-shadow: 0 0 16px rgba(255,255,255,0.28), var(--inset-hi), 0 6px 20px rgba(0,0,0,0.8) !important;
}

.btn-danger {
    background: rgba(220,30,60,0.09) !important;
    border: 1px solid rgba(220,30,60,0.28) !important;
    color: #ffffff !important;
    box-shadow: var(--inset-hi), 0 4px 16px rgba(0,0,0,0.7) !important;
}
.btn-danger:hover:not(:disabled) {
    border-color: rgba(255,60,80,0.60) !important;
    box-shadow: 0 0 16px rgba(220,30,60,0.28), var(--inset-hi), 0 6px 20px rgba(0,0,0,0.8) !important;
}

.btn-go-results, .splash-btn-go, #btnISendToAdjust {
    background: rgba(0,200,100,0.20) !important;
    border: 1px solid rgba(0,200,100,0.32) !important;
    color: #ffffff !important;
    box-shadow: var(--inset-hi), 0 0 10px rgba(0,200,100,0.10), 0 4px 16px rgba(0,0,0,0.7) !important;
}
.btn-go-results:hover:not(:disabled), .splash-btn-go:hover:not(:disabled), #btnISendToAdjust:hover:not(:disabled) {
    border-color: rgba(0,230,120,0.60) !important;
    box-shadow: 0 0 18px rgba(0,200,100,0.28), var(--inset-hi), 0 6px 20px rgba(0,0,0,0.8) !important;
}

.btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.65) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
.btn-ghost:hover {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 0 14px rgba(255,255,255,0.18), 0 4px 16px rgba(0,0,0,0.6) !important;
}

/* Banderas idioma: activo blanco (por encima del ghost genérico) */
.btn-ghost.xrz-lang-btn.xrz-lang-active {
    border-color: rgba(255, 255, 255, 0.95) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65),
        0 0 14px rgba(255, 255, 255, 0.50),
        0 0 28px rgba(255, 255, 255, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.55) !important;
}
.btn-ghost.xrz-lang-btn.xrz-lang-active:hover {
    border-color: #ffffff !important;
    box-shadow:
        0 0 0 1px #ffffff,
        0 0 18px rgba(255, 255, 255, 0.60),
        0 0 34px rgba(255, 255, 255, 0.32),
        0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Uniform Sweep effects for buttons */
.btn-primary::after, .btn-danger::after, .btn-ghost::after, .btn-go-results::after {
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.09) 50%, transparent 80%) !important;
}

/* ── 7. KPIs y Live Log ── */
.kpi-card {
    background: #101118 !important; /* Gris pizarra suave */
    border: 1px solid var(--border) !important;
    box-shadow: var(--inset-hi), 0 4px 16px rgba(0,0,0,0.8) !important;
}
.kpi-card:hover {
    background: #14151D !important; /* Ligeramente más claro en hover */
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.07), var(--inset-hi), 0 24px 60px rgba(0,0,0,0.95) !important;
}
.kpi-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent) !important;
}

.live-log {
    background: rgba(0,0,0,0.72) !important;
    border: 1px solid var(--border) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
.lm-item {
    background: #12131A !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--inset-hi) !important;
}
.lm-item:hover {
    background: #161822 !important;
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.08), var(--inset-hi) !important;
}
.lm-item span { color: #ffffff !important; }

/* ── 8. Info Grid y Drop Zone ── */
.info-item {
    background: #11121A !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--inset-hi) !important;
}
.info-item::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
}
.info-item:hover { 
    background: #151722 !important;
    border-color: rgba(255,255,255,0.18) !important; 
}
.info-item span { color: #ffffff !important; }

.drop-zone {
    background: #0E0F15 !important;
    border: 1px dashed rgba(255,255,255,0.16) !important;
}
.drop-zone::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%) !important;
}
.drop-zone:hover, .drop-zone.drag-over {
    border-color: rgba(255,255,255,0.3) !important;
    background: #12141C !important;
    box-shadow: 0 0 16px rgba(255,255,255,0.08) !important;
}



/* ── 9. Splash Screen ── */
.splash-card {
    background: #11141a !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: var(--inset-hi), 0 24px 80px rgba(0,0,0,0.95) !important;
}
.splash-card-glow::before {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255,255,255,0.4) 10%,
        transparent 10.1%,
        transparent 55%,
        rgba(255,255,255,0.2) 65%,
        transparent 65.1%,
        transparent 100%
    ) !important;
}
.splash-title {
    background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0.6), #ffffff) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.splash-divider {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent) !important;
}

/* ── 10. Interactive Modal ── */
.i-term-btn {
    background: #101118 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.i-term-btn[data-code^="G"]:hover, .i-term-btn[data-code^="G"].i-term-selected {
    background: rgba(255,50,80,0.12) !important;
    border-color: rgba(255,50,80,0.55) !important;
}
.i-term-btn[data-code^="P"]:hover, .i-term-btn[data-code^="P"].i-term-selected {
    background: rgba(255,153,0,0.12) !important;
    border-color: rgba(255,153,0,0.55) !important;
}
/* Eliminado: btnIConfirmManual hereda su estilo verde de la regla global arriba */

/* ── 11. Custom Tab Inputs ── */
.adjust-input {
    background: #0E0F15 !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: var(--inset-hi) !important;
    color: rgba(0, 240, 255, 0.75) !important; /* Texto cian sutil */
}
.adjust-input:focus {
    border-color: rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.15), 0 0 16px rgba(0, 240, 255, 0.10), var(--inset-hi) !important;
    color: #00f0ff !important;
}

.ref-table td input {
    color: rgba(0, 240, 255, 0.75) !important;
}
.ref-table tr:hover td input {
    color: #00f0ff !important;
}

/* ── Canvas Box ── */
.canvas-wrap {
    background: #08090D !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--inset-hi) !important;
}

/* Flash Radial Effect Fix for the new button classes */
.tab::before,
.btn-primary::before,
.btn-danger::before,
.btn-ghost::before,
.btn-go-results::before,
.splash-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0);
    width: 120%; height: 120%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 65%);
    opacity: 0; pointer-events: none; z-index: 2;
}
.tab.clicked::before,
.btn-primary.clicked::before,
.btn-danger.clicked::before,
.btn-ghost.clicked::before,
.btn-go-results.clicked::before,
.splash-btn.clicked::before {
    animation: flashPulse 0.35s ease-out forwards;
}

@keyframes flashPulse {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
    80%  { transform: translate(-50%,-50%) scale(1.2); opacity: 0.3; }
    100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

/* ── Mesh Background Tuning (Claro y Vibrante) ── */
.mesh-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #000000 !important;
}

#glcanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Suavizar viñeta para permitir visibilidad completa de colores vibrantes sin oscurecer a negro */
.mesh-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%) !important;
    z-index: 1;
    pointer-events: none;
}

/* Blobs de color más vivos y luminosos */
.mesh-blob {
    opacity: 0.85 !important;
    width: 65vw !important; 
    height: 65vw !important;
    filter: blur(80px) !important;
}

/* ── 12. Tablas ── */
.ref-table th {
    background: #111218 !important; /* Cabecera de tabla gris pizarra */
    border-bottom: 2px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.ref-table td {
    background: #0B0C10 !important; /* Celdas ligeramente por encima del fondo base */
    color: rgba(0, 240, 255, 0.7) !important; /* Cian muy sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.ref-table tr:hover td { 
    background: #14151D !important; /* Hover notable */
    color: #00f0ff !important; /* Cian más brillante en hover */
}

/* ── Estilos para Iconos de Descarga ── */
#btnExportCSV .btn-icon {
    color: #00f0ff !important;
}
#btnExportJSON .btn-icon {
    color: #ffaa00 !important;
}

/* ── 13. Interactive Table Overrides ── */
.i-table-container {
    background: #0E0F15 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.i-table-scroll {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.i-table-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: #0B0C10 !important;
}
.i-table-row:hover {
    background: #14151D !important;
}
.i-td-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

#pastedInstructions {
    background: #000000 !important;
}

.app-header.header-visual-box {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
}

.tabs-bar.header-visual-box {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    background: linear-gradient(rgba(0, 229, 255, 0.10), rgba(0, 229, 255, 0.10)), #000000 !important;
}
#title-box {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
}

#splashContinuar, #splashAbandonar {
    min-width: 240px !important;
    padding: 14px 34px !important;
    font-size: 1.15rem !important;
}

#splashContinuar .btn-icon, #splashAbandonar .btn-icon {
    width: 20px !important;
    height: 20px !important;
}