:root {
    --padding-box: 75px;
    --font-size26: 26px;
    --font-size25: 25px;
    --font-size24: 24px;
}



@property --gradient-color-sides {
    syntax: '<color>';
    inherits: false;
    initial-value: #1d2c4e;
}

@property --gradient-color-center {
    syntax: '<color>';
    inherits: false;
    initial-value: #2f497f;
}

@property --gradient-middle-stop {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 90deg;
}

@property --button-dark {
    syntax: '<color>';
    inherits: true;
    initial-value: #198911;
}

@property --button-light {
    syntax: '<color>';
    inherits: true;
    initial-value: #28aa15;
}

@property --button-inside {
    syntax: '<color>';
    inherits: true;
    initial-value: #11580b;
}
.fix-padding .wrapper_pantallas2 {
    display: flex;
    flex-direction: column;
    width: calc(1000px - var(--padding-box) * 2) !important;
    max-width: calc(1000px - var(--padding-box) * 2) !important;
    padding-inline: var(--padding-box) !important;
}

.fix-padding .blo_1_wrapper850 {

    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.fix-padding .situacion,
.fix-padding h2,
.fix-padding h4 {

    margin-inline: calc(75px - var(--padding-box)) !important;
    width: auto !important;
}

.fix-padding .rojo {
    color: #990000;
    font-weight: 600;
}

@media only screen and (max-width: 1015px) {
    :root {
        --font-size26: 22px;
        --font-size25: 18px;
        --font-size24: 17.5px;
    }
}

@media only screen and (max-width: 1015px) {
    .fix-padding {

        display: flex;

        justify-content: center;
    }

    .fix-padding .wrapper_pantallas2 {

        margin-block: 0px !important;
        width: 100%;
        display: flex;
        flex-direction: column;

        max-width: min(100vw, 460px) !important;
        padding-inline: 0px !important;

        margin-inline: auto !important;
    }

    .fix-padding .situacion {
        display: flex;
        width: 100%;
    }

    .fix-padding .situacion p {

        margin-inline: 10px;
        width: 100%;
    }

    .fix-padding {

        --padding-box: 0px;
    }

    .fix-padding .situacion,
    .fix-padding h2,
    .fix-padding h4 {

        margin-inline: 0 !important;
        width: auto !important;
    }
}

.ejemplo-cont-mobile * {
    text-shadow: none;
    box-sizing: border-box;
}

#escenario_clinico_1 {

    --pauta-color-1: #56aa0c;
    --pauta-color-2: #246e0c;
    --pauta-gradiente-1: rgb(0, 121, 2);
    --pauta-gradiente-2: #00ca0a;

    --correccion-outline-color: #497f37;
}

#escenario_clinico_1 .footer-ejemplo {
    min-width: 95vw;
}

#escenario_clinico_2 details{

    --pauta-color-1: #e2a645;
    --pauta-color-2: #b36123;
    --pauta-gradiente-1: #a5571c;
    --pauta-gradiente-2: #f4b34b;
    --correccion-outline-color: #b36123;
    --button-inside: #613a0c;
}

#escenario_clinico_2 .nivel1 .icon-cont {
    --button-dark: #cf7c00;
    --button-light: #ba7200;
    --button-inside: #613a0c;
}

#escenario_clinico_2 .nivel1 .footer-ejemplo {
    min-width: 95vw;
}

#escenario_clinico_3 details {

    --pauta-color-1: #a31422;
    --pauta-color-2: #6d1011;
    --pauta-gradiente-1: #501516;
    --pauta-gradiente-2: #b61727;
    --correccion-outline-color: #b36123;
    --button-inside: #72230b;
}

#escenario_clinico_3 .nivel1 .icon-cont {
    --button-dark: #ce1d00;
    --button-light: #ce1d00;

    --button-inside: #72230b;
}

#escenario_clinico_3 .nivel1 .footer-ejemplo {
    min-width: 95vw;
}

.ejemplo-cont-mobile {
    max-width: 460px;
    width: 100%;

    --sumary-outline-color: #dcdbdb;
    --summary-border-radius: 10px;
    --summary-outline-width: 3px;
    --duration-opening: .5s;
    --text-detail-color: white;
    --details-color: white;
    --details-border-radius: 10px;
    --details-border-width: 2px;
    --details-padding: 1rem;
    --details-margin: 1rem;
    --details-font-size: 1.2rem;
    --details-font-weight: 500;
    --button-dark: #198911;
    --button-light: #28aa15;
    --button-inside: #11580b;
    --duration-opening: .3s;
}

.ejemplo-cont-mobile {
    interpolate-size: allow-keywords;
}

.ejemplo-cont-mobile img {
    max-width: 100%;
}

.ejemplo-cont-mobile details::details-content {

    block-size: 0;
    overflow-y: clip;
    transition: content-visibility var(--duration-opening) allow-discrete, opacity var(--duration-opening), block-size var(--duration-opening);
}

.ejemplo-cont-mobile details[open] > summary .icon-cont i::after {
    transform: rotate(180deg);
}

.ejemplo-cont-mobile .card {
    position: relative;

    max-width: 398px;
}

.ejemplo-cont-mobile .card .circulo-1 {
    position: absolute;
    top: 0px;
    left: -28px;
    opacity: 0;

    transition: opacity 1s ease-in-out;
}

.ejemplo-cont-mobile .card-2 {

    position: relative;
    transform: translateY(8px);
    max-width: 398px;
}

.ejemplo-cont-mobile .card-2 .circulo-1 {
    position: absolute;
    top: 0px;
    left: -20px;
    opacity: 0;

    transition: opacity 1s ease-in-out;
}

.ejemplo-cont-mobile .card-2 .circulo-2 {
    position: absolute;
    top: -1.5px;
    left: -20px;
    opacity: 0;

    transition: opacity 1s ease-in-out;
}

.ejemplo-cont-mobile details[open]::details-content {

    block-size: auto;

    transition: content-visibility var(--duration-opening) allow-discrete, opacity var(--duration-opening), block-size var(--duration-opening);
}

.ejemplo-cont-mobile .icon-cont {
    display: grid;

    place-items: center;
}

.ejemplo-cont-mobile .icon-cont i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: --button-dark, --button-light, --button-inside;
    transition-duration: var(--duration-opening);
    transition-timing-function: linear;

    background: linear-gradient(to top, var(--button-dark), var(--button-light));
    outline-offset: -2px;
    position: relative;
    isolation: isolate;
}

.ejemplo-cont-mobile .icon-cont i::before {
    content: "";
    position: absolute;
    box-shadow: 0 1px 0 #ffffff90;

    inset: 3px;
    background-color: var(--button-inside);
    border-radius: 50%;
    z-index: 2;
}

.ejemplo-cont-mobile .icon-cont i::after {
    content: "";
    position: absolute;

    inset: 3px;
    background-position: 0px 2px;
    background-image: url(../themes/images/icons-18-white.png);
    background-position: -216px -1px;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
    z-index: 3;

    background-repeat: no-repeat;
}

.ejemplo-cont-mobile ul, .ejemplo-cont-mobile lis li {
    margin: 0;
}

.ejemplo-cont-mobile .cuadro-pauta {
    width: 100%;
    margin-bottom: .5rem;
}

.ejemplo-cont-mobile details {
    overflow-x: visible;
}

.ejemplo-cont-mobile .top-level {
    position: relative;
    z-index: 999;
    --button-dark: #0c6dad;
    --button-light: #2d99cc;
    --button-inside: #085396;
    pointer-events: none;
    margin-bottom: 5px;
    margin-inline: auto;
    display: grid;
    gap: 1px;
    color: white;
    list-style: none;
    max-width: 398px;
    width: 100%;
    border-radius: var(--summary-border-radius);
    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    outline-offset: calc(-1 * var(--summary-outline-width));

    background: linear-gradient(var(--gradient-angle), var(--gradient-color-sides), var(--gradient-color-center) var(--gradient-middle-stop), var(--gradient-color-sides));
    box-shadow: 5px 5px 6px -2px rgba(0, 0, 0, 0.49);
    padding-top: .8rem;
    font-weight: 500;
    padding-left: 24px;
    padding-bottom: 39px;

    transition-property: --gradient-color-sides, --gradient-color-center, --gradient-middle-stop, --button-dark, --button-light, --button-inside;
    transition-duration: var(--duration-opening);
    transition-timing-function: linear;
}

.ejemplo-cont-mobile .top-level  > * {
    text-align: left;
    font-weight: 600;
}

.ejemplo-cont-mobile .top-level h4 {
    text-align: start;
    font-size: 20px;
}

.ejemplo-cont-mobile .top-level p {
    padding-left: 22px;
}

.ejemplo-cont-mobile .top-level p span {
    font-size: 20px;
}

.ejemplo-cont-mobile .top-level ul {
    display: grid;
    gap: 2px;
    margin: 0;
    margin-top: 4px;
    list-style: square;
    font-size: 15px;
}

.ejemplo-cont-mobile .top-level ul li {

    margin: 0;
    margin-left: -4px;
    padding: 0;
}

.ejemplo-cont-mobile .click-area {
    display: flex;
    justify-content: center;
    align-items: end;
    position: absolute;
    pointer-events: all;

    bottom: -2px;
    left: 50%;
    width: 102px;
    transform: translateX(-50%);
    height: 100%;
    max-height: 92px;
    padding-bottom: 10px;
    cursor: pointer;
}

.ejemplo-cont-mobile .textos {
    margin-top: 1rem;
    max-width: 398px;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    background-color: var(--pauta-color-1);
    font-weight: bold;
    font-size: 1rem;
    width: 100%;
    align-items: center;
    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    outline-offset: calc(-1 * var(--summary-outline-width));
    border-radius: var(--summary-border-radius);
    padding: 1rem;
    padding-bottom: 1.4rem;
    box-shadow: 5px 5px 6px -2px rgba(0, 0, 0, 0.49);
}

.ejemplo-cont-mobile .textos span {

    margin-bottom: .4rem;
    width: 100%;
    text-align: center;
}

.ejemplo-cont-mobile .textos .control, .ejemplo-cont-mobile .textos .tratamiento {
    background-color: rgb(255 255 255 / .65);
    color: var(--button-inside);
    font-size: 17px;
    border-radius: 6px;
    padding-inline: 1rem;
    padding-block: 3px;
    font-weight: 500;
    width: 100%;
    max-width: 280px;
}

.ejemplo-cont-mobile .textos .tni-small {
    font-weight: normal;
    position: absolute;
    bottom: 5px;
}

.ejemplo-cont-mobile .small-bold {
    font-weight: bold;
}

.ejemplo-cont-mobile .contenido-link[data-cuadro="2"] {
    height: 0;
    margin-inline: auto;

    overflow-y: hidden;
    transition: 1s ease-in-out;
    max-width: 404px;
}

.ejemplo-cont-mobile .imagen-borde-sombra {
    box-shadow: 5px 5px 6px -2px rgba(0, 0, 0, 0.89);
    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    margin-bottom: 1rem;
}

.ejemplo-cont-mobile .contenido-link[data-cuadro="3"] {
    height: 0;
    transition: 1s ease-in-out;
    margin-inline: auto;

    transition: 1s ease-in-out;
    width: 100%;
}

.ejemplo-cont-mobile .contenido-link[data-cuadro="3"]  > div {
    max-width: 398px;
    margin-inline: auto;
}

.ejemplo-cont-mobile .contenido-link[data-cuadro="3"] .grafico-result {
    text-align: center;
    max-width: 100%;
}

.ejemplo-cont-mobile .texto-pauta {
    padding-top: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    max-width: 400px;
    color: #1b4e84;
    padding-inline: .5rem;
    padding-bottom: 1rem;
}

.ejemplo-cont-mobile .flecha-verde {
    width: 100%;
    text-align: center;
    margin-block: .5rem;
}

.ejemplo-cont-mobile .correccion-info {
    padding-top: 1rem;
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    font-size: 16px;
}

.ejemplo-cont-mobile .correccion-info span {
    font-weight: bold;
    color: #1b4e84;
}

.ejemplo-cont-mobile .correccion-info {

    margin-bottom: 1rem;
}

.ejemplo-cont-mobile .arrow-down {
    display: grid;
    grid-template-columns: 1fr;

    padding-bottom: 3px;
}

.ejemplo-cont-mobile .arrow-down  > img {
    grid-column: 1;
    grid-row: 1;
    margin: 0px;
}

.ejemplo-cont-mobile .arrow-down .flecharoja {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.ejemplo-cont-mobile details {
    color: white;
}

.ejemplo-cont-mobile details summary {
    position: relative;
    list-style: none;
    width: 100%;

    margin-bottom: 4px;
    border-radius: var(--details-border-radius);
    outline: var(--details-border-width) solid var(--details-bg-color);
}

.ejemplo-cont-mobile .nivel1  > summary {
    display: grid;
    background: var(--pauta-color-1);
    max-width: 398px;
    font-size: 24px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding-block: .5rem;
    padding-inline: 1rem;
    place-items: center;
    text-align: center;

    outline: var(--details-border-width) solid var(--details-bg-color);
    padding-top: .8rem;
    font-weight: 600;
    padding-left: 24px;
    padding-bottom: 39px;
    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    outline-offset: calc(-1 * var(--summary-outline-width));
    border-radius: var(--summary-border-radius);
    box-shadow: 5px 5px 6px -2px rgba(0, 0, 0, 0.49);
}

.ejemplo-cont-mobile .nivel2 {
    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    outline-offset: calc(-1.9 * var(--summary-outline-width));
    border-radius: var(--summary-border-radius);
}

.ejemplo-cont-mobile .nivel2  > summary {
    display: grid;
    background: var(--pauta-color-2);
    max-width: 398px;
    font-size: 18px;
    position: relative;

    pointer-events: none;

    place-items: center;
    text-align: center;

    outline: var(--details-border-width) solid var(--details-bg-color);
    padding-block: .8rem;
    font-weight: 600;

    outline: var(--summary-outline-width) solid var(--sumary-outline-color);
    outline-offset: calc(-1 * var(--summary-outline-width));
    border-radius: 8px;
    box-shadow: 5px 5px 6px -2px rgba(0, 0, 0, 0.49);
}

.ejemplo-cont-mobile .nivel2  > summary .click-area {
    left: 5px;
    top: 0px;
    padding-inline: 6px;
    transform: none;
    justify-content: left;
    width: 70%;
}

.ejemplo-cont-mobile .nivel2  > summary {

    margin-bottom: 6px;
}

.ejemplo-cont-mobile .nivel2 .content-details {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

.ejemplo-cont-mobile .nivel3 {
    border-radius: 8px;

    outline: var(--summary-outline-width) solid var(--correccion-outline-color);
    outline-offset: -1px;
}

.ejemplo-cont-mobile .nivel3  > summary {
    outline: 2px solid var(--correccion-outline-color);
    outline-offset: 0px;
    padding: .7rem;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: -1px;
    font-weight: 600;
    min-height: 88px;
}

.ejemplo-cont-mobile .nivel3  > summary  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ejemplo-cont-mobile .nivel3  > summary {

    pointer-events: none;
    position: relative;
    background: linear-gradient(to top, var(--pauta-gradiente-1), var(--pauta-gradiente-2));
}

.ejemplo-cont-mobile .nivel3  > summary .click-area {
    display: flex;

    justify-content: end;
    align-items: center;
    position: absolute;
    pointer-events: all;

    bottom: 0px;
    left: 50%;
    width: 102px;
    transform: translateX(-50%);
    height: 100%;
    max-height: 92px;
    padding-bottom: 10px;
    cursor: pointer;
    pointer-events: all;
}

.ejemplo-cont-mobile .nivel3 .content-details .red {
    color: #c1001f;
    font-weight: 900;
}

.ejemplo-cont-mobile .nivel3 .content-details {

    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

.ejemplo-cont-mobile .nivel3 .content-details  > span {

    display: inline;

    text-align: center;
    background-color: #e1e1e1;
    padding-inline: .4rem;
    font-size: 1rem;
    border-radius: 1.3rem;
    color: #003b7b;
    font-weight: 600;
    border: 2px solid #9f9d9d;
    line-height: 27px;
    vertical-align: middle;
}

.ejemplo-cont-mobile .nivel3 .content-details small {
    padding-inline: auto;
    width: 100%;
    text-align: center;
    color: #003b7b;
    margin-top: -2px;
    margin-bottom: -7px;
}

.ejemplo-cont-mobile .llave {

    margin-block: .5rem;
    width: 100%;
    text-align: center;
}

.ejemplo-cont-mobile .llave img {
    max-width: 100%;
}

.ejemplo-cont-mobile .result {
    width: 100%;
    text-align: center;
}

.ejemplo-cont-mobile .result img {
    max-width: 100%;
}

[data-step="2"] [data-boton="2"] {
    --gradient-color-sides: #760000;
    --gradient-color-center: #b80101;
    --gradient-middle-stop: 62%;
    --button-dark: #b12a10 !important;
    --button-light: #c83513 !important;
    --button-inside: #90150b !important;
    transition: all .3ms ease-in-out;
}

[data-step="2"] [data-boton="2"] .icon-cont i::after {
    transform: rotate(180deg);
}

[data-step="2"] .card .circulo-1 {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

[data-step="2"] .contenido-link[data-cuadro="2"] {
    height: auto;
    transition: height 2s ease-in-out;
}

[data-step="2"] #arrow-1 .flecharoja {
    opacity: 1;
    transition: opacity var(--duration-opening) ease-in-out;
}

[data-step="3"] [data-boton="3"] {
    --gradient-color-sides: #760000;
    --gradient-color-center: #b80101;
    --gradient-middle-stop: 62%;
    --button-dark: #b12a10 !important;
    --button-light: #c83513 !important;
    --button-inside: #90150b !important;
    transition: all .3ms ease-in-out;
}

[data-step="3"] [data-boton="3"] .icon-cont i::after {
    transform: rotate(180deg);
}

[data-step="3"] .card-2 .circulo-2 {
    opacity: 1;
    transition: opacity 0.3s 1s ease-in-out;
}

[data-step="3"] .contenido-link[data-cuadro="3"] {
    height: auto;
    transition: 1s ease-in-out;
}

[data-step="3"] #arrow-2 .flecharoja {
    opacity: 1;
    transition: opacity var(--duration-opening) ease-in-out;
}