/* Escala de esquinas y de aire (2026-09-06, a pedido de Margarita: "mejora el frontend"). Antes había 15 medidas de radio sueltas —2, 3, 4, 5, 6, 7, 9, 11, 13, 16px...— crecidas una por una según lo que tocaba en el momento; eso es lo que hace que una pantalla se sienta "armada" en vez de "diseñada". Cuatro pasos, del más chico (una píldora) al más grande (una hoja), y todo lo que es CHROME de la app —botones, tarjetas, campos, la lista— pasa por aquí. Las fotos sueltas de pantallas puntuales (transporte, pedidos) no se tocaron: no son parte de lo que se pidió mejorar esta vuelta y tocarlas sin volver a probar cada una de esas pantallas es más riesgo que beneficio. */ :root{--t1:12px;--t2:14px;--t3:16px;--t4:20px;--t5:28px; --r-chico:8px; --r-medio:12px; --r-grande:16px; --r-pildora:999px; --fondo:#F1F4F6; --sup:#FFFFFF; --sup2:#E7ECEF; --tinta:#111A20; --tinta2:#4A5A66; --tinta3:#7E8E99; --linea:#D6DEE3; --acento:#0B6E8C; --acento-sup:#E2F0F5; --hay:#2E6F4E; --hay-sup:#E2F0E8; --nohay:#A84A16; --nohay-sup:#FBEADF; --rojo:#C5221F; --rojo-sup:#FCE8E6; --ojo:#8A6100; --ojo-sup:#FBF0D5; /* Gris para "opcional": más apagado que la tinta, pero todavía legible de verdad (4.5:1). `--tinta3` se queda en 3.4:1 y a pleno sol no se lee. */ --suave:#687884; --sombra:0 1px 2px rgba(17,26,32,.06),0 8px 24px rgba(17,26,32,.06); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } @media (prefers-color-scheme:dark){:root{ --fondo:#0D1317; --sup:#151E24; --sup2:#1E2A31; --tinta:#E7EFF3; --tinta2:#A2B2BC; --tinta3:#71838E; --linea:#26333B; --acento:#45B0CE; --acento-sup:#123039; --hay:#68C295; --hay-sup:#14291F; --nohay:#E39163; --nohay-sup:#2E1C11; --rojo:#F28B82; --rojo-sup:#3B1A18; --ojo:#E0BC63; --ojo-sup:#2B2312; --suave:#8496A2; --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);}} :root[data-theme="dark"]{ --fondo:#0D1317; --sup:#151E24; --sup2:#1E2A31; --tinta:#E7EFF3; --tinta2:#A2B2BC; --tinta3:#71838E; --linea:#26333B; --acento:#45B0CE; --acento-sup:#123039; --hay:#68C295; --hay-sup:#14291F; --nohay:#E39163; --nohay-sup:#2E1C11; --rojo:#F28B82; --rojo-sup:#3B1A18; --ojo:#E0BC63; --ojo-sup:#2B2312; --suave:#8496A2;} *{box-sizing:border-box;margin:0} html{-webkit-text-size-adjust:100%} /* El que se desliza es `.marco`, NO la página entera. En el iPhone, cuando quien se desliza es la página, Safari retrae y estira su barra de direcciones a cada rato: en esa transición la cabecera pegajosa queda unos píxeles fuera de sitio y se ve un producto por detrás (el hueco que reportó Margarita con captura, 2026-08-19), la altura útil cambia sola —por eso "no ocupaba toda la pantalla"— y aparece el rebote elástico de los bordes. Con el deslizamiento adentro de una caja, la barra de Safari se queda quieta, la altura deja de moverse y la cabecera se comporta. Es además lo que hace que se sienta app y no página. */ html,body{height:100%} body{background:var(--fondo);color:var(--tinta);font-family:var(--ui); -webkit-font-smoothing:antialiased;line-height:1.45; overflow:hidden;overscroll-behavior:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit} :focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:3px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- tamaño de letra ---- Margarita hacía zoom con los dedos para leer mejor, y ahí empezaba el lío: el zoom del navegador NO reacomoda el contenido, solo lo agranda, así que aparecía una segunda barra para moverse de lado y se perdía el acceso a "ver más" y a media pantalla (2026-08-19). `zoom` en CSS sí reacomoda: el texto crece y las líneas se reparten en el ancho de siempre, sin barras nuevas. Se probó antes de adoptarlo que la barra de botones de abajo (`position:fixed`) sigue clavada a la pantalla, que es lo que rompía el `transform:scale` según ya advertía el comentario de `.hoja-llena`. Se guarda en el celular (no en Cloudflare: no cuesta nada). */ :root{--escala:1} /* ⚠️ El zoom va en el CONTENIDO, nunca en las cajas que miden la pantalla. `zoom` no agranda solo la letra: estira el elemento entero. Aplicado a `.marco` o a `.hoja-llena` —que miden `100dvh` y todo el ancho— la caja pasaba a medir un 130 % de la pantalla y se salía por abajo y por la derecha; como la página no se desliza, esa franja quedaba INALCANZABLE, y por eso Margarita no llegaba al "ver más" ni a los botones del final de una ficha (2026-08-19). Escalando en cambio a los HIJOS, la caja sigue midiendo una pantalla exacta y es su contenido el que crece y se desliza por dentro. `.acciones` queda fuera a propósito: es `position:fixed` y pegada al ancho de la pantalla, así que escalarla la sacaría de cuadro igual que antes. */ .marco > *:not(.hoja-llena), .hoja-llena > *:not(.acciones), .hoja > *{zoom:var(--escala)} /* ⚠️ En el celular la app ocupa el ANCHO COMPLETO, sin tope. Antes eran 460 px fijos, y eso solo se nota cuando el navegador reporta una pantalla más ancha que eso — que es justo lo que pasa en el iPhone de Margarita (Safari le estaba dando ~745 px de ancho, por tener la página alejada o el modo de escritorio): la app se quedaba en sus 460 y dejaba franjas blancas a los lados (2026-08-20). En un teléfono normal 460 nunca limitaba nada, por eso pasó desapercibido tanto tiempo. */ .marco{max-width:100%;margin:0 auto;height:100dvh;overflow-y:auto;background:var(--sup); position:relative;box-shadow:var(--sombra);overscroll-behavior:contain} /* Con una capa encima (ficha, hoja o visor), lo de atrás no se desliza: si no, el dedo movía la lista por debajo de la ficha abierta. */ .marco:has(.hoja-llena),body:has(.velo) .marco,body:has(.visor) .marco{overflow:hidden} /* ⚠️ El ancho de la app CRECE con la pantalla. Estuvo clavado en 1080 px desde el principio, pensando en una laptop; en el monitor de Margarita eso dejaba casi medio metro de blanco a cada lado y la app se veía encerrada en una tira en el centro ("no me ocupa toda la pantalla", 2026-08-19). `min(1720px, 94vw)` deja siempre un respiro en los bordes pero aprovecha todo lo demás; el tope existe porque una fila de producto de dos metros tampoco se lee bien. */ @media screen and (min-width:900px){.marco{max-width:var(--ancho-app, min(1720px, 96vw));margin:24px auto; height:calc(100dvh - 48px);border-radius:10px} /* "Completo" quiere decir COMPLETO: sin los 24 px de margen ni las esquinas redondeadas, que hacían que siguiera pareciendo una tarjeta flotando. */ .app-completa .marco{margin:0 auto;height:100dvh;border-radius:0} .app-completa .hoja-llena{top:0;height:100dvh;border-radius:0}} /* ---------------- ingreso ---------------- */ .entrar{max-width:400px;margin:0 auto;padding:56px 22px;height:100dvh;overflow-y:auto; display:flex;flex-direction:column;justify-content:center;gap:16px} .entrar .marca{font-size:var(--t3);font-weight:700;letter-spacing:.15em;color:var(--acento);text-align:center} .entrar .sub{font-size:var(--t2);color:var(--tinta3);text-align:center;margin-bottom:14px} .campo label{display:block;font-size:var(--t1);text-transform:uppercase;letter-spacing:.07em; color:var(--tinta3);font-weight:650;margin-bottom:5px} .campo input{width:100%;background:var(--sup2);border:1px solid transparent;border-radius:8px; padding:13px;font:inherit;font-size:var(--t3);color:var(--tinta)} .campo input:focus{outline:none;border-color:var(--acento);background:var(--sup)} .entrar .b1{width:100%;padding:14px;border-radius:8px;background:var(--acento);color:#fff; font-size:var(--t3);font-weight:650;margin-top:4px} .entrar .b1:disabled{opacity:.5} .aviso-mal{background:var(--nohay-sup);color:var(--nohay);padding:11px 13px;border-radius:8px; font-size:var(--t2);font-weight:550} .entrar .pie{font-size:var(--t1);color:var(--tinta3);text-align:center;line-height:1.5} /* ---------------- cabecera ---------------- */ /* El hueco que dejaba esta cabecera al frenar un deslizamiento en el iPhone se arregló en la raíz —ahora el que se desliza es `.marco`, no la página— así que ya no hace falta el `translateZ(0)` que se probó el 2026-08-19: aquel parche atacaba el síntoma y encima creaba una capa de apilamiento de más. */ /* El `viewport-fit=cover` del hace que la página llegue hasta el borde físico del iPhone — incluida la franja del reloj y la batería. Sin este relleno, los productos quedaban DEBAJO del reloj (se ve en la captura que mandó Margarita el 2026-08-19: el "7:07" encima de "ACEITE BOMBA VACIO"). Va en la cabecera y no en `.marco` porque la cabecera es pegajosa: así esa franja queda pintada de su mismo color en vez de dejar ver la lista pasar por detrás. */ .cab{position:sticky;top:0;z-index:20;background:var(--sup);border-bottom:1px solid var(--linea); padding-top:env(safe-area-inset-top)} /* `flex-wrap` no es adorno: con siete iconos, un celular de 360px necesitaba 405px y los últimos se salían de la pantalla —por eso había que hacer zoom—. Cuando no caben, el grupo entero baja a su propia línea en vez de desbordar. Sin media query: bajan solo cuando de verdad no caben. */ .cab-fila{display:flex;align-items:center;gap:8px;padding:11px 14px 9px;flex-wrap:wrap} .cab-iconos{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .logo{font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acento)} .logo span{color:var(--tinta3);font-weight:500;letter-spacing:.06em} .cab-fila .sep{flex:1} .bicono{flex:none;width:32px;height:32px;border-radius:var(--r-chico);border:1px solid var(--linea); display:grid;place-items:center;color:var(--tinta2)} .bicono:active{background:var(--sup2)} .quien{font-size:var(--t1);color:var(--tinta3);padding:0 14px 8px} .bletra{flex:none;min-width:30px;height:26px;border-radius:7px;border:1px solid var(--linea); color:var(--tinta2);font-size:var(--t2);font-weight:700;line-height:1} .bletra:active{background:var(--sup2)} .bletra:disabled{opacity:.35} .quien b{color:var(--tinta2);font-weight:650} .buscar{padding:0 14px 11px;display:flex;gap:8px} /* `min-width:0` por la misma razón que en las pestañas: sin él, la caja de buscar no se encoge por debajo del ancho de su texto y empuja al botón "+" fuera de la pantalla — se vio al probar la letra grande (2026-08-19). */ .buscar-caja{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:var(--sup2); border:1px solid transparent;border-radius:var(--r-chico);padding:11px 12px} .buscar-caja:focus-within{border-color:var(--acento);background:var(--sup)} .buscar-caja svg{flex:none;color:var(--tinta3)} .buscar-caja input{flex:1;background:none;border:none;outline:none;color:var(--tinta); font-size:var(--t3);font-family:var(--ui);min-width:0} .buscar-caja input::placeholder{color:var(--tinta3)} .btn-mas{flex:none;width:44px;border-radius:var(--r-chico);background:var(--acento);color:#fff; font-size:var(--t4);line-height:1;display:grid;place-items:center} .filtros{display:flex;gap:6px;overflow-x:auto;padding:0 14px 11px;scrollbar-width:none; align-items:center} .filtros::-webkit-scrollbar{display:none} /* El botón que abre la hoja. Es lo único fijo de la barra; todo lo demás son las etiquetas de lo que esté puesto en ese momento. */ /* `--tinta`, no `--tinta2`: cuando esto eran veinte burbujas, una más apagada pasaba; ahora es el único control de la barra y tiene que leerse a pleno sol (con `--tinta2` medía 2.95:1 en tema claro). */ .fbtn{flex:none;display:flex;align-items:center;gap:6px;font-size:var(--t1);font-weight:600; padding:6px 12px;border-radius:var(--r-pildora);border:1px solid var(--linea);color:var(--tinta)} /* `.fbtn` la usan botones Y el ` no tiene ese reset y se queda con su fondo nativo (blanco) — en tema oscuro, texto claro sobre blanco, ilegible (Margarita, 2026-09-13). Fondo propio solo para el ` con la misma pinta que los campos de texto de las hojas. */ .campo-sel{width:100%;font:inherit;font-size:var(--t3);color:var(--tinta); background:var(--sup2);border:1px solid transparent;border-radius:var(--r-chico);padding:13px 10px} .campo-sel:focus{outline:none;border-color:var(--acento);background:var(--sup)} /* ---------------- lista ---------------- */ .conteo{padding:11px 14px 7px;font-size:var(--t1);color:var(--tinta3); text-transform:uppercase;letter-spacing:.07em;font-weight:600; display:flex;align-items:center;gap:9px;flex-wrap:wrap} .conteo .sep{flex:1} .filtros-caja{position:relative} .fila .tic{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--linea); display:grid;place-items:center;font-size:var(--t2);font-weight:800;color:#fff} .fila.elegida{background:var(--acento-sup)} .fila.elegida .tic{background:var(--acento);border-color:var(--acento)} /* `min-width:0` es lo que hace que los puntos suspensivos funcionen de verdad: sin él un hijo de flex no se encoge por debajo de su contenido y el botón se salía de la pantalla en vez de cortar el texto. */ .borden{display:flex;align-items:center;gap:5px;color:var(--acento);font-weight:650; text-transform:none;letter-spacing:0;font-size:var(--t1);padding:2px 0; max-width:62%;min-width:0} .borden b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* La lista era una tabla: filas pegadas, separadas solo por una rayita. Ahora cada producto es su propia tarjeta, con aire alrededor — se lee como algo que se toca, no como un renglón que se recorre. Sin sombra a propósito: en un Android barato una sombra por fila (y la lista tiene cientos) cuesta repintado; el borde de 1px ya separa la tarjeta del fondo sin ese costo. */ /* La lista no tenía su propio margen lateral: antes de ser tarjeta, la fila llegaba hasta el borde de la pantalla y no se notaba porque era solo una rayita. Ahora que tiene fondo y borde propio, necesita el mismo aire de los 14px que ya llevan el buscador y los filtros justo arriba — si no, se ve pegada al costado (Margarita, 2026-09-06). */ #lista{padding:0 14px} .fila{display:flex;gap:12px;align-items:center;width:100%;text-align:left; padding:13px 14px;background:var(--sup);border:1px solid var(--linea); border-radius:var(--r-medio);margin-bottom:8px} .fila:active{background:var(--sup2);border-color:var(--tinta3)} .miniatura{flex:none;width:58px;height:58px;border-radius:var(--r-chico);background:var(--sup2); object-fit:cover;border:1px solid var(--linea)} .sinfoto{flex:none;width:58px;height:58px;border-radius:var(--r-chico);background:var(--sup2); border:1px dashed var(--linea);display:grid;place-items:center;color:var(--tinta3); font-size:var(--t1);text-align:center;line-height:1.25;font-weight:600} .fila-txt{flex:1;min-width:0} .codigo{font-family:var(--mono);font-size:var(--t2);font-weight:600;font-variant-numeric:tabular-nums} .fila-nom{font-size:var(--t2);color:var(--tinta2);margin-top:2px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fila-meta{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;align-items:center} .pill{font-size:var(--t1);font-weight:650;letter-spacing:.04em;padding:3px 7px;border-radius:5px; text-transform:uppercase} .pill.marca{background:var(--sup2);color:var(--tinta2)} .pill.varias{background:var(--acento-sup);color:var(--acento)} .pill.nohay{background:var(--nohay-sup);color:var(--nohay)} .pill.nota{background:var(--ojo-sup);color:var(--ojo)} /* Verde, el mismo de "sí hay": un excedente es material que está en la bodega ahora mismo. Junto a un "No hay" naranja se lee solo — la marca se acabó pero quedó un retazo, que es justo el caso en que esta píldora salva una venta. */ .pill.excedente{background:var(--hay-sup);color:var(--hay)} /* La única píldora con fondo lleno: lo que viene en camino manda sobre lo que el vendedor puede prometer, y tiene que verse antes que nada. */ .pill.transito{background:var(--acento);color:var(--sup); display:inline-flex;align-items:center;gap:4px} .pill.transito svg{opacity:.9} /* El aviso de "esto viene en camino" dentro de la ficha, debajo del código. Discreto de color pero con su flecha: se ve que lleva a alguna parte. */ .viene{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:9px; padding:9px 11px;border-radius:8px;background:var(--acento-sup);color:var(--acento); font-size:var(--t2)} .viene b{font-weight:700} .viene .de{display:block;font-size:var(--t1);opacity:.85;margin-top:1px} .viene > svg:first-child{flex:none} .viene .chev{flex:none;margin-left:auto;opacity:.7} /* La banda de "hay algo nuevo" en Separado (Margarita, 2026-08-22): mismo color que `.viene`, pero es un BOTÓN — se toca para refrescar — así que lleva algo más de peso y una flechita que invita a tocar. */ .banda-nueva{display:flex;align-items:center;gap:9px;width:100%;text-align:left; margin-bottom:9px;padding:10px 12px;border-radius:8px;background:var(--acento-sup); color:var(--acento);font-size:var(--t2);font-weight:700} .banda-nueva:active{opacity:.85} .banda-nueva svg{flex:none} .banda-nueva span{flex:1} .viene:active{filter:brightness(.96)} .mas{width:100%;padding:15px;font-size:var(--t2);font-weight:650;color:var(--acento)} .cargando,.vacio{padding:40px 26px;text-align:center;color:var(--tinta3);font-size:var(--t2)} /* Dentro de una FICHA, "sin ubicación" o "sin pagos" no es una pantalla vacía: es un renglón que dice que esa sección todavía no tiene nada. Con el relleno de 40 px y centrado, tres secciones vacías dejaban la ficha llena de huecos enormes y descuadrada (Margarita, 2026-08-19: "todo se ve desordenado, como que no hubo amor"). Aquí va como una línea discreta, alineada con el resto. */ .det-cuerpo .vacio{padding:2px 0 4px;text-align:left;font-size:var(--t2)} .vacio .q{font-family:var(--mono);color:var(--tinta);font-weight:600} /* ---------------- detalle ---------------- */ /* El detalle se fija a la PANTALLA, no a la página. Antes era `position:absolute` dentro del marco: si venías con la lista deslizada, el producto se abría a la altura del scroll y había que subir a mano para ver el código. */ /* ⚠️ SIN `transform` para centrar. Un elemento con transform se vuelve el marco de referencia de todo `position:fixed` que lleve dentro: la barra de acciones dejaba de pegarse a la PANTALLA y se pegaba a este marco —que además se desliza—, así que al bajar se plantaba en mitad del contenido y tapaba los botones de editar marca y borrar nota. Se centra con `inset` + `margin`, que no crea marco de referencia. */ .hoja-llena{position:fixed;top:0;left:0;right:0;margin-inline:auto; width:100%;max-width:100%;height:100dvh;background:var(--sup);z-index:30; display:flex;flex-direction:column;overflow-y:auto} /* En celular las dos columnas no existen: los envoltorios desaparecen y todo vuelve a caer en una sola tira, como estaba. */ .col-foto,.col-info{display:contents} .divisor{display:none} /* En el celular la foto también respira por los lados. El margen se le puso a la columna, y en celular esa columna no existe (`display:contents`), así que la foto seguía pegada al filo de la pantalla (Margarita, 2026-08-20). Aquí va en los propios bloques: la franja de la marca, la foto y el pie de "subida por…" quedan apilados sin hueco, así que se redondean solo las esquinas de afuera y el conjunto se lee como una tarjeta. */ @media(max-width:899px){ .det-producto .franja, .det-producto .foto-caja, .det-producto .credito, .det-producto .det-sinfoto, /* El bloque de fotos por marca perdió su margen al mudarse a la columna de la foto: antes lo heredaba de `.det-cuerpo`, y ahí ya no hay ninguno. */ .det-producto .bloque-marcas{margin-inline:12px} /* ---- la barra anclada con el código ---- En el celular la ficha es una sola tira larguísima y, al bajar, se perdía de vista de qué producto era. Va justo debajo de "Buscar" —que también es pegajoso, de ahí el `top` con su altura— y en un tono distinto para que se lea como barra y no como parte del contenido. */ .det-producto{display:flex;flex-direction:column} .det-producto .det-cab{order:1} .det-producto .ident-prod{order:2;position:sticky;top:var(--alto-cab, 46px);z-index:6; background:var(--sup2);border-bottom:1px solid var(--linea); padding:9px 14px} .det-producto .ident-prod .det-cod{font-size:var(--t4);line-height:1.1} /* La descripción, a una sola línea con puntos suspensivos: la barra tiene que seguir siendo una barra, no crecer a tres renglones y comerse la pantalla. */ .det-producto .ident-prod .det-nom{font-size:var(--t2);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Un respiro entre la barra y lo primero que viene debajo: pegada al filo de la foto tapaba el borde de arriba y se sentía encimada. */ .det-producto .franja, .det-producto .foto-caja:first-of-type, .det-producto .det-sinfoto{margin-top:10px} .det-producto .franja{order:3} .det-producto .foto-caja,.det-producto .det-sinfoto{order:4} .det-producto .credito{order:5} .det-producto .bloque-marcas{order:6} .det-producto .det-cuerpo{order:7} .det-producto .acciones{order:8} .det-producto .franja{border-radius:10px 10px 0 0; border:1px solid var(--linea);border-bottom:0} .det-producto .foto-caja > .det-foto{border-inline:1px solid var(--linea)} .det-producto .credito{border-radius:0 0 10px 10px; border:1px solid var(--linea);border-top:0} .det-producto .det-sinfoto{border-radius:10px;border:1px solid var(--linea)} } /* Mismo motivo que en `.cab`: la ficha va pegada al borde físico del teléfono, así que el botón "Volver" quedaba debajo del reloj. */ .det-cab{position:sticky;top:0;background:var(--sup);border-bottom:1px solid var(--linea); display:flex;align-items:center;padding:10px 12px;z-index:5; padding-top:calc(10px + env(safe-area-inset-top))} /* 44 px de alto y algo de aire a los lados: medía 29 y estaba pegado al borde de arriba, donde en un celular compite con la barra del navegador — por eso "no me permite regresar" era en realidad un toque que caía fuera (Margarita, 2026-09-21). Es el mismo fallo que los botones de cámara. */ .volver{display:flex;align-items:center;gap:5px;font-size:var(--t2);color:var(--acento); font-weight:600;padding:10px 10px 10px 4px;min-height:44px;margin-left:-4px} .foto-caja{position:relative} .det-foto{width:100%;aspect-ratio:1;object-fit:contain;background:var(--sup2);display:block; cursor:zoom-in} /* Lupa y giro sobre la foto. Fondo semiopaco propio: encima de una foto puede haber cualquier color, y un icono a secas desaparece sobre lo claro. */ .lupa,.gira{position:absolute;bottom:10px;width:36px;height:36px;border-radius:50%; background:rgba(10,18,23,.62);color:#fff;display:grid;place-items:center; backdrop-filter:blur(3px)} .lupa{right:10px} /* De derecha a izquierda: lupa, voltear, girar a la derecha, girar a la izquierda. Los dos giros quedan pegados, que es como se usan. */ .gira{right:54px} .gira.g3{right:98px} .gira.g4{right:142px} .lupa:active,.gira:active{background:rgba(10,18,23,.85)} .gira[disabled]{opacity:.5} /* Aparece solo cuando la foto está girada o volteada. Va al lado contrario de los redondos, para que no se toque sin querer al andar girando. */ .guardar-asi{position:absolute;bottom:10px;left:10px;padding:0 14px;height:36px; border-radius:18px;background:var(--acento);color:#fff;font-size:var(--t2);font-weight:650} .guardar-asi:disabled{opacity:.6} /* La foto girada tiene que seguir cabiendo en su cuadro. `contain` ya la encoge, y el giro es una transformación visual que no cambia la caja. */ .det-foto{transition:transform .18s ease} /* ---------------- foto a pantalla completa ---------------- */ /* Tres franjas apiladas: título, foto y herramientas. La del medio es la única que se desliza, así que la barra de botones nunca se va con la foto cuando está acercada — que era el defecto de la versión anterior. */ .visor{position:fixed;inset:0;z-index:90;background:rgba(8,13,16,.96); display:flex;flex-direction:column} .visor-cab{display:flex;align-items:center;gap:12px;padding:12px 14px; color:#cfd8dd;font-size:var(--t1);flex:none} .visor-tit{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .visor-x{flex:none;width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-size:var(--t3)} .visor-cont{flex:none;color:#8fa0aa;font-variant-numeric:tabular-nums} ${""/* Flotan sobre la foto, no dentro de `.visor-marco`: si vivieran ahí, acercar el zoom las movería con la foto en vez de quedarse fijas a los bordes de la pantalla, que es donde una flecha de "siguiente" tiene que estar siempre. `disabled` en la primera/última en vez de esconderlas: así la mano no "salta" de sitio al llegar a una punta de la galería. */""} .visor-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:91; width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1); color:#fff;display:grid;place-items:center} .visor-nav:disabled{opacity:.25;cursor:default} .visor-nav-izq{left:10px} .visor-nav-der{right:10px} .visor-marco{flex:1;min-height:0;overflow:auto;display:flex;padding:6px} /* `margin:auto` centra la foto mientras quepa, y deja de centrarla en cuanto hay que deslizar — que es el comportamiento correcto en los dos casos. */ .visor-lienzo{position:relative;margin:auto;flex:none} .visor-lienzo img{position:absolute;left:50%;top:50%;display:block; transform-origin:center;max-width:none;max-height:none} /* Fondo propio y opaco en las dos franjas: el velo del visor deja pasar un 4%, y con la aplicación detrás los botones se leían encima de un "Enviar por WhatsApp" fantasma. */ .visor-cab,.visor-barra{background:#0A1216} .visor-barra{flex:none;display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))} .visor-barra .grupo{display:flex;gap:2px;background:rgba(255,255,255,.09); border-radius:9px;padding:3px} .visor-barra button{width:38px;height:36px;border-radius:7px;color:#e7eff3; display:grid;place-items:center} .visor-barra button:hover{background:rgba(255,255,255,.14)} .visor-guardar{flex:none;height:32px;padding:0 14px;border-radius:16px;font-size:var(--t2); font-weight:650;background:var(--acento);color:#fff} .visor-guardar:disabled{opacity:.6} .det-sinfoto{width:100%;min-height:190px;background:var(--sup2);display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;color:var(--tinta3); padding:30px 26px;gap:7px;border-bottom:1px solid var(--linea)} .det-sinfoto strong{font-size:var(--t2);color:var(--tinta2);font-weight:600} .det-sinfoto span{font-size:var(--t1);max-width:230px} .franja{display:flex;align-items:center;gap:9px;padding:7px 16px;background:var(--sup2); border-bottom:1px solid var(--linea);font-size:var(--t1)} .franja b{font-weight:700} .franja .est{font-size:var(--t1);font-weight:650} /* Aquí viven las acciones de la foto que se está viendo. En pantallas angostas los botones bajan juntos a una segunda línea en vez de partir el nombre de quien la subió en dos renglones. */ .credito{font-size:var(--t1);color:var(--tinta3);padding:7px 16px;background:var(--sup2); border-bottom:1px solid var(--linea);display:flex;gap:6px 12px;align-items:center; flex-wrap:wrap} .credito > svg{flex:none} /* Cada sección con su raya y su aire. Antes iban todas pegadas con un hueco de 17px, y las vacías —"todavía no hay ninguna"— se quedaban en dos renglones: fichas, videos y ubicación se leían como un solo amontonamiento. La raya dice dónde termina una cosa y empieza otra sin tener que dibujar cajas. */ .det-cuerpo{padding:15px 16px 132px;display:flex;flex-direction:column;gap:0} .det-cuerpo > div{padding:18px 0} .det-cuerpo > div + div{border-top:1px solid var(--linea)} .det-cuerpo > div:first-child{padding-top:0} /* El bloque de borrar no es una sección más: se separa del resto. */ .det-cuerpo > .peligro{margin-top:12px;border-top:none} .det-cod{font-family:var(--mono);font-size:var(--t5);font-weight:700;font-variant-numeric:tabular-nums;line-height:1} .det-nom{font-size:var(--t3);line-height:1.35;margin-top:7px;text-wrap:balance} .editnom{font-size:var(--t1);color:var(--acento);font-weight:650;margin-top:6px;padding:2px 0} .peligro{border:1px solid var(--linea);border-radius:8px;padding:12px 13px} .peligro p{font-size:var(--t1);color:var(--tinta3);margin:0 0 10px;line-height:1.45} .peligro button{width:100%;padding:11px;border-radius:7px;font-size:var(--t2);font-weight:650; color:var(--nohay);background:var(--nohay-sup)} .tablita{overflow-x:auto;border:1px solid var(--linea);border-radius:8px} .tablita table{border-collapse:collapse;width:100%;font-size:var(--t1); font-variant-numeric:tabular-nums} .tablita th{background:var(--sup2);color:var(--tinta3);font-size:var(--t1);font-weight:700; text-transform:uppercase;letter-spacing:.05em;padding:7px 9px;text-align:right;white-space:nowrap} .tablita th:first-child{text-align:left} .tablita td{padding:7px 9px;text-align:right;border-top:1px solid var(--linea);white-space:nowrap} .tablita td.quien{text-align:left;font-weight:600} .diahist{font-size:var(--t1);font-weight:700;letter-spacing:.06em;color:var(--tinta3); text-transform:uppercase;padding:12px 0 5px} .mov{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-top:1px solid var(--linea)} .mov b{font-size:var(--t2);font-weight:600} /* Un enlace de YouTube es una sola palabra de 80 caracteres: sin esto no puede partirse, empuja la fila a 614px dentro de una caja de 343px, y se lleva de corbata el ancho del panel entero. */ .mov .quien2{display:block;font-size:var(--t1);color:var(--tinta3);margin-top:2px; overflow-wrap:anywhere} .mcod{font-family:var(--mono);font-size:var(--t1);color:var(--acento);margin-left:6px; cursor:pointer;font-weight:700} /* ⚠️ El prefijo `t-` no es adorno. Estos nombres salen del tipo de movimiento ("enlace", "nota", ...) y sin prefijo chocaban con componentes que ya existían con ese mismo nombre: `.enlace` (la fila de un video en la ficha) le metía al puntito `width:100%`, borde y relleno, y lo convertía en un ladrillo azul de 343px; `.nota` hacía lo suyo, más callado. Un nombre de clase genérico es territorio compartido: al inventar uno nuevo, prefijarlo. */ .mtipo{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--tinta3)} .mtipo.t-foto{background:var(--acento)} .mtipo.t-ficha{background:var(--nohay)} .mtipo.t-nota{background:var(--ojo)} .mtipo.t-stock{background:var(--hay)} .mtipo.t-admin{background:#8B5CF6} .mtipo.t-enlace{background:#0EA5E9} .listacat{border:1px solid var(--linea);border-radius:8px;max-height:45vh;overflow-y:auto; margin-bottom:14px} .fila-cat{display:flex;align-items:center;gap:9px;padding:10px 12px;border-top:1px solid var(--linea)} .fila-cat:first-child{border-top:none} .fila-cat > span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .fila-cat b{font-size:var(--t2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fila-cat span span{font-size:var(--t1);color:var(--tinta3)} /* `flex-wrap` a propósito (Margarita, 2026-09-06: "no se entiende" en la ficha de provincia). Cuando el rótulo lleva además "En bodega" y una píldora de estado con texto largo ("En el transporte, hace 3 días — falta la guía"), sin esto la píldora se partía a la fuerza DENTRO de su propia caja en vez de bajar entera a su propia línea. */ .rotulo{font-size:var(--t1);text-transform:uppercase;letter-spacing:.07em;color:var(--tinta3); font-weight:650;margin-bottom:8px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} /* El aire y la raya de cada sección ya los pone `.det-cuerpo > div` (más arriba). Lo que faltaba era que en la ficha de separado cada rótulo fuera HERMANO suelto de su propio contenido: la raya caía entre el título y lo que titulaba, y cada mitad contaba como una sección aparte. De ahí salían las "secciones más grandes y más pequeñas" y los "botones por aquí y por allá" que notó Margarita (2026-08-19). El arreglo está en el HTML —cada sección envuelta en su `
`— y aquí solo se anula el relleno doble de los bloques que quedan anidados. */ .secc > .rotulo{margin-bottom:8px} .secc > div{padding:0 !important;border-top:0 !important} /* Los pasos de Provincia son
/ nativos (2026-09-18, mockup "Opción A" aprobado por Margarita): colapsados los que ya se resolvieron o todavía no tocan, abierto solo el paso de ahora. Sin JS para abrir/cerrar — el navegador ya lo hace, con teclado incluido. `.rotulo{display:flex}` le quita a su `display:list-item` de siempre (y con él, su triángulo nativo), así que aquí se dibuja uno propio con `::after`. */ .acc-paso > summary.rotulo{cursor:pointer;list-style:none} .acc-paso > summary.rotulo::-webkit-details-marker{display:none} .acc-paso > summary.rotulo::after{content:"";width:8px;height:8px;margin-left:auto; border-right:2px solid var(--tinta3);border-bottom:2px solid var(--tinta3); transform:rotate(45deg);transition:transform .15s;flex-shrink:0} .acc-paso[open] > summary.rotulo::after{transform:rotate(-135deg)} /* Colapsado, la línea de "última edición" (que vive DENTRO del ) se ve un poco más suave — es lo único que hace falta leer sin abrir. */ .acc-paso:not([open]) > summary.rotulo{margin-bottom:0} /* El paso ABIERTO se marca con un borde propio (2026-09-18, para parecerse al mockup "Opción A" que aprobó Margarita: la tarjeta del paso de ahora tenía un borde distinto de las demás, no solo el contenido desplegado). */ .acc-paso[open]{border-color:var(--acento) !important;border-width:1.5px} /* El círculo con el número o el visto, al frente de cada tarjeta-paso (2026-09-18) — el MISMO color que ya usa `.paso-n.hecho` en la tira de arriba (`--acento`), para no inventar un segundo color de "completo". */ .paso-circ{width:19px;height:19px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:var(--t1);font-weight:700; border:1.5px solid var(--tinta3);color:var(--tinta3);flex-shrink:0;margin-right:2px} .paso-circ.hecho{background:var(--hay);border-color:var(--hay);color:#fff} /* La última fila de datos de una sección no lleva raya abajo: la sección siguiente ya trae la suya, y las dos juntas se veían como un renglón doble. */ .secc > .datos{border-top:0} .secc > .datos > .dato:last-child{border-bottom:0} /* --- Envío: vista compacta y edición en la misma tarjeta (2026-09-03) --- Once renglones apilados pasaron a rejilla. Clases propias (`env-*`): `.dato` es una FILA de `
` con raya abajo, pensada para leer de arriba a abajo — justo lo que aquí se quería dejar de hacer. */ /* Al EDITAR, la guía no cambia de forma: los mismos bloques, con campos donde antes había texto. Por eso `.env-in` y `.env-f` viven junto a `.env-b*` y no en un juego de clases aparte. */ .env-in{width:100%;min-width:0;font:inherit;font-size:var(--t2);padding:6px 9px; border:1px solid var(--linea);border-radius:6px;background:var(--fondo);color:var(--tinta)} .env-in:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:var(--acento)} .env-in-n{font-size:var(--t3);font-weight:700;margin-bottom:6px} /* Las opciones en fila y no apiladas: tres renglones por un grupo de dos o tres opciones cortas era la mitad del alto del bloque. Se envuelven si no entran. */ /* Una caja del embalaje: medidas y fotos en la MISMA tarjeta. Clase propia (`caja-b`): `.reparto`, que es lo que había, es una fila de una sola línea y aquí abajo cuelga una galería. */ /* La lista de cajas dejadas en el transporte. Clase propia: son casillas con fecha debajo, no la fila de `.reparto` ni el par de `.de-casilla`. */ .ent-cajas{display:flex;flex-direction:column;gap:6px;margin-bottom:2px} /* La fila de una caja: la casilla (afirmar que se dejó) y el NOMBRE (abrir sus fotos) son dos cosas distintas y por eso son dos controles (2026-09-20). El recuadro y el verde de "ya dejada" viven en la fila, no en el