/*
    Paleta calcada de JAM.Desktop/App.axaml (tema oscuro) y
    JAM.Desktop/Styles/Controls.axaml — mismos nombres, mismos
    hexadecimales, para que la web y el escritorio se vean como el
    mismo producto. Si cambia la paleta del escritorio, cambiar
    también aquí.
*/
:root {
    --jam-bg: #081321;
    --jam-bg-alt: #0A1928;
    --jam-sidebar: #10233C;
    --jam-surface: #15263F;
    --jam-border: #1F4D8A;
    --jam-border-subtle: #2F3D4F;
    --jam-title: #ECECEC;
    --jam-text-secondary: #9FB3C8;
    --jam-section-label: #7A8CA5;
    --jam-gold: #D4AF37;
    --jam-accent: #2E63C7;
    --jam-accent-hover: #3B75E0;
    --jam-positive: #4ADE80;
    --jam-negative: #F87171;
    --jam-warning: #FBBF24;
}

/* 18/09/2026 (José): modo claro — mismos nombres de variable,
   valores calcados del ResourceDictionary "Light" de
   JAM.Desktop/App.axaml. Se activa con [data-theme="light"] en
   <html>, fijado antes de pintar por el script inline en App.razor
   (localStorage "jam-theme", js/theme.js) para no dar el "flash"
   oscuro al cargar. --jam-bg-alt no tiene equivalente directo en
   escritorio (solo se usa como matiz sutil del fondo); mismo criterio
   que su versión oscura. */
:root[data-theme="light"] {
    --jam-bg: #F4F6FA;
    --jam-bg-alt: #EDF0F5;
    --jam-sidebar: #FFFFFF;
    --jam-surface: #FFFFFF;
    --jam-border: #C7D2E0;
    --jam-border-subtle: #E2E8F0;
    --jam-title: #0F172A;
    --jam-text-secondary: #52627A;
    --jam-section-label: #6B7B93;
    --jam-gold: #B8860B;
    --jam-accent: #2E63C7;
    --jam-accent-hover: #4A80DB;
    --jam-positive: #16A34A;
    --jam-negative: #DC2626;
    --jam-warning: #D97706;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--jam-bg);
    color: var(--jam-title);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

a {
    color: var(--jam-gold);
    text-decoration: none;
}

a:hover {
    color: #E8C563;
}

::selection {
    background: var(--jam-accent);
    color: #fff;
}

.jam-input::placeholder {
    color: #5F7188;
}

.jam-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Fila de KPI densa (Coste/Valor/Beneficio/Rentabilidad), estilo
   escritorio: varias tarjetas pequeñas en una fila en vez de 3
   grandes — mismo patrón, más información por pantalla. */
.jam-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.jam-row-2 {
    display: flex;
    gap: 64px;
    align-items: center;
}

.jam-nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Ventana flotante reutilizable (12/09/2026) — primer uso en
   Resumen.razor (Principales posiciones / detalle de J.A.M. AI
   Advisor), pensada para reutilizarse en cualquier página que
   necesite mostrar contenido ampliado sin ocupar espacio fijo en
   pantalla. Overlay que cierra al pulsar fuera de la tarjeta
   (@onclick:stopPropagation en la tarjeta interior). */
.jam-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 16, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

/* Ancho mínimo 2/3 de pantalla (12/09/2026, José: "apliquemos a
   todas las ventanas emergentes el mismo formato") — regla única
   para TODAS las ventanas flotantes de la app, presentes y futuras;
   no hace falta ninguna clase/variante aparte por página. */
.jam-modal-card {
    background: var(--jam-surface);
    border: 1px solid var(--jam-border);
    border-radius: 12px;
    padding: 18px 20px;
    max-width: 66vw;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
}

/* Reloj de "cargando" (16/09/2026, José: "que no parezca que la
   página está colgada") — reutilizable en cualquier estado de espera
   (IA, importaciones, etc.), no solo IA. */
.jam-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(212, 175, 55, 0.25);
    border-top-color: var(--jam-gold);
    border-radius: 50%;
    animation: jam-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes jam-spin {
    to { transform: rotate(360deg); }
}

/* Modal de reconexión SignalR/Blazor propio (16/09/2026, José: el
   aviso por defecto "Rejoining the server..." tenía "muy mal aspecto,
   nada moderno ni profesional"). blazor.web.js añade/quita estas
   clases sobre #components-reconnect-modal solo; el resto es estilo
   propio. Estados "failed"/"rejected": el circuito no se pudo
   recuperar — se muestra el botón de recarga. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(8, 19, 33, 0.72);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.jam-reconnect-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 36px;
    background: var(--jam-surface);
    border: 1px solid var(--jam-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    min-width: 240px;
    text-align: center;
}

.jam-reconnect-box .jam-spinner {
    width: 26px;
    height: 26px;
    border-width: 3px;
}

.jam-reconnect-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--jam-title);
    margin: 4px 0 0;
}

.jam-reconnect-subtext {
    font-size: 11.5px;
    color: var(--jam-text-secondary);
    margin: 0;
}

.jam-reconnect-retry {
    display: none;
    margin-top: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #081321;
    background: var(--jam-gold);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#components-reconnect-modal.components-reconnect-failed .jam-reconnect-retry,
#components-reconnect-modal.components-reconnect-rejected .jam-reconnect-retry {
    display: inline-block;
}

@media (max-width: 900px) {
    .jam-grid-3 {
        grid-template-columns: 1fr;
    }

    .jam-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jam-row-2 {
        flex-direction: column;
    }

    .jam-nav-links {
        display: none;
    }
}

/* 30/09/2026 (5.25): guía interactiva — ver Components/Layout/GuidedTour.razor
   y js/jam-tour.js. Nada de esto captura clics salvo la burbuja: la
   app se sigue usando con normalidad mientras la guía está abierta. */
.jam-tour-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    pointer-events: none;
}

.jam-tour-spot {
    display: none;
    position: fixed;
    border: 2px solid var(--jam-gold);
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 18px 4px rgba(212, 175, 55, 0.55);
    z-index: 9999;
    pointer-events: none;
    transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
    animation: jamTourPulse 1.6s ease-in-out infinite;
}

@keyframes jamTourPulse {
    0%, 100% { border-color: var(--jam-gold); }
    50% { border-color: #F5D76E; }
}

.jam-tour-bubble {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--jam-surface);
    border: 1px solid var(--jam-gold);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 10000;
    font-family: Inter, sans-serif;
}

.jam-tour-bubble.jam-tour-centered {
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    width: 420px;
}

.jam-tour-counter {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jam-gold);
}

.jam-tour-title {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--jam-title);
}

.jam-tour-body {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jam-text-secondary);
}

.jam-tour-hint {
    margin-top: 8px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--jam-text-secondary);
}

.jam-tour-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jam-tour-primary {
    font-size: 12.5px;
    font-weight: 700;
    color: #081321;
    background: var(--jam-gold);
    border: none;
    border-radius: 7px;
    padding: 8px 14px;
    cursor: pointer;
}

.jam-tour-secondary {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--jam-title);
    background: transparent;
    border: 1px solid var(--jam-border);
    border-radius: 7px;
    padding: 7px 12px;
    cursor: pointer;
}

.jam-tour-link {
    font-size: 12px;
    color: var(--jam-text-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* 30/09/2026 (5.28): oculta hasta que jam-tour.js la coloca (evita el salto desde la esquina). */
.jam-tour-bubble:not(.jam-tour-centered) {
    visibility: hidden;
}

/* 08/10/2026 (5.70): Blazor (FocusOnNavigate en Routes.razor) pone el foco
   en el <h1> al cargar cada página para los lectores de pantalla; el
   navegador lo marcaba con un recuadro blanco. Se oculta solo el contorno. */
h1:focus,
h1:focus-visible {
    outline: none;
}