/* Mejoras aprobadas M-30 y M-31 (MEJORAS_APROBADAS_SOBRE_EL_PROTOTIPO.md; DISENO_RESPONSIVE.md R-1…R-5).
   Hoja aparte, cargada después de la del prototipo: solo AÑADE; no toca nada por encima de 820 px salvo el movimiento
   reducido (que solo actúa si el sistema lo pide). La batería visual compara las capturas ≤ 820 px sin esta hoja y
   RB-RES comprueba que con ella se cumplen las mejoras. */

/* R-1 / R-2: zona de pulsación de al menos 44 × 44 px en pantallas ≤ 820 px */
@media (max-width:820px){
  button,select,[data-a][role=button]{min-height:44px!important;min-width:44px!important}
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),textarea{min-height:44px!important}
  /* enlaces (teléfono, correo, web) dentro del texto: relleno vertical sin cambiar el tamaño de letra y separación */
  /* :where() deja la especificidad a cero: los enlaces con clase propia (.bt bloque, .ab botón) conservan su disposición */
  :where(a[href]){display:inline-flex;align-items:center;vertical-align:middle}
  a[href]{min-height:44px!important;min-width:44px!important}
  a[href]+a[href]{margin-left:6px}
}

/* R-3: respetar «reducir movimiento» del sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* R-4: con texto al 200 % una palabra larga de una pestaña (columnas de 88 px) se parte en vez de desbordar la página.
   A tamaño normal no cambia nada: break-word solo actúa cuando la palabra no cabe. */
.tabs button{overflow-wrap:break-word}

/* WCAG 2.1 AA (REFUERZOS_TECNICOS §4; DISCREPANCIAS nº 23): el porcentaje del panel usa el dorado legible que el propio
   prototipo ya define para enlaces (--link: 5:1 en claro) en vez del dorado de marca (2,4:1 sobre blanco). */
.gpct{color:var(--link)}

/* M-51 (modo oscuro, petición de la agencia del 10/11/2026): las áreas de texto no heredaban el color (texto negro sobre
   fondo oscuro) y las listas desplegables y selectores de fecha del navegador se pintaban en claro. Con `color-scheme`
   el navegador los dibuja oscuros; el texto escrito usa el color del tema y el ejemplo de la caja, el gris del tema. */
textarea,select{color:var(--ink)}
::placeholder{color:var(--mut);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
/* Nota destacada (instrucciones de publicación): fondo crema fijo sin color de texto propio; en oscuro, texto claro
   sobre crema no se leía. Mismo aspecto que el resto de avisos dorados del tema oscuro. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pinb{background:#3b3425;border-color:#6b5a2e}}

/* M-67 (firma con el dedo): la caja de firma no desplaza la ventana ni selecciona texto; mientras se firma, la ventana
   de firma no se desplaza. */
#cv{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sheet{overscroll-behavior:contain}
body.firmando .sheet{overflow:hidden}
body.firmando{overscroll-behavior:none}