/* Modo accesible v2 (Hub, Leche, Potreros, Crianza, JARVIS, Panel). Activo con html[data-accesible="1"], que static/orientation-lock.js pone antes del primer pintado (por eso ese script va en el , tras el meta viewport). ESTA HOJA NO ESCALA NADA. El tamaño lo da la escala por viewport de orientation-lock.js (width = pantalla / ESCALA en el meta viewport, sin initial-scale ni maximum-scale): el motor maqueta la app de siempre, en sus px de siempre, sobre un viewport más angosto y la agranda con su page-scale, así que texto, botones, íconos, vh/dvh, fixed, media queries, visualViewport y getBoundingClientRect quedan coherentes solos. El modo ES un teléfono más angosto visto más de cerca. En computador (puntero fino, html[data-escala="ninguna"]) no hay escala: ahí manda el zoom del navegador. Por qué no v1: html{font-size:118.75%} y text-size-adjust:118.75% se sumaban (html a 22,56 px = 16 × 1,1875²); en escritorio solo crecían los títulos en rem; y WebKit aplica el porcentaje sobre computedSize en cada elemento con fuente «sucia», así que ni en el iPhone era parejo. Ninguna hoja base declara text-size-adjust: el «aA» de Safari y el «Tamaño del texto» de Chrome Android siguen funcionando y se SUMAN al modo. Prohibido aquí (tests/test_accesible.py lo verifica por forma): font-size o line-height sobre html, body o *; text-size-adjust; zoom; rem/em; !important; :root; más de una @media; y cualquier selector que no empiece por html[data-accesible="1"] (con o sin [data-escala="viewport"] pegado), también dentro de la @media. Con el modo apagado ninguna regla puede matchear: el vertical queda píxel a píxel igual (TASK-2026-076). La escala vive en un solo lugar (ESCALA en orientation-lock.js); esta hoja no la repite. */ /* ---- Solo cuando el modo de verdad escala (teléfono/tablet) ---- */ /* Doble toque: al dejar de ser width=device-width, iOS y Chrome pueden tratar la página como «no optimizada» y reponer el zoom por doble toque con su retraso de ~300 ms por toque. manipulation conserva scroll y pellizco. */ html[data-accesible="1"][data-escala="viewport"] body { touch-action: manipulation; } /* Campos a 16 px CSS: con el meta reconstruido sin maximum-scale, iOS vuelve a acercar la página al enfocar un campo con letra menor a 16 px. Especificidad (0,3,2) con un solo :is()/:not() de lista (tres :not() encadenados darían (0,5,2) y taparían los gemelos de abajo, que son (0,3,2) o más y ganan por venir después). */ html[data-accesible="1"][data-escala="viewport"] :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { font-size: 16px; } /* Potreros: (0,2,2) a 15 px y su hoja carga DESPUÉS de esta; sin este gemelo gana la base y iOS acerca al enfocar el filtro del historial. */ html[data-accesible="1"][data-escala="viewport"] body.app-potreros .pasthist-filters input, html[data-accesible="1"][data-escala="viewport"] body.app-potreros .pasthist-filters select { font-size: 16px; } /* Campos que en las hojas base ya eran MAYORES a 16 px conservan su valor: gemelo mecánico (mismo selector, mismo valor, misma @media). El test los exige uno a uno; si aparece otro en una hoja base, se agrega aquí. */ html[data-accesible="1"][data-escala="viewport"] .stp input { font-size: 18px; } html[data-accesible="1"][data-escala="viewport"] .ms-result input { font-size: 20px; } html[data-accesible="1"][data-escala="viewport"] #screen-pastoreo .past-ration-field input { font-size: 18px; } html[data-accesible="1"][data-escala="viewport"] body.app-potreros .ration-field input { font-size: 19px; } html[data-accesible="1"][data-escala="viewport"] .stepper input { font-size: 34px; } @media (max-width: 420px) { html[data-accesible="1"][data-escala="viewport"] .stepper input { font-size: 28px; } } /* ---- Con el modo encendido, escale o no ---- */ /* Zonas táctiles: 44 px CSS (≈ 52 px reales) solo en los controles de texto que quedaban bajo esa cota: .back ≈ 33, .ghost ≈ 43, .chk-inline ≈ 20. Lista cerrada y viva (cada selector existe en una hoja base; test). Sin `button` genérico (deforma los botones redondos de 20 px de los chips), sin .datebar button (42×42 fijos: quedaría 42×48), sin .role-pill (vive en la topbar y la agrandaría), sin .card (contenedor), sin .save ni .app-choice (ya miden 51 y 78). .nav, #tabbar, .datebar y .stp crecen con la escala. */ html[data-accesible="1"] .back, html[data-accesible="1"] .ghost, html[data-accesible="1"] .chk-inline { min-height: 44px; } /* Casillas y radios nativos (~13 px): 20 px CSS = 24 reales (WCAG 2.5.8) y más aire entre casilla y texto. (0,2,2) para ganarle a .agro-sel-wrap input[type=checkbox] (0,2,1) sin depender del orden. */ html[data-accesible="1"] .chk-inline { gap: 10px; } html[data-accesible="1"] body input[type="checkbox"], html[data-accesible="1"] body input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; } /* Interlineado solo en texto corrido (WCAG 1.4.12). v1 lo ponía en body y alcanzaba filas y controles de alto fijo. */ html[data-accesible="1"] p, html[data-accesible="1"] .hint, html[data-accesible="1"] .perm-hint, html[data-accesible="1"] .login-sub, html[data-accesible="1"] .login-remember-note, html[data-accesible="1"] .greet-sub, html[data-accesible="1"] .card-tx span { line-height: 1.45; } /* Foco visible para teclado externo, bastón lector DIIO (teclado HID) o lector de pantalla. Dos tonos: el trazo oscuro contrasta sobre fondo claro y el halo blanco sobre fondo oscuro (modo dark de style.css, JARVIS), sin conocer la paleta de cada app. Panel conserva el foco propio de su riel. */ html[data-accesible="1"] body:not(.app-panel) :focus-visible { outline: 3px solid #1c1b18; outline-offset: 2px; box-shadow: 0 0 0 6px #ffffff; } /* ---- Consecuencias del layout más angosto (solo con escala) ---- */ /* Filas «etiqueta + stepper» (Leche · Ordeña AM/PM e Informe): el stepper mide 200 px fijos (44 + 96 + 44 y sus huecos) y con el layout del modo la etiqueta ya no le deja espacio; como .leche-globo tiene overflow:hidden, el botón «+» de «Lectura estanque» quedaba cortado. Envolver deja el stepper entero en su propia línea, alineado a la derecha como cuando cabe. */ html[data-accesible="1"][data-escala="viewport"] .row { flex-wrap: wrap; } html[data-accesible="1"][data-escala="viewport"] .row .stp { margin-left: auto; } /* Pestañas de cuña y rotación (Potreros): cuatro columnas iguales dejan 66 px por pestaña con el layout del modo y «Rotación» y «Predicción» se salían de su caja. Dos por fila es el patrón que .lote-tabbar ya usa por defecto. */ html[data-accesible="1"][data-escala="viewport"] body.app-potreros .rot-tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; } /* Escalera de lotes (Crianza): el segmento se angosta con el layout y su etiqueta se cortaba contra el overflow:hidden del propio segmento. El aire lateral del texto es lo que sobra; el tamaño de letra no se toca. */ html[data-accesible="1"][data-escala="viewport"] .ladder .seg span { padding: 0 1px; }