*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    /* Colores */
    --color-bg: hsl(0, 0%, 100%);
    --color-text: hsl(0, 0%, 0%);
    --color-border: hsla(0, 0%, 60%, 0.712);
    --color-border-hover: hsl(0, 0%, 7%);
    --color-border-light: hsl(0, 0%, 80%);
    --color-button-bg: hsl(0, 0%, 95%);
    --color-output-bg: hsl(0deg 0% 94.9%);
    --color-output-border: hsl(0deg 0% 80%);
    --color-error: hsl(0, 100%, 45%);
    --color-stats: hsl(0, 0%, 33%);
    --color-link: hsl(230, 100%, 50%);
    --color-copy-bg: hsl(140, 70%, 85%);
    --color-copy-border: hsl(140, 70%, 50%);

    /* Fuentes */
    --font-primary: 'Oxygen', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /* Dimensiones */
    --container-max-width: 700px;
    --container-padding: 16px;
    --container-margin: 40px auto;
    --btn-padding: 7px 10px;
    --input-padding: 4px;
    --section-gap: 15px;
    --radius: 4px;

    /* Breakpoints */
    --bp-mobile: 600px;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max-width);
    margin: var(--container-margin);
    padding: var(--container-padding);
}

.controls {
    margin-bottom: 1em;
}

.title {
    margin-bottom: 8px;
    text-transform: capitalize;
    text-align: center;
    font-family: var(--font-primary);
}

.subtitle {
    margin-bottom: 1.5em;
    text-align: center;
    text-wrap: balance;
    font-family: var(--font-secondary);
}

i {
    font-style: normal;
    font-weight: 600;
}

strong {
    font-weight: bolder;
    font-weight: 600;
}

.form-group {
    display: flex;
    flex-direction: column;
    min-width: 110px;
}

section {
    display: block;
    unicode-bidi: isolate;
}

label {
    font-size: 1em;
    margin-bottom: 2px;
    user-select: none;
}

input[type="number"],
select {
    font-size: 1em;
    padding: var(--input-padding);
    margin-bottom: 1em;
    outline: none;
}

input {
    border: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}

input:hover {
    border-color: var(--color-border-hover);
}

select {
    border-color: var(--color-border);
    transition: border-color 0.2s ease;
}

select:hover {
    border-color: var(--color-border-hover);
}

.btn-row {
    margin-bottom: 1.1em;
    gap: var(--section-gap);
}

button {
    font-size: 1em;
    padding: var(--btn-padding);
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    background: var(--color-button-bg);
    transition: border-color 0.2s ease;
}

button:hover {
    border-color: var(--color-border);
    outline: none;
}

/* Estado visual de botón “copiado” */
.copied {
    background: var(--color-copy-bg);
    border-color: var(--color-copy-border);
}

.resultado {
    font-size: 1.2em;
    margin-bottom: 5px;
    font-family: var(--font-secondary);
}

#error {
    color: var(--color-error);
    min-height: 20px;
    margin-bottom: 10px;
    font-family: var(--font-secondary);
    text-wrap: balance;
}

#stats {
    font-size: 0.95em;
    color: var(--color-stats);
    margin-bottom: 20px;
    user-select: none;
    font-family: var(--font-primary);
}

#output {
    background: var(--color-output-bg);
    padding: 15px;
    min-height: 44px;
    max-height: 400px;
    text-align: left;
    border: 1px solid var(--color-output-border);
    font-family: var(--font-primary);
    overflow-y: auto;
}

/* El texto que está adentro del recuadro gris */
#output p {
    margin-bottom: 5px;
    line-height: 1.3;
}

.footer {
    text-align: center;
    margin-top: -2em;
    margin-bottom: 25px;
    font-family: var(--font-secondary);
}

.enlace-persona {
    color: var(--color-link);
    text-decoration: underline;
}

@media (max-width: var(--bp-mobile)) {
    .container {
        max-width: 100vw;
        margin: 12px auto;
    }

    .title {
        text-wrap: balance;
        text-transform: inherit;
        text-decoration: inherit;
        line-height: 1.2em;
    }

    .controls {
        flex-direction: column;
        gap: 10px;
    }

    .btn-row {
        flex-direction: row;
        justify-content: center;
        gap: 5px;
    }

    button {
        box-shadow: none;
    }

    #output {
        padding: 8px 4px;
    }

    #error {
        margin-bottom: 35px;
        text-wrap: balance;
    }

    .form-group {
        min-width: 0;
        width: 100%;
    }

    input[type="number"],
    select {
        width: 100%;
    }
}