/**
 * Línea temporal prenatal AdM
 *
 * Matriz horizontal:
 * sistema × tiempo
 *
 * Incluye:
 * - vista global;
 * - zoom temporal por periodo;
 * - filtros multiselección por sistema;
 * - ficha de estudio en grid;
 * - transición animada;
 * - detección automática de colisiones entre etiquetas;
 * - jerarquía visual de hitos;
 * - barras de duración;
 * - microinteracciones;
 * - feedback de selección;
 * - orientación y navegación;
 * - responsive.
 */


/* =========================================================
 * VARIABLES
 * ========================================================= */

.adm-tool-prenatal {
    --adm-prenatal-primary: #115F60;
    --adm-prenatal-secondary: #1C8989;
    --adm-prenatal-accent: #C17D2E;

    --adm-prenatal-text: #263238;
    --adm-prenatal-text-secondary: #4B5563;
    --adm-prenatal-text-tertiary: #9CA3AF;

    --adm-prenatal-bg: #FCFAFC;
    --adm-prenatal-card: #FFFFFF;
    --adm-prenatal-border: #E8E8E8;

    --adm-prenatal-pre: #315F8A;
    --adm-prenatal-pre-bg: #EBF4FF;

    --adm-prenatal-emb-bg: #EAF5F5;

    --adm-prenatal-fetal: #9A641F;
    --adm-prenatal-fetal-bg: #FDF5E9;

    --adm-prenatal-term: #6D4AA3;
    --adm-prenatal-term-bg: #F3EEFA;

    --adm-prenatal-clinical-bg: #F7F7F8;
    --adm-prenatal-exam-bg: #FFFBEB;

    --adm-prenatal-radius: 16px;
    --adm-prenatal-transition: 320ms;
}


/* =========================================================
 * CONTENEDOR GENERAL
 * ========================================================= */

.adm-tool-prenatal {
    position: relative;

    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0;

    color: var(--adm-prenatal-text);
}


/* =========================================================
 * FILTROS
 * ========================================================= */

.adm-tool-prenatal__filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 14px;
    padding: 14px 16px;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 14px;

    background: var(--adm-prenatal-card);
}

.adm-tool-prenatal__filter-group {
    display: grid;
    gap: 7px;
}

.adm-tool-prenatal__filter-label {
    color: var(--adm-prenatal-text-tertiary);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.adm-tool-prenatal__filter-options {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.adm-tool-prenatal__filter {
    min-height: 34px;

    padding: 6px 11px;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 999px;

    background: var(--adm-prenatal-card);

    color: var(--adm-prenatal-text-secondary);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.adm-tool-prenatal__filter:hover {
    border-color: #B8D5D5;
    color: var(--adm-prenatal-primary);
}

.adm-tool-prenatal__filter.is-active {
    border-color: var(--adm-prenatal-primary);

    background: var(--adm-prenatal-primary);

    color: #FFFFFF;
}

.adm-tool-prenatal__filter:focus-visible,
.adm-tool-prenatal__filter-reset:focus-visible {
    outline: 2px solid var(--adm-prenatal-accent);
    outline-offset: 2px;
}


/* =========================================================
 * RESTABLECER
 * ========================================================= */

.adm-tool-prenatal__filter-reset {
    min-height: 34px;

    margin-left: auto;
    padding: 6px 4px;

    border: 0;

    background: transparent;

    color: var(--adm-prenatal-primary);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.adm-tool-prenatal__filter-reset[hidden] {
    display: none;
}


/* =========================================================
 * CONTADOR DE HITOS VISIBLES
 * ========================================================= */

/* NUEVO — C2 */

.adm-tool-prenatal__visible-count {
    min-height: 18px;

    margin: 0 0 12px;
    padding: 0 2px;

    color: var(--adm-prenatal-text-tertiary);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;

    transition:
        opacity 150ms ease;
}

.adm-tool-prenatal__visible-count strong {
    color: var(--adm-prenatal-text-secondary);
    font-weight: 700;
}


/* =========================================================
 * SCROLL HORIZONTAL
 * ========================================================= */

.adm-tool-prenatal__matrix-scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    padding-bottom: 10px;

    -webkit-overflow-scrolling: touch;
}

.adm-tool-prenatal__matrix {
    position: relative;

    min-width: 1050px;
}


/* =========================================================
 * CABECERA DE PERIODOS
 * ========================================================= */

.adm-tool-prenatal__axis {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);

    align-items: end;

    margin-bottom: 6px;
}

.adm-tool-prenatal__axis-label {
    padding-right: 18px;

    color: var(--adm-prenatal-text-tertiary);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}

.adm-tool-prenatal__axis-track {
    position: relative;

    height: 32px;
}


/* =========================================================
 * ZONAS DE PERIODO
 * ========================================================= */

/* NUEVO — D2 */

.adm-tool-prenatal__period-zone {
    position: absolute;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    height: 30px;

    overflow: hidden;

    border-bottom: 3px solid transparent;
    border-radius: 9px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.62),
        inset 0 -7px 12px rgba(38,50,56,0.035);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
    text-transform: uppercase;

    transition:
        filter 180ms ease,
        box-shadow 180ms ease,
        border-bottom-width 180ms ease,
        transform 180ms ease;

    animation:
        adm-prenatal-axis-in
        var(--adm-prenatal-transition)
        ease both;
}

.adm-tool-prenatal__period-zone--pre {
    border-bottom-color: var(--adm-prenatal-pre);

    background: var(--adm-prenatal-pre-bg);
    color: var(--adm-prenatal-pre);
}

.adm-tool-prenatal__period-zone--emb {
    border-bottom-color: var(--adm-prenatal-primary);

    background: var(--adm-prenatal-emb-bg);
    color: var(--adm-prenatal-primary);
}

.adm-tool-prenatal__period-zone--fetal {
    border-bottom-color: var(--adm-prenatal-fetal);

    background: var(--adm-prenatal-fetal-bg);
    color: var(--adm-prenatal-fetal);
}

.adm-tool-prenatal__period-zone--termino {
    border-bottom-color: var(--adm-prenatal-term);

    background: var(--adm-prenatal-term-bg);
    color: var(--adm-prenatal-term);
}

.adm-tool-prenatal__period-zone.is-zoomed {
    letter-spacing: 0.04em;
}


/* =========================================================
 * PERIODO ACTUAL
 * ========================================================= */

/*
 * NUEVO — C1
 *
 * No sustituimos los colores propios del periodo.
 * Solo aumentamos ligeramente saturación y presencia.
 */

.adm-tool-prenatal__period-zone.is-current-period {
    border-bottom-width: 4px;

    filter: saturate(1.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -9px 14px rgba(38,50,56,0.055),
        0 2px 7px rgba(38,50,56,0.06);
}

@keyframes adm-prenatal-axis-in {

    from {
        opacity: 0;
        transform: translateX(10px) scaleX(0.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}


/* =========================================================
 * ESCALA TEMPORAL
 * ========================================================= */

.adm-tool-prenatal__ticks {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);

    margin-bottom: 8px;
}

.adm-tool-prenatal__ticks-label {
    min-height: 32px;
}

.adm-tool-prenatal__ticks-track {
    position: relative;

    height: 32px;

    border-bottom: 1px solid #D1D5DB;
}

.adm-tool-prenatal__tick {
    position: absolute;
    bottom: 7px;

    transform: translateX(-50%);

    color: #7C8491;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;

    animation:
        adm-prenatal-tick-in
        220ms
        ease both;
}

.adm-tool-prenatal__tick:first-child {
    transform: none;
}

.adm-tool-prenatal__tick:last-child {
    transform: translateX(-100%);
}

@keyframes adm-prenatal-tick-in {

    from {
        opacity: 0;
        margin-left: 7px;
    }

    to {
        opacity: 1;
        margin-left: 0;
    }
}


/* =========================================================
 * FILAS
 * ========================================================= */

.adm-tool-prenatal__rows {
    width: 100%;
}

.adm-tool-prenatal__row {
    --adm-row-extra-height: 0px;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);

    min-height: calc(
        86px + var(--adm-row-extra-height)
    );

    transition:
        min-height 180ms ease;
}

.adm-tool-prenatal__row-label {
    display: flex;
    align-items: center;

    min-height: calc(
        86px + var(--adm-row-extra-height)
    );

    padding-right: 18px;

    border-bottom: 1px solid var(--adm-prenatal-border);

    color: var(--adm-prenatal-text);

    font-size: 13px;
    font-weight: 700;

    transition:
        min-height 180ms ease,
        color 180ms ease,
        background-color 180ms ease;
}

.adm-tool-prenatal__row-track {
    position: relative;

    min-height: calc(
        86px + var(--adm-row-extra-height)
    );

    border-bottom: 1px solid var(--adm-prenatal-border);

    transition:
        min-height 180ms ease,
        background-image var(--adm-prenatal-transition) ease,
        background-color 180ms ease;
}


/* =========================================================
 * FONDO ALTERNADO DE FILAS
 * ========================================================= */

/* NUEVO — D1 */

.adm-tool-prenatal__row:nth-child(even)
.adm-tool-prenatal__row-label,
.adm-tool-prenatal__row:nth-child(even)
.adm-tool-prenatal__row-track {
    background-color:
        color-mix(
            in srgb,
            var(--adm-prenatal-primary) 2%,
            var(--adm-prenatal-card)
        );
}


/* =========================================================
 * FILA ACTIVA
 * ========================================================= */

/* NUEVO — B2 */

.adm-tool-prenatal__row.is-active-row
.adm-tool-prenatal__row-label,
.adm-tool-prenatal__row.is-active-row
.adm-tool-prenatal__row-track {
    background-color:
        color-mix(
            in srgb,
            var(--adm-prenatal-primary) 6%,
            var(--adm-prenatal-card)
        );
}

.adm-tool-prenatal__row.is-active-row
.adm-tool-prenatal__row-label {
    color: var(--adm-prenatal-primary);
}


/* =========================================================
 * LÍNEA DE BASE DE CADA FILA
 * ========================================================= */

/* NUEVO — A4 */

.adm-tool-prenatal__row-track::before {
    content: "";

    position: absolute;

    top: 24px;
    right: 0;
    left: 0;

    z-index: 0;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--adm-prenatal-text-tertiary) 30%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
 * INDICADOR DE POSICIÓN ACTIVA
 * ========================================================= */

/* NUEVO — B3 */

.adm-tool-prenatal__active-position {
    position: absolute;

    top: var(--adm-active-line-top, 0px);
    left: var(--adm-active-line-left, 0px);

    z-index: 1;

    width: 1px;
    height: var(--adm-active-line-height, 0px);

    transform: translateX(-50%);

    background: var(--adm-prenatal-primary);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 180ms ease,
        left 220ms cubic-bezier(.2,.7,.25,1),
        height 180ms ease;
}

.adm-tool-prenatal__active-position.is-visible {
    opacity: 0.34;
}

.adm-tool-prenatal__active-position[data-periodo="preembrionario"] {
    background: var(--adm-prenatal-pre);
}

.adm-tool-prenatal__active-position[data-periodo="embrionario"] {
    background: var(--adm-prenatal-primary);
}

.adm-tool-prenatal__active-position[data-periodo="fetal"] {
    background: var(--adm-prenatal-fetal);
}

.adm-tool-prenatal__active-position[data-periodo="termino"] {
    background: var(--adm-prenatal-term);
}


/* =========================================================
 * RETÍCULA TEMPORAL
 * ========================================================= */

.adm-tool-prenatal[data-time-view="all"]
.adm-tool-prenatal__row-track {
    background-image:
        linear-gradient(
            to right,
            transparent 29.88%,
            #E4E7E7 30%,
            transparent 30.12%
        );
}

.adm-tool-prenatal[data-time-view="preembrionario"]
.adm-tool-prenatal__row-track {
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(14.2857% - 1px),
            #F0F1F2 calc(14.2857% - 1px),
            #F0F1F2 14.2857%
        );
}

.adm-tool-prenatal[data-time-view="embrionario"]
.adm-tool-prenatal__row-track,
.adm-tool-prenatal[data-time-view="fetal"]
.adm-tool-prenatal__row-track,
.adm-tool-prenatal[data-time-view="termino"]
.adm-tool-prenatal__row-track {
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(20% - 1px),
            #F0F1F2 calc(20% - 1px),
            #F0F1F2 20%
        );
}


/* =========================================================
 * EVENTOS
 * ========================================================= */

/* NUEVO — A1 */

.adm-tool-prenatal__event {
    --adm-label-level-offset: 0px;
    --adm-label-horizontal-shift: 0px;

    position: absolute;
    top: 17px;

    z-index: 2;

    width: 112px;
    min-height: 54px;

    padding: 0;

    transform: translateX(-50%);

    border: 0;

    background: transparent;

    color: inherit;

    cursor: pointer;

    text-align: center;

    transition:
        left var(--adm-prenatal-transition) cubic-bezier(.2,.7,.25,1),
        opacity 180ms ease;
}

.adm-tool-prenatal__event[hidden] {
    display: none;
}


/* =========================================================
 * TOOLTIP DE HITO
 * ========================================================= */

/* NUEVO — B1 */

.adm-tool-prenatal__tooltip {
    position: fixed;

    top: var(--adm-tooltip-y, 0px);
    left: var(--adm-tooltip-x, 0px);

    z-index: 99999;

    max-width: 260px;

    padding: 7px 10px;

    transform:
        translate(-50%, calc(-100% - 10px))
        translateY(3px);

    border: 1px solid #D8E4E4;
    border-radius: 8px;

    background: rgba(255,255,255,0.98);

    box-shadow:
        0 6px 18px rgba(38,50,56,0.11);

    color: var(--adm-prenatal-text);

    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;

    text-align: center;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 130ms ease,
        transform 130ms ease,
        visibility 0s linear 130ms;
}

.adm-tool-prenatal__tooltip::after {
    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    width: 7px;
    height: 7px;

    transform:
        translate(-50%, -4px)
        rotate(45deg);

    border-right: 1px solid #D8E4E4;
    border-bottom: 1px solid #D8E4E4;

    background: rgba(255,255,255,0.98);
}

.adm-tool-prenatal__tooltip.is-visible {
    transform:
        translate(-50%, calc(-100% - 10px))
        translateY(0);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 130ms ease,
        transform 130ms ease,
        visibility 0s;
}


/* =========================================================
 * ANIMACIÓN DE ENTRADA DE HITOS
 * ========================================================= */

/* NUEVO — D3 */

.adm-tool-prenatal__event.is-entering
.adm-tool-prenatal__event-dot {
    animation:
        adm-prenatal-dot-enter
        200ms
        cubic-bezier(.2,.75,.3,1)
        both;

    animation-delay:
        calc(
            var(--adm-event-position, 0)
            * 3ms
        );
}

@keyframes adm-prenatal-dot-enter {

    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
 * CÍRCULO DEL HITO
 * ========================================================= */

.adm-tool-prenatal__event-dot {
    position: absolute;

    top: 0;
    left: 50%;

    width: 14px;
    height: 14px;

    transform: translateX(-50%);

    border: 3px solid var(--adm-prenatal-bg);
    border-radius: 50%;

    background: var(--adm-prenatal-primary);

    box-shadow:
        0 0 0 2px
        var(--adm-prenatal-primary);

    /* NUEVO — B5 */
    cursor: zoom-in;

    transition:
        width 150ms ease,
        height 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease;
}

.adm-tool-prenatal__event[data-periodo="preembrionario"]
.adm-tool-prenatal__event-dot {
    background: var(--adm-prenatal-pre);

    box-shadow:
        0 0 0 2px
        var(--adm-prenatal-pre);
}

.adm-tool-prenatal__event[data-periodo="embrionario"]
.adm-tool-prenatal__event-dot {
    background: var(--adm-prenatal-primary);

    box-shadow:
        0 0 0 2px
        var(--adm-prenatal-primary);
}

.adm-tool-prenatal__event[data-periodo="fetal"]
.adm-tool-prenatal__event-dot {
    background: var(--adm-prenatal-fetal);

    box-shadow:
        0 0 0 2px
        var(--adm-prenatal-fetal);
}

.adm-tool-prenatal__event[data-periodo="termino"]
.adm-tool-prenatal__event-dot {
    background: var(--adm-prenatal-term);

    box-shadow:
        0 0 0 2px
        var(--adm-prenatal-term);
}


/* =========================================================
 * JERARQUÍA VISUAL DE HITOS
 * ========================================================= */

/* NUEVO — A2 */

.adm-tool-prenatal__event[data-hierarchy="primary"]
.adm-tool-prenatal__event-dot {
    width: 16px;
    height: 16px;

    opacity: 1;
}

.adm-tool-prenatal__event[data-hierarchy="primary"]
.adm-tool-prenatal__event-label {
    color: var(--adm-prenatal-text);
    font-weight: 700;
}

.adm-tool-prenatal__event[data-hierarchy="secondary"]
.adm-tool-prenatal__event-dot {
    opacity: 0.76;
}

.adm-tool-prenatal__event[data-hierarchy="secondary"]
.adm-tool-prenatal__event-label {
    opacity: 0.88;
}


/* =========================================================
 * BARRAS DE DURACIÓN
 * ========================================================= */

/* NUEVO — A1 */

.adm-tool-prenatal__duration-bar {
    position: absolute;
    top: 21px;

    z-index: 1;

    display: block;

    height: 6px;
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: var(--adm-prenatal-primary);

    opacity: 0.24;

    cursor: pointer;

    transition:
        left var(--adm-prenatal-transition) cubic-bezier(.2,.7,.25,1),
        width var(--adm-prenatal-transition) cubic-bezier(.2,.7,.25,1),
        opacity 160ms ease,
        box-shadow 160ms ease;
}

.adm-tool-prenatal__duration-bar::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 3px;
    height: 10px;

    transform: translate(50%, -50%);

    border-radius: 999px;

    background: currentColor;

    opacity: 0.72;
}

.adm-tool-prenatal__duration-bar[data-periodo="preembrionario"] {
    background: var(--adm-prenatal-pre);
    color: var(--adm-prenatal-pre);
}

.adm-tool-prenatal__duration-bar[data-periodo="embrionario"] {
    background: var(--adm-prenatal-primary);
    color: var(--adm-prenatal-primary);
}

.adm-tool-prenatal__duration-bar[data-periodo="fetal"] {
    background: var(--adm-prenatal-fetal);
    color: var(--adm-prenatal-fetal);
}

.adm-tool-prenatal__duration-bar[data-periodo="termino"] {
    background: var(--adm-prenatal-term);
    color: var(--adm-prenatal-term);
}

.adm-tool-prenatal__duration-bar:hover,
.adm-tool-prenatal__duration-bar.is-active {
    opacity: 0.48;
}

.adm-tool-prenatal__duration-bar.is-active {
    box-shadow:
        0 0 0 2px rgba(193,125,46,0.10);
}

.adm-tool-prenatal__duration-bar[hidden] {
    display: none;
}

.adm-tool-prenatal__duration-bar:focus-visible {
    outline: 2px solid var(--adm-prenatal-accent);
    outline-offset: 2px;
}


/* =========================================================
 * ETIQUETA DEL HITO
 * ========================================================= */

.adm-tool-prenatal__event-label {
    display: block;

    width: 100%;

    margin-top: calc(
        24px + var(--adm-label-level-offset)
    );

    transform:
        translateX(
            var(--adm-label-horizontal-shift)
        );

    color: var(--adm-prenatal-text-secondary);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;

    white-space: normal;

    transition:
        color 150ms ease,
        opacity 180ms ease,
        margin-top 180ms ease,
        transform 180ms ease;
}

.adm-tool-prenatal__event[data-label-level]:not(
    [data-label-level="0"]
)
.adm-tool-prenatal__event-label {
    color: #5D6570;
}


/* =========================================================
 * HOVER / FOCUS / ACTIVO
 * ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .adm-tool-prenatal__event:hover
    .adm-tool-prenatal__event-dot {
        width: 18px;
        height: 18px;
        opacity: 1;
    }

    .adm-tool-prenatal__event:hover
    .adm-tool-prenatal__event-label {
        color: var(--adm-prenatal-text);
        opacity: 1;
    }
}

.adm-tool-prenatal__event:focus-visible {
    outline: 2px solid var(--adm-prenatal-accent);
    outline-offset: 4px;

    border-radius: 6px;
}

.adm-tool-prenatal__event.is-active
.adm-tool-prenatal__event-dot {
    width: 18px;
    height: 18px;

    opacity: 1;

    background: var(--adm-prenatal-accent);

    box-shadow:
        0 0 0 2px var(--adm-prenatal-accent),
        0 0 0 5px rgba(193,125,46,0.16);
}

.adm-tool-prenatal__event.is-active
.adm-tool-prenatal__event-label {
    color: var(--adm-prenatal-text);
    font-weight: 700;
    opacity: 1;
}


/* =========================================================
 * FILAS OCULTAS
 * ========================================================= */

.adm-tool-prenatal__row[hidden],
.adm-tool-prenatal__row.is-hidden {
    display: none;
}

.adm-tool-prenatal__row.is-muted {
    opacity: 0.28;
}


/* =========================================================
 * FICHA DE ESTUDIO
 * ========================================================= */

.adm-tool-prenatal__detail {
    margin-top: 34px;

    overflow: hidden;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 18px;

    background: var(--adm-prenatal-card);

    box-shadow:
        0 10px 30px rgba(17,95,96,0.05);
}

/* NUEVO — B4 */

.adm-tool-prenatal__detail.is-entering {
    animation:
        adm-prenatal-detail-enter
        260ms
        cubic-bezier(.2,.75,.25,1)
        both;
}

@keyframes adm-prenatal-detail-enter {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adm-tool-prenatal__detail[hidden] {
    display: none;
}


/* =========================================================
 * CABECERA DE FICHA
 * ========================================================= */

.adm-tool-prenatal__detail-head {
    padding: 24px 26px;

    border-bottom: 1px solid #DCE9E9;

    background:
        linear-gradient(
            135deg,
            #F4FAFA 0%,
            #EAF5F5 100%
        );
}

.adm-tool-prenatal__detail-heading {
    display: grid;

    gap: 9px;
}

.adm-tool-prenatal__detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.adm-tool-prenatal__detail-period,
.adm-tool-prenatal__detail-time {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
}

.adm-tool-prenatal__detail-period {
    background: var(--adm-prenatal-primary);
    color: #FFFFFF;

    letter-spacing: 0.05em;
}

.adm-tool-prenatal__detail-time {
    border: 1px solid #CFE2E2;

    background: rgba(255,255,255,0.75);

    color: var(--adm-prenatal-text-secondary);
}


/* =========================================================
 * PROGRESO DE NAVEGACIÓN
 * ========================================================= */

/* NUEVO — C3 */

.adm-tool-prenatal__detail-progress {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 4px 8px;

    border: 1px solid rgba(156,163,175,0.28);
    border-radius: 999px;

    background: rgba(255,255,255,0.46);

    color: var(--adm-prenatal-text-tertiary);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.adm-tool-prenatal__detail-progress[hidden] {
    display: none;
}


.adm-tool-prenatal__detail-title {
    margin: 0;

    color: var(--adm-prenatal-text);

    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;
}

.adm-tool-prenatal__detail-systems {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.adm-tool-prenatal__detail-system {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border: 1px solid #DCE9E9;
    border-radius: 999px;

    background: rgba(255,255,255,0.72);

    color: var(--adm-prenatal-primary);

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
 * CUERPO DE FICHA
 * ========================================================= */

.adm-tool-prenatal__detail-body {
    display: grid;

    gap: 22px;

    padding: 26px;
}


/* =========================================================
 * INTRO: TEXTO + IMAGEN
 * ========================================================= */

.adm-tool-prenatal__detail-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr);

    gap: 22px;

    align-items: start;
}

.adm-tool-prenatal__detail-intro:has(
    .adm-tool-prenatal__detail-image-wrap:not([hidden])
) {
    grid-template-columns:
        minmax(0,1fr)
        minmax(500px,1fr);
}

.adm-tool-prenatal__detail-image-wrap {
    align-self: start;
}

.adm-tool-prenatal__detail-image {
    width: 100%;
    height: auto;
}

.adm-tool-prenatal__detail-section--explanation {
    max-width: 760px;
}

.adm-tool-prenatal__detail-intro
.adm-tool-prenatal__detail-section {
    margin: 0;
    padding: 0;

    border: 0;
}

.adm-tool-prenatal__detail-description {
    max-width: 980px;

    margin: 0 0 10px;

    color: var(--adm-prenatal-text);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.adm-tool-prenatal__detail-explanation {
    max-width: 1000px;

    color: var(--adm-prenatal-text-secondary);

    font-size: 15px;
    line-height: 1.65;
}

.adm-tool-prenatal__detail-explanation[hidden] {
    display: none;
}


/* =========================================================
 * IMAGEN
 * ========================================================= */

.adm-tool-prenatal__detail-image-wrap {
    overflow: hidden;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 14px;

    background: var(--adm-prenatal-bg);
}

.adm-tool-prenatal__detail-image-wrap[hidden] {
    display: none;
}

.adm-tool-prenatal__detail-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
 * SECCIONES GENERALES
 * ========================================================= */

.adm-tool-prenatal__detail-section {
    margin: 0;

    padding-top: 20px;

    border-top: 1px solid var(--adm-prenatal-border);
}

.adm-tool-prenatal__detail-section[hidden] {
    display: none;
}

.adm-tool-prenatal__detail-section-title {
    display: block;

    margin-bottom: 11px;

    color: var(--adm-prenatal-primary);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* =========================================================
 * ORIGEN → PROCESO → RESULTADO
 * ========================================================= */

.adm-tool-prenatal__detail-section--flow {
    padding-top: 20px;
}

.adm-tool-prenatal__detail-flow {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        minmax(0,1fr)
        auto
        minmax(0,1fr);

    align-items: stretch;

    gap: 10px;
}

.adm-tool-prenatal__detail-flow-item {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 92px;

    padding: 15px 16px;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 12px;
}

.adm-tool-prenatal__detail-flow-item--origin {
    background: var(--adm-prenatal-pre-bg);
}

.adm-tool-prenatal__detail-flow-item--process {
    background: var(--adm-prenatal-emb-bg);
}

.adm-tool-prenatal__detail-flow-item--result {
    background: #F2F7F3;
}

.adm-tool-prenatal__detail-flow-label {
    margin-bottom: 6px;

    color: var(--adm-prenatal-text-tertiary);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.adm-tool-prenatal__detail-flow-value {
    color: var(--adm-prenatal-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.adm-tool-prenatal__detail-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--adm-prenatal-accent);

    font-size: 22px;
}


/* =========================================================
 * GRID: CONSECUENCIAS + CONCEPTOS
 * ========================================================= */

.adm-tool-prenatal__detail-learning-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 16px;
}

.adm-tool-prenatal__detail-learning-grid
> .adm-tool-prenatal__detail-section:only-child {
    grid-column: 1 / -1;
}

.adm-tool-prenatal__detail-learning-grid
.adm-tool-prenatal__detail-section {
    padding: 18px;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 12px;

    background: #FCFCFC;
}


/* =========================================================
 * CONSECUENCIAS / DERIVADOS
 * ========================================================= */

.adm-tool-prenatal__detail-consequences {
    display: grid;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.adm-tool-prenatal__detail-consequences li {
    position: relative;

    padding-left: 18px;

    color: var(--adm-prenatal-text-secondary);

    font-size: 14px;
    line-height: 1.5;
}

.adm-tool-prenatal__detail-consequences li::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 1px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--adm-prenatal-secondary);
}


/* =========================================================
 * CONCEPTOS CLAVE
 * ========================================================= */

.adm-tool-prenatal__detail-concepts {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.adm-tool-prenatal__detail-concept {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 6px 10px;

    border: 1px solid #D7E7E7;
    border-radius: 999px;

    background: #F2F8F8;

    color: var(--adm-prenatal-primary);

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
 * GRID: EXAMEN + CLÍNICA
 * ========================================================= */

.adm-tool-prenatal__detail-insight-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 16px;
}

.adm-tool-prenatal__detail-insight-grid
.adm-tool-prenatal__detail-section {
    padding: 18px;

    border-top: 0;
    border-radius: 12px;
}


/* =========================================================
 * CLAVE DE EXAMEN
 * ========================================================= */

.adm-tool-prenatal__detail-section--exam {
    border: 1px solid #F3D5A7;

    background: var(--adm-prenatal-exam-bg);
}

.adm-tool-prenatal__detail-section--exam
.adm-tool-prenatal__detail-section-title {
    color: var(--adm-prenatal-accent);
}

.adm-tool-prenatal__detail-exam {
    color: #715313;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}


/* =========================================================
 * RELEVANCIA CLÍNICA
 * ========================================================= */

.adm-tool-prenatal__detail-section--clinical {
    border: 1px solid var(--adm-prenatal-border);

    background: var(--adm-prenatal-clinical-bg);
}

.adm-tool-prenatal__detail-section--clinical
.adm-tool-prenatal__detail-section-title {
    color: var(--adm-prenatal-text-secondary);
}

.adm-tool-prenatal__detail-clinical {
    color: var(--adm-prenatal-text-secondary);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
 * TEMAS RELACIONADOS
 * ========================================================= */

.adm-tool-prenatal__detail-section--topics {
    padding-top: 20px;
}

.adm-tool-prenatal__detail-topics {
    display: grid;

    gap: 8px;
}

.adm-tool-prenatal__detail-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 11px 13px;

    border: 1px solid #DCE9E9;
    border-radius: 10px;

    background: #F0FDF4;

    color: var(--adm-prenatal-primary);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        transform 150ms ease;
}

.adm-tool-prenatal__detail-topic::after {
    content: "→";

    flex: 0 0 auto;
}

.adm-tool-prenatal__detail-topic:hover {
    border-color: #A8D2C2;

    background: #EAF8EF;

    transform: translateX(2px);
}


/* =========================================================
 * NAVEGACIÓN CRONOLÓGICA
 * ========================================================= */

.adm-tool-prenatal__detail-section--navigation {
    padding-top: 20px;
}

.adm-tool-prenatal__detail-navigation {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 12px;
}

.adm-tool-prenatal__detail-nav {
    display: flex;
    flex-direction: column;

    min-height: 70px;

    padding: 12px 14px;

    border: 1px solid var(--adm-prenatal-border);
    border-radius: 11px;

    background: #FFFFFF;

    color: var(--adm-prenatal-text);

    cursor: pointer;

    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        transform 150ms ease;
}

.adm-tool-prenatal__detail-nav[hidden] {
    display: none;
}

.adm-tool-prenatal__detail-nav--prev {
    align-items: flex-start;
    text-align: left;
}

.adm-tool-prenatal__detail-nav--next {
    align-items: flex-end;
    text-align: right;
}

.adm-tool-prenatal__detail-nav-direction {
    margin-bottom: 5px;

    color: var(--adm-prenatal-primary);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.adm-tool-prenatal__detail-nav-title {
    color: var(--adm-prenatal-text);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.adm-tool-prenatal__detail-nav:hover {
    border-color: #B8D5D5;

    background: #F7FBFB;

    transform: translateY(-1px);
}

.adm-tool-prenatal__detail-nav:focus-visible {
    outline: 2px solid var(--adm-prenatal-accent);
    outline-offset: 2px;
}


/* =========================================================
 * AVISO DE ACCESO
 * ========================================================= */

.adm-tool-prenatal-access {
    max-width: 680px;

    padding: 26px;

    border: 1px solid #E8E8E8;
    border-radius: 16px;

    background: #FFFFFF;

    text-align: center;
}

.adm-tool-prenatal-access__icon {
    margin-bottom: 10px;

    font-size: 24px;
}

.adm-tool-prenatal-access__title {
    margin: 0 0 8px;

    color: #263238;

    font-size: 20px;
    line-height: 1.3;
}

.adm-tool-prenatal-access__text {
    max-width: 520px;

    margin: 0 auto 18px;

    color: #4B5563;

    font-size: 14px;
    line-height: 1.55;
}

.adm-tool-prenatal-access__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;
}

.adm-tool-prenatal-access__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 8px 14px;

    border: 1px solid #D1D5DB;
    border-radius: 9px;

    background: #FFFFFF;

    color: #115F60;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.adm-tool-prenatal-access__button--primary {
    border-color: #115F60;

    background: #115F60;

    color: #FFFFFF;
}


/* =========================================================
 * SCROLLBAR
 * ========================================================= */

.adm-tool-prenatal__matrix-scroll::-webkit-scrollbar {
    height: 10px;
}

.adm-tool-prenatal__matrix-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.adm-tool-prenatal__matrix-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #A3A3A3;
}

.adm-tool-prenatal__matrix-scroll::-webkit-scrollbar-thumb:hover {
    background: #7C7C7C;
}


/* =========================================================
 * TABLET
 * ========================================================= */

@media (max-width: 900px) {

    .adm-tool-prenatal {
        padding: 20px 0;
    }

    .adm-tool-prenatal__matrix {
        min-width: 960px;
    }

    .adm-tool-prenatal__axis,
    .adm-tool-prenatal__ticks,
    .adm-tool-prenatal__row {
        grid-template-columns:
            135px minmax(0,1fr);
    }

    .adm-tool-prenatal__row-label {
        padding-right: 14px;
    }

    .adm-tool-prenatal__event {
        width: 104px;
    }

    .adm-tool-prenatal__event-label {
        font-size: 9.5px;
    }


    /* Ficha */

    .adm-tool-prenatal__detail-intro:has(
        .adm-tool-prenatal__detail-image-wrap:not([hidden])
    ) {
        grid-template-columns:
            minmax(0,1.4fr)
            minmax(220px,0.8fr);
    }

    .adm-tool-prenatal__detail-flow {
        grid-template-columns: 1fr;
    }

    .adm-tool-prenatal__detail-flow-arrow {
        min-height: 18px;

        transform: rotate(90deg);
    }
}


/* =========================================================
 * MÓVIL
 * ========================================================= */

@media (max-width: 640px) {

    .adm-tool-prenatal {
        padding: 16px 0;
    }


    /* Filtros */

    .adm-tool-prenatal__filters {
        display: grid;

        gap: 14px;

        margin-bottom: 10px;
        padding: 12px;
    }

    .adm-tool-prenatal__filter {
        min-height: 38px;

        padding: 7px 11px;
    }

    .adm-tool-prenatal__filter-reset {
        margin-left: 0;

        justify-self: start;
    }

    .adm-tool-prenatal__visible-count {
        margin-bottom: 10px;

        font-size: 10.5px;
    }


    /* Matriz */

    .adm-tool-prenatal__matrix {
        min-width: 860px;
    }

    .adm-tool-prenatal__axis,
    .adm-tool-prenatal__ticks,
    .adm-tool-prenatal__row {
        grid-template-columns:
            112px minmax(0,1fr);
    }

    .adm-tool-prenatal__axis-label {
        padding-right: 10px;

        font-size: 10px;
    }

    .adm-tool-prenatal__row {
        min-height: calc(
            82px + var(--adm-row-extra-height)
        );
    }

    .adm-tool-prenatal__row-label {
        min-height: calc(
            82px + var(--adm-row-extra-height)
        );

        padding-right: 10px;

        font-size: 12px;
    }

    .adm-tool-prenatal__row-track {
        min-height: calc(
            82px + var(--adm-row-extra-height)
        );
    }

    .adm-tool-prenatal__event {
        width: 96px;
        min-height: 52px;
    }

    .adm-tool-prenatal__event-label {
        margin-top: calc(
            23px + var(--adm-label-level-offset)
        );

        font-size: 9px;
        line-height: 1.15;
    }

    .adm-tool-prenatal__period-zone {
        font-size: 10px;
    }

    .adm-tool-prenatal__tick {
        font-size: 9px;
    }


    /* Ficha */

    .adm-tool-prenatal__detail {
        margin-top: 24px;

        border-radius: 14px;
    }

    .adm-tool-prenatal__detail-head {
        padding: 19px 17px;
    }

    .adm-tool-prenatal__detail-body {
        gap: 18px;

        padding: 18px 16px;
    }

    .adm-tool-prenatal__detail-title {
        font-size: 21px;
    }

    .adm-tool-prenatal__detail-intro,
    .adm-tool-prenatal__detail-intro:has(
        .adm-tool-prenatal__detail-image-wrap:not([hidden])
    ) {
        grid-template-columns: 1fr;
    }

    .adm-tool-prenatal__detail-description,
    .adm-tool-prenatal__detail-explanation {
        font-size: 14px;
    }

    .adm-tool-prenatal__detail-flow {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .adm-tool-prenatal__detail-flow-item {
        min-height: auto;

        padding: 14px;
    }

    .adm-tool-prenatal__detail-flow-arrow {
        min-height: 16px;

        transform: rotate(90deg);

        font-size: 20px;
    }

    .adm-tool-prenatal__detail-learning-grid,
    .adm-tool-prenatal__detail-insight-grid,
    .adm-tool-prenatal__detail-navigation {
        grid-template-columns: 1fr;
    }

    .adm-tool-prenatal__detail-learning-grid
    .adm-tool-prenatal__detail-section,
    .adm-tool-prenatal__detail-insight-grid
    .adm-tool-prenatal__detail-section {
        padding: 15px;
    }

    .adm-tool-prenatal__detail-nav--next {
        align-items: flex-start;

        text-align: left;
    }


    /* Acceso */

    .adm-tool-prenatal-access {
        padding: 20px 16px;
    }

    .adm-tool-prenatal-access__actions {
        display: grid;
    }

    .adm-tool-prenatal-access__button {
        width: 100%;
    }
}


/* =========================================================
 * REDUCCIÓN DE MOVIMIENTO
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .adm-tool-prenatal__row,
    .adm-tool-prenatal__row-label,
    .adm-tool-prenatal__row-track,
    .adm-tool-prenatal__event,
    .adm-tool-prenatal__event-dot,
    .adm-tool-prenatal__event-label,
    .adm-tool-prenatal__duration-bar,
    .adm-tool-prenatal__detail,
    .adm-tool-prenatal__period-zone,
    .adm-tool-prenatal__tick,
    .adm-tool-prenatal__filter,
    .adm-tool-prenatal__detail-nav,
    .adm-tool-prenatal__detail-topic,
    .adm-tool-prenatal__tooltip,
    .adm-tool-prenatal__active-position,
    .adm-tool-prenatal__visible-count {
        transition: none;
        animation: none;
    }
}


/* =========================================================
 * LIMPIEZA DE ESTILOS GLOBALES
 * ========================================================= */

.adm-tool-prenatal__event,
.adm-tool-prenatal__event:hover,
.adm-tool-prenatal__event:focus,
.adm-tool-prenatal__event:active {
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

.adm-tool-prenatal__event:hover {
    color: inherit;
}

.adm-tool-prenatal__duration-bar,
.adm-tool-prenatal__duration-bar:hover,
.adm-tool-prenatal__duration-bar:focus,
.adm-tool-prenatal__duration-bar:active {
    border: 0 !important;
}

.adm-tool-prenatal__detail-nav,
.adm-tool-prenatal__detail-nav:hover,
.adm-tool-prenatal__detail-nav:focus,
.adm-tool-prenatal__detail-nav:active {
    box-shadow: none;
}