/* ================================================================
   DIAGNOSTICO.CSS — página /Diagnostico (inicio, preguntas y resultado)
   Se referencia en Views/Diagnostico/Index.cshtml (sección @Styles).
   Depende de tokens.css. El acento (--accent) cambia según el camino:
   A gold · B spark · C blue · G graphite.
   ================================================================ */
.dx {
    --accent: var(--spark);
    --accent-text: color-mix(in srgb,var(--accent) 68%,var(--navy));
    --danger: #B3261E;
    --lv-inicial: #A5392F;
    --lv-desarrollo: #8A6A1F;
    --lv-solido: var(--blue-2);
}

    .dx.a-gold {
        --accent: var(--gold)
    }

    .dx.a-blue {
        --accent: var(--blue)
    }

    .dx.a-graphite {
        --accent: var(--graphite)
    }

.dx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ── HEADER ── */
.dx-header {
    position: relative;
    padding: 64px 0 40px;
    background: radial-gradient(900px 400px at 82% -10%, rgba(18,59,121,0.09), transparent 60%), var(--paper);
    overflow: hidden
}

    .dx-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(6,27,72,0.03) 1px, transparent 1px),linear-gradient(90deg, rgba(6,27,72,0.03) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(closest-side, black, transparent 82%);
        pointer-events: none
    }

    .dx-header .container {
        position: relative;
        z-index: 1;
        max-width: 820px
    }

.dx-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(28px,4vw,42px);
    line-height: 1.1;
    letter-spacing: -.4px;
    color: var(--navy);
    margin: 14px 0
}

.dx-sub {
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 660px
}

.dx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px
}

    .dx-chips li {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--navy);
        background: var(--mist);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px 12px
    }

/* ── LAYOUT ── */
.dx {
    padding: 8px 0 72px
}

.dx-wrap {
    max-width: 860px
}

.dx-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
    box-shadow: inset 0 -4px 0 0 color-mix(in srgb,var(--accent) 55%,transparent),0 16px 34px -26px rgba(6,27,72,.2);
    scroll-margin-top: 96px;
}

    .dx-card::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 30px;
        width: 32px;
        height: 1px;
        background-image: linear-gradient(to right,var(--accent) 50%,transparent 0);
        background-size: 6px 1px
    }

    .dx-card::after {
        content: '';
        position: absolute;
        top: -3px;
        left: 30px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent)
    }

.dx [hidden] {
    display: none !important
}

/* ── BOTONES ── */
.dx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 14.5px;
    border-radius: 10px;
    padding: 13px 24px;
    border: 1px solid transparent;
    transition: background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

    .dx-btn.primary {
        background: var(--navy);
        color: #fff
    }

        .dx-btn.primary:hover:not(:disabled) {
            background: var(--blue);
            transform: translateY(-1px)
        }

    .dx-btn.ghost {
        background: #fff;
        color: var(--navy);
        border-color: var(--line)
    }

        .dx-btn.ghost:hover:not(:disabled) {
            border-color: color-mix(in srgb,var(--blue) 45%,var(--line))
        }

    .dx-btn:disabled {
        opacity: .45;
        cursor: not-allowed
    }

    .dx-btn.gold {
        background: #fff;
        color: var(--navy);
        border-color: var(--gold)
    }

.dx-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--blue-2);
    text-decoration: underline;
    font-weight: 600
}

.dx-link-strong {
    font-weight: 700;
    color: var(--navy);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px
}

/* ── INICIO ── */
.dx-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 26px
}

.dx-step {
    background: var(--mist);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.dx-step-n {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--accent-text)
}

.dx-step strong {
    font-family: var(--display);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--navy);
    line-height: 1.25
}

.dx-step small {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.45
}

.dx-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center
}

.dx-status {
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-soft)
}

.dx-metodo {
    margin-top: 24px;
    border-top: 1px solid var(--line-soft);
    padding-top: 16px
}

    .dx-metodo summary {
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        color: var(--navy)
    }

.dx-metodo-body {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 680px
}

.dx-privacy {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--ink-soft);
    max-width: 680px
}

    .dx-privacy a {
        color: var(--blue-2);
        text-decoration: underline
    }

/* ── PREGUNTAS ── */
.dx-progress {
    margin-bottom: 24px
}

.dx-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--mist-2);
    overflow: hidden
}

    .dx-progress-bar span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--accent);
        border-radius: 999px;
        transition: width .35s ease
    }

.dx-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-soft)
}

    .dx-progress-meta span:first-child {
        color: var(--accent-text)
    }

.dx-q {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}
    /* Bootstrap (reboot) hace flotar los <legend> (float:left) y eso corría las opciones fuera de la tarjeta: se anula. */
    .dx-q legend {
        float: none;
        display: block;
        font-family: var(--display);
        font-weight: 700;
        font-size: clamp(18px,2.4vw,23px);
        line-height: 1.25;
        color: var(--navy);
        padding: 0;
        margin-bottom: 8px;
        width: 100%
    }

        .dx-q legend + * {
            clear: none
        }

    .dx-q .dx-options {
        clear: both;
        width: 100%
    }

    .dx-q legend:focus {
        outline: none
    }

.dx-help {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 6px
}

.dx-options {
    display: grid;
    gap: 10px;
    margin-top: 16px
}

.dx-opt {
    position: relative;
    display: block;
    cursor: pointer
}

    .dx-opt input {
        position: absolute;
        opacity: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer
    }

.dx-opt-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    transition: border-color .2s ease,background .2s ease,box-shadow .2s ease
}

.dx-opt:hover .dx-opt-card {
    border-color: color-mix(in srgb,var(--accent) 50%,var(--line))
}

.dx-opt-mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid color-mix(in srgb,var(--navy) 35%,var(--line));
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease,border-color .2s ease
}

.dx-opt.multi .dx-opt-mark {
    border-radius: 6px
}

.dx-opt-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .15s ease
}

.dx-opt.multi .dx-opt-mark::after {
    width: 10px;
    height: 6px;
    border-radius: 0;
    background: none;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0) translate(1px,-1px)
}

.dx-opt input:checked + .dx-opt-card {
    border-color: var(--accent);
    background: color-mix(in srgb,var(--accent) 7%,white);
    box-shadow: inset 3px 0 0 var(--accent)
}

    .dx-opt input:checked + .dx-opt-card .dx-opt-mark {
        background: var(--accent);
        border-color: var(--accent)
    }

        .dx-opt input:checked + .dx-opt-card .dx-opt-mark::after {
            transform: scale(1)
        }

.dx-opt.multi input:checked + .dx-opt-card .dx-opt-mark::after {
    transform: rotate(-45deg) scale(1) translate(1px,-1px)
}

.dx-opt input:focus-visible + .dx-opt-card {
    outline: 2px solid var(--spark);
    outline-offset: 2px
}

.dx-opt.ns {
    margin-top: 6px
}

    .dx-opt.ns .dx-opt-card {
        border-style: dashed;
        color: var(--ink-soft);
        background: var(--mist)
    }

.dx-error {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--danger)
}

.dx-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px
}

.dx-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    font-weight: 600;
    color: var(--navy)
}

.dx-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--mist-2);
    border-top-color: var(--accent);
    animation: dxspin .8s linear infinite
}

@keyframes dxspin {
    to {
        transform: rotate(360deg)
    }
}

/* ── RESULTADO ── */
.dx-result {
    display: grid;
    gap: 22px;
    outline: none
}

.dx-print-head {
    display: none
}

.dx-hero {
    position: relative;
    background: linear-gradient(135deg,var(--navy),var(--blue));
    color: #fff;
    border-radius: 16px;
    padding: 32px 32px 28px;
    overflow: hidden
}

    .dx-hero::after {
        content: '';
        position: absolute;
        right: -60px;
        top: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 0 0 28px rgba(255,255,255,.04)
    }

    .dx-hero .eyebrow {
        color: #9FC1F7
    }

        .dx-hero .eyebrow::before {
            background: #9FC1F7
        }

    .dx-hero h2 {
        font-family: var(--display);
        font-weight: 800;
        font-size: clamp(24px,3.4vw,34px);
        line-height: 1.15;
        letter-spacing: -.3px;
        margin: 12px 0 10px;
        position: relative
    }

    .dx-hero p {
        color: rgba(255,255,255,.82);
        max-width: 640px;
        position: relative
    }

.dx-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    position: relative
}

    .dx-hero-tags span {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.28);
        color: #fff
    }

.dx-hero-meter {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    max-width: 240px;
    position: relative
}

    .dx-hero-meter i {
        flex: 1;
        height: 6px;
        border-radius: 999px;
        background: rgba(255,255,255,.2)
    }

        .dx-hero-meter i.on {
            background: #E3C477
        }

.dx-sec {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 28px
}

    .dx-sec h3 {
        font-family: var(--display);
        font-weight: 800;
        font-size: 18px;
        color: var(--navy);
        margin-bottom: 4px
    }

.dx-sec-sub {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 18px
}

.dx-callout {
    display: flex;
    gap: 12px;
    background: color-mix(in srgb,var(--gold) 9%,white);
    border: 1px solid color-mix(in srgb,var(--gold) 35%,white);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--ink)
}

    .dx-callout strong {
        color: var(--navy)
    }

.dx-dims {
    display: grid;
    gap: 4px
}

.dx-dim {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) 132px minmax(0,1.5fr);
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft)
}

    .dx-dim:first-child {
        border-top: 0
    }

.dx-dim-name {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--navy)
}

    .dx-dim-name small {
        display: block;
        font-weight: 400;
        font-size: 12.5px;
        color: var(--ink-soft)
    }

.dx-lv {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.dx-lv-bars {
    display: flex;
    gap: 4px
}

    .dx-lv-bars i {
        flex: 1;
        height: 6px;
        border-radius: 999px;
        background: var(--mist-2)
    }

.dx-lv-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700
}

.dx-lv.inicial .dx-lv-bars i:nth-child(-n+1) {
    background: var(--lv-inicial)
}

.dx-lv.inicial .dx-lv-label {
    color: var(--lv-inicial)
}

.dx-lv.desarrollo .dx-lv-bars i:nth-child(-n+2) {
    background: var(--gold)
}

.dx-lv.desarrollo .dx-lv-label {
    color: var(--lv-desarrollo)
}

.dx-lv.solido .dx-lv-bars i {
    background: var(--lv-solido)
}

.dx-lv.solido .dx-lv-label {
    color: var(--lv-solido)
}

.dx-dim-text {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.45
}

.dx-first {
    display: grid;
    gap: 12px;
    counter-reset: dxn
}

.dx-item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px 16px 18px;
    background: #fff
}

    .dx-item.alerta {
        border-color: color-mix(in srgb,var(--lv-inicial) 40%,var(--line));
        box-shadow: inset 3px 0 0 var(--lv-inicial)
    }

    .dx-item.falta {
        box-shadow: inset 3px 0 0 var(--gold)
    }

    .dx-item.mejora, .dx-item.nota {
        box-shadow: inset 3px 0 0 color-mix(in srgb,var(--blue) 55%,white)
    }

    .dx-item.oportunidad {
        box-shadow: inset 3px 0 0 var(--spark)
    }

.dx-item-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px
}

.dx-badge {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 9px;
    background: var(--mist);
    color: var(--navy);
    border: 1px solid var(--line)
}

.dx-item.alerta .dx-badge {
    color: var(--lv-inicial);
    border-color: color-mix(in srgb,var(--lv-inicial) 35%,white);
    background: color-mix(in srgb,var(--lv-inicial) 7%,white)
}

.dx-item h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--navy);
    line-height: 1.3
}

.dx-item p {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 4px
}

.dx-first .dx-item {
    padding-left: 60px
}

    .dx-first .dx-item::before {
        counter-increment: dxn;
        content: counter(dxn);
        position: absolute;
        left: 16px;
        top: 14px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        font-family: var(--display);
        font-weight: 800;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

.dx-later {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.dx-serv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px
}

    .dx-serv-tags a {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .6px;
        color: var(--navy);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 3px 8px;
        background: var(--mist)
    }

        .dx-serv-tags a:hover {
            border-color: var(--blue-2)
        }

.dx-strengths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.dx-strength {
    border: 1px solid color-mix(in srgb,var(--blue-2) 25%,white);
    background: color-mix(in srgb,var(--blue-2) 5%,white);
    border-radius: 12px;
    padding: 14px 16px
}

    .dx-strength h4 {
        font-family: var(--display);
        font-weight: 700;
        font-size: 14.5px;
        color: var(--navy)
    }

    .dx-strength p {
        font-size: 13.5px;
        color: var(--ink-soft);
        margin-top: 4px
    }

.dx-servs {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap: 14px
}

.dx-serv {
    --sa: var(--spark);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    background: #fff;
    box-shadow: inset 0 -4px 0 0 color-mix(in srgb,var(--sa) 55%,transparent)
}

    .dx-serv.a-blue {
        --sa: var(--blue)
    }

    .dx-serv.a-gold {
        --sa: var(--gold)
    }

    .dx-serv.a-graphite {
        --sa: var(--graphite)
    }

.dx-serv-n {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: color-mix(in srgb,var(--sa) 68%,var(--navy))
}

.dx-serv h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--navy)
}

.dx-serv ul {
    font-size: 13px;
    color: var(--ink-soft);
    display: grid;
    gap: 3px;
    padding-left: 16px;
    list-style: disc
}

.dx-serv-socio {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: auto
}

.dx-serv a {
    font-weight: 600;
    font-size: 13px;
    color: var(--blue-2)
}

.dx-metodo2 summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy)
}

.dx-criterios {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--ink-soft)
}

    .dx-criterios strong {
        color: var(--navy)
    }

.dx-alcance {
    font-size: 13px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
    margin-top: 14px
}

.dx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 24px
}

    .dx-actions .grow {
        flex: 1;
        min-width: 220px;
        font-size: 14px;
        color: var(--ink-soft)
    }

        .dx-actions .grow strong {
            display: block;
            color: var(--navy);
            font-family: var(--display);
            font-size: 16px;
            margin-bottom: 2px
        }

.dx-after {
    padding: 0 0 88px
}

    .dx-after .container {
        max-width: 860px;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--line-soft);
        padding-top: 24px;
        color: var(--ink-soft);
        font-size: 14.5px
    }

/* ── RESPONSIVE ── */
@media (max-width:760px) {
    .dx-steps {
        grid-template-columns: 1fr
    }

    .dx-card {
        padding: 22px 18px
    }

        .dx-card::before, .dx-card::after {
            left: 18px
        }

    .dx-hero {
        padding: 24px 20px
    }

    .dx-sec {
        padding: 20px 18px
    }

    .dx-dim {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .dx-lv {
        max-width: 200px
    }

    .dx-later, .dx-strengths {
        grid-template-columns: 1fr
    }

    .dx-first .dx-item {
        padding-left: 56px
    }

    .dx-nav .dx-btn {
        flex: 1
    }

    .dx-actions {
        padding: 18px
    }

        .dx-actions .dx-btn {
            flex: 1 1 100%
        }
}

/* ── IMPRESIÓN / GUARDAR COMO PDF ── */
@media print {
    .skip-link, .sector-ticker, .site-header, .site-footer, .dx-header, .dx-after, .dx-actions, .dx-sr, .dx-metodo, #dxStart, #dxWizard, noscript {
        display: none !important
    }

    body {
        background: #fff
    }

    .dx {
        padding: 0
    }

    .dx-wrap {
        max-width: none;
        padding: 0
    }

    .dx-result {
        gap: 14px
    }

    .dx-print-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 2px solid var(--navy);
        padding-bottom: 8px;
        font-family: var(--display);
        font-weight: 800;
        color: var(--navy)
    }

        .dx-print-head small {
            font-family: var(--mono);
            font-weight: 400;
            font-size: 10px;
            color: var(--ink-soft)
        }

    .dx-hero {
        background: var(--navy) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border-radius: 8px
    }

    .dx-sec, .dx-item, .dx-serv, .dx-strength {
        break-inside: avoid;
        box-shadow: none
    }

    .dx-metodo2[open] summary {
        display: none
    }

    .dx-metodo2 .dx-criterios {
        display: grid !important
    }

    .dx-lv-bars i, .dx-progress-bar span {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }
}