/* ==========================================================================
   COMOCOMEN · PANTALLAS DE ACCESO
   --------------------------------------------------------------------------
   Hoja común de las siete pantallas del flujo de entrada: recuperar
   contraseña, cambiarla, crear cuenta y las cuatro de resultado.

   Un único patrón para las siete: una columna centrada con marca arriba, un
   bloque de contenido y las acciones al pie, con un solo tratamiento para
   los estados de resultado (correcto y error).

   Las siete comparten esta hoja a propósito. Una hoja por pantalla acaba
   repitiendo los mismos contenedores con medidas ligeramente distintas, y
   entonces la misma pantalla se ve diferente según por dónde se llegue a
   ella.
   ========================================================================== */

@import url('./base.css');

html,
body {
    min-height: 100svh;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

/* ==========================================================================
   MARCA
   ========================================================================== */

.background {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--gutter) var(--space-6);
    padding-top: calc(var(--space-8) + var(--safe-top));
    background: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-500) 100%);
}

.background-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(260px, 72vw);
    padding: var(--space-3) var(--space-5);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* El logotipo lleva tipografía azul sobre claro: necesita placa blanca. */
.background-logo img,
.login-banner {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   COLUMNA DE CONTENIDO
   ========================================================================== */

.container,
.page-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: var(--space-6) var(--gutter) var(--space-8);
    padding-bottom: calc(var(--space-8) + var(--safe-bottom));
}

/* Un h1/h2 dentro del flujo de acceso es el título de la pantalla. */
.container h1,
.container h2,
.page-content h1,
.page-content h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.container p,
.page-content p,
.text {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.text-label,
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* ==========================================================================
   ICONO DE ESTADO
   --------------------------------------------------------------------------
   `.circle` es el indicador de estado de estas pantallas. Su tono lo decide
   la clase que lo acompaña: correcto, error o informativo.
   ========================================================================== */

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    /* En una pantalla de formulario el icono acompana al titulo y comparte
       su alineacion; solo se centra en las pantallas de resultado, donde no
       hay nada mas que leer. */
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-primary-subtle);
    color: var(--color-primary-strong);
}

.circle app-icon {
    --icon-size: 2.25rem;
}

/* Pantallas de resultado: el estado se lee por icono, color y texto. */
body.is-success .circle {
    background: var(--success-subtle);
    color: var(--success);
}

body.is-error .circle {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* En pantallas de resultado el contenido se centra. */
body.is-success .page-content,
body.is-error .page-content,
body.is-success .container,
body.is-error .container {
    justify-content: center;
    text-align: center;
}

body.is-success .circle,
body.is-error .circle {
    width: 84px;
    height: 84px;
    margin-inline: auto;
}

/* En pantallas de resultado, las tarjetas informativas siguen leyendose en
   bandera aunque el bloque este centrado. */
body.is-success .card,
body.is-error .card,
body.is-success .info,
body.is-error .info,
body.is-success .contact,
body.is-error .contact {
    text-align: left;
}

/* ==========================================================================
   FORMULARIOS
   Los campos heredan .form-input de components.css.
   ========================================================================== */

.container-form,
.form-container,
.container form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* El texto introductorio necesita separarse del primer campo: sin esto la
   etiqueta quedaba pegada al parrafo y parecia parte de el. */
.container > p + form,
.container > p + .container-form,
.page-content > p + form {
    margin-top: var(--space-6);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}

.input-icon-left {
    position: absolute;
    left: var(--space-4);
    display: flex;
    color: var(--text-tertiary);
    pointer-events: none;
}

.input-icon-right {
    position: absolute;
    right: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border: none;
    border-radius: var(--radius-full);
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.input-icon-right:hover {
    color: var(--text-primary);
    background: var(--surface-active);
}

.form-input {
    width: 100%;
}

.input-with-icon .form-input {
    padding-left: var(--space-12);
}

.input-with-icon:has(.input-icon-right) .form-input {
    padding-right: var(--space-12);
}

.form-group-dynamic {
    margin-bottom: var(--space-4);
}

/* El campo con medidor de fuerza envuelve input e indicador en columna: el
   icono se posiciona respecto al campo, no respecto al bloque entero, que
   era lo que dejaba el ojo flotando fuera del recuadro. */
.input-with-strength {
    display: block;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-strength-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.password-strength-container .password-strength {
    flex: 1;
    height: 4px;
    margin-bottom: 0;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.password-strength-container .password-strength-text {
    margin-top: 0;
    flex-shrink: 0;
    min-width: 5.5em;
    text-align: right;
}

/* ==========================================================================
   SELECTOR DE TIPO DE DOCUMENTO
   --------------------------------------------------------------------------
   `.container-content` es la etiqueta de cada opcion de radio, no una
   columna de contenido: al tratarla como columna, el radio, el icono y el
   texto quedaban apilados y centrados sin caja que los agrupara.
   ========================================================================== */

.container-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 68px;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition-colors),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.container-content:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-subtle);
}

/* La opcion elegida gana borde de marca, fondo tenue y anillo: no depende
   solo del punto del radio, que en movil es diminuto. */
.container-content:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    box-shadow: var(--shadow-focus);
}

.container-content input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    order: 3;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition-colors);
}

.container-content input[type='radio']:checked {
    border-color: var(--color-primary);
    border-width: 6px;
}

.container-content .text {
    flex: 1;
    min-width: 0;
}

.container-content .text-label {
    margin-bottom: 0;
    font-size: var(--text-md);
}

.container-content .text p {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

/* El icono del tipo de documento. */
.icon,
.icon-nif,
.icon-pasport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.container-content:has(input:checked) .icon {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Cada etiqueta necesita aire respecto al campo anterior. */
.container form > .form-label:not(:first-of-type),
.form-container > .form-label {
    margin-top: var(--space-4);
}

.container form > h3,
.form-container > h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ==========================================================================
   MEDIDOR DE CONTRASEÑA
   ========================================================================== */

.password-strength {
    height: 4px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--danger);
    transition: width var(--duration-base) var(--ease-standard),
                background-color var(--duration-base) var(--ease-standard);
}

.password-strength-bar.weak   { width: 33%; background-color: var(--danger); }
.password-strength-bar.medium { width: 66%; background-color: var(--warning); }
.password-strength-bar.strong { width: 100%; background-color: var(--success); }

.password-strength-text {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
}

.password-strength-text.weak   { color: var(--danger-text); }
.password-strength-text.medium { color: var(--warning-text); }
.password-strength-text.strong { color: var(--success-text); }

/* ==========================================================================
   TARJETAS DE INFORMACIÓN
   ========================================================================== */

.card,
.info,
.contact,
.account {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle);
    color: var(--color-primary-strong);
}

.card-text,
.info-text {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.card-text strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

/* ==========================================================================
   ACCIONES
   ========================================================================== */

/* Las acciones se apilan a lo ancho de la columna, nunca lado a lado: en
   estas pantallas siempre hay una sola salida recomendada y el resto son
   alternativas. El aspecto lo pone la variante del botón; aquí solo el
   ritmo vertical. */
.btn {
    margin-bottom: var(--space-3);
}

.question,
.terms,
.terms-label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.terms {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

.question {
    margin-top: var(--space-4);
    text-align: center;
}

.question a {
    color: var(--text-link);
    font-weight: var(--weight-semibold);
}

/* ==========================================================================
   TABLET Y ESCRITORIO
   Columna centrada con tope de ancho: un formulario de acceso no se lee
   mejor por ocupar 1400px.
   ========================================================================== */

@media (min-width: 600px) {
    .background {
        padding-block: var(--space-10) var(--space-8);
    }

    .container,
    .page-content,
    .container-content {
        max-width: 520px;
        padding-top: var(--space-8);
    }
}

@media (min-width: 1024px) {
    body {
        justify-content: center;
    }

    .background {
        padding-block: var(--space-12) var(--space-10);
    }

    .background-logo {
        width: min(320px, 60vw);
    }

    .container,
    .page-content,
    .container-content {
        flex: 0 1 auto;
        max-width: 480px;
        padding-block: var(--space-10);
    }
}