/* =========================================================
   LABORATORIO FORENSE COGNITIVO
   Unidad 1 · Museo de las Mentes
   ========================================================= */

html.forense-abierto,
html.forense-abierto body {
    overflow: hidden !important;
}

.acceso-forense-cognitivo {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    overflow: hidden;
    padding: 24px 26px;
    border: 1px solid rgba(45, 212, 191, .42);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 15%, rgba(45, 212, 191, .20), transparent 24%),
        linear-gradient(120deg, rgba(14, 165, 233, .12), rgba(139, 92, 246, .10));
}

.acceso-forense-cognitivo::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(255, 255, 255, .04);
    border-radius: 50%;
    pointer-events: none;
}

.acceso-forense-cognitivo__icono {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(45, 212, 191, .52);
    border-radius: 19px;
    color: #5eead4;
    background: rgba(8, 145, 178, .16);
    font-size: 31px;
    font-weight: 900;
}

.acceso-forense-cognitivo small {
    display: block;
    margin-bottom: 6px;
    color: #5eead4;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.acceso-forense-cognitivo h3 {
    margin: 0 0 6px;
    color: #f8fafc;
    font-size: clamp(20px, 2.4vw, 28px);
}

.acceso-forense-cognitivo p {
    max-width: 680px;
    margin: 0;
    color: #cbd5e1;
    line-height: 1.55;
}

.acceso-forense-cognitivo button {
    position: relative;
    z-index: 1;
    padding: 14px 19px;
    border: 0;
    border-radius: 14px;
    color: #06213a;
    background: linear-gradient(120deg, #38bdf8, #5eead4);
    box-shadow: 0 12px 28px rgba(45, 212, 191, .16);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

.acceso-forense-cognitivo button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

#laboratorioForenseIA,
#laboratorioForenseIA * {
    box-sizing: border-box;
}

#laboratorioForenseIA[hidden] {
    display: none !important;
}

.fc-laboratorio {
    --fc-tinta: #172033;
    --fc-suave: #667085;
    --fc-linea: #dce3ee;
    --fc-papel: #f7f8fc;
    --fc-acento: #6d5dfc;
    --fc-claro: #eeeaff;
    position: fixed;
    z-index: 100100;
    inset: 0;
    overflow: auto;
    color: var(--fc-tinta);
    background:
        radial-gradient(circle at 8% 6%, rgba(56, 189, 248, .24), transparent 26%),
        radial-gradient(circle at 92% 92%, rgba(167, 139, 250, .22), transparent 28%),
        #e9eef7;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fc-laboratorio button,
.fc-laboratorio input {
    font: inherit;
}

.fc-pantalla {
    min-height: 100%;
    padding: 22px max(24px, calc((100vw - 1160px) / 2)) 54px;
    background:
        linear-gradient(rgba(255, 255, 255, .60), rgba(255, 255, 255, .60)),
        radial-gradient(circle at 14% 72%, var(--fc-claro), transparent 24%);
}

.fc-violeta { --fc-acento: #7257e8; --fc-claro: #eeeaff; }
.fc-verde { --fc-acento: #0f9f78; --fc-claro: #dff8ee; }
.fc-amarillo { --fc-acento: #dc8b05; --fc-claro: #fff2c7; }
.fc-rosa { --fc-acento: #db4c82; --fc-claro: #ffe3ee; }
.fc-azul { --fc-acento: #1889d8; --fc-claro: #dff2ff; }
.fc-naranja { --fc-acento: #e06735; --fc-claro: #ffe8da; }
.fc-turquesa { --fc-acento: #0799a1; --fc-claro: #d8f6f5; }
.fc-lila { --fc-acento: #8a55c4; --fc-claro: #f1e5ff; }

.fc-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1160px;
    margin: 0 auto 22px;
}

.fc-top span {
    color: #536174;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.fc-top button {
    width: max-content;
    padding: 8px 0;
    border: 0;
    color: #344054;
    background: transparent;
    font-weight: 750;
    cursor: pointer;
}

.fc-top button:hover { color: var(--fc-acento); }

.fc-top .fc-x {
    justify-self: end;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--fc-linea);
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    font-size: 24px;
}

.fc-progreso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 780px;
    margin: 0 auto 38px;
}

.fc-progreso i {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: #98a2b3;
    font-style: normal;
}

.fc-progreso i::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: #dbe2ed;
}

.fc-progreso i:first-child::before { display: none; }

.fc-progreso b {
    position: relative;
    z-index: 1;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 3px solid #dbe2ed;
    border-radius: 50%;
    background: #f7f8fc;
    font-size: 12px;
}

.fc-progreso span { font-size: 12px; font-weight: 750; }
.fc-progreso i.activo { color: var(--fc-acento); }
.fc-progreso i.activo::before { background: color-mix(in srgb, var(--fc-acento) 55%, white); }
.fc-progreso i.activo b { border-color: var(--fc-acento); color: #fff; background: var(--fc-acento); }

.fc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 20px auto 34px;
}

.fc-hero small,
.fc-caso-titulo small,
.fc-pasos > small,
.fc-expediente small,
.fc-conclusiones small {
    color: var(--fc-acento);
    font-weight: 900;
    letter-spacing: .12em;
}

.fc-hero h1 {
    margin: 10px 0 16px;
    color: #152239;
    font-size: clamp(48px, 7vw, 82px);
    line-height: .91;
    letter-spacing: -.055em;
}

.fc-hero p {
    max-width: 620px;
    margin: 0;
    color: #536174;
    font-size: 19px;
    line-height: 1.55;
}

.fc-datos-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.fc-datos-rapidos span {
    padding: 8px 11px;
    border: 1px solid #d7deea;
    border-radius: 999px;
    color: #465468;
    background: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 800;
}

.fc-lupa {
    position: relative;
    display: grid;
    width: min(290px, 70vw);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border: 20px solid #fff;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .82), transparent 18%),
        linear-gradient(145deg, #c7f1ff, #e7dcff);
    box-shadow: 0 28px 60px rgba(44, 59, 91, .20), inset 0 0 0 1px #cad5e6;
}

.fc-lupa span { font-size: 100px; filter: drop-shadow(0 14px 10px rgba(54, 72, 111, .18)); }

.fc-lupa i {
    position: absolute;
    right: -67px;
    bottom: -45px;
    width: 102px;
    height: 30px;
    border: 8px solid #fff;
    border-radius: 999px;
    background: #344054;
    box-shadow: 0 15px 25px rgba(44, 59, 91, .20);
    transform: rotate(48deg);
}

.fc-formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #dce3ee;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 45px rgba(51, 65, 85, .08);
}

.fc-formulario label {
    display: grid;
    gap: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 850;
}

.fc-formulario label:nth-child(3) { grid-column: 1 / -1; }

.fc-formulario input,
.fc-mediciones input {
    width: 100%;
    border: 1px solid #ccd5e3;
    border-radius: 13px;
    outline: 0;
    color: #172033;
    background: #fff;
}

.fc-formulario input { padding: 14px; }

.fc-formulario input:focus,
.fc-mediciones input:focus {
    border-color: var(--fc-acento);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-acento) 15%, transparent);
}

.fc-btn,
.fc-btn-claro {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.fc-btn {
    border: 1px solid var(--fc-acento);
    color: #fff;
    background: var(--fc-acento);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--fc-acento) 25%, transparent);
}

.fc-btn-claro {
    border: 1px solid color-mix(in srgb, var(--fc-acento) 38%, white);
    color: var(--fc-acento);
    background: #fff;
}

.fc-btn:hover,
.fc-btn-claro:hover { transform: translateY(-2px); filter: brightness(1.03); }
.fc-btn:disabled { opacity: .62; cursor: wait; transform: none; }
.fc-formulario .fc-btn { grid-column: 1 / -1; }

.fc-privacidad {
    max-width: 1000px;
    margin: 12px auto 0;
    color: #667085;
    text-align: center;
    font-size: 12px;
}

.fc-caso-titulo {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto 24px;
}

.fc-caso-titulo > span {
    display: grid;
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: var(--fc-acento);
    box-shadow: 0 15px 30px color-mix(in srgb, var(--fc-acento) 24%, transparent);
    font-size: 32px;
    font-weight: 950;
}

.fc-caso-titulo h1 {
    margin: 4px 0 0;
    color: #172033;
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -.04em;
}

.fc-caso-titulo.compacto > span { width: 58px; height: 58px; border-radius: 17px; font-size: 25px; }
.fc-caso-titulo.compacto h1 { font-size: clamp(30px, 4vw, 46px); }

.fc-pregunta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto 20px;
    padding: 19px 22px;
    border: 1px solid color-mix(in srgb, var(--fc-acento) 25%, white);
    border-radius: 18px;
    background: var(--fc-claro);
}

.fc-pregunta > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--fc-acento);
    font-size: 23px;
    font-weight: 950;
}

.fc-pregunta h2 { margin: 0; font-size: clamp(19px, 2.4vw, 27px); line-height: 1.25; }

.fc-experimento {
    display: grid;
    grid-template-columns: 1fr 1.35fr .72fr;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}

.fc-experimento > * {
    border: 1px solid #dce3ee;
    border-radius: 22px;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 16px 40px rgba(44, 59, 91, .07);
}

.fc-roles {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 7px;
    padding: 24px 16px;
}

.fc-roles div { display: grid; justify-items: center; gap: 7px; text-align: center; }
.fc-roles div > span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: var(--fc-acento); background: var(--fc-claro); font-size: 28px; }
.fc-roles b { font-size: 13px; }
.fc-roles small { color: #667085; font-size: 10px; }
.fc-roles > i { color: #98a2b3; font-size: 22px; font-style: normal; }

.fc-pasos { padding: 25px; }
.fc-pasos h3 { margin: 7px 0 18px; font-size: 20px; }
.fc-pasos ol { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: pasos; }
.fc-pasos li { position: relative; min-height: 31px; padding-left: 42px; color: #465468; line-height: 1.45; counter-increment: pasos; }
.fc-pasos li::before { content: counter(pasos); position: absolute; left: 0; top: -3px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: var(--fc-acento); background: var(--fc-claro); font-size: 12px; font-weight: 950; }

.fc-cronometro { display: grid; align-content: center; gap: 11px; padding: 22px; text-align: center; }
.fc-cronometro #fcReloj { color: #172033; font-size: clamp(38px, 4.5vw, 57px); font-weight: 950; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.fc-cronometro #fcReloj.urgente { color: #d92d20; animation: fcPulso .7s infinite alternate; }

.fc-registro {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #dce3ee;
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 55px rgba(44, 59, 91, .09);
}

.fc-mediciones { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.fc-mediciones label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; color: #344054; font-weight: 850; }
.fc-mediciones label > span { grid-row: 1 / 3; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #fff; background: var(--fc-acento); font-size: 20px; }
.fc-mediciones input { grid-column: 2; padding: 14px; font-size: 25px; font-weight: 900; }
.fc-mediciones label > small { grid-column: 2; color: #667085; font-weight: 500; }
.fc-comparador { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #dce3ee; border-radius: 50%; color: #667085; background: #f8fafc; font-size: 12px; font-weight: 950; }

.fc-registro fieldset { display: grid; gap: 10px; margin: 27px 0 20px; padding: 0; border: 0; }
.fc-registro legend { margin-bottom: 12px; color: #172033; font-size: 19px; font-weight: 900; }
.fc-opcion { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #dce3ee; border-radius: 14px; color: #465468; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.fc-opcion:hover { transform: translateX(3px); border-color: var(--fc-acento); background: var(--fc-claro); }
.fc-opcion:has(input:checked) { border-color: var(--fc-acento); color: #172033; background: var(--fc-claro); box-shadow: inset 4px 0 0 var(--fc-acento); }
.fc-opcion input { width: 18px; height: 18px; accent-color: var(--fc-acento); }
.fc-registro form > .fc-btn { width: 100%; }

.fc-expediente {
    max-width: 950px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d6deeb;
    border-top: 8px solid var(--fc-acento);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 75px rgba(44, 59, 91, .14);
}

.fc-expediente > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 25px 28px;
    border-bottom: 1px solid #e4e8f0;
}

.fc-expediente > header h1 { margin: 4px 0 0; font-size: clamp(25px, 4vw, 40px); letter-spacing: -.04em; }
.fc-expediente > header > span { padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--fc-acento) 40%, white); border-radius: 999px; color: var(--fc-acento); background: var(--fc-claro); font-size: 11px; font-weight: 950; }

.fc-identidad { display: grid; grid-template-columns: 1.25fr .8fr 1.25fr; gap: 1px; background: #e4e8f0; }
.fc-identidad p { display: grid; gap: 5px; margin: 0; padding: 17px 24px; background: #f8fafc; }
.fc-identidad small { color: #7a8699; font-size: 10px; }
.fc-identidad b { overflow-wrap: anywhere; }

.fc-dictamen { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 310px; }
.fc-autor { display: grid; align-content: center; justify-items: start; padding: 35px; color: #fff; background: var(--fc-acento); }
.fc-autor > span { display: grid; width: 70px; height: 70px; margin-bottom: 22px; place-items: center; border: 1px solid rgba(255, 255, 255, .38); border-radius: 22px; background: rgba(255, 255, 255, .14); font-size: 32px; font-weight: 950; }
.fc-autor small { color: rgba(255, 255, 255, .75); }
.fc-autor h2 { margin: 7px 0 4px; font-size: clamp(25px, 3.5vw, 38px); }
.fc-autor p { margin: 0; color: rgba(255, 255, 255, .82); }

.fc-grafica { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: end; gap: 15px 28px; padding: 34px 55px 27px; background: linear-gradient(#fff, #f8fafc); }
.fc-grafica > div { display: grid; align-items: end; justify-items: center; height: 190px; border-bottom: 2px solid #cfd8e6; }
.fc-grafica > div > span { display: grid; width: 62%; min-height: 24px; align-items: start; justify-items: center; padding-top: 9px; border-radius: 14px 14px 3px 3px; color: #fff; background: var(--fc-acento); box-shadow: 0 10px 25px color-mix(in srgb, var(--fc-acento) 20%, transparent); transition: height .7s ease; }
.fc-grafica > div:nth-child(2) > span { background: color-mix(in srgb, var(--fc-acento) 62%, #38bdf8); }
.fc-grafica > div > span b { font-size: 22px; }
.fc-grafica > div > small { margin: 8px 0 -28px; color: #667085; }
.fc-grafica > p { grid-column: 1 / -1; margin: 22px 0 0; padding: 13px; border-radius: 12px; color: #344054; background: var(--fc-claro); text-align: center; font-size: 13px; font-weight: 750; }

.fc-conclusiones { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e4e8f0; }
.fc-conclusiones article { padding: 24px 28px; background: #fff; }
.fc-conclusiones p { margin: 8px 0 0; color: #465468; line-height: 1.52; }
.fc-expediente footer { display: flex; justify-content: space-between; gap: 18px; padding: 16px 28px; color: #667085; background: #f8fafc; font-size: 11px; }

.fc-entrega { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; max-width: 950px; margin: 16px auto 0; padding: 16px 18px; border: 1px solid #dce3ee; border-radius: 17px; background: rgba(255, 255, 255, .88); }
.fc-entrega > div { display: grid; gap: 3px; }
.fc-entrega span { color: #667085; font-size: 12px; }

.fc-toast {
    position: fixed;
    z-index: 100200;
    left: 50%;
    bottom: 24px;
    max-width: min(90vw, 520px);
    padding: 13px 18px;
    border-radius: 13px;
    color: #fff;
    background: #172033;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .25);
    font-weight: 800;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity .2s ease, transform .2s ease;
}

.fc-toast.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes fcPulso {
    to { transform: scale(1.07); }
}

@media (max-width: 900px) {
    .fc-hero { grid-template-columns: 1fr; }
    .fc-lupa { width: 220px; }
    .fc-lupa span { font-size: 80px; }
    .fc-experimento { grid-template-columns: 1fr 1fr; }
    .fc-pasos { grid-column: 1 / -1; grid-row: 1; }
    .fc-dictamen { grid-template-columns: 1fr; }
    .fc-autor { min-height: 250px; }
    .fc-identidad { grid-template-columns: 1fr 1fr; }
    .fc-identidad p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .acceso-forense-cognitivo { grid-template-columns: auto 1fr; padding: 20px; }
    .acceso-forense-cognitivo button { grid-column: 1 / -1; width: 100%; }
    .fc-pantalla { padding: 15px 14px 40px; }
    .fc-top { grid-template-columns: 1fr auto; }
    .fc-top > span { display: none; }
    .fc-progreso { margin-bottom: 28px; }
    .fc-progreso span { display: none; }
    .fc-hero { gap: 25px; margin-top: 0; }
    .fc-hero h1 { font-size: 49px; }
    .fc-lupa { width: 175px; border-width: 13px; }
    .fc-lupa span { font-size: 62px; }
    .fc-lupa i { right: -52px; bottom: -35px; width: 80px; height: 25px; border-width: 6px; }
    .fc-formulario { grid-template-columns: 1fr; padding: 18px; }
    .fc-formulario label:nth-child(3), .fc-formulario .fc-btn { grid-column: auto; }
    .fc-caso-titulo > span { width: 56px; height: 56px; border-radius: 17px; font-size: 24px; }
    .fc-experimento { grid-template-columns: 1fr; }
    .fc-pasos { grid-column: auto; grid-row: auto; }
    .fc-mediciones { grid-template-columns: 1fr; }
    .fc-comparador { margin: -5px auto; }
    .fc-registro { padding: 18px; }
    .fc-identidad, .fc-conclusiones { grid-template-columns: 1fr; }
    .fc-identidad p:last-child { grid-column: auto; }
    .fc-grafica { padding: 30px 24px 25px; }
    .fc-expediente > header { align-items: flex-start; }
    .fc-expediente > header > span { display: none; }
    .fc-expediente footer { display: grid; }
    .fc-entrega { grid-template-columns: 1fr; }
    .fc-entrega button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #laboratorioForenseIA *,
    #laboratorioForenseIA *::before,
    #laboratorioForenseIA *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    body * { visibility: hidden !important; }
    #laboratorioForenseIA,
    #laboratorioForenseIA .fc-expediente,
    #laboratorioForenseIA .fc-expediente * { visibility: visible !important; }
    #laboratorioForenseIA { position: absolute; inset: 0; overflow: visible; background: #fff; }
    #laboratorioForenseIA .fc-pantalla { padding: 0; background: #fff; }
    #laboratorioForenseIA .fc-top,
    #laboratorioForenseIA .fc-progreso,
    #laboratorioForenseIA .fc-entrega { display: none !important; }
    #laboratorioForenseIA .fc-expediente { width: 100%; max-width: none; margin: 0; box-shadow: none; }
}
