/*
 * PE · BLOQUE DEL FORMULARIO DE REGISTRO · 2026-09-24 · mobile first (regla 1: 375 px, zonas táctiles de 44 px)
 *  · .pe-genero   el género del perfil en el alta (F1): tres opciones grandes, una por fila en el teléfono
 */
.pe-genero { border: 1px solid rgba(212, 175, 55, .35); border-radius: 12px; padding: 12px 14px; margin: 0 0 1.5rem; }
.pe-genero legend { padding: 0 6px; font-weight: 600; }
.pe-genero__opciones { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0; }
.pe-genero__op { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; cursor: pointer; }
.pe-genero__op input { width: 20px; height: 20px; flex: none; margin: 0; }
.pe-genero__op:has(input:checked) { border-color: #d4af37; background: rgba(212, 175, 55, .12); }
@media (min-width: 560px) { .pe-genero__opciones { grid-template-columns: repeat(3, 1fr); } }
/* F4 · lo que no aplica al género marcado (assets/js/pe-registro.js) */
.pe-no-genero { display: none !important; }
/* F5 · la selfie con el documento */
.pe-selfie { border: 1px dashed rgba(212,175,55,.45); border-radius: 12px; padding: 12px 14px; margin: 1rem 0; }
.pe-selfie__guia { margin: 6px 0 10px 18px; padding: 0; font-size: .9rem; opacity: .85; }
.pe-selfie__guia li { margin: 2px 0; }
/* LA COLA 24 · los enlaces a cada documento del bloque de firma (core/views/firma_alta_bloque.php): sin esto, el azul del navegador
   sobre el fondo oscuro (1,85:1) */
.pe-firma-bloque a, .pe-firma-bloque a:visited { color: #d4af37; text-decoration: underline; text-underline-offset: 2px; }
.pe-firma-bloque a:hover { color: #f6d46b; }
/* cada casilla de la firma: la etiqueta entera (la casilla y su texto) es la zona táctil; medía 21 de alto */
.pe-firma-casilla label { display: block; min-height: 44px; padding: .6rem 0; min-width: 0; cursor: pointer; }
/* LA COLA 466 (medido a 390 px: el formulario de alta medía 512 px y la página se iba de lado): la etiqueta era una FILA flexible, así que
   su texto, el enlace al documento y la versión iban uno al lado del otro sin poder bajar de línea (372 px como mínimo). En bloque, el
   texto fluye y la zona táctil sigue en 44 px; la casilla deja bajar la pista «léelo primero», y el fieldset (que por defecto no encoge
   por debajo de su contenido) puede encoger. */
.pe-firma-casilla { flex-wrap: wrap; }
/* y la pista va en SU línea, bajo el texto (en la de la etiqueta, una pista larga le dejaba 20 px: medido a 390 px) */
.pe-firma-casilla .pe-firma-pista { flex-basis: 100%; padding-left: calc(20px + .75rem); }
.pe-firma-bloque { min-width: 0; }
/* F6 · la corrección en la pantalla de espera de la postulante */
.pe-correccion { text-align: left; border: 1px solid rgba(245,158,11,.5); background: rgba(245,158,11,.08); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.pe-correccion h3 { margin: 0 0 8px; }
.pe-correccion__lista { margin: 8px 0 12px 18px; padding: 0; }
.pe-correccion__lista li { margin: 4px 0; }
.pe-correccion__ir a { display: inline-flex; min-height: 44px; align-items: center; }
.pe-correccion__enviar { min-height: 44px; width: 100%; border: 0; border-radius: 10px; background: #d4af37; color: #111; font-weight: 700; cursor: pointer; }
.pe-correccion-aviso { border: 1px solid rgba(245,158,11,.5); background: rgba(245,158,11,.08); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
/* (LA COLA 462 → 629, C-428: el desplegable del aviso territorial del alta, .pe-territorio, se retiró: el aviso va en los Términos §1) */

/* ============================================================================
 * C-409 (LA COLA 614, 2026-10-26): LA FIRMA DEL ALTA, 2 + 1. Dos casillas obligatorias (todos los documentos y los 18 años; los datos
 * sensibles, aparte) y lo opcional plegado en un solo recuadro. Casilla dorada de 24 px y texto alineado a su lado (antes, la casilla encima
 * del texto y «Ábrelo para poder marcarlo» debajo); móvil e iOS primero: sin :has(), zona táctil de 44 px en el resumen.
 * Contraste: el texto #fff y el suave rgba(255,255,255,.62) sobre el fondo oscuro, por encima de 4,5:1.
 * ============================================================================ */
.pe-firma-v2 { border: 1px solid rgba(212, 175, 55, .35); border-radius: 14px; padding: 12px 16px 8px; margin: 14px 0; background: rgba(255, 255, 255, .02); }
.pe-firma-v2 > legend { padding: 0 8px; color: #f3d77a; font-weight: 700; font-size: 1rem; }
.pe-firma-ayuda { margin: 0 0 6px; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.pe-firma-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.pe-firma-v2 > .pe-firma-fila:first-of-type, .pe-mk-dentro > .pe-firma-fila:first-child { border-top: 0; }
.pe-firma-fila > input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border: 2px solid #d4af37; border-radius: 6px;
    background: transparent; cursor: pointer; display: grid; place-content: center; flex: none;
}
.pe-firma-fila > input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; border: solid #151214; border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.pe-firma-fila > input[type="checkbox"]:checked { background: linear-gradient(135deg, #f3d77a 0%, #c9a227 100%); border-color: #f3d77a; }
.pe-firma-fila > input[type="checkbox"]:checked::after { opacity: 1; }
.pe-firma-fila > input[type="checkbox"]:focus-visible { outline: 2px solid #f3d77a; outline-offset: 3px; }
.pe-firma-fila > label { display: block; min-height: 26px; padding: 0; cursor: pointer; line-height: 1.45; font-size: .92rem; color: #fff; }
.pe-firma-fila__texto { font-weight: 600; }
.pe-firma-docs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-weight: 400; }
.pe-firma-doc { display: inline-flex; align-items: baseline; gap: 5px; }
.pe-firma-doc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }   /* LA COLA 619 (regla 53, medido a 390 px): el enlace de cada documento, 44 px para el dedo (medía 21) */
.pe-firma-v2 .pe-firma-version { font-size: .72rem; color: rgba(255, 255, 255, .62); font-weight: 400; }
.pe-marketing-opcional > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 0; color: #f3d77a; font-weight: 700; }
.pe-marketing-opcional > summary::-webkit-details-marker { display: none; }
.pe-marketing-opcional > summary::before { content: "+"; display: inline-grid; place-content: center; width: 24px; height: 24px; border: 2px solid #d4af37; border-radius: 50%; font-weight: 700; line-height: 1; }
.pe-marketing-opcional[open] > summary::before { content: "−"; }
.pe-mk-resumen small { flex-basis: 100%; padding-left: 34px; color: rgba(255, 255, 255, .62); font-weight: 400; font-size: .8rem; line-height: 1.4; }
.pe-mk-dentro { margin-left: 36px; }
.pe-mk-texto { grid-column: 2; margin-top: 4px; }
.pe-mk-texto > summary { font-size: .8rem; color: #d4af37; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.pe-mk-texto .pe-marketing-texto { font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .72); margin: 4px 0 6px; }

/* LA COLA 629 (C-429, 2026-10-27): el teléfono del alta del cliente, con su prefijo al lado (en el teléfono, uno debajo del otro) */
.pe-tel-prefijo { display: flex; gap: 0.5rem; align-items: stretch; }
.pe-tel-prefijo select { flex: 0 0 12rem; min-width: 0; }   /* H-629a (en el navegador): «Prefijo del país» entero, sin cortarse */
.form-label .form-hint { display: inline; font-weight: 400; }   /* H-629a: «(opcional)» junto a su etiqueta, no debajo */
.pe-tel-prefijo input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) { .pe-tel-prefijo { flex-direction: column; } .pe-tel-prefijo select { flex-basis: auto; } }

/* 2026-10-27 (medido con tools/pruebas/barrido_movil.mjs: el cuadrito medía 24×24 px y su etiqueta lleva los enlaces a los documentos: un dedo
   que no acierta abre un documento en vez de marcar). En lo táctil, el cuadrito crece a 34 px (el tamaño real cuenta para el toque; un contorno
   transparente no). */
@media (pointer: coarse) {
    .pe-firma-fila { grid-template-columns: 34px minmax(0, 1fr); }
    .pe-firma-fila > input[type="checkbox"] { width: 34px; height: 34px; box-sizing: border-box; border-radius: 8px; }
    .pe-firma-fila > input[type="checkbox"]::after { width: 14px; height: 8px; }
}

/* 2026-10-27 (barrido_movil: la edad calculada, 1,03:1 de relleno y borde 1,29:1, no se veía): su borde, el dorado apagado de los campos */
#pe_edad:not(#pe-a):not(#pe-b):not(#pe-c) { border: 1px solid #8a7340; }