@import "tokens.css";
.glass-panel {
    background: var(--cristal);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--risk-border);
    border-radius: 24px;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--tinta) 1%, transparent),
        0 20px 40px -12px color-mix(in srgb, var(--tinta) 4%, transparent),
        0 20px 50px -12px var(--risk-glow);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease;
}
.glass-panel:hover {
    border-color: var(--risk-accent) !important;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--tinta) 2%, transparent),
        0 32px 56px -12px color-mix(in srgb, var(--tinta) 7%, transparent),
        0 30px 60px -10px var(--risk-glow);
}
.risk-glitch h1,
.risk-glitch h2,
.risk-glitch h3 {
    animation: glitch-text 2s infinite;
}
@keyframes glitch-text {
    0% {
        text-shadow: none;
    }
    2% {
        text-shadow: 2px 0 var(--ocre), -2px 0 var(--tinta);
    }
    4% {
        text-shadow: none;
    }
    96% {
        text-shadow: none;
    }
    98% {
        text-shadow: -2px 0 var(--ocre), 2px 0 var(--tinta);
    }
    100% {
        text-shadow: none;
    }
}
html {
    scroll-behavior: smooth;
}
@media (min-width: 769px) {
    html {
        scrollbar-gutter: stable;
    }
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--tinta) 2%, transparent);
    }
    ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--ocre) 30%, transparent);
        border-radius: 99px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--ocre) 60%, transparent);
        border: 2px solid transparent;
        background-clip: padding-box;
    }
}
@media (max-width: 768px) {
    html {
        scrollbar-gutter: auto !important;
    }
    html,
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}
body {
    background-color: var(--crema-fondo);
    color: var(--verde-forense);
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.65;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-hyphens: none;
    hyphens: none;
}
h1,
h2,
h3 {
    color: var(--verde-forense);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.18;
    overflow-wrap: break-word;
    word-break: break-word;
}
.mono {
    font-family: 'JetBrains Mono', monospace;
}
.header-seal {
    border-bottom: 4px solid var(--dorado-premium);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--tinta) 15%, transparent);
}
.active-row-label {
    background: var(--verde-forense) !important;
    color: var(--dorado-premium) !important;
    box-shadow: inset 0 0 6px color-mix(in srgb, var(--ocre) 20%, transparent);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-open .accordion-content {
    max-height: 2000px;
}
input[type="checkbox"]:checked+.app-card {
    background: var(--verde-forense);
    color: var(--dorado-premium);
    border-color: var(--dorado-premium);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--tinta) 20%, transparent);
    transform: translateY(-2px);
}
.app-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.3s ease,
        border-color 0.3s ease;
}
.app-card:active {
    transform: scale(0.98);
}
.step-container {
    display: none;
    opacity: 0;
}
.step-container.active {
    display: block;
    animation: fadeInSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.live-dash-wrapper {
    display: none;
}
.t-titulo {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--verde-forense);
    overflow-wrap: break-word;
    word-break: break-word;
}
.t-subtitulo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
    overflow-wrap: break-word;
}
.t-parrafo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(0.925rem, 1.2vw, 1.05rem);
    letter-spacing: -0.005em;
    line-height: 1.75;
    color: var(--verde-forense);
    overflow-wrap: break-word;
    word-break: break-word;
}
.t-enfasis {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--verde-forense);
    overflow-wrap: break-word;
}
.t-acompanamiento {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(0.72rem, 1vw, 0.825rem);
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--texto-3);
    overflow-wrap: break-word;
}
.countdown-emergency .t-acompanamiento {
    color: var(--papel);
}
.t-gold {
    color: var(--dorado-oscuro) !important;
}
.t-alerta {
    color: var(--rojo-alerta) !important;
}
.t-muted {
    color: var(--texto-2) !important;
}
.t-inverse {
    color: var(--dorado-premium) !important;
}
.mobile-loader {
    position: fixed;
    inset: 0;
    background: var(--crema-fondo);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease;
}
.mobile-loader.hidden {
    opacity: 0;
    pointer-events: none;
}
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid color-mix(in srgb, var(--tinta) 10%, transparent);
    border-top-color: var(--dorado-premium);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
button[onclick*="goToStep"],
button[onclick*="showFracture"] {
    font-size: max(0.825rem, 13px) !important;
    letter-spacing: 0.18em !important;
}
:root { --stepper-altura: 86px; }
.chip-info {
    background-color: color-mix(in srgb, var(--ocre) 16%, transparent);
    color: var(--dorado-oscuro);
    border: 1px solid color-mix(in srgb, var(--ocre) 35%, transparent);
    font-weight: 700;
}
.chip-info:hover {
    background-color: color-mix(in srgb, var(--ocre) 26%, transparent);
}
.btn-report-primary {
    background-color: var(--verde-forense);
    color: var(--dorado-premium);
}
.card-critical {
    border-color: var(--papel);
}
.text-critical {
    color: var(--ocre);
}