/* EL DOBLE FACTOR (2026-11-05, docs/central/plan-doble-factor-2026-11-05.md §5).

   Dos sitios:
     - el SEGUNDO PASO de la página de entrada (wwwroot/index.html, HTML sin la web): el código de la app, la recuperación, el
       alta con el QR y la lista de códigos. Va dentro de la misma zona que la contraseña (.acceso-formulario) y con sus mismas
       fichas;
     - el diálogo «Doble factor» del menú del usuario y la línea de la ficha del usuario (Blazor).

   Densidad de la central (docs/central/densidad-compacta-2026-10-14.md): campos de 40 px con la etiqueta pequeña encima, 44 px
   para el dedo por debajo de 600 px, en un teléfono en horizontal y con puntero táctil. Solo consume fichas (--plano-*, --limpia-*, --tentalo-*): claro y oscuro salen solos. */

/* --- la página de entrada ------------------------------------------------------------------------------------------- */

.df-etiqueta {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--plano-tinta-2);
}

.df-campo {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    margin: 0 0 1rem;
    padding: 0 0.75rem;
    border: 1px solid var(--limpia-borde-control, var(--plano-muro));
    border-radius: 8px;
    background: var(--limpia-hoja, var(--plano-hoja));
    color: var(--plano-tinta);
    font: inherit;
    font-size: 1rem;
}

.df-campo:focus {
    outline: 2px solid var(--limpia-morado, var(--mud-palette-primary));
    outline-offset: 1px;
    border-color: transparent;
}

/* El código de 6 cifras: cifras tabulares y separadas, como las enseña la app. */
.df-campo-codigo {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    font-size: 1.25rem;
    text-align: center;
}

.df-casilla {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--plano-tinta);
    cursor: pointer;
}

.df-casilla input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--limpia-morado, var(--mud-palette-primary));
}

.df-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-top: 0.75rem;
}

.df-enlace {
    min-height: 40px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--limpia-morado-hondo, var(--mud-palette-primary));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 560;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* El QR: siempre sobre blanco (la app lo lee mejor) y de un tamaño que un móvil enfoca a un palmo. */
.df-qr {
    width: min(200px, 60vw);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    padding: 6px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--limpia-borde, var(--plano-muro));
}

.df-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.df-clave {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--plano-tinta-2);
}

.df-clave summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--limpia-morado-hondo, var(--mud-palette-primary));
    font-weight: 560;
}

.df-clave code,
.df-lista code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--plano-tinta);
}

.df-clave code {
    display: block;
    margin: 0.25rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--limpia-cabecera, var(--plano-papel));
    overflow-wrap: anywhere;
}

/* Los diez códigos: dos columnas donde caben, una en un teléfono estrecho. */
.df-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.75rem 0.75rem 2.25rem;
    border-radius: 8px;
    background: var(--limpia-cabecera, var(--plano-papel));
    color: var(--plano-tinta-2);
}

.df-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.df-acciones .mud-button-root {
    min-height: 40px;
}

/* 44 px para el dedo: por debajo de 600 px, en un teléfono girado (poco alto) y en cualquier pantalla táctil. */
@media (max-width: 599.98px), (max-height: 480px) and (orientation: landscape), (pointer: coarse) {
    .df-campo,
    .df-casilla,
    .df-enlace,
    .df-clave summary,
    .df-acciones .mud-button-root {
        min-height: 44px;
    }

    .df-campo {
        height: 44px;
        font-size: 16px; /* 16 px: iOS no amplía la página al tocar el campo. */
    }

    .df-campo-codigo {
        font-size: 1.25rem;
    }

    /* El botón principal de cada paso: el de la contraseña se queda en el --tentalo-toque de la densidad (44 con toque). */
    #df-formulario .acceso-boton,
    #df-alta .acceso-boton,
    #df-codigos .acceso-boton,
    #df-recuperado .acceso-boton {
        min-height: 44px;
    }
}

@media (max-width: 359.98px) {
    .df-lista {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* En horizontal con poco alto (un teléfono girado), el QR no se come la pantalla. */
@media (max-height: 480px) and (orientation: landscape) {
    .df-qr {
        width: min(160px, 40vh);
    }
}

/* --- el diálogo «Doble factor» y la ficha del usuario (Blazor) ------------------------------------------------------ */

.doble-factor-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.doble-factor-campo {
    max-width: 14rem;
}

.doble-factor-codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1.25rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem 0.6rem 2.25rem;
    border-radius: 8px;
    background: var(--limpia-cabecera);
    color: var(--limpia-tinta-2);
}

.doble-factor-codigos code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    color: var(--limpia-tinta);
}

.doble-factor-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.usuario-doble-factor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.usuario-doble-factor-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 599.98px), (max-height: 480px) and (orientation: landscape), (pointer: coarse) {
    .doble-factor-acciones .mud-button-root.mud-button,
    .usuario-doble-factor .mud-button-root.mud-button,
    .doble-factor-campo .mud-input {
        min-block-size: 44px;
        min-height: 44px;
    }
}

@media (max-width: 359.98px) {
    .doble-factor-codigos {
        grid-template-columns: minmax(0, 1fr);
    }
}