/*
 * PE · CAPA TÁCTIL COMÚN · LA COLA 24 (R15 a R19) y 63 · 2026-10-07
 * Regla 1 (iOS y Safari primero): en lo táctil —un dedo, o una pantalla de hasta 768 px— todo control mide al menos 44 px.
 * La mide tools/mantenimiento/medir_dom.php (Chrome sin cabeza a 390 px con iPhone y a 1366 px); lo propio de cada componente vive en su hoja.
 * Carga: al final de los paquetes de los tres paneles (core/servidor/paquetes.php) y, en las páginas sueltas, justo después de pe-estilos.css
 * (lo vigila tools/pruebas/probar_maquetacion.php).
 * Especificidad: :not(#pe-t) gana a la hoja de cada pantalla (reglas de clase) sin pelear con pe-estilos.css (los style= de antes,
 * de nivel triple ID, que siguen mandando). align-content:center centra el texto en la altura nueva sin cambiar el display
 * (Safari 17.4+; en uno más viejo el texto queda arriba, con la misma zona táctil).
 */

/* Una casilla suelta (sin texto: la de una fila de tabla) se envuelve en esta etiqueta: la zona es la etiqueta entera */
.pe-casilla-toque { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.pe-casilla-toque input { margin: 0; cursor: pointer; }

/* LA COLA 528 (relevo, 2026-10-16, medido en el navegador del cliente a 427 px de alto): la ventana de un modal (.modal-content)
   nunca pasa del alto de la pantalla y, si su contenido es más largo, se desplaza dentro. Antes, centrada en un fondo fijo, se salía
   por arriba y por abajo y sus botones («Cancelar la reserva», «Mantenerla») quedaban fuera de alcance: iPhone en horizontal, o con
   el teclado abierto. dvh es el alto visible de verdad en Safari (100vh, la red para un navegador viejo). */
.modal-content:not(#pe-t) { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }

/* Lo que solo leen las máquinas o el lector de pantalla (una sola definición; antes en pe-tarjetas.css). LA COLA 534: también el SEO oculto. */
.pe-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* un enlace solo en su línea (p. ej. «se cambia abajo»): con ratón, 24 px (WCAG 2.5.8); con el dedo, 44 (abajo) */
a.pe-enlace-suelto { display: inline-flex; align-items: center; min-height: 24px; }

@media (pointer: coarse), (max-width: 768px) {
    /* los campos (también el de archivo y el de color) */
    :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range], [type=image]), select, textarea):not(#pe-t) {
        min-height: 44px;
    }
    /* LA COLA 528 (relevo, 2026-10-16, auditoría de los tres paneles): un campo con letra de menos de 16 px hace que Safari de iPhone
       acerque la página al tocarlo (y no la devuelve). Medido < 16 px en admin (anuncios, revisión, geo), cliente (búsqueda) y
       modelo (tarifas, historial, ayuda, difusión, asegurar…): con el dedo, todos a 16 px. */
    :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range], [type=image], [type=color]), select, textarea):not(#pe-t) {
        font-size: max(16px, 1em);
    }
    /* los botones, y los enlaces con forma de botón */
    :is(button, input[type=submit], input[type=button], input[type=reset], [role=button], .btn, a[class*="btn"]):not(#pe-t) {
        min-height: 44px;
        min-width: 44px;
        align-content: center;
    }
    /* una casilla o una opción cuenta por su etiqueta: la etiqueta entera es la zona */
    label:has(> input:is([type=checkbox], [type=radio])):not(#pe-t) {
        min-height: 44px;
        align-content: center;
    }
    /* el título de un plegable */
    summary:not(#pe-t) {
        min-height: 44px;
        align-content: center;
    }
    /* los enlaces sueltos de navegación de las páginas públicas y de entrada (volver, menú, idioma, avisos legales, contacto) y un
       enlace solo en su línea (.pe-enlace-suelto, p. ej. «se cambia abajo»): un enlace dentro de una frase no se toca */
    :is(a.back-link, .back-link a, .pe-nav-link, .lang-switcher a, .additional-links a, .form-link, .disclaimer-links-inline a,
        .direct-contact a, .pe-cta, a.pe-enlace-suelto):not(#pe-t) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* cada idioma, también 44 de ancho (un código corto medía 41) */
    .lang-switcher a:not(#pe-t) { min-width: 44px; justify-content: center; }
}

/* 2026-10-27 (el propietario, en Android, en el alta de modelo: «el botón que despliega el calendario está en negro y el fondo es negro»):
   la regla de pe-base.css (color-scheme: dark) solo alcanzaba a select, .input y .textarea; un campo de fecha u hora sin la clase .input
   se pintaba con los controles nativos CLAROS: su icono negro sobre el fondo negro de la casa. Aquí, para todos (62 en la app): los
   controles nativos en oscuro (el icono claro y el calendario que se abre, oscuro) y el icono en el dorado de la casa, con zona táctil. */
input[type="date"]:not(#pe-t), input[type="time"]:not(#pe-t), input[type="datetime-local"]:not(#pe-t),
input[type="month"]:not(#pe-t), input[type="week"]:not(#pe-t) { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 1; cursor: pointer; padding: 6px; border-radius: 6px;
    /* el icono nativo es una imagen: en oscuro sale BLANCO; este filtro lo lleva al dorado de la casa (medido en Chrome a 390 px: #ffd569 sobre #0a0a0a, 14,1:1; antes, negro sobre negro) */
    filter: brightness(0.74) sepia(1) saturate(2.6) hue-rotate(-14deg);
}

/* 2026-10-27 (el propietario: «ni siquiera deja ver que ahí hay un cuadro»; medido con tools/pruebas/barrido_movil.mjs en WebKit y Chrome):
   el precio de Mis tarifas era negro sobre gris oscuro (1,16:1) con un borde #3a3a3c de 1,59:1: no se veía dónde escribir. WCAG 1.4.11 pide
   3:1 al borde de un campo. Aquí, para TODO campo de la app (los tres paneles y lo público): borde #8a7340, el dorado apagado de la casa
   (3,9:1 sobre el gris de las tarjetas, 4,6:1 sobre negro); al enfocarlo, el dorado vivo. Los del chat y las casillas no se tocan. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not(#pe-t),
select:not(#pe-t), textarea:not(#pe-t) { border-width: 1px; border-style: solid; border-color: #8a7340; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="image"]):focus:not(#pe-t),
select:focus:not(#pe-t), textarea:focus:not(#pe-t) { border-color: #f6d46b; outline: 2px solid rgba(246, 212, 107, .35); outline-offset: 1px; }
.pe-chat input:not(#pe-t), .pe-chat textarea:not(#pe-t) { border-color: var(--pe-chat-linea, #32343c); outline: none; }

/* …y la barra de acciones fija de abajo (Guardar / Cancelar) ya no tapa el final de la página: hueco debajo del contenido */
body:has(.provider-action-bar, .pe-barra-acciones-fija) { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* 2026-10-27 (barrido móvil, WebKit: campañas y envío masivo a 511 px en un iPhone de 390; plantillas y editar modelo a 394-395): el
   contenido de un <select> con opciones largas sobresale de su caja y ensancha la página. contain:paint lo recorta (la lista nativa
   no se ve afectada); el contorno de foco, que contain:paint también recortaría, se dibuja hacia dentro. */
select:not(#pe-t) { contain: paint; max-width: 100%; }
select:focus:not(#pe-t), select:focus-visible:not(#pe-t) { outline-offset: -3px; }

/* 2026-10-27 (barrido móvil: 5 campos de archivo —copia de Google, comprobantes, importar, foto de perfil— sin borde, 1,0-1,5:1): el campo
   de archivo, con el mismo dorado apagado, discontinuo (es una zona para subir); los escondidos tras su etiqueta no cambian */
input[type="file"]:not(#pe-t) { border: 1px dashed #8a7340; border-radius: 8px; padding: 6px; max-width: 100%; box-sizing: border-box; }
input[type="file"]:focus-visible:not(#pe-t) { border-color: #f6d46b; outline: 2px solid rgba(246, 212, 107, .35); outline-offset: 1px; }

/* 2026-10-28 (barrido móvil, alta de cliente, alta de modelo y contacto): en el teléfono la cabecera fija mide 135 px (logo y menú en dos
   filas) y el hueco que le dejaban era de 70-120 px: el principio de la página quedaba DETRÁS, y el selector de idioma (fijo a 75 px)
   también, sin poder cambiar de idioma. En el teléfono la cabecera va «pegada» (ocupa su sitio y sigue arriba al bajar), el selector
   de idioma en el flujo, centrado bajo ella, y sin los huecos fijos. Solo en estas páginas (las que tienen .lang-switcher). */
@media (max-width: 768px) {
    body:has(.lang-switcher) .pe-header:not(#pe-t) { position: sticky; top: 0; }
    .lang-switcher:not(#pe-t) { position: static; margin: 10px auto 0; width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
    body:has(.lang-switcher) .pe-root-safe:not(#pe-t) { padding-top: 0; }
    body:has(.lang-switcher) .pe-apply:not(#pe-t) { padding-top: 16px !important; }
    body:has(.lang-switcher) .main-content:not(#pe-t) { padding-top: 16px; }
}