/* ============================================================================ movil.css — capa móvil del CRM Disufix (Plataforma Madre) ---------------------------------------------------------------------------- Se carga DESPUÉS de styles.css y TODAS sus reglas viven dentro de un @media de ancho máximo (900 / 560 / 460px). Por encima de 900px el navegador ni siquiera evalúa este archivo: el escritorio queda exactamente igual. Para revertir el 100%: quitar el de index.html. Nada más. Orden de las secciones (importa: hay reglas que se apoyan en las anteriores) 1. Alcance — que nada quede recortado sin poder llegar a ello 2. Rejillas — que ningún hijo empuje la pantalla de lado 3. Tablas — arrastre lateral con la primera columna anclada 4. Espaciado — recuperar ancho útil de las tarjetas 5. Táctil — 44x44 mínimo en lo que se toca 6. Formularios — 16px para que iOS no amplíe solo, y el teclado 7. Toque — sin retardo, sin :hover pegado ========================================================================= */ /* ============================================================================ 1. ALCANCE — lo que se corta, se tiene que poder alcanzar ========================================================================= */ @media (max-width: 900px) { /* El menú lateral tiene opciones que en el teléfono NO EXISTEN. styles.css:47 lo deja en overflow:hidden y styles.css:415 lo fija a 100dvh. Con el cajón abierto y los grupos desplegados la lista mide 601px: a 390x844 ya no se alcanza "Conversaciones", y en una pantalla de 664px quedan fuera siete opciones más el pie con "Cerrar sesión". Subir los .nav a 44px (sección 5) lo empeoraría en +80px, así que este bloque es condición para aquél, no un extra. */ .side { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* arrastrar el menú no debe arrastrar la vista que quedó atrás */ overscroll-behavior: contain; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } /* el submenú se abre animando max-height y styles.css:69 lo topa en 280px; el grupo más largo tiene 6 ítems, que a 44px suman 279px. Un ajuste de relleno cualquiera recortaría la última opción sin avisar. */ .nav-group.open .nav-sub { max-height: 360px; } /* NO se toca el overflow de .main a propósito. Tapar el desbordamiento con overflow-x:hidden esconde lo que no alcanzamos a arreglar y repite el error que estamos corrigiendo; deslizar de lado es feo pero recuperable. Las causas medidas del arrastre lateral (#dp-stats, .dp-filters) se arreglan en la sección 2. */ } /* ============================================================================ 2. REJILLAS Y FILAS — que ningún hijo empuje la pantalla ---------------------------------------------------------------------------- Mecanismo raíz, uno solo: en Grid `1fr` es `minmax(auto,1fr)`, o sea que la pista no puede encogerse por debajo del min-content del hijo. Cuando ese min-content es "$15.204.700" (sin ningún punto por donde partir) la rejilla crece por encima del contenedor. Medido en #dp-stats a 390px: 238px + 208px + 14 de gap = 461px dentro de 358px útiles = los 87px que reportó la auditoría. Lo mismo en flex con .dp-dates. ========================================================================= */ @media (max-width: 900px) { /* min-width:0 le devuelve el mando del ancho a la rejilla. Es la regla que mata el mecanismo, no el síntoma: mañana entra un cliente con nombre largo o el recaudo pasa a 10 dígitos y lo peor que puede pasar es que el texto se recorte DENTRO de su tarjeta, nunca que empuje la pantalla. styles.css ya lo hace en .kpi (:634) y .dcard (:651); acá solo se aplica parejo. */ .dp-statgrid > *, .geo-kpis > *, .mg-kpis > *, .kpi-grid > *, .stats > *, .cards > *, .gf-grid > *, .form2 > *, .cz-grid > *, .cz2 > *, .cz2-cliente > *, .cz3 > *, .cz-org-card > *, .bs-2col > *, .dash-2 > *, .dash-dropi > *, .es-grid > *, .inf-grid > *, .inf-resgrid > *, .nv-dirgrid > *, .df-carriers > *, .dsp-grid > *, .theme-grid > *, .mx-dest-row > * { min-width: 0; } /* Rejillas auto-fill con piso en px: el piso es más ancho que el teléfono y la pista se sale. minmax(min(100%,Npx),1fr) es idéntico al original mientras el contenedor mida ≥ N, y solo se rinde cuando hoy desbordaría; así la franja de tablet (561–900px) conserva sus 2 columnas. Medido: .dsp-grid (piso 345px) se salía 17px a 360px —el ancho Android más común— y 57px a 320px; .cards (piso 290px) 2px a 320px. */ .dsp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 345px), 1fr)); } .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } .es-grid, .nv-dirgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .inf-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .df-carriers, .inf-resgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); } /* Filtros de Dropi: medido 32px fuera de pantalla. .dp-filters sí envuelve, pero sus hijos no ceden: .seg es inline-flex y .dp-dates es flex SIN wrap (2 inputs de fecha de 142px + flecha + botón = 387px en 326px útiles). */ .dp-filters { gap: 10px; } .dp-filters > * { min-width: 0; max-width: 100%; } .dp-filters .seg { display: flex; width: 100%; } .dp-dates { flex-wrap: wrap; width: 100%; } .dp-dates input[type=date] { flex: 1 1 140px; min-width: 0; } .dp-dates .btn { flex: 0 0 auto; } /* el buscador se quedaba en 32px de ancho cuando el selector de tableros de Chatea le comía la fila: acá se lleva una fila entera */ .dp-search { flex: 1 1 100%; min-width: 0; max-width: none; } /* un dentro de una fila flex no baja de su ancho intrínseco (~20 caracteres) aunque tenga flex:1, así que empuja la fila. Se vio en el buscador de Siigo Cartera al subir el texto a 16px. min-width:0 solo QUITA un mínimo, nunca impone un ancho: un campo que no está en una rejilla o flex no cambia. */ input, select, textarea { min-width: 0; } /* Números en pesos: ni "$15.204.700" ni "1.832" tienen por dónde partirse. clamp() cede tamaño en vez de cortar, y en un iPhone de 390px da 29.6px sobre los 30px de escritorio: prácticamente no se nota. NO se usa overflow-wrap en las cifras a propósito — partir un número por la mitad de un millar es ilegible y peligroso en un CRM de plata. */ .stat .num { font-size: clamp(26px, 8.7vw, 34px); } .stat2 .num, .kpi-num { font-size: clamp(24px, 7.6vw, 30px); } .geo-kpi-n { font-size: clamp(21px, 6.6vw, 26px); } .dp-bigs .num{ font-size: clamp(20px, 6.4vw, 25px); } .mg-k b { font-size: clamp(17px, 5.1vw, 20px); } /* tabular-nums iguala el ancho de los dígitos: las columnas dejan de bailar cada vez que se refrescan los datos en vivo */ .stat .num, .stat2 .num, .kpi-num, .geo-kpi-n, .dp-bigs .num, .mg-k b, .dsp-cobrar b, .mx-opt-price { font-variant-numeric: tabular-nums; } /* los subtítulos SÍ se pueden partir: era el rango de fechas "2026-07-28 → 2026-07-29", y no el número, el que estiraba la 1ª pista */ .stat2-sub, .geo-kpi-l, .kpi-sub { overflow-wrap: anywhere; } } /* -- Rejillas que nunca bajaban a una sola columna -------------------------- */ @media (max-width: 560px) { /* Antes esto era 1 columna (las cifras grandes no cabían a mitad de ancho) y las 4 tarjetas ocupaban 4 pantallas (queja de José con pantallazo 2026-07-31). Ahora: 2×2 COMPACTO — la cifra baja de tamaño SOLO acá (clamp con techo) y sigue sin partirse; "$16.337.729" cabe a 390px con 19-20px tabular. La "Lectura rápida" (insight) va a lo ancho debajo. */ .dp-statgrid { grid-template-columns: 1fr 1fr; gap: 8px; } .dp-statgrid .card.stat2 { padding: 11px 12px; gap: 3px; } .dp-statgrid .stat2 .num { font-size: clamp(16px, 5vw, 21px); } .dp-statgrid .stat2-lbl { font-size: 9.5px; letter-spacing: .4px; gap: 5px; } .dp-statgrid .stat2-sub { font-size: 10px; } .dp-statgrid .card.insight { grid-column: 1 / -1; } /* mismos tamaños para los KPI del "Resumen del día" — coherencia total */ .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi-grid .kpi { padding: 11px 12px; } .kpi-grid .kpi-num { font-size: clamp(18px, 5.6vw, 24px); } .kpi-grid .kpi-sub, .kpi-grid .kl { font-size: 10px; } /* formulario de guía Envía: 2 columnas fijas sin ningún media query. A 390px dejaba campos de 151px — no se puede escribir una dirección ahí */ /* Campos cortos de a DOS (los largos llevan .full y van a lo ancho): el formulario de guía pasaba de 7 pantallas a ~3. */ .gf-grid { grid-template-columns: 1fr 1fr; gap: 10px 8px; } /* BUG del CSS actual: styles.css:335 ya trae @media(max-width:560px) {.form2{1fr}}, pero styles.css:531 `.cz2-params .form2` es más específica y va 196 líneas después, así que la anula. Medido: seguía en 161px+161px a 390px. Esto revive la responsividad que alguien ya había escrito. */ .cz2-params .form2 { grid-template-columns: 1fr; } /* selector de tema dentro del modal: 2 columnas fijas en 298px útiles */ .theme-grid { grid-template-columns: 1fr; } } @media (max-width: 460px) { /* repeat(4,1fr) que baja a 2 en 780px y ahí se queda. Medido: 38px fuera de pantalla a 320px, y a 390px las pistas ya salen disparejas (163/183), o sea pegadas al min-content. Con la cifra a 26px la media columna deja 141px útiles a 390px y no cabe; por encima de 460px sí (186px). */ .geo-kpis { grid-template-columns: 1fr; } } /* ============================================================================ 3. TABLAS — arrastre lateral con la primera columna anclada ---------------------------------------------------------------------------- Medido: dropi +1160px (la tabla mide 1533px), permisos +994, guias +474, manuales +382, reporte +264, auditoria +57. Se descartaron las otras dos salidas, y no por comodidad: · Reflujo a tarjetas exige `td::before{content:attr(data-label)}` y ese data-label lo tendría que escribir app.js. Sin etiqueta, la tarjeta de un pedido es una columna de 10 valores sueltos: peor que la tabla. (Queda anotado como pendiente de app.js.) · Esconder columnas con :nth-child ata el CSS a la posición exacta de un template de app.js. El día que alguien inserte una columna, el CSS seguiría escondiendo la posición 4 —que ya no sería "Descripción"— sin error y sin aviso. En permisos es además imposible: las columnas se generan desde los datos. Anclar la primera columna preserva el 100% de los datos, no toca app.js y ya es el patrón de la casa: styles.css:847 lo hace en .permits-matrix. ========================================================================= */ @media (max-width: 900px) { /* .dp-tablewrap (styles.css:244) y .permits-wrap ya traían overflow:auto. La que NO lo tenía es la tarjeta de Auditoría, con overflow:hidden en el atributo style: 74px de la columna "Detalle" sencillamente no existían. El !important es obligatorio, es lo único que le gana a un style inline. :has() en vez de listar cada vista porque no hay otra forma de decir "la tarjeta que contiene una tabla", y así cubre las tablas que se agreguen después (ya cubrió una de Novedades que ni estaba en el informe). */ .dp-tablewrap, .permits-wrap, .card:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* que el arrastre lateral no se convierta en "atrás" del navegador */ overscroll-behavior-x: contain; } /* La columna que dice QUÉ fila es se queda quieta. Sin esto, arrastrar 1533px deja al usuario mirando un "$189.000" sin saber de qué pedido es. Se excluye .permits-wrap: su tiene dos filas y un rowspan, así que el th:first-child de la 2ª fila NO es la 1ª columna y se montaría encima del nombre; esa vista trae su propio sticky más abajo. Se excluyen los td con colspan (las filas de "sin resultados"). */ .dp-tablewrap > table > thead > tr:first-child > th:first-child, .dp-tablewrap > table > tbody > tr > td:first-child:not([colspan]), .card:has(> table):not(.permits-wrap) > table > thead > tr:first-child > th:first-child, .card:has(> table):not(.permits-wrap) > table > tbody > tr > td:first-child:not([colspan]) { position: sticky; left: 0; z-index: 3; background: var(--panel); /* con border-collapse:collapse el borde derecho es de la tabla y se va con el scroll; la sombra es el borde que sí acompaña a la celda, y de paso es la única señal de que hay más contenido a la derecha */ box-shadow: 1px 0 0 var(--line), 3px 0 6px -2px rgba(0, 0, 0, .10); } /* Dos tablas pintan la fila entera para avisar de algo —Novedades urgentes (styles.css:918) y clientes problemáticos (styles.css:931)— y lo hacen con un color translúcido sobre el . El fondo opaco de arriba es más específico, así que dejaba la primera celda BLANCA dentro de una fila rosada: la señal se rompía justo en la columna que siempre se ve (verificado en la captura novedades-2tabla de ojo2). No se puede heredar el color de la fila —transparente reabre el hueco por el que se ve pasar el resto de columnas—, así que se repinta el mismo tinte pero compuesto contra el panel en vez de contra la transparencia: da exactamente el mismo color y sigue tapando. Los selectores repiten la estructura de arriba + la clase de la fila para ganar por especificidad y no por orden de línea. */ .card:has(> table):not(.permits-wrap) > table.nv-tbl > tbody > tr.nov-urg > td:first-child:not([colspan]) { background: color-mix(in srgb, var(--danger) 6%, var(--panel)); } .card:has(> table):not(.permits-wrap) > table.cli-tbl > tbody > tr.cli-bad > td:first-child:not([colspan]) { background: color-mix(in srgb, var(--danger) 5%, var(--panel)); } /* Novedades es la única tabla cuya primera columna es una CASILLA. Anclarla cumple la letra de la regla y no el fondo: arrastrada a la derecha se quedaba fija una columna vacía de 44px y el "— sin gestionar / sin cita" no decía de qué pedido era (captura novedades-3derecha de ojo2). Se ancla también la columna del pedido, a 44px, que es justo lo que mide la casilla tres reglas más abajo (th.nv-chk/td.nv-chk). Espera pasa por debajo. No se usa :nth-child —la casilla solo existe si el usuario tiene el permiso, así que la posición no es fija—: se cuelga de td.nv-age, que sí es la columna de días, y el :has() apaga todo esto cuando no hay casilla (ahí la primera columna ya es Espera y la ancla la regla general). */ table.nv-tbl:has(td.nv-chk) > thead > tr > th.nv-chk + th + th, table.nv-tbl:has(td.nv-chk) > tbody > tr > td.nv-age + td { position: sticky; left: 44px; z-index: 3; background: var(--panel); box-shadow: 1px 0 0 var(--line), 3px 0 6px -2px rgba(0, 0, 0, .10); } table.nv-tbl:has(td.nv-chk) > tbody > tr.nov-urg > td.nv-age + td { background: color-mix(in srgb, var(--danger) 6%, var(--panel)); } /* la casilla ya no lleva sombra: el borde de "hay más a la derecha" ahora lo marca la columna del pedido, y dos sombras seguidas se leen como una columna partida */ .card:has(> table):not(.permits-wrap) > table.nv-tbl > thead > tr > th.nv-chk:not([colspan]), .card:has(> table):not(.permits-wrap) > table.nv-tbl > tbody > tr > td.nv-chk:not([colspan]) { box-shadow: none; } /* Permisos: acá el problema no era el scroll sino la columna anclada. styles.css:847 le pone min-width:200px + nowrap al nombre: de 358px útiles, 200 se los llevaba el nombre y quedaban ~150 para las casillas (en la captura se cuentan DOS de ~30). Dejando que el nombre envuelva, el espacio para casillas pasa de ~150 a ~234px y la tabla baja de 1367 a 1115px. */ .permits-matrix th.uname, .permits-matrix td.uname { min-width: 124px; max-width: 124px; white-space: normal; padding: 8px; box-shadow: 1px 0 0 var(--line), 3px 0 6px -2px rgba(0, 0, 0, .10); } .permits-matrix td.uname .sub { display: flex; flex-wrap: wrap; gap: 4px; } .permits-matrix th, .permits-matrix td { padding: 6px 5px; } /* La columna anclada TIENE que ser opaca, si no deja ver lo que pasa por debajo. styles.css:543 apaga las guías anuladas con `tr.gu-anul td {opacity:.5}`, y una celda al 50% no tapa: al arrastrar Guías hacia la derecha, la fecha y el "anulada" de las otras columnas se veían ENCIMA del número de guía (verificado en la captura guias-3derecha de ojo1). Se le devuelve la opacidad a la celda anclada y se apaga su contenido, que son elementos ( y el ), no texto suelto: se ve igual de apagada, pero ya no es una ventana. El tachado de anulada lo sigue poniendo styles.css:544. Cualquier opacity que se le ponga mañana a un vuelve a abrir el mismo hueco: si se agrega, agréguese acá también. */ .dp-tablewrap > table > tbody > tr.gu-anul > td:first-child { opacity: 1; } .dp-tablewrap > table > tbody > tr.gu-anul > td:first-child > * { opacity: .5; } /* Menos ancho inútil por celda. No quita ninguna columna; solo aprieta el relleno y las dos celdas de texto largo de Dropi. Medido: dropi 1533→1437, permisos 1367→1115, guias 827→743, manuales 755→659, reporte 637→565, auditoria 430→382. No salva ninguna tabla, pero es arrastre que el usuario se ahorra en cada consulta. */ th, td { padding: 9px 8px; } .prod-cell { max-width: 150px; } .desc-cell { max-width: 130px; } } /* ============================================================================ 4. ESPACIADO — recuperar ancho útil ---------------------------------------------------------------------------- José tiene razón con "las márgenes no son fijas": conviven paddings de 14/16/18/19/20/26px puestos a mano. A 390px, .main deja 358px y la tarjeta deja 316px de contenido; esos 40px perdidos son justo los que le faltaban al "$15.204.700". ========================================================================= */ @media (max-width: 560px) { .card { padding: 15px; } .dp-filters { padding: 13px 15px; } .bs-box, .dcard, .dsp-card, .kpi { padding: 15px; } .geo-kpi { padding: 13px 15px; } .modal { padding: 20px 18px; border-radius: 16px; } .modal-bg { padding: 12px; } .empty { padding: 34px 18px; } /* Tarjetas que traen padding propio a propósito. `.card{padding:15px}` tiene la misma especificidad que `.rec-card` y va después, así que hay que devolvérselo o se rompen: el buscador de conciliación y el acordeón de plantillas de despachos quedarían con el triple de relleno. Las tarjetas-tabla no corren riesgo: usan padding:0 en el atributo style, y el inline gana siempre. */ .card.rec-card { padding: 6px 8px; } .card.dsp-tpl { padding: 0; } .card.empty-state { padding: 34px 20px; } .card.empty-state.big { padding: 46px 22px; } /* En vertical el costo de apilar es scroll: menos aire entre tarjetas */ .grid { gap: 12px; } .dp-statgrid, .geo-kpis, .mg-kpis, .kpi-grid, .dsp-grid { gap: 12px; } /* "Envíos por ciudad · Dropi" a 27px se come dos líneas y llega pegado al borde; y .head-actions no envolvía (301px fijos: con un tercer botón se sale de la pantalla). */ .head { margin: 6px 0 16px; gap: 10px; } .head h1 { font-size: clamp(21px, 6.2vw, 27px); line-height: 1.15; } .head-actions { flex-wrap: wrap; } .head-actions .btn { flex: 1 1 auto; } } /* ============================================================================ 5. TÁCTIL — 44x44pt mínimo en lo que se toca ---------------------------------------------------------------------------- El contador de la auditoría está topado en 10 por vista y se lo comía el menú lateral, así que el número real es mayor que el reportado. Por eso esto se aplica a familias completas de controles y no a los elementos citados uno por uno. ========================================================================= */ @media (max-width: 900px) { /* Medido: #sideBurger 34x34, .nav.sub 39px de alto, los 5 botones de la barra superior 42x42 (ahí sobran 118px de fila, pueden crecer). */ .icon-btn { width: 44px; height: 44px; } .side-burger { width: 44px; height: 44px; } /* el burger a 44px le quita 10px a la fila de marca y .brand-txt es nowrap + overflow:hidden: "PLATAFORMA MADRE" se cortaba. Se recuperan aflojando el tracking del subtítulo, que es de donde salen esos píxeles. */ .brand-txt { flex: 1; min-width: 0; text-overflow: ellipsis; } .brand-txt span { letter-spacing: .5px; } .nav, .nav.sub { min-height: 44px; } .seg button, .chip, .chip2, .theme-opt, .pc-toggle button, .dd-pop button, .lg-seg button { min-height: 44px; } .seg button { display: inline-flex; align-items: center; justify-content: center; } .dd-pop button { display: flex; align-items: center; } /* .btn medía entre 38 y 41px de alto según la vista, y .btn.xs unos 24px (los PDF/Anular de Guías). min-height y no height, para no romper los que llevan texto en dos líneas. */ .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* un es inline por defecto y su texto envuelve solo; al volverlo inline-flex quiere medir todo el texto en una línea. Con max-width vuelve a envolver dentro de su tarjeta. */ max-width: 100%; text-align: center; } /* Los 32x32 de las acciones DENTRO de la fila: en Dropi es el menú Confirmar/Cancelar, o sea el único punto donde el CRM ejecuta una acción sobre un pedido desde la tabla. Engorda la columna Acciones ~24px en una tabla que ya se arrastra: se prefiere pagar eso a que alguien cancele un pedido por error de dedo. */ .icon-btn.xs { width: 44px; height: 44px; } /* "Cerrar sesión" NO puede crecer: vive en una fila de 250px junto al avatar y el nombre. Se le deja el tamaño visual de 32px y se le cuelga un rectángulo invisible de 44x44. Al ser absolute no entra en el layout: no mueve nada. */ .side-out { position: relative; } .side-out::after { content: ""; position: absolute; inset: -6px; } /* El teléfono del cliente es un objetivo de 52x14: 100 enlaces por pantalla en Novedades y los mismos en Clientes. Es el link a wa.me, la acción que de verdad se hace desde el teléfono. Mismo truco: el texto sigue midiendo 14px y ninguna tabla cambia de ancho. */ .lnk { position: relative; display: inline-block; } /* solo se estira en vertical: hacia los lados sobresaldría del ancho de la celda y sumaría arrastre a una tabla que ya se arrastra */ .lnk::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* Los
de Despachos y de medidas: 15px y 33px de alto. No se les cambia el display —en WebKit cambiar summary a flex ha roto el desplegable—, se llega a 44px solo con relleno. */ .dsp-msgwrap summary { min-height: 44px; } .mx-dims > summary, .cz2-adv summary, .gf-payload summary { padding: 12px 0; } .gf-rem summary { padding: 13px 11px; } /* Casillas de 13x13 en Novedades (11 por pantalla más el "todos"): son las que marcan pedidos para la acción masiva "Resolver seleccionadas", así que fallar el toque marca el pedido equivocado. Un checkbox nativo ignora el padding y no admite pseudoelementos, por eso hay que redibujarlo: la caja visible queda en 22px (casi el doble que hoy) dentro de un objetivo real de 44x44. */ .nv-cb, #nv-all { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: transparent; outline: none; display: grid; place-items: center; position: relative; cursor: pointer; } .nv-cb::before, #nv-all::before { content: ""; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--mut); background: var(--bg2); } .nv-cb:checked::before, #nv-all:checked::before { background: var(--lime); border-color: var(--lime); } /* la palomita: dos lados de un cuadrado girados 45°, con el color de tinta del acento, para que siga viéndose bien en los 10 temas */ .nv-cb:checked::after, #nv-all:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 10px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); } .nv-cb:focus-visible::before, #nv-all:focus-visible::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent); } /* la celda se aprieta para devolverle a la tabla el ancho que gana la casilla */ th.nv-chk, td.nv-chk { padding: 0; width: 44px; } } /* ============================================================================ 6. FORMULARIOS Y TECLADO ========================================================================= */ @media (max-width: 900px) { /* iOS AMPLÍA LA PÁGINA SOLA Y NO LA DEVUELVE. Safari hace zoom al enfocar cualquier campo de menos de 16px y no vuelve al salir. Medidos 35 campos por debajo: los 23 de Crear envío a 13.5px, las fechas de Dropi a 12.5px, el selector de tableros de Chatea a 13px, los buscadores a 14px. Se listan los selectores uno por uno (cada uno corresponde a un campo medido) en vez de usar !important a ciegas contra styles.css. */ input, select, textarea, .field input, .field select, .field textarea, .gf-grid input, .gf-grid select, .cz2-params input, .cz2-params select, .cz3 textarea, #cz-raw, .dp-dates input[type=date], .dp-custom input[type=date], .geo-ctl input[type=date], .geo-ctl select, .cz-organize textarea, .cz2 textarea, .bs-search input, .search input, .dsp-tpl-body textarea, .ch-filters .ch-board, .lg-input { font-size: 16px; } /* Alto de campo. min-height y no height, para que un textarea siga creciendo. Medidos: #mx-nom 151x41, #dp-from 165x39, #geo-from 167x41. */ input:not([type=checkbox]):not([type=radio]), textarea { min-height: 44px; } /* el campo de búsqueda ocupaba 18px de los 42px de su marco: se tocaba al lado del texto y no pasaba nada */ .search { height: auto; min-height: 44px; } .search input { align-self: stretch; } /*