/* Importar fuente Montserrat de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

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

:root {
    /* Imagen del banner (Fase E6). Antes era una URL absoluta al WordPress
       público de la marca dentro de .hero-section::before: la app dependía de un
       host externo para su
       propia portada y le filtraba un hit por visitante. Ahora es un asset local
       (src/public/images/brand/), y queda como variable para que sustituirlo sea
       un cambio de una línea sin tocar la regla que la consume.
       Los colores de abajo siguen siendo el tema de este sitio; el temizado por
       banco es alcance de F2 (diseño aprobado por el humano), no de E6. */
    --brand-hero-image: url('/images/brand/hero.webp');

    /* Colores de marca del sitio */
    --red-dark: #B01B16;
    --red: #e4002b;
    --gray-dark: #363a44;
    --gray-light: #BBBBBB;
    --black-dark: #1d1f24;
    --black: #000000;
    --white-off: #FEFEFE;
    --white: #ffffff;
    
    /* Colores funcionales */
    --success-color: #27ae60;
    --error-color: #e4002b;
    --border-color: #BBBBBB;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--gray-dark);
    background-color: var(--white);
    font-size: 16px;
}

/* Header con Logo */
.site-header {
    background-color: var(--black-dark);
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.3s;
}

.logo-link:hover {
    opacity: 0.8;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
}

/* Insignia del banco aliado (E6). El header es oscuro (--black-dark) y el logo
   del banco trae sus propios colores de marca sobre fondo transparente; sin un
   fondo claro propio quedaría casi ilegible. Separada del logo del sitio: uno
   identifica quién opera el formulario, el otro con qué banco. */
.bank-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--white-off);
    padding: 6px 12px;
    border-radius: 6px;
}

.bank-badge-img {
    height: 24px;
    width: auto;
    display: block;
}

.bank-badge span {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-dark);
    white-space: nowrap;
}

/* Hero Section con Imagen de Fondo */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--black-dark);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--brand-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content .welcome-text {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 10px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-content h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--white);
    line-height: 1.3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content .highlight-text {
    color: #FFD700;
    font-weight: 700;
}

.hero-content .description {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 30px;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Container principal */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background-color: var(--white);
    min-height: 100vh;
}

/* Secciones informativas */
.info-section {
    padding: 30px 20px;
    background-color: var(--white);
}

.info-section h2 {
    color: var(--gray-dark);
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.info-section h2 .highlight-red {
    color: var(--red);
}

.info-section p {
    color: var(--gray-dark);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px;
}

/* Sección "Cómo Aplicar" */
.how-to-apply-section {
    background-color: var(--black-dark);
    padding: 40px 20px;
    color: var(--white);
}

.how-to-apply-section .section-subtitle {
    font-size: 13px;
    color: var(--white-off);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 500;
}

.how-to-apply-section .section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: var(--white);
    line-height: 1.3;
}

.steps-list {
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}

.step-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.step-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--red);
    margin-top: 5px;
    font-weight: bold;
    line-height: 1;
}

.step-content {
    flex: 1;
}

.step-content strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--white);
}

.step-content p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--white);
    margin: 0;
    opacity: 0.95;
}

/* Sección Términos */
.terms-section {
    background-color: var(--black-dark);
    padding: 40px 20px;
    color: var(--white);
}

.terms-section .section-subtitle {
    font-size: 13px;
    color: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
}

.terms-section .section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: var(--white);
    line-height: 1.3;
}

.terms-list {
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}

.term-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.term-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--red);
    margin-top: 5px;
    font-weight: bold;
    line-height: 1;
}

.term-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--white-off);
}

.term-content strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--white);
}

/* Selección de banco (F2). Sustituye a `.cta-section`/`.cta-buttons`, que
   servían al CTA único "Aplicar Ahora" de la landing mono-banco y quedaron sin
   ningún consumidor al retirarlo. */
.bank-choice-section {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--white);
}

.bank-choice-section .section-subtitle {
    font-size: 13px;
    color: var(--gray-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 500;
}

.bank-choice-section .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 35px;
}

/* Es una lista de opciones: se marca como <ul> para que un lector de pantalla
   anuncie cuántos bancos hay antes de recorrerlos. Los bullets se retiran por
   presentación, no cambiando la semántica. */
.bank-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.bank-card {
    background-color: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s;
}

.bank-card:hover {
    border-color: var(--gray-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.bank-card-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 18px;
}

.bank-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 24px;
}

/* `--bank-color` lo declara la vista por tarjeta, con el color de marca del
   banco ya validado como hex en `config/bankCards.js`. El respaldo importa: si
   la variable faltara, `background-color` sin valor dejaría un botón
   transparente con texto blanco — invisible, no "feo". */
.btn-bank {
    margin-top: auto;
    width: 100%;
    background-color: var(--bank-color, var(--gray-dark));
    color: var(--white);
    border-color: transparent;
}

.btn-bank:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.12);
}

/* El foco no puede depender del color del banco (cada uno trae el suyo y
   ninguno garantiza contraste contra el propio botón): se dibuja con el gris
   oscuro del sitio, por fuera del borde. */
.btn-bank:focus-visible {
    outline: 3px solid var(--gray-dark);
    outline-offset: 3px;
}

.bank-choice-back {
    margin-top: 32px;
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 15px 20px;
    background-color: var(--white-off);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.breadcrumbs a {
    color: var(--red);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: var(--red-dark);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--gray-light);
    margin: 0 8px;
}

.breadcrumb-current {
    color: var(--gray-dark);
    font-weight: 600;
}

/* Botón Volver */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    color: var(--red);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--red);
    border-radius: 6px;
    transition: all 0.3s;
    background-color: transparent;
}

.btn-back:hover {
    background-color: var(--red);
    color: var(--white);
}

/* Formulario */
.form-page-header {
    background-color: var(--white);
    padding: 20px;
    text-align: center;
}

.form-page-header h1 {
    color: var(--gray-dark);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.form-page-header h1 .highlight-red {
    color: var(--red);
}

.form-page-header .subtitle {
    color: var(--gray-dark);
    font-size: 16px;
}

.loan-form {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.form-section {
    background-color: var(--white);
    padding: 30px 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.form-section h2 {
    color: var(--gray-dark);
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--red);
}

.section-note {
    color: var(--gray-dark);
    font-size: 14px;
    margin-bottom: 25px;
    font-style: italic;
    background-color: var(--white-off);
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid var(--red);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--gray-dark);
    font-size: 14px;
}

.required {
    color: var(--red);
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
    background-color: var(--white);
    color: var(--gray-dark);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(224, 0, 43, 0.1);
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: var(--gray-dark);
    font-size: 13px;
    font-style: italic;
}

/* Estilos para input de archivo */
.form-group input[type="file"] {
    padding: 10px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background-color: var(--white-off);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.form-group input[type="file"]:hover {
    border-color: var(--red);
    background-color: var(--white);
}

.form-group input[type="file"]:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(224, 0, 43, 0.1);
}

/* Campos trampa (honeypot). F1: antes iban con `style` inline repetido en la
   vista; al generarse el formulario desde la configuracion, su presentacion se
   declara una sola vez aqui. */
.hp-field {
    position: absolute;
    left: -9999px;
}

/* Vista previa de imagen. F1: pasa de id unico a clase, porque el adjunto lo
   declara cada banco en su fields.js y puede haber mas de uno. El <img> ya no
   se emite con src="" (que hacia al navegador recargar la pagina entera): nace
   sin src y lo recibe al elegir el archivo. */
.image-preview {
    margin-top: 15px;
    padding: 10px;
    background-color: var(--white-off);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    max-width: 220px;
}

.image-preview[hidden] {
    display: none;
}

.image-preview-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.checkbox-group {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--white-off);
    border-radius: 6px;
    border-left: 4px solid var(--red);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.checkbox-label:hover {
    background-color: rgba(224, 0, 43, 0.05);
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-right: 12px;
    margin-top: 3px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--red);
}

.laboral-item {
    background-color: var(--white-off);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    position: relative;
}

.laboral-item h3 {
    color: var(--gray-dark);
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

.laboral-item .remove-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--red);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

.laboral-item .remove-btn:hover {
    background-color: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* El atributo HTML `hidden` pierde contra cualquier `display` declarado en una
   hoja de estilos: el navegador lo aplica desde su hoja de usuario-agente, de
   menor prioridad que esta. Sin esta regla, el `display: inline-block` de arriba
   gana y `hidden` no oculta nada.

   Caso real (2026-07-29, encontrado por el humano probando en producción): en
   Banco Popular, cuyo `fields.js` declara `maxItems: 1`, el botón "+ Agregar
   Otro Empleo" seguía visible pese a que `form.js` ya lo marcaba `hidden` al
   cargar. Invitaba a una acción que el servidor iba a rechazar — la validación
   de cardinalidad sí funcionaba, lo roto era solo que el botón no desaparecía.
   En Santa Cruz (`maxItems: 3`) pasaba lo mismo al añadir el tercer empleo.

   Mismo defecto que ya se había corregido dos veces en el backoffice
   (`.bo-btn[hidden]`, `.bo-nota[hidden]`) sin aplicarlo nunca al formulario
   público. Ver el punto 4 de "Lo que debes saber" en ESTADO.md. */
.btn[hidden] {
    display: none;
}

.btn-primary {
    background-color: var(--red);
    color: var(--white);
    border-color: var(--red);
}

.btn-primary:hover {
    background-color: var(--red-dark);
    border-color: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--red);
    border-color: var(--red);
}

.btn-secondary:hover {
    background-color: var(--red);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Messages */
.error-message {
    background-color: #fee;
    color: var(--red);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 4px solid var(--red);
    font-size: 15px;
    font-weight: 500;
}

.success-page,
.error-page {
    text-align: center;
    padding: 80px 20px;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 30px;
}

.success-page h1 {
    color: var(--success-color);
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 700;
}

.success-message {
    font-size: 18px;
    color: var(--gray-dark);
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.8;
}

.success-actions,
.error-actions {
    margin-top: 30px;
}

.error-page h1 {
    color: var(--red);
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 700;
}

.error-message {
    color: var(--gray-dark);
    font-size: 16px;
    margin-bottom: 30px;
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    color: var(--gray-dark);
    font-size: 14px;
    background-color: var(--white-off);
}

/* Responsive - Móvil First (90% tráfico móvil) */
@media (min-width: 768px) {
    .hero-content h1 {
        font-size: 48px;
    }
    
    .hero-content .description {
        font-size: 18px;
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-section h2,
    .how-to-apply-section .section-title,
    .terms-section .section-title {
        font-size: 40px;
    }

    /* La selección de banco sube de tamaño con las demás secciones, pero menos:
       compite en la misma pantalla con las tarjetas y un título de 40px las
       empuja fuera del primer golpe de vista. */
    .bank-choice-section .section-title {
        font-size: 32px;
    }

    .bank-card-logo {
        height: 56px;
    }

    .logo-img {
        height: 50px;
    }
    
    .hero-section {
        min-height: 70vh;
    }
}

@media (min-width: 1024px) {
    .hero-content h1 {
        font-size: 56px;
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .steps-list,
    .terms-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Optimizaciones móviles específicas */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    /* El header ya compite por espacio con el logo del sitio en pantallas
       angostas; se retira el texto de la insignia y se deja solo el logo del
       banco (más compacto, sigue siendo identificable). */
    .bank-badge span {
        display: none;
    }

    .bank-badge {
        padding: 6px 8px;
    }

    .bank-badge-img {
        height: 20px;
    }
    
    .hero-section {
        min-height: 50vh;
    }
    
    .hero-content {
        padding: 30px 15px;
    }
    
    .hero-content h1 {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .hero-content .description {
        font-size: 14px;
    }
    
    .info-section,
    .how-to-apply-section,
    .terms-section,
    .bank-choice-section {
        padding: 40px 15px;
    }

    .info-section h2,
    .how-to-apply-section .section-title,
    .terms-section .section-title,
    .bank-choice-section .section-title {
        font-size: 22px;
    }

    /* Móvil es ~90% del tráfico: las tarjetas se apilan (el `auto-fit` ya lo
       hace) y se compactan para que las dos quepan sin obligar a desplazarse
       hasta el final para descubrir que hay una segunda opción. */
    .bank-cards {
        gap: 16px;
    }

    .bank-card {
        padding: 24px 18px;
    }

    .bank-card-logo {
        height: 40px;
        margin-bottom: 14px;
    }

    .bank-card-name {
        font-size: 16px;
        margin-bottom: 18px;
    }
    
    .form-page-header {
        padding: 15px;
    }
    
    .form-page-header h1 {
        font-size: 18px;
    }
    
    .breadcrumbs {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .btn-back {
        padding: 8px 14px;
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .form-section {
        padding: 20px 15px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px;
        font-size: 16px; /* Evita zoom en iOS */
    }
    
    .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
        letter-spacing: 0.3px;
    }
    
    .info-section {
        padding: 30px 15px;
    }
    
    .info-section h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .info-section p {
        font-size: 14px;
        margin-bottom: 25px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    /* Las reglas móviles de `.cta-buttons` se retiran con el CTA mono-banco que
       las usaba (F2). Su equivalente ya no hace falta: el botón de cada tarjeta
       nace a ancho completo y las tarjetas se apilan solas. */
    .bank-choice-back .btn {
        width: 100%;
    }

    .logo-img {
        height: 35px;
    }
    
    .step-item,
    .term-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
    }
    
    .step-icon,
    .term-icon {
        margin-top: 5px;
        flex-shrink: 0;
    }
}

/* Accesibilidad y mejoras UX móvil */
@media (max-width: 767px) {
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        font-size: 16px; /* Previene zoom en iOS */
    }
    
    .btn {
        min-height: 48px; /* Tamaño táctil mínimo */
    }
    
    .checkbox-label {
        min-height: 48px;
        align-items: center;
    }
}

/* ==========================================================================
   Backoffice (Fase F4c) — barra lateral y cascarón común del panel admin.
   Vive aquí y no en un <style> por vista para que las cuatro secciones no
   puedan divergir visualmente: es la misma razón por la que el markup del
   cascarón se comparte en `views/admin/partials/shell-*.ejs`.
   ========================================================================== */
/* El desbordamiento horizontal ocurre DENTRO de los contenedores que lo declaran
   (la tabla del listado tiene su propio scroll). Que además llegue a la página
   sacaría la barra lateral de la vista y obligaría a desplazarse para volver al
   menú, que es justo lo que la barra viene a evitar.
   Hace falta en AMBOS elementos: con `overflow-x` solo en <body>, el elemento
   raíz deja de heredar el valor propagado y vuelve a desplazar la página
   (verificado en navegador: la barra lateral se salía 95px). */
.bo-html,
.bo-body {
    overflow-x: hidden;
}
.bo-body {
    margin: 0;
    background-color: #f5f5f4;
}
.bo-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}
.bo-sidebar {
    width: 220px;
    flex-shrink: 0;
    background-color: var(--black-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
}
.bo-brand {
    display: block;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bo-brand-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
}
.bo-brand-sub {
    display: block;
    font-size: 12px;
    color: #9a9a97;
    margin-top: 2px;
}
.bo-nav {
    flex: 1;
    padding: 12px 0;
}
.bo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: #c9c9c6;
    text-decoration: none;
    font-size: 14px;
    /* Objetivo táctil cómodo sin depender de la métrica de la fuente. */
    min-height: 44px;
    box-sizing: border-box;
}
.bo-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--white);
}
.bo-nav-item.is-active {
    background-color: var(--red);
    color: var(--white);
    font-weight: 600;
}
.bo-nav-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.bo-sidebar-foot {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.bo-user {
    display: block;
    font-size: 13px;
    color: #9a9a97;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}
.bo-logout {
    width: 100%;
    padding: 8px 10px;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: transparent;
    color: #c9c9c6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.bo-logout:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
}
.bo-main {
    flex: 1;
    padding: 24px 28px;
    /* Sin esto, una tabla ancha ensancha el flex item y empuja la barra lateral
       fuera de la pantalla en vez de desbordar dentro de su propio contenedor. */
    min-width: 0;
}
.bo-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.bo-page-title {
    margin: 0 0 4px;
    font-size: 24px;
    color: var(--gray-dark);
}
.bo-page-sub {
    margin: 0;
    font-size: 13px;
    color: #6b6b68;
}
.bo-page-actions { margin-bottom: 14px; }
.bo-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.bo-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0 0 2px;
}
.bo-card-sub {
    font-size: 13px;
    color: #6b6b68;
    margin: 0 0 14px;
}
.bo-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.bo-metric {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
}
.bo-metric-label {
    display: block;
    font-size: 13px;
    color: #6b6b68;
}
.bo-metric-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--gray-dark);
}
.bo-metric-value.is-approved { color: #2e7d32; }
.bo-metric-value.is-rejected { color: #c62828; }

/* F4e — Montos. Las tarjetas van dentro de una `.bo-card`, que ya aporta su
   propio margen inferior; sin esto se sumarían los dos y quedaría un hueco. */
.bo-metrics-flush { margin-bottom: 0; }
/* Un importe es más largo que un contador: sin bajar el tamaño, "RD$ 12.345.678"
   desborda la tarjeta en pantallas estrechas. Cifras tabulares para que las
   columnas de dígitos queden alineadas entre tarjetas. */
.bo-metric-money {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}
/* Misma familia de gris que el resto del texto secundario del backoffice
   (medido 5.35:1 sobre blanco, por encima del mínimo AA de 4.5:1). */
.bo-metric-note {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #6b6b68;
}
/* Barra de proporción por banco. El ancho llega como custom property desde la
   vista (un porcentaje ya calculado y acotado en el servidor); el color de
   marca, validado como hex por `bankCards`/`utils/html`. El CSS no conoce
   ningún banco. */
.bo-bar-track {
    height: 6px;
    background-color: #ececea;
    border-radius: 3px;
    overflow: hidden;
}
.bo-bar-fill {
    height: 6px;
    border-radius: 3px;
    background-color: var(--bo-bar-color, var(--red));
    width: var(--bo-bar-width, 0%);
}
.bo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.bo-table th {
    text-align: left;
    font-weight: 600;
    color: #6b6b68;
    font-size: 13px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}
.bo-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--gray-dark);
}
.bo-table tbody tr:last-child td {
    border-bottom: none;
}
.bo-table-scroll {
    overflow-x: auto;
}
.bo-muted {
    color: #6b6b68;
}
.bo-empty {
    text-align: center;
    padding: 32px 12px;
    color: #6b6b68;
}
.bo-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.bo-pill-ok { background-color: #e8f5e9; color: #2e7d32; }
.bo-pill-warn { background-color: #fff3e0; color: #a15c00; }
.bo-pill-off { background-color: #eceff1; color: #455a64; }
.bo-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

@media (max-width: 860px) {
    .bo-shell {
        flex-direction: column;
    }
    .bo-sidebar {
        width: auto;
    }
    .bo-nav {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
    }
    .bo-nav-item {
        flex: 1 1 auto;
        justify-content: center;
    }
    .bo-main {
        padding: 20px 16px;
    }
}

/* --- Backoffice · listado de solicitudes (F4b) --------------------------------
   Reemplaza los estilos que vivían en un <style> dentro de dashboard.ejs. Están
   aquí por el mismo motivo que el resto del cascarón: cuatro secciones con copias
   propias del layout divergen en silencio. */
.bo-card-flush {
    padding: 0;
    overflow: hidden;
}
/* El atributo `hidden` vale menos que cualquier `display` declarado en una hoja
   de estilos: el navegador lo aplica desde su hoja de usuario-agente, así que el
   `display: inline-flex` de abajo lo anulaba y los botones que el JS oculta
   (Guardar, Filtrar, Aplicar) seguían viéndose. Hay que devolvérselo
   explícitamente. */
.bo-btn[hidden] {
    display: none;
}
.bo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    min-height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    color: var(--gray-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.bo-btn:hover { border-color: #9a9a97; }
.bo-btn-primary {
    background-color: var(--black-dark);
    border-color: var(--black-dark);
    color: var(--white);
}
.bo-btn-primary:hover { background-color: #33363d; color: var(--white); }
.bo-btn-ghost { border-color: transparent; color: #6b6b68; }
.bo-btn-ghost:hover { background-color: var(--surface-soft, #f1f1ef); border-color: transparent; }
.bo-btn-mini { min-height: 28px; padding: 0 10px; font-size: 12px; }
.bo-btn.is-disabled { opacity: 0.45; cursor: default; }

.bo-filters { display: block; }
.bo-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}
.bo-filters-row-sub { background-color: #fafaf9; }
.bo-filters select,
.bo-filters input[type='date'],
.bo-filters input[type='number'],
.bo-filters input[type='search'] {
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--white);
    color: var(--gray-dark);
    box-sizing: border-box;
}
.bo-filters input[type='date'] { padding: 0 6px; }
.bo-search { position: relative; flex: 1; min-width: 220px; }
.bo-search input { width: 100%; }
.bo-input-num { width: 96px; }
.bo-filters-label { font-size: 12px; color: #6b6b68; font-weight: 600; }
.bo-filters-label-gap { margin-left: 8px; }
.bo-filters-sep { color: #9a9a97; }
.bo-filters-per { margin-left: auto; }
.bo-filters-actions { display: flex; gap: 6px; }

/* Foco explícito para los controles del backoffice. El outline por defecto del
   navegador ya funciona (verificado con Tab real), pero declararlo aquí lo hace
   independiente de que ningún estilo futuro lo pise, y da un anillo consistente
   en los cuatro módulos. `:focus-visible` y no `:focus`: el anillo aparece al
   navegar con teclado, no al hacer clic con el ratón. */
.bo-filters input:focus-visible,
.bo-filters select:focus-visible,
.bo-btn:focus-visible,
.bo-gestion-select:focus-visible,
.bo-nav-item:focus-visible,
.bo-logout:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.bo-notice {
    margin: 0;
    padding: 12px 14px;
    background-color: #fff8e6;
    border-bottom: 1px solid #f0dfae;
    color: #6b4e00;
    font-size: 13px;
}

.bo-table-compact { font-size: 12.5px; }
.bo-table-compact th {
    padding: 9px 10px;
    background-color: #fafaf9;
    font-size: 12px;
}
.bo-table-compact td { padding: 9px 10px; vertical-align: middle; }
.bo-table-compact tbody tr:hover { background-color: #fafaf9; }
.bo-nowrap { white-space: nowrap; }
.bo-num { text-align: right; font-variant-numeric: tabular-nums; }
.bo-strong { font-weight: 600; color: var(--gray-dark); }
/* El gris de esta línea (email y teléfono bajo el nombre) se midió en navegador:
   con #8a8a86 daba 3.47:1 sobre blanco, por debajo del mínimo AA de 4.5:1 para
   texto de este tamaño. Se usa el mismo gris que el resto del texto secundario
   del backoffice, que sí cumple (5.35:1). */
.bo-sub { color: #6b6b68; font-size: 11.5px; margin-top: 1px; }

/* Estado TÉCNICO como punto: conserva la señal (un PDF que no se generó) sin
   gastar el ancho de una columna. El color no es el único indicador — el título
   y un texto solo para lectores de pantalla dicen lo mismo. */
.bo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: #b4b2a9;
    vertical-align: middle;
}
.bo-dot-received { background-color: #BA7517; }
.bo-dot-pdf_generated { background-color: #639922; }
.bo-dot-emailed { background-color: #1D9E75; }
.bo-dot-error { background-color: #E24B4A; }
.bo-bank-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    background-color: var(--bo-bank-color, #888780);
    vertical-align: middle;
}

.bo-gestion { display: flex; gap: 5px; align-items: center; }
.bo-gestion-select {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
    background: var(--white);
    color: var(--gray-dark);
    max-width: 130px;
}
.bo-gestion-select.is-aprobada { border-color: #7fbf7f; background-color: #f2fbf2; }
.bo-gestion-select.is-rechazada { border-color: #e6a2a2; background-color: #fdf4f4; }
.bo-gestion-select.is-contactado { border-color: #9ec3e6; background-color: #f4f9fd; }

.bo-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12.5px;
    color: #6b6b68;
}
.bo-pager-nav { display: flex; align-items: center; gap: 6px; }
.bo-pager-pos { padding: 0 4px; }

@media (max-width: 860px) {
    .bo-filters-per { margin-left: 0; }
    .bo-search { min-width: 100%; }
}

/* Etiqueta que solo anuncian los lectores de pantalla. Cada control del panel
   necesita nombre propio ("Estado de gestión de la solicitud 12"), pero mostrarlo
   llenaría la tabla de texto redundante.
   Se perdió al reescribir `dashboard.ejs` en F4b —vivía en su `<style>`— y el
   síntoma fue que TODAS esas etiquetas se volvieron visibles, desordenando la
   barra de filtros y la tabla. No se usa `display: none`, que las ocultaría
   también al lector: se saca del flujo visual conservándolas en el árbol. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Backoffice · modal "Ver Detalles" del listado (F4c, corregido 2026-07-28) ---
   Vivía en el <style> propio de dashboard.ejs (incluido el `display: none` que lo
   mantiene oculto por defecto) y se perdió al migrar la vista al cascarón común.
   Sin él, el modal se renderizaba como bloque plano al final de la página en vez
   de quedar oculto hasta abrirse — lo detectó el humano mirando la pantalla, no
   ningún test (la cobertura verifica contenido, no apariencia).
   `admin-dashboard.js` sigue generando exactamente estas clases (detail-section,
   detail-row, btn-download-doc…): no cambió nada más que el CSS que faltaba. */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}
.modal-content {
    background-color: white;
    margin: 50px auto;
    padding: 30px;
    border-radius: 8px;
    max-width: 800px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--red);
}
.modal-header h2 {
    margin: 0;
    color: var(--gray-dark);
}
.close {
    color: var(--gray-light);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close:hover {
    color: var(--red);
}
.detail-section {
    margin-bottom: 25px;
}
.detail-section h3 {
    color: var(--red);
    margin-bottom: 15px;
    font-size: 18px;
}
.detail-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.detail-label {
    font-weight: 600;
    color: var(--gray-dark);
}
.detail-value {
    color: var(--gray-dark);
}
.btn-download-doc {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--red);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s;
}
.btn-download-doc:hover {
    background-color: var(--red-dark);
    color: white;
}

/* F4d — Nota interna del operador, dentro del modal de detalle.

   `.bo-nota[hidden]` es obligatorio y no redundante: el atributo HTML `hidden`
   pierde contra cualquier `display` declarado en una hoja de estilos, porque el
   navegador lo aplica desde su hoja de usuario-agente (menor prioridad). Sin
   esta regla, el `form.hidden = true` del JS —el que oculta el formulario cuando
   no hay solicitud que editar— no ocultaría nada. Es el mismo caso que
   `.bo-btn[hidden]`, documentado en ESTADO.md tras haber fallado ya una vez. */
.bo-nota {
    display: block;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
}
.bo-nota[hidden] { display: none; }
.bo-nota-label {
    display: block;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 4px;
}
/* Mismo gris que el resto del texto secundario del backoffice: se midió en 5.35:1
   sobre blanco, por encima del mínimo AA de 4.5:1 para este tamaño. */
.bo-nota-hint {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #6b6b68;
}
.bo-nota-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-dark);
    background: var(--white);
    box-sizing: border-box;
    resize: vertical;
}
.bo-nota-input:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.bo-nota-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Reenvío del correo, debajo de la nota dentro del modal de detalle.
   `.bo-reenvio[hidden]` por lo mismo que `.bo-nota[hidden]`: sin ella, el
   `display` declarado gana al atributo `hidden` que pone el JS y el bloque
   seguiría visible aunque no haya solicitud a la que reenviar. */
.bo-reenvio {
    display: block;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
.bo-reenvio[hidden] { display: none; }
.bo-reenvio-label {
    display: block;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 4px;
}
/* Mismo gris medido que el resto del texto secundario del backoffice: 5.35:1
   sobre blanco, por encima del mínimo AA de 4.5:1 para este tamaño. */
.bo-reenvio-hint {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #6b6b68;
}
.bo-reenvio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Acuse de una acción recién hecha (por ahora, el reenvío). Verde de éxito, con
   contraste medido sobre su propio fondo. `role="status"` en el marcado hace que
   un lector de pantalla lo anuncie sin robar el foco. */
.bo-flash {
    margin: 0 0 14px;
    padding: 11px 14px;
    background-color: #eef8f0;
    border: 1px solid #bcdfc4;
    border-radius: 8px;
    color: #1f5c2e;
    font-size: 13.5px;
}

/* Fase H1 — formularios de la pantalla de Usuarios (crear cuenta, cambiar la
   contraseña propia, restablecer la de otro, regenerar códigos de respaldo).

   Columna estrecha a propósito: son campos cortos (un nombre, una contraseña, seis
   dígitos) y un input de 700px invita a pensar que se espera un texto largo. El
   tope en 380px los mantiene con la anchura que sugiere lo que hay que escribir. */
.bo-form-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 380px;
}
.bo-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-dark);
    margin-top: 6px;
}
/* `.bo-input` ya existía para los filtros del listado; aquí solo se asegura que
   ocupe la columna, porque estos van apilados y no en una barra horizontal. */
.bo-form-inline .bo-input {
    width: 100%;
    box-sizing: border-box;
}
.bo-form-inline .bo-btn {
    margin-top: 10px;
    align-self: flex-start;
}

/* El restablecer de cada fila va dentro de un `<details>`: cuatro formularios de
   contraseña abiertos a la vez en la misma tabla serían ilegibles, y el elemento
   nativo ya trae el comportamiento de abrir/cerrar y su semántica de accesibilidad
   sin una línea de JavaScript. */
.bo-reset > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}
.bo-reset > summary::-webkit-details-marker { display: none; }
.bo-reset[open] > summary { margin-bottom: 10px; }
.bo-reset .bo-form-inline {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fbfbfa;
}

/* El modal de detalle nunca fue responsive: `.modal-content` tiene un ancho fijo
   (800px de máximo, 30px de padding) y `.detail-row` una rejilla de `200px 1fr`,
   así que por debajo de ~760px el modal se sale del viewport. Como `body` lleva
   `overflow-x: hidden`, lo que queda fuera NO se alcanza desplazándose: queda
   inaccesible.

   Mientras el modal fue solo de lectura eso era feo pero tolerable — se perdía el
   final de unas líneas. F4d mete dentro el primer CONTROL del modal, y medido a
   375px el botón "Guardar nota" caía en x=687: literalmente imposible de pulsar
   en un móvil. Por eso el arreglo entra con F4d aunque el defecto sea anterior:
   es lo que hace utilizable lo que esta fase añade, no una mejora aparte.

   El corte va en 860px, el mismo que ya usa el resto del backoffice. */
@media (max-width: 860px) {
    /* `.modal` declara `width: 100%`, y ese porcentaje se resuelve contra el ancho
       del DOCUMENTO, no del viewport: con la tabla del listado desbordando dentro
       de su contenedor con scroll, el documento mide más que la pantalla y el
       modal heredaba ese ancho (medido: 718px con el viewport en 375px). `100vw`
       es el viewport por definición y no depende del contenido de la página. */
    .modal {
        width: 100vw;
    }
    .modal-content {
        margin: 20px auto;
        padding: 20px;
        max-width: none;
        width: auto;
    }
    /* Etiqueta encima del valor: con 200px fijos para la etiqueta, en una pantalla
       estrecha no queda ancho utilizable para el dato. */
    .detail-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    /* El botón pasa a ocupar el ancho: a esta anchura, alinearlo a la derecha lo
       deja pegado a un borde que el pulgar alcanza mal. Los del reenvío van
       igual, y además apilados: dos botones lado a lado a 375px quedan
       demasiado estrechos para acertarles, y uno de ellos escribe a un cliente
       real — no es sitio para un toque impreciso. */
    .bo-nota-actions .bo-btn,
    .bo-reenvio-actions .bo-btn {
        width: 100%;
        min-height: 44px;
    }
    .bo-reenvio-actions {
        flex-direction: column;
    }
    /* H1: los formularios de cuentas pierden el tope de anchura y su botón pasa a
       ocupar la línea con altura de toque, por lo mismo que los de arriba. */
    .bo-form-inline {
        max-width: none;
    }
    .bo-form-inline .bo-btn {
        width: 100%;
        min-height: 44px;
        align-self: stretch;
    }
}