/* Font Size Control CSS */

/* Variables CSS para los diferentes tamaños */
:root {
    --font-size-level: 0;

    /* Nivel 0 - Normal (100%) */
    --body-font-size-0: 1rem;
    --h1-font-size-0: 2rem;
    --h2-font-size-0: 1.75rem;
    --h3-font-size-0: 1.5rem;
    --h4-font-size-0: 1.25rem;
    --h5-font-size-0: 1.1rem;
    --h6-font-size-0: 1rem;
    --small-font-size-0: 0.875rem;
    --label-font-size-0: 1rem;
    --button-font-size-0: 1rem;

    /* Nivel 1 - Pequeño (112.5%) */
    --body-font-size-1: 1.125rem;
    --h1-font-size-1: 2.25rem;
    --h2-font-size-1: 1.969rem;
    --h3-font-size-1: 1.688rem;
    --h4-font-size-1: 1.406rem;
    --h5-font-size-1: 1.238rem;
    --h6-font-size-1: 1.125rem;
    --small-font-size-1: 0.984rem;
    --label-font-size-1: 1.125rem;
    --button-font-size-1: 1.125rem;

    /* Nivel 2 - Medio (125%) */
    --body-font-size-2: 1.25rem;
    --h1-font-size-2: 2.5rem;
    --h2-font-size-2: 2.188rem;
    --h3-font-size-2: 1.875rem;
    --h4-font-size-2: 1.563rem;
    --h5-font-size-2: 1.375rem;
    --h6-font-size-2: 1.25rem;
    --small-font-size-2: 1.094rem;
    --label-font-size-2: 1.25rem;
    --button-font-size-2: 1.25rem;

    /* Nivel 3 - Grande (137.5%) */
    --body-font-size-3: 1.375rem;
    --h1-font-size-3: 2.75rem;
    --h2-font-size-3: 2.406rem;
    --h3-font-size-3: 2.063rem;
    --h4-font-size-3: 1.719rem;
    --h5-font-size-3: 1.513rem;
    --h6-font-size-3: 1.375rem;
    --small-font-size-3: 1.203rem;
    --label-font-size-3: 1.375rem;
    --button-font-size-3: 1.375rem;

    /* Nivel 4 - Muy Grande (150%) */
    --body-font-size-4: 1.5rem;
    --h1-font-size-4: 3rem;
    --h2-font-size-4: 2.625rem;
    --h3-font-size-4: 2.25rem;
    --h4-font-size-4: 1.875rem;
    --h5-font-size-4: 1.65rem;
    --h6-font-size-4: 1.5rem;
    --small-font-size-4: 1.3125rem;
    --label-font-size-4: 1.5rem;
    --button-font-size-4: 1.5rem;
}

/* Aplicar tamaños según el nivel */
body {
    font-size: var(--body-font-size-0);
    line-height: 1.6;
    transition: font-size 0.3s ease;
}

h1 { font-size: var(--h1-font-size-0); }
h2 { font-size: var(--h2-font-size-0); }
h3 { font-size: var(--h3-font-size-0); }
h4 { font-size: var(--h4-font-size-0); }
h5 { font-size: var(--h5-font-size-0); }
h6 { font-size: var(--h6-font-size-0); }
small { font-size: var(--small-font-size-0); }
label { font-size: var(--label-font-size-0); }
button, .btn { font-size: var(--button-font-size-0); }
p, .form-text, .prompt { font-size: var(--body-font-size-0); }
.choice-text, .choice, input, select, textarea { font-size: var(--body-font-size-0); }

/* Transiciones suaves para cambios de tamaño */
body,
h1, h2, h3, h4, h5, h6,
p, small, label, button, .btn,
.form-text, .prompt, .choice-text, .choice {
    transition: font-size 0.3s ease;
}

/* Nivel 1: 112.5% */
body[data-font-size="1"] {
    font-size: var(--body-font-size-1);
}
body[data-font-size="1"] h1 { font-size: var(--h1-font-size-1); }
body[data-font-size="1"] h2 { font-size: var(--h2-font-size-1); }
body[data-font-size="1"] h3 { font-size: var(--h3-font-size-1); }
body[data-font-size="1"] h4 { font-size: var(--h4-font-size-1); }
body[data-font-size="1"] h5 { font-size: var(--h5-font-size-1); }
body[data-font-size="1"] h6 { font-size: var(--h6-font-size-1); }
body[data-font-size="1"] small { font-size: var(--small-font-size-1); }
body[data-font-size="1"] label { font-size: var(--label-font-size-1); }
body[data-font-size="1"] button,
body[data-font-size="1"] .btn { font-size: var(--button-font-size-1); }
body[data-font-size="1"] p,
body[data-font-size="1"] .form-text,
body[data-font-size="1"] .prompt { font-size: var(--body-font-size-1); }
body[data-font-size="1"] .choice-text,
body[data-font-size="1"] .choice,
body[data-font-size="1"] input,
body[data-font-size="1"] select,
body[data-font-size="1"] textarea { font-size: var(--body-font-size-1); }

/* Nivel 2: 125% */
body[data-font-size="2"] {
    font-size: var(--body-font-size-2);
}
body[data-font-size="2"] h1 { font-size: var(--h1-font-size-2); }
body[data-font-size="2"] h2 { font-size: var(--h2-font-size-2); }
body[data-font-size="2"] h3 { font-size: var(--h3-font-size-2); }
body[data-font-size="2"] h4 { font-size: var(--h4-font-size-2); }
body[data-font-size="2"] h5 { font-size: var(--h5-font-size-2); }
body[data-font-size="2"] h6 { font-size: var(--h6-font-size-2); }
body[data-font-size="2"] small { font-size: var(--small-font-size-2); }
body[data-font-size="2"] label { font-size: var(--label-font-size-2); }
body[data-font-size="2"] button,
body[data-font-size="2"] .btn { font-size: var(--button-font-size-2); }
body[data-font-size="2"] p,
body[data-font-size="2"] .form-text,
body[data-font-size="2"] .prompt { font-size: var(--body-font-size-2); }
body[data-font-size="2"] .choice-text,
body[data-font-size="2"] .choice,
body[data-font-size="2"] input,
body[data-font-size="2"] select,
body[data-font-size="2"] textarea { font-size: var(--body-font-size-2); }

/* Nivel 3: 137.5% */
body[data-font-size="3"] {
    font-size: var(--body-font-size-3);
}
body[data-font-size="3"] h1 { font-size: var(--h1-font-size-3); }
body[data-font-size="3"] h2 { font-size: var(--h2-font-size-3); }
body[data-font-size="3"] h3 { font-size: var(--h3-font-size-3); }
body[data-font-size="3"] h4 { font-size: var(--h4-font-size-3); }
body[data-font-size="3"] h5 { font-size: var(--h5-font-size-3); }
body[data-font-size="3"] h6 { font-size: var(--h6-font-size-3); }
body[data-font-size="3"] small { font-size: var(--small-font-size-3); }
body[data-font-size="3"] label { font-size: var(--label-font-size-3); }
body[data-font-size="3"] button,
body[data-font-size="3"] .btn { font-size: var(--button-font-size-3); }
body[data-font-size="3"] p,
body[data-font-size="3"] .form-text,
body[data-font-size="3"] .prompt { font-size: var(--body-font-size-3); }
body[data-font-size="3"] .choice-text,
body[data-font-size="3"] .choice,
body[data-font-size="3"] input,
body[data-font-size="3"] select,
body[data-font-size="3"] textarea { font-size: var(--body-font-size-3); }

/* Nivel 4: 150% */
body[data-font-size="4"] {
    font-size: var(--body-font-size-4);
}
body[data-font-size="4"] h1 { font-size: var(--h1-font-size-4); }
body[data-font-size="4"] h2 { font-size: var(--h2-font-size-4); }
body[data-font-size="4"] h3 { font-size: var(--h3-font-size-4); }
body[data-font-size="4"] h4 { font-size: var(--h4-font-size-4); }
body[data-font-size="4"] h5 { font-size: var(--h5-font-size-4); }
body[data-font-size="4"] h6 { font-size: var(--h6-font-size-4); }
body[data-font-size="4"] small { font-size: var(--small-font-size-4); }
body[data-font-size="4"] label { font-size: var(--label-font-size-4); }
body[data-font-size="4"] button,
body[data-font-size="4"] .btn { font-size: var(--button-font-size-4); }
body[data-font-size="4"] p,
body[data-font-size="4"] .form-text,
body[data-font-size="4"] .prompt { font-size: var(--body-font-size-4); }
body[data-font-size="4"] .choice-text,
body[data-font-size="4"] .choice,
body[data-font-size="4"] input,
body[data-font-size="4"] select,
body[data-font-size="4"] textarea { font-size: var(--body-font-size-4); }

/* Estilo del botón de control de tamaño */
#fontSizeBtn,
#resetFontSizeBtn {
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    position: relative;
}

#fontSizeBtn:hover,
#resetFontSizeBtn:hover {
    text-decoration: underline;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
}

#fontSizeBtn:active,
#resetFontSizeBtn:active {
    background-color: rgba(0, 0, 0, 0.1);
}

#fontSizeBtn sup,
#resetFontSizeBtn sup,
#fontSizeBtn sub,
#resetFontSizeBtn sub {
    font-size: 0.7em;
    margin-left: 0.1em;
}

/* Indicador visual de nivel de zoom */
#fontSizeBtn[data-level="1"]::after {
    content: " (↑)";
    font-size: 0.85em;
    opacity: 0.7;
}

#fontSizeBtn[data-level="2"]::after {
    content: " (↑↑)";
    font-size: 0.85em;
    opacity: 0.7;
}

#fontSizeBtn[data-level="3"]::after {
    content: " (↑↑↑)";
    font-size: 0.85em;
    opacity: 0.7;
}

#fontSizeBtn[data-level="4"]::after {
    content: " (↑↑↑↑)";
    font-size: 0.85em;
    opacity: 0.7;
}