CAP-PANEL-TALLES-INICIO */ /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ CAP-PANEL-TALLES · bloque para custom.css ║ ║ Base medida en la ficha de PRODUCCIÓN → 4_ficha/ESTILO_DE_LA_FICHA.md ║ ║ ║ ║ LO QUE FEDE DECIDIÓ, Y ACÁ YA ESTÁ FIJO: ║ ║ · «me gusta la etiqueta teñida, la B» 07-10 → sin variantes ║ ║ · «usa montserrat en todo» 07-10 → la carga el tema ║ ║ · el color del botón 08-10 → NEGRO #1A1A1A ║ ║ (el oliva que había elegido el 07-10 pasó a ser el punto de stock) ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .capoc-pt{ --cap-rojo:#E4000F; --cap-rojo-h:#C00010; --cap-tinta:#1A1A1A; --cap-gris:#777777; --cap-borde:#D9D9D9; --cap-linea:#EDEDED; --cap-hueco:#F7F7F7; --cap-r:12px; /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⚫ NEGRO #1A1A1A · elegido el 08-10, y el porqué está medido ║ ║ en 4_ficha/PALETA_DE_LA_WEB.md: ║ ║ · la portada usa #0A0A0A en 27,5 millones de px² y el rojo en 204 mil ║ ║ — el 0,6%. La web es negra; el rojo es su acento. ║ ║ · la jerarquía de botones ya existía: ROJO lo que cierra (carrito, ║ ║ finalizar compra) · NEGRO lo que prepara (Configurar cookies ║ ║ #18181C, Video #1A1A1A) · gris los enlaces. «Elegir el talle» ║ ║ prepara, no cierra. ║ ║ · ⭐ y el que más pesa: LA FICHA YA MARCA EL TALLE ELEGIDO EN #1A1A1A. ║ ║ El panel lo confirmaba en oliva: dos colores para la misma cosa. ║ ║ ║ ║ ⛔ Antes acá decía verde oliva. No fue un cambio de gusto: el oliva ║ ║ seguía estando bien, lo que estaba mal era que el BOTÓN tuviera que ║ ║ decir «hay stock». Eso ahora lo dice --cap-hay, abajo. ║ ║ ⛔ El rojo #E4000F sigue reservado a «Añadir al carrito»: en todo el ║ ║ bloque aparece UNA sola vez. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ╔═══════════════════════════════════════════════════════════════════╗ ║ 🎨 09-10 · EL VERDE PASA A SER EL PROTAGONISTA (paleta 01) ║ ║ Fede: *«me parece todo muy negro, blanco y gris y deberia ser mas ║ ║ llamativo como diciendo acá está tu talle!»* ║ ║ 👉 NO entra ningún color nuevo. El verde ya significaba «lo ║ ║ tenemos» en un punto de 6 px, y ahora tiñe la etiqueta entera, ║ ║ el número argentino y el botón. ║ ║ ⭐ Y por eso el color PASA A SIGNIFICAR ALGO: si no hay stock, la ║ ║ etiqueta queda gris (`.r-etiq.sin`). No es decoración. ║ ║ ⛔ El rojo #E4000F sigue siendo sólo de «Añadir al carrito». ║ ╚═══════════════════════════════════════════════════════════════════╝ */ --cap-si:#3B7D1E; --cap-si-h:#2F6418; /* ⭐ el verde del TEXTO es más oscuro que el del botón, a propósito: #2F6418 sobre blanco da 7,10:1 y #3B7D1E sólo 5,07. Medido antes de usarlos. El botón lleva texto blanco, donde 5,07 alcanza de sobra. */ --cap-si-tx:#2F6418; --cap-si-sw:rgba(59,125,30,.07); /* el teñido de la etiqueta */ --cap-si-ln:rgba(59,125,30,.26); /* su borde */ /* ⭐ el oliva que Fede eligió el 07-10 no se perdió: cambió de trabajo. Ya no tiñe el botón entero — ahora es el punto que dice «lo tenemos». */ --cap-hay:#3B7D1E; font-family:"Montserrat",var(--sans); font-size:14px; line-height:1.4; color:#212529; overflow-y:auto; font-synthesis-weight:none} /* ⛔ Acá iba la ficha de muestra del render (el título, los botones de talle, «Añadir al carrito»). En el sitio real eso ya existe y es del tema: el panel NO lo pisa. Sólo se queda con el panel propiamente dicho. */ /* ⛔ FIJOS sobre la pantalla, y por eso el panel se cuelga del : si quedara dentro de la ficha, cualquier ancestro con transform lo anclaría a ÉL en vez de a la pantalla (ya pagado antes, regla 29). */ .capoc-pt-fondo{position:fixed;inset:0;background:rgba(20,18,16,.46);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s ease} .capoc-pt-fondo.on{opacity:1;pointer-events:auto} /* ⭐ CAP-PANEL-ENTRADA · la curva de salida suave: arranca rápido y frena. Es la que usan las hojas de las aplicaciones del teléfono, y por eso se siente conocida. Antes era .3s con una curva más plana. */ .cp-panel{position:fixed;z-index:9999;background:#fff;display:flex;flex-direction:column; transition:transform .42s cubic-bezier(.22,1,.36,1); top:0;right:0;bottom:0;width:404px;max-width:100%;transform:translateX(101%); box-shadow:-18px 0 54px rgba(0,0,0,.14)} .cp-panel.on{transform:none} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ CAP-PANEL-AMPLIO · en escritorio, la banda del costado con el ancho ║ ║ de la columna de compra. ║ ║ ║ ║ ⛔⛔ EL POP-UP CENTRADO SE PROBÓ Y SE SACÓ. Fede, 08-10: *«en desktop ║ ║ volve a la version que sale del costado derecho que en popup no ║ ║ funciona, pero hace la banda que se abra del mismo tamaño que la ║ ║ columna de la derecha de la pagina de producto»*. ║ ║ ║ ║ 👉 Los **500 px** no son un número elegido: es lo que mide ║ ║ `.col-product-info` en la ficha (su contenido, 461). Antes eran 404, ║ ║ que no se correspondía con nada. ║ ║ ⭐ Así el panel se alinea con la columna que el cliente ya está mirando. ║ ║ ⛔ Y abajo de 992 px sigue siendo la hoja que sube desde el borde. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ @media (min-width:992px){ .cp-panel{width:500px} .cp-cuerpo{padding:0 16px 24px} /* 16+16 + 8+8 = 48, los mismos que antes */ .cp-cab{padding:17px 24px 13px} .cp-tenv{max-height:46vh} table.cp-t th,table.cp-t td{font-size:13.5px;padding:10px 7px} /* en modo tabla sola el alto lo manda el panel, no un tope: ver abajo */ } /* ⭐ el breakpoint del sitio es 991,98px: el iPad vertical va con el diseño de celular */ @media (max-width:991.98px){ .cp-panel{top:auto;left:0;right:0;bottom:0;width:auto;height:94%;border-radius:20px 20px 0 0; transform:translateY(101%);box-shadow:0 -16px 46px rgba(0,0,0,.17)} .cp-panel.on{transform:none} .cp-asa{display:block;width:36px;height:4px;border-radius:2px;background:var(--cap-borde);margin:10px auto 0}} .cp-asa{display:none} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐ CAP-BOTONES-FICHA · lo más chico y lo que más se usa. ║ ║ La barra: el borde se oscurece y la regla se desliza un poco al pasar ║ ║ por encima. Sugiere medir sin decir nada. ║ ║ El de arriba: pasa de enlace pelado a tener su propia área de toque. ║ ║ ⭐ Y de paso resuelve los 44 px: tenía padding:0, o sea 20 px de alto. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ LA BARRA, COMO LA 01 DEL RENDER. Fede, 08-10: «la del render es la ║ ║ mejor». ║ ║ 👉 FUERA EL ROJO. Tenía borde #E4000F, el mismo de «Añadir al carrito» ║ ║ que está 10 px más abajo: quedaban dos cosas rojas y el rojo dejaba ║ ║ de significar «esto compra». Ahora es el borde gris del sitio, y al ║ ║ pasar por encima se oscurece. ║ ║ ⛔ El !important es necesario: el borde rojo lo pone chat.js con una ║ ║ regla más específica, y acá no se toca chat.js. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .cap-talle-bar{border-color:var(--cap-borde,#D9D9D9) !important; background:rgba(26,26,26,.02) !important; /* ⛔ ESTO ERA LO QUE LA HACÍA VERSE DISTINTA AL RENDER, y no era el color ni el tamaño: la barra tenía `justify-content:normal`, o sea el icono y el texto pegados a la IZQUIERDA, con 236 px vacíos a la derecha de una barra de 461. En el render van centrados juntos. Todo lo demás ya coincidía: 48 px de alto, cuerpo 13,3, peso 600, gap 9,8. */ justify-content:center; border-radius:9px; transition:border-color .22s ease,background .22s ease} .cap-talle-bar:hover,.cap-talle-bar:focus-visible{ border-color:var(--cap-tinta,#1A1A1A) !important; background:rgba(26,26,26,.05) !important} .cap-talle-bar:active{translate:0 1px} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐ EL EMOJI 📏 PASA A SER LA REGLA DIBUJADA, SIN TOCAR chat.js. ║ ║ El emoji lo escribe chat.js en un , y cada teléfono lo dibuja ║ ║ distinto —en varios sale a todo color, que no pega con nada. ║ ║ 👉 Se le saca el cuerpo al texto (font-size:0, así el emoji no ocupa) ║ ║ y se dibuja el icono con mask-image. Al ir por máscara HEREDA EL ║ ║ COLOR del texto, que es lo que el emoji nunca podía hacer. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⛔ `background:currentColor` salió ROJO: el span hereda el color del tema, que en esta barra es #E4000F. Medido: rgb(228,0,15). El icono va con la tinta puesta a mano, igual que el texto. */ .cap-talle-bar{color:var(--cap-tinta,#1A1A1A) !important} .cap-talle-bar > span:first-child{ font-size:0 !important;width:17px;height:17px;flex:none; background:var(--cap-tinta,#1A1A1A); -webkit-mask:var(--cap-regla) center/17px 17px no-repeat; mask:var(--cap-regla) center/17px 17px no-repeat} .capoc-pt,.cap-talle-bar{ --cap-regla:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6h15v6h-15z'/%3E%3Cpath d='M4.5 6v2.6M7.5 6v3.8M10.5 6v2.6M13.5 6v3.8'/%3E%3C/svg%3E")} /* ⛔ APUNTABA A UN QUE NO EXISTE. La barra la dibuja chat.js y el icono es un EMOJI dentro de un , no un SVG: la regla era válida, no daba error, y el deslizamiento simplemente no ocurría. Visto mirando el HTML real, no el que yo había puesto en el render. 👉 Se apunta al primer , que es donde vive el emoji. El svg queda listo por si algún día se reemplaza. */ .cap-talle-bar > span:first-child, .cap-talle-bar .cap-regla-ico,.cap-talle-bar svg{ display:inline-block;transition:translate .32s cubic-bezier(.22,1,.36,1)} .cap-talle-bar:hover > span:first-child, .cap-talle-bar:hover .cap-regla-ico,.cap-talle-bar:hover svg{translate:-3px 0} /* ⛔ CON padding:11px DABA 42 PX, NO 44. El padding depende del cuerpo y del interlineado del texto, así que calcularlo de memoria falla: 11+11+20 = 42. 👉 min-height manda el alto, y el flex centra lo de adentro. Así el número es el número, no una consecuencia. Medido en el sitio: 44. */ .size-guide-link{min-height:44px;display:inline-flex;align-items:center; padding:0 13px !important;border-radius:8px; transition:color .2s ease,background .2s ease,text-decoration-color .2s ease} .size-guide-link:hover,.size-guide-link:focus-visible{color:var(--cap-tinta,#1A1A1A) !important; background:rgba(26,26,26,.055);text-decoration-color:transparent} .size-guide-link:active{translate:0 1px} .cp-cab{display:flex;align-items:flex-start;gap:12px;padding:16px 22px 13px;border-bottom:1px solid var(--cap-linea)} .cp-cab h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--cap-tinta)} .cp-cab p{margin:3px 0 0;font-size:11.5px;color:var(--cap-gris)} .cp-x{margin-left:auto;width:44px;height:44px;flex:0 0 44px;border:none;background:var(--cap-hueco); border-radius:var(--cap-r);font-size:15px;cursor:pointer;color:var(--cap-gris)} .cp-x:hover{background:var(--cap-linea)} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ CAP-SIN-SALTO · el espacio de la barra se reserva SIEMPRE. ║ ║ Fede, 08-10: «aparece una barra a la derecha porque no entra la tabla ║ ║ completa y achica todo el content, haciendo que quede medio raro». ║ ║ MEDIDO: al abrir la tabla el ancho útil pasaba de 500 a 485 — la barra ║ ║ se come 15 px y todo lo de adentro se corre de golpe. ║ ║ ║ ║ 👉 scrollbar-gutter stable both-edges reserva ese hueco desde el ║ ║ principio Y A LOS DOS LADOS, así el contenido queda centrado y no ║ ║ se mueve ni un píxel cuando la barra aparece. ║ ║ 👉 Y scrollbar-width thin la hace más finita: el hueco pasa de 15 px ║ ║ a unos 8 por lado. ║ ║ ⭐ El padding baja de 22 a 14 para COMPENSAR los dos huecos: el ancho ║ ║ útil del contenido queda igual que antes, sin regalar espacio. ║ ║ 22+22 = 44 · ahora 14+14 + 8+8 = 44. El mismo número. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .cp-cuerpo{flex:1;overflow-y:auto;padding:0 14px 22px;min-height:0; scrollbar-gutter:stable both-edges;scrollbar-width:thin; scrollbar-color:rgba(26,26,26,.22) transparent} /* ⛔ el respaldo donde no exista scrollbar-gutter: al menos la barra fina, así el salto es de 8 px y no de 15. */ @supports not (scrollbar-gutter: stable){ .cp-cuerpo{padding:0 22px 22px} } .cp-paso{padding:14px 0 2px} .cp-preg{margin:0 0 9px;font-size:15px;font-weight:700;color:var(--cap-tinta);text-align:center;letter-spacing:-.1px} .cp-seg{display:flex;justify-content:center;background:var(--cap-hueco);border-radius:var(--cap-r); padding:4px;gap:4px;width:max-content;margin:0 auto 6px} /* ⭐ 44 y no 40: la regla 32 pide 44 px para todo lo que se toca, y hasta hoy esto quedaba corto. Con la foto fuera de la fila sobra ancho para cumplirlo. */ .cp-seg-b{min-width:72px;height:44px;border:none;background:transparent;border-radius:calc(var(--cap-r) - 4px); font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--cap-gris);transition:all .16s} .cp-seg-b[aria-pressed="true"]{background:#fff;color:var(--cap-tinta);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐ CAP-MORPH-NUMERACION · al pasar de AR a US, UK o CM los números ║ ║ se funden en vez de reemplazarse. Así se entiende que es el MISMO ║ ║ pie dicho de otra manera, no otro talle. ║ ║ El nombre de transición lo pone el JS sobre los valores de la etiqueta ║ ║ justo antes de repintar, y lo saca al terminar: si quedara puesto en ║ ║ dos elementos a la vez, el navegador descarta la transición entera. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⛔ SIN ESTOS DOS NOMBRES NO HAY MORPH, HAY UN FUNDIDO DE TODA LA PÁGINA. El navegador sólo anima por separado lo que tiene view-transition-name, y escribir las reglas ::view-transition-* sin nombrar nada no hace nada: el CSS es válido, no hay error, y el efecto simplemente no existe. ⚠️ Y el nombre tiene que ser ÚNICO en la página en ese momento: si dos elementos lo comparten, el navegador descarta la transición entera. Acá hay una sola etiqueta y una sola respuesta a la vez. */ /* ⛔⛔ ACÁ VIVÍA EL DESVANECIDO AL CAMBIAR DE NUMERACIÓN, Y LO SACÓ FEDE EL 08-10: *«quitale el efecto que le agregaste hace poquito […] que hace un efecto de desvanecerse cuando se cambia de tipo de talle, no me gusta»*. ⛔ No volver a ponerlo sin que él lo pida. El cambio de numeración ahora es instantáneo, que es lo que quiere. */ .cp-seg-uno{font-size:13px;color:var(--cap-gris);padding:10px} /* ── LA RUEDA · el halo que Fede aprobó, sin cambios ── */ /* ⭐ LA RUEDA, AJUSTADA EL 07-10 · 5 renglones de 48 px en vez de 5 de 56. El alto, el relleno de las puntas, el halo y los velos son el MISMO número repetido: si se cambia uno hay que cambiar los cuatro, y además el H del motor, que es el que calcula a qué renglón saltar. */ /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ EL ESCENARIO · la rueda y la regla ocupan EXACTAMENTE lo mismo ║ ║ Fede, 08-10: «dejalos con la misma altura del de CM, asi cuando cambiemos ║ ║ no se mueve nada dentro de ese panel por la diferencia de altura». ║ ║ Medido antes de tocarlo: la rueda daba 240 px y el bloque de centímetros ║ ║ 196 — la respuesta saltaba 38 px cada vez que se cambiaba de pestaña. ║ ║ ║ ║ 👉 No se igualan los dos contenidos a mano, que es frágil: se les da UNA ║ ║ caja de alto fijo y adentro se centran. Si mañana la regla crece o la ║ ║ rueda cambia de renglón, la caja sigue midiendo lo mismo y abajo no se ║ ║ mueve nada. Es el mismo criterio con el que se igualaron los tres ║ ║ estados de la respuesta. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .cp-escenario{min-height:200px;display:flex;flex-direction:column;justify-content:center} .cp-rueda-wrap{position:relative;height:200px;margin:0 -2px;overflow:hidden;border-radius:12px} /* ⛔ 40 · 80 · 80 son el MISMO número repetido: renglón, relleno de las puntas (la mitad de lo que sobra) y velos. Y el H del motor tiene que decir 40 también. Si se separan, la rueda engancha en un renglón y responde con el de al lado. */ /* ⭐ la cápsula del render: un fondo apenas teñido y un borde de 1 px por dentro. ⛔ Antes era un degradado radial difuso, que se veía como una mancha borrosa detrás del número en vez de como una casilla. */ /* ⭐ el halo acompaña: el mismo verde, muy bajo. Así el renglón centrado y la etiqueta hablan el mismo idioma. ⛔ Más que esto y la rueda se vuelve un semáforo. */ .cp-halo{position:absolute;left:2px;right:2px;top:82px;height:36px;pointer-events:none; border-radius:18px; background:rgba(59,125,30,.08); box-shadow:inset 0 0 0 1px rgba(59,125,30,.2)} /* ⛔ overscroll-behavior:contain · sin esto, al llegar a la punta de la rueda el gesto sigue de largo y arrastra la página de atrás, que es parte de lo que se sentía mal en el teléfono. */ .cp-rueda{position:absolute;left:0;right:0;top:-70px;height:340px;overflow-y:auto;scroll-snap-type:y mandatory; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none; outline:none;cursor:grab;touch-action:pan-y;-webkit-touch-callout:none} .cp-rueda.agarrando{cursor:grabbing} .cp-rueda::-webkit-scrollbar{display:none} .cp-rueda-wrap:has(.cp-rueda:focus-visible){outline:2px solid var(--cap-tinta);outline-offset:2px} .cp-pad{height:152px} /* ⭐ QUE SE LEAN LOS CINCO · Fede, 08-10: «actualmente se ven solo 3 y los de los costados estan muy difuminados, deberia mostrar 5». La rueda SIEMPRE mostró 5 renglones (240 de alto / 48 cada uno) — lo que fallaba es que el 4º y el 5º quedaban casi transparentes. Las tres cuentas de abajo son las que deciden eso, y están calculadas para que a dos renglones del centro el número todavía se lea: --k = 1 − distancia×0,28 → centro 1 · a uno 0,72 · a dos 0,44 opacidad = 0,38 + k×0,62 → centro 1 · a uno 0,83 · a dos 0,65 escala = 0,86 + k×0,28 → centro 1,14 · a uno 1,06 · a dos 0,98 */ /* ⭐⭐ scroll-snap-stop:always · ES EL ARREGLO DE LA PRECISIÓN. Fede, 08-10: «se mueve de a varios numeros, es muy dificil caer en el numero que se quiere caer». Por defecto el snap recién actúa cuando el dedo YA frenó, así que un envión pasa de largo por diez talles y engancha donde cayó. Con always el navegador NO puede pasarse del siguiente punto: cada gesto avanza de a uno. ⛔ Para una lista de 1000 ítems sería insufrible; para 20 talles es exactamente lo que hace falta — acá importa acertar, no recorrer rápido. */ /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⛔⛔ pointer-events:none · EL ARRASTRE TIENE QUE SALIR SIEMPRE DEL ║ ║ MISMO ELEMENTO. Fede, 08-10: «si agarras dentro de la casilla ║ ║ seleccionada hace un arrastre de numero a numero, y si agarras afuera ║ ║ del numero seleccionado se mueve como yo quiero». ║ ║ MEDIDO en pruebas con elementFromPoint: en el centro el puntero caía ║ ║ en .cp-it-v —el del número, que ahí va en peso 800 y ocupa más— ║ ║ y fuera caía en .cp-it. Dos orígenes distintos para el mismo gesto: el ║ ║ span, que tiene texto, todavía intenta su arrastre nativo y le pelea ║ ║ al scrollTop que mueve el mío. ║ ║ 👉 Con los números transparentes al puntero, el pointerdown aterriza ║ ║ SIEMPRE en .cp-rueda. Un solo camino, un solo comportamiento. ║ ║ ⛔ Y por eso el cursor ya no va acá: lo pone la rueda (grab/grabbing). ║ ║ El `cursor:pointer` que había prometía un click que ya no existe — ║ ║ Fede sacó el tocar-para-elegir el 08-10. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .cp-it{height:36px;display:flex;align-items:center;justify-content:center;gap:9px; scroll-snap-align:center;scroll-snap-stop:always;pointer-events:none; font-variant-numeric:tabular-nums;user-select:none; color:var(--cap-tinta)} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ CAP-RUEDA-SIN-JS · el desvanecido lo hace el NAVEGADOR ║ ║ Antes lo calculaba pinta() en cada evento de scroll: recorría los 20 ║ ║ renglones y les escribía --k. Funcionaba, pero dependía de que el JS ║ ║ llegara a tiempo en cada cuadro, y en el teléfono no siempre llega. ║ ║ 👉 Con animation-timeline:view() corre en el hilo del COMPOSITOR, como ║ ║ el scroll mismo. Y el factor deja de vivir en dos archivos a la vez ║ ║ —el JS y el CSS—, que es lo que me dejó la rueda a medio camino ║ ║ cuando toqué uno y me olvidé del otro (regla 66). ║ ║ ⛔ El cálculo de JS NO se borró: queda de respaldo para Firefox, y ║ ║ sólo corre si el navegador no sabe hacerlo solo. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ @supports (animation-timeline: view()){ /* ⛔⛔ CON 820px NO SE VEÍA NADA. Fede, 08-10: *«lo del 3d no existe directamente»*. Y era cierto: la rotación estaba aplicada —se leía `matrix3d` en el computado— pero a 820 px de distancia la proyección es casi ortográfica y un renglón de 40 px rotado 30° se achata **3 píxeles**. Invisible. 👉 LA PERSPECTIVA ES LA QUE HACE EL EFECTO, NO LA ROTACIÓN. A 240 px la deformación se ve de verdad, y por eso la rotación puede ser moderada y los números siguen legibles. Subir los grados con la perspectiva lejos sólo achata el texto, que es lo que me pasó con los 54°. */ /* la perspectiva se fue de acá: el overflow del scroller aplana a los hijos y la anulaba. Ahora va dentro del transform de cada renglon. */ .cp-it{animation:cp-desvanecer linear both;animation-timeline:view(block); animation-range:cover 0% cover 100%; transform-origin:50% 50%;backface-visibility:hidden} /* con la animación puesta, el respaldo sobra */ .cp-rueda:not(.sin-sd) .cp-it{transform:none} } /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐⭐ CAP-RUEDA-3D · el tambor. Los renglones no se desvanecen nada más: ║ ║ ROTAN, como la rueda física de un selector. Es lo que hace que se ║ ║ sienta un objeto y no una lista. ║ ║ La perspectiva va en el SCROLLER, que es el padre directo de los ║ ║ renglones, así los cinco comparten un solo punto de fuga y el tambor ║ ║ se lee como uno solo. Si la pusiera en cada renglón, cada uno tendría ║ ║ el suyo y el efecto se desarma. ║ ║ ⛔ El snap NO se toca: usa la posición de layout, no la transformada. ║ ║ Por eso rotar no afecta en qué número cae la rueda. ║ ║ ⛔ Y el translateZ negativo ALEJA los de los bordes: achica, nunca ║ ║ agranda, así nada se sale del recorte del scroller (regla 30). ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⛔ EMPECÉ CON 54° Y QUEDÓ MAL: a dos renglones del centro el número quedaba casi de canto e ilegible, y la rueda volvía a parecer de TRES — que es exactamente de lo que Fede se había quejado antes («se ven solo 3»). 👉 30° alcanza de sobra para que se lea como un tambor y deja los cinco legibles. El efecto no es cuánto rota: es que rote. ⭐ La perspectiva más lejos (820 en vez de 560) suaviza la deformación de los bordes, que con poca distancia se estiraban. */ /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⛔⛔⛔ LA PERSPECTIVA VA EN CADA RENGLÓN, NO EN EL SCROLLER. ║ ║ Fede, 08-10, dos veces: «lo del 3d no existe directamente» y «el 3d ║ ║ sigue sin verse». Y las dos veces la rotación ESTABA aplicada: se leía ║ ║ matrix3d en el valor computado. Medir no alcanzaba. ║ ║ ║ ║ LA CAUSA: .cp-rueda tiene overflow-y:auto, y un elemento con overflow ║ ║ distinto de visible APLANA A SUS HIJOS en un solo plano. Eso anula la ║ ║ perspective del padre. Sin perspectiva, un rotateX de 36° sobre un ║ ║ renglón de 40 px sólo lo achata 8: no se lee como 3D, se lee como ║ ║ nada. ║ ║ ║ ║ 👉 perspective() DENTRO del transform de cada renglón no depende del ║ ║ padre y funciona igual con overflow. Cada uno tiene su punto de ║ ║ fuga, así que no es un tambor perfecto — pero SE VE, que es lo que ║ ║ se pedía, y es la única forma dentro de un scroller. ║ ║ ⛔ Hermana de la regla 30: el overflow no sólo recorta, también cambia ║ ║ cómo se componen los hijos. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⛔⛔⛔ Y TAMPOCO SE VEÍA CON perspective() POR RENGLÓN. Tercer intento fallido, y el motivo es geométrico, no un bug: **la deformación por perspectiva es CERO en el centro del elemento y máxima en los bordes.** Los talles son textos cortos y centrados — caen justo donde el rotateX no deforma nada. El renglón ocupa 456 px de ancho pero es transparente: lo único que se ve son 30 px de número en el medio. 👉 Un tambor hecho con rotateX REAL no se puede ver con este contenido. Lo que el ojo sí lee como tambor es la COMPRESIÓN VERTICAL: el renglón se achata al alejarse del centro, que es justo lo que hace una rueda física. Eso sí es visible con texto centrado, porque afecta la altura de la letra. ⭐ scaleY por separado de scaleX: achata sin angostar, que es la diferencia entre «se aleja» y «gira». */ /* ⛔⛔⛔ Y ACÁ ESTABA EL ERROR DE FONDO DE LOS TRES INTENTOS: **los keyframes 0% y 100% NUNCA SE VEN.** Con `animation-range: cover 0% cover 100%` el renglón recorre desde que asoma por abajo hasta que sale por arriba — pero la rueda sólo muestra 5 de los 24 renglones. A dos del centro el progreso va en **0,17 y 0,83**, no en 0 y 1. Todo lo que escribí en los extremos se gastaba fuera de la pantalla, y lo que se veía era la interpolación tibia del medio: medido, scaleY 0,73 donde yo creía estar pidiendo 0,52. 👉 **Los valores fuertes van en 18% y 82%**, que es donde caen los renglones que de verdad se ven. Lo de 0% y 100% ya no importa. ⭐ Esto explica por qué «subir los números» no servía: no era poco efecto, era efecto puesto en el lugar equivocado del recorrido. */ /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⛔⛔ LA COMPRESIÓN VERTICAL SE PROBÓ Y ERA FEA. Fede, 08-10: «es ║ ║ malisimo, cambia de manera de presentarlo». Y tenía razón: achatar ║ ║ con scaleY **deforma las letras** en vez de alejarlas. Un 4 aplastado ║ ║ no se lee como «está lejos», se lee como un 4 roto. ║ ║ ║ ║ 👉 LO QUE SÍ DA PROFUNDIDAD SIN TOCAR LA FORMA ES EL DESENFOQUE. ║ ║ El ojo lee «fuera de foco» como «más lejos» — es la misma pista ║ ║ que usa una cámara. Las letras quedan intactas: sólo se alejan. ║ ║ Y la escala va UNIFORME, nunca sólo en un eje. ║ ║ ║ ║ ⭐ Los tres valores trabajan juntos y en la misma dirección: ║ ║ se achica, se desenfoca y se apaga. Ninguno solo alcanza. ║ ║ ⛔ Y van en 18% y 82%, que es donde caen los renglones que se VEN ║ ║ (regla 87). Los keyframes de 0% y 100% quedan fuera de pantalla. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⭐⭐ ESTO ES EXACTAMENTE EL SCROLL DEL RENDER DE ANIMACIONES, copiado literal. Fede, 08-10: «la del render es la mejor […] quiero el scroll del render también». Escala UNIFORME y opacidad. Nada más. ⛔ Lo que se probó y NO quedó, para no volver a intentarlo: · rotateX con perspectiva en el scroller → el overflow aplana a los hijos · rotateX con perspective() por renglón → no deforma el centro, y el texto de los talles es corto y centrado, justo donde no pasa nada · compresión vertical (scaleY) → «es malisimo»: deforma las letras · desenfoque progresivo → tampoco era lo que quería 👉 Tres intentos de darle profundidad y el que gana es el más simple, que ya estaba. A veces la respuesta es que no hacía falta. ⛔ Y los valores van en 0% y 100% como en el render: con la geometría de esta rueda (200 px de alto, renglones de 40) eso da en pantalla 1 · 0,77 · 0,53, que es lo que Fede vio y eligió. */ /* CAP-RUEDA-TAMBOR · MEDIDO sobre la captura del reloj de iOS que mandó Fede el 10-10. Los centros de sus numeros caen a 94 / 175 / 234 / 264 px: despejando y = R*sen(k*t) da t = 21,4 grados por renglon, y con ese numero los otros tres quedan predichos con 2 px de error. Lo que importa NO es que roten: es que el hueco entre renglones se COMPRIME hacia los bordes (94 -> 81 -> 59 -> 30). Mis tres intentos del 08-10 deformaban el renglon EN SU LUGAR, y por eso ninguno se leia como un tambor. ⛔ El progreso de cada renglon NO es 0 y 100 (regla 87): con la ventana de 200 y el scroller de 340, el recorrido cover mide 376 y cada renglon avanza 9,5745%. De ahi salen los porcentajes de abajo, uno por renglon visible. ⭐ LA ROTACION VA AL 75% DEL ANGULO REAL, la POSICION no. Con la rotacion geometrica pura el 3er renglon queda en 7 px de letra y el 4o en 1: estan y no se leen. En la captura de iOS el 03 SE LEE, o sea que el tambor comprime el ESPACIO mucho mas que la LETRA. Lo que hace que se lea como rueda es donde cae cada renglon, no cuanto se achata — asi que se achata menos y se lee. 🔴 EL SIGNO: en view() el 0% es cuando el elemento asoma por ABAJO y el 100% cuando sale por ARRIBA, asi que un renglon POR DEBAJO del centro va en 40%, NO en 60%. Lo escribi al reves y el translateY empujaba hacia AFUERA: medido en pruebas, el 3er renglon caia a 129 px del centro con la cuenta diciendo 87. ⛔ La opacidad y la rotacion en valor absoluto daban bien igual, asi que TODO PARECIA ANDAR: lo unico que lo delata es medir DONDE cae cada renglon, no si la animacion corre. ⭐ La opacidad es cos(t)^0,6 y no cos(t)^2: con el cuadrado el cuarto renglon daba 0,005 (invisible) y en la captura de Fede SE VE. Medido contra su foto: calculado 1 / 0,96 / 0,83 / 0,60 / 0,20 · en su captura 1 / 0,80 / 0,50 / 0,25 */ @keyframes cp-desvanecer{ 2.13%{opacity:0.000;transform:translateY(-72.00px) perspective(420px) rotateX(-80.63deg)} 11.70%{opacity:0.264;transform:translateY(-48.30px) perspective(420px) rotateX(-64.50deg)} 21.28%{opacity:0.656;transform:translateY(-21.41px) perspective(420px) rotateX(-48.38deg)} 30.85%{opacity:0.855;transform:translateY(-6.57px) perspective(420px) rotateX(-32.25deg)} 40.43%{opacity:0.965;transform:translateY(-0.84px) perspective(420px) rotateX(-16.13deg)} 50.00%{opacity:1.000;transform:translateY(0.00px) perspective(420px) rotateX(0.00deg)} 59.57%{opacity:0.965;transform:translateY(0.84px) perspective(420px) rotateX(16.13deg)} 69.15%{opacity:0.855;transform:translateY(6.57px) perspective(420px) rotateX(32.25deg)} 78.72%{opacity:0.656;transform:translateY(21.41px) perspective(420px) rotateX(48.38deg)} 88.30%{opacity:0.264;transform:translateY(48.30px) perspective(420px) rotateX(64.50deg)} 97.87%{opacity:0.000;transform:translateY(72.00px) perspective(420px) rotateX(80.63deg)} } /* el respaldo, con la MISMA curva para que se vea igual: centro 1 · a uno 0,77 · a dos 0,53 — medido sobre la animación de arriba */ /* ⛔ EL RESPALDO TIENE QUE SER EL MISMO TAMBOR (regla 66: el factor vive en dos archivos y si toco uno solo la rueda queda a medio camino). CSS no sabe hacer senos, asi que aca el JS manda el transform ya resuelto. */ .cp-rueda.sin-sd .cp-it{opacity:var(--op,1);transform:var(--tf,none); will-change:transform,opacity} .cp-it-v,.cp-it-x{pointer-events:none} .cp-it-v{font-size:17px;font-weight:400;letter-spacing:-.2px;transition:font-weight .12s;white-space:nowrap} .cp-it.act .cp-it-v{font-weight:800;letter-spacing:-.6px} .cp-it-x{font-size:10px;color:var(--cap-gris);text-transform:uppercase;letter-spacing:.08em} .cp-it.sin .cp-it-v{color:#C9C9C9;text-decoration:line-through} /* ⛔⛔ ACÁ ESTABA `scroll-state(snapped)` MARCANDO EL CENTRADO, Y SE SACÓ. Fede, 08-10: *«tarda muchisimo»*. Y tenía razón: `snapped` se cumple cuando el scroll YA SE ASENTÓ sobre el punto, o sea cuando la rueda frenó del todo. Mientras girás, ningún renglón está snapped y no se marca ninguno. 👉 La negrita la pone el JS (`marcarCentro`), en cada cuadro de scroll. La regla `.cp-it.act .cp-it-v` de arriba es la que manda. ⭐ `container-type` también se fue: ya no lo usa nadie en la rueda, y crea contención de más. */ .cp-vel{position:absolute;left:0;right:0;height:10px;pointer-events:none;z-index:2} /* los velos también tapaban: ahora se van antes y más suave, así el 5º renglón asoma en vez de quedar borrado */ .cp-vel-top{top:0;background:linear-gradient(#fff 0,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 100%)} .cp-vel-bot{bottom:0;background:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.55) 58%,#fff 100%)} /* ⛔ ACÁ IBA UN TEXTO QUE SE SACÓ. Fede, 07-10: «Lo de M-W del US que pusiste que si dice ambos usa el que vaya con tu calzado lo pones en todas las tablas y no tiene nada que ver, solo esta en crocs, y no deberia decir eso, deberia mostrar como aparecen los talles y listo». Tenía razón dos veces: el aviso salía en CUALQUIER tabla que trajera US —no sólo en Crocs— y además sobraba, porque la rueda ya muestra el valor tal como está cargado. No existe más .cp-hint. */ /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ LA ETIQUETA · rehecha ║ ║ Fede, 07-10: «Los numeros dentro de la etiqueta y el titulo esta ║ ║ desalineado, esta mal hecho […] tienen que estar mas chicos los numeros, ║ ║ y tienen diferente tamaño, todo pesimo». ║ ║ ║ ║ ⛔ LAS TRES CAUSAS, UNA POR UNA: ║ ║ 1 · DESALINEADO: cada escala era una columna independiente con su propio ║ ║ flujo, así que la clave y el número de una no compartían línea con ║ ║ los de la de al lado. Ahora es UNA grilla de dos filas: las claves ║ ║ caen todas en la fila 1 y los números todos en la fila 2, así que ║ ║ comparten línea base POR CONSTRUCCIÓN, no por casualidad. ║ ║ 2 · «DIFERENTE TAMAÑO»: todos tenían los mismos px, pero el argentino iba ║ ║ en peso 800 contra 500 de los demás, y a 25px eso se LEE más grande. ║ ║ Ahora la diferencia es 700 contra 600 —se distingue por color— y la ║ ║ altura de línea está fijada igual para todos. ║ ║ 3 · «MAS CHICOS»: el cuerpo bajó de 25/21/17 a 19/17/15. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .cp-rta{max-height:0;opacity:0;overflow:hidden;transition:max-height .32s ease,opacity .26s,margin .32s} .cp-rta.on{max-height:460px;opacity:1;margin:8px 0 0} /* la caja teñida · la opción B que eligió Fede */ .r-etiq{padding:13px 15px 14px;border-radius:var(--cap-r); background:var(--cap-si-sw);border:1px solid var(--cap-si-ln)} /* ⛔ SIN STOCK LA ETIQUETA SE APAGA: gris y sin borde. Es lo que hace que el verde signifique «lo tenemos» en vez de ser un adorno que está siempre. */ .r-etiq.sin{background:var(--cap-hueco);border-color:transparent} /* el título va alineado a la grilla, no suelto */ .r-etiq-t{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--cap-si-tx);line-height:1} /* y gris cuando no hay, igual que el resto de la etiqueta */ .r-etiq.sin .r-etiq-t{color:var(--cap-gris)} /* ⭐ EL PUNTO DE «LO TENEMOS» · el trabajo que antes hacía el color del botón. El motor lo emite SÓLO cuando hay stock, así que los tres estados de la respuesta siguen midiendo exactamente lo mismo y la regla de abajo no se mueve — que fue lo que costó arreglar el 07-10. */ .r-hay{display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--cap-hay,#3B7D1E);margin-right:6px;vertical-align:1px} .r-etiq.sin .r-hay{display:none} /* ── la grilla: fila 1 las claves, fila 2 los números ── */ .r-cols{display:grid;align-items:baseline} .r-k{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--cap-gris);line-height:1;white-space:nowrap} .r-v{font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums; color:var(--cap-tinta);white-space:nowrap;line-height:1.05} /* ⭐ el argentino: color del botón y negrita, pero MISMO cuerpo y misma línea */ .r-k.pri{color:var(--cap-si-tx)} .r-v.pri{color:var(--cap-si-tx);font-weight:700} .r-etiq.sin .r-v.pri,.r-etiq.sin .r-k.pri{color:#C9C9C9} /* ⛔ Acá vivían .r-nope y .r-sin, los dos renglones que hacían saltar la regla al pasar por un talle sin stock. Se fueron con sus elementos. */ /* forma A · cuatro columnas, como la etiqueta de la caja. Sin divisores verticales: con la caja teñida sobran, y eran justamente lo que partía la alineación en dos mitades. */ .forma-cols .r-cols{grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); grid-auto-flow:row;column-gap:4px;row-gap:7px;text-align:center} /* forma B · una fila por escala · para valores largos (Crocs: "M3 / W5") */ .forma-filas .r-cols{grid-template-columns:auto 1fr;column-gap:16px;row-gap:0} .forma-filas .r-k{grid-column:1;text-align:left;padding:7px 0;align-self:center} .forma-filas .r-v{grid-column:2;text-align:right;padding:7px 0} .forma-filas .r-k:not(:first-of-type),.forma-filas .r-v:not(:first-of-type){ border-top:1px solid var(--cap-si-ln)} /* el cuerpo, según el valor más largo de la tabla · bajado un escalón entero. Un solo token manda, para poder comparar escalas sin tocar tres reglas. */ .capoc-pt{--cap-num:19px} .cuerpo-c1 .r-v{font-size:var(--cap-num)} .cuerpo-c2 .r-v{font-size:calc(var(--cap-num) - 2px)} .cuerpo-c3 .r-v{font-size:calc(var(--cap-num) - 4px)} .esc-chica {--cap-num:17px} .esc-media {--cap-num:19px} .esc-grande{--cap-num:21px} /* ⛔ el botón NO es rojo: el rojo es el de «Añadir al carrito» */ /* ⭐ CAP-BOTON-CONFIRMA · al elegir, el botón pasa al verde de «lo tenemos» y le crece un tilde. Medio segundo que separa «apreté algo» de «quedó elegido». ⛔ El talle se elige igual que antes: esto es sólo lo que se ve. */ .cp-elegir .cp-tilde{width:0;overflow:hidden;display:inline-flex;align-items:center; transition:width .22s cubic-bezier(.22,1,.36,1)} .cp-elegir.confirmado{background:var(--cap-hay) !important} .cp-elegir.confirmado .cp-tilde{width:20px} .cp-elegir{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin:13px 0 0; font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:none;border-radius:var(--cap-r); background:var(--cap-si);color:#fff; /* ⭐ CAP-ANIM-1010. ⛔ El background sigue en la lista porque el TILDE lo usa: .cp-elegir.confirmado cambia a --cap-hay y tiene que seguir yendo animado. */ transition:background .15s,filter .15s,transform .12s cubic-bezier(.22,1,.36,1)} .cp-elegir svg{width:17px;height:17px} @media (hover:hover){ .cp-elegir:hover{background:var(--cap-si-h);filter:brightness(1.04)} } /* es la accion que cierra todo: baja un poco mas que el resto para que se sienta */ .cp-elegir:active{transform:scale(.975)} .cp-elegir:focus-visible{outline:2px solid var(--cap-tinta);outline-offset:2px} /* ⛔ se llamó `.cp-buscar` mientras existió «Buscar modelos en talle X». Fede lo sacó el 08-10 y el nombre volvió al de antes. */ .cp-elegir.fantasma{background:#fff;color:var(--cap-tinta);border:1px solid var(--cap-borde);font-weight:500} .cp-elegir.fantasma:hover{background:var(--cap-hueco)} /* ⭐ «Avisarme» · calcado del botón real de la ficha (.capoc-notify-btn): violeta #8E00C2, texto blanco, radio 8, 14px peso 400 y la campana de Font Awesome que ya carga el tema. Así el cliente ve el MISMO botón en los dos lados, no dos maneras de decir lo mismo. */ .cp-elegir.cp-avisar{background:#8E00C2;color:#fff;border:none;border-radius:8px;font-weight:400} .cp-elegir.cp-avisar:hover{background:#75009F} .cp-elegir.cp-avisar i{margin-right:7px;font-size:15px} /* ╔═════════════════════════════════════════════════════════════════════════╗ ║ CAP-PT-MODO · «sólo la tabla», lo que abre el botón de arriba ║ ║ Se apaga el paso de la rueda y el desplegable deja de ser desplegable: ║ ║ la tabla queda a la vista, sin su cabecera ni su línea de arriba. ║ ║ ⛔ Es CSS y no otro template a propósito: un segundo template sería una ║ ║ copia que se desincroniza en cuanto alguien toque uno de los dos. ║ ╚═════════════════════════════════════════════════════════════════════════╝ */ /* el rótulo del stock sólo se muestra si hay lugar: abajo de 992 la columna va muda y lo explica la nota del pie. ⛔ Nada de dos textos diciendo lo mismo. */ .cp-th-hay{font-size:10px !important;letter-spacing:.04em;white-space:nowrap} .cp-th-largo{display:none} @media (min-width:992px){.cp-th-largo{display:inline}} .capoc-pt.solo-tabla .cp-paso{display:none} /* ⛔ ESTAS DOS TIENEN QUE APUNTAR SOLO A LA TABLA. Con la segunda fila desplegable, un `.cp-det` suelto le escondia el titulo a «¿Donde encuentro mi talle?» y dejaba su texto suelto en el modo «solo la tabla». */ .capoc-pt.solo-tabla .cp-det[data-det-tabla] summary{display:none} .capoc-pt.solo-tabla .cp-det[data-det-tabla]{border-top:0} /* ⛔⛔ EL padding-top DEL CONTENEDOR QUE SCROLLEA DEJA PASAR EL CONTENIDO POR DELANTE DEL ENCABEZADO. Un `position:sticky; top:0` se pega al borde del CONTENT BOX, o sea 16 px más abajo del borde visible — y en esa franja de 16 px las filas se siguen viendo mientras suben. MEDIDO: el encabezado quedaba en y=141 y la fila «36.5» en y=121, arriba suyo. Se veía exactamente como si el encabezado fuera transparente, pero el fondo estaba bien y el apilamiento también (elementFromPoint devolvía TH). 👉 El cuerpo va SIN padding arriba, y el aire lo pone el propio encabezado. Así no queda ninguna franja por la que espiar el contenido. */ .capoc-pt.solo-tabla .cp-cuerpo{padding-top:0} .capoc-pt.solo-tabla table.cp-t th{padding-top:18px} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⛔⛔ LA TABLA SE CORTABA Y DEJABA MEDIA PANTALLA VACÍA. Fede, 08-10, ║ ║ con una captura del teléfono: la tabla terminaba en el talle 39,5 y ║ ║ debajo quedaba un hueco enorme. ║ ║ LA CAUSA: `.cp-tenv` tiene un `max-height` fijo (340 px) pensado para ║ ║ cuando la tabla es un desplegable DENTRO del panel. En modo tabla ║ ║ sola, donde la tabla ES el panel, ese tope la achica sin motivo. ║ ║ 👉 Acá el alto lo manda el panel: la tabla se estira hasta el final. ║ ║ ⛔ El `min-height:0` de cada eslabón NO es decorativo: sin él, el ║ ║ contenido impone su alto y el flex deja de poder encogerlo — ║ ║ la misma trampa de `min-width:auto` que ya pagué en la ficha. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⭐ LO SIMPLE ES LO QUE FUNCIONA: la tabla SIN altura propia, y que scrollee el cuerpo —que ya es flex:1 con overflow:auto y lo hace bien desde siempre. ⛔ Antes intenté repartir el alto con flex a través del
, y perdí tres vueltas: un
no gobierna a su hijo como un div (medido: 821 px dentro de un padre de 622), y cada parche agregaba un eslabón más que podía fallar. El `max-height:340px` que cortaba la tabla era de cuando la tabla era un desplegable DENTRO del panel; acá la tabla ES el panel. */ /* ⛔ `overflow-y:visible` NO ALCANZA: si el otro eje está en `auto`, el navegador fuerza los dos a `auto`. No se puede tener un eje visible y el otro no. Y mientras .cp-tenv siga siendo scrolleable, el `position:sticky` del encabezado se resuelve contra ÉL —que ya no tiene tope de altura— y deja de pegarse: medido, los títulos desaparecían al scrollear. 👉 `overflow:visible` en los dos ejes. El scroll lo hace el cuerpo, y el encabezado se pega al tope del cuerpo, que es lo que se quiere. ⚠️ Esto saca el scroll horizontal, así que las cinco columnas tienen que entrar en el ancho del panel. Entran: medido en 500 y en 390. */ .capoc-pt.solo-tabla .cp-tenv{max-height:none;overflow:visible;border:0} .capoc-pt.solo-tabla .cp-nota{margin:14px 0 0} /* las sombras viven donde está el scroll, y acá el que scrollea es el cuerpo */ @supports (container-type: scroll-state){ .capoc-pt.solo-tabla .cp-cuerpo{container-type:scroll-state} @container scroll-state(scrollable: top){.capoc-pt.solo-tabla .cp-sombra-t{opacity:1}} @container scroll-state(scrollable: bottom){.capoc-pt.solo-tabla .cp-sombra-b{opacity:1}} } .cp-det{border-top:1px solid var(--cap-linea)} .cp-det summary{display:flex;align-items:center;justify-content:space-between;min-height:50px; cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--cap-tinta); /* ⭐ CAP-ANIM-1010 · el corrimiento del texto es lo que hace que la fila se SIENTA un boton y no un titulo. El radio es para que el fondo no toque los bordes. */ padding:0 6px;margin:0 -6px;border-radius:8px; transition:background .18s,padding-left .18s} .cp-det summary::-webkit-details-marker{display:none} .cp-det summary:focus-visible{outline:2px solid var(--cap-tinta);outline-offset:2px} .cp-det summary i{width:11px;height:11px;position:relative;flex:0 0 11px} .cp-det summary i::before,.cp-det summary i::after{content:"";position:absolute;background:var(--cap-gris);transition:transform .22s} .cp-det summary i::before{left:0;right:0;top:5px;height:1.5px} .cp-det summary i::after{top:0;bottom:0;left:5px;width:1.5px} .cp-det[open] summary i::after{transform:rotate(90deg)} .cp-nota{margin:10px 0 14px;font-size:12px;color:var(--cap-gris);line-height:1.5} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐ CAP-TABLA-SOMBRAS · en el teléfono la tabla se corta y hoy nada lo ║ ║ dice. Las sombras aparecen SÓLO cuando hay algo más en esa dirección, ║ ║ y el CSS lo pregunta solo: nadie escucha el scroll. ║ ║ ⚠️ scroll-state es Chrome y Edge por ahora. Donde no está, no se ║ ║ dibujan y la tabla se lee igual: es una ayuda, no un requisito. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .cp-tenv{margin:3px 0 0;overflow-x:auto;overflow-y:auto;max-height:340px;position:relative; border:1px solid var(--cap-linea);border-radius:var(--cap-r)} @supports (container-type: scroll-state){ .cp-tenv{container-type:scroll-state} .cp-sombra{position:sticky;left:0;right:0;height:24px;pointer-events:none;opacity:0; transition:opacity .22s ease;z-index:3;display:block} /* ⛔ la de arriba va DEBAJO del encabezado (que ahora es 5) y pegada a él: antes se dibujaba encima de los títulos y los velaba. Y en vez de blanco sobre blanco —que no se veía— ahora es una sombra de verdad. */ .cp-sombra-t{top:32px;margin-bottom:-24px;z-index:2; background:linear-gradient(rgba(0,0,0,.075),rgba(0,0,0,0))} .cp-sombra-b{bottom:0;margin-top:-24px;background:linear-gradient(rgba(255,255,255,0),#fff)} @container scroll-state(scrollable: top){.cp-tenv .cp-sombra-t{opacity:1}} @container scroll-state(scrollable: bottom){.cp-tenv .cp-sombra-b{opacity:1}} } .cp-sombra{display:none} /* ⭐ y las filas entran escalonadas la primera vez que se abre la tabla */ table.cp-t.cp-entrando tbody tr{opacity:0;translate:0 7px; animation:cp-subir .32s cubic-bezier(.22,1,.36,1) forwards} @keyframes cp-subir{to{opacity:1;translate:0 0}} table.cp-t{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;background:#fff} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⛔ EL ENCABEZADO TENÍA position:sticky Y background, Y AUN ASÍ SE ║ ║ TRANSPARENTABA. Fede, 08-10: «cuando en la tabla de talle scrolleamos ║ ║ para abajo no hay un fondo en los titulos de las columnas y se ║ ║ transparenta la informacion que esta detras». ║ ║ MEDIDO con elementFromPoint sobre el encabezado: devolvía TD, no TH. ║ ║ Las celdas del cuerpo se pintaban ENCIMA. ║ ║ LA CAUSA: z-index auto. Un sticky sin z-index no crea contexto de ║ ║ apilamiento, y con border-collapse:collapse el orden de pintado de ║ ║ las tablas deja las celdas por encima. El fondo estaba puesto y no ║ ║ servía de nada — otro fallo silencioso. ║ ║ 👉 z-index explícito, y por encima de las sombras de scroll (van en 3).║ ╚═══════════════════════════════════════════════════════════════════════╝ */ table.cp-t th{position:sticky;top:0;z-index:5;background:#fff;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--cap-gris);font-weight:700;padding:9px 8px;text-align:center;border-bottom:1px solid var(--cap-borde)} table.cp-t td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--cap-linea);white-space:nowrap} table.cp-t tbody tr:last-child td{border-bottom:none} table.cp-t tr.sin td{color:#AFAFAF} table.cp-t tr.sin td:first-child{text-decoration:line-through} table.cp-t tr.aqui td{background:var(--cap-si-sw);font-weight:700;color:var(--cap-si)} .cp-si,.cp-no{display:inline-block;width:7px;height:7px;border-radius:50%} /* el punto de la columna En stock va en el VERDE de «lo tenemos», no en negro: Fede, 08-10. Es el mismo --cap-hay del punto de la etiqueta, asi que el verde significa lo mismo en los dos lugares. */ .cp-si{background:var(--cap-hay)}.cp-no{border:1.5px solid var(--cap-borde)} /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ EL CONTROL DE CENTÍMETROS · reconstruido de cero ║ ║ ║ ║ Fede, 07-10, dos cosas distintas sobre el mismo control: ║ ║ · «no tiene linea para arrastrar solo se ve la bola que se clickea» ║ ║ · «te permite scrollear por todos los cms en lugar de ir saltando de cm ║ ║ en cm de los que tenemos como talles» ║ ║ ║ ║ ⛔ POR QUÉ NO SE VEÍA EL RIEL: el riel era el pseudo-elemento ║ ║ ::-webkit-slider-runnable-track, de 4px de alto, dentro de un input de ║ ║ 44px. Ese pseudo-elemento NO se centra en el input: se alinea arriba, ║ ║ y encima la bola llevaba margin-top:-11px, que la empujaba fuera. Al ║ ║ final quedaba la bola a la vista y el riel escondido en el borde. ║ ║ Y es un camino sin salida: cada navegador dibuja ese pseudo-elemento ║ ║ a su manera y no se le pueden colgar las marcas de los talles. ║ ║ ║ ║ 👉 LA SALIDA: el riel, lo recorrido, las marcas y la bola son divs míos. ║ ║ El queda transparente encima, a 44px, y sigue ║ ║ haciendo su trabajo invisible: teclado, lector de pantalla y el área ║ ║ de toque. Se dibuja igual en todos los navegadores y me deja poner ║ ║ una marca por talle — que es lo segundo que pidió. ║ ║ ║ ║ ⭐ LOS PASOS: el input va de 0 a (cantidad de talles − 1) con step=1. No ║ ║ recorre centímetros sueltos: recorre LAS FILAS DE LA TABLA. Por eso ║ ║ las marcas quedan equiespaciadas y cada tirón cae en un talle real. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .cp-cm{padding:0} .cp-cmv{text-align:center;margin:0 0 2px;font-size:12px;color:var(--cap-gris)} .cp-cmv b{display:block;font-size:30px;font-weight:700;letter-spacing:-1px; color:var(--cap-tinta);font-variant-numeric:tabular-nums;line-height:1.15} .cp-cmv i{font-style:normal} .cmr{position:relative;height:44px;margin:6px 2px 0;touch-action:pan-y} /* el riel, visible siempre */ .cmr-riel{position:absolute;left:0;right:0;top:20px;height:4px;border-radius:2px; background:var(--cap-borde)} .cmr-hecho{position:absolute;left:0;top:0;bottom:0;width:var(--p,50%); border-radius:2px;background:var(--cap-tinta)} /* una marca por talle: se ve que salta de talle en talle y no de a milímetros */ .cmr-m{position:absolute;top:50%;width:2px;height:9px;margin-top:-4.5px;border-radius:1px; background:var(--cap-borde);transform:translateX(-50%)} .cmr-m.hecha{background:rgba(26,26,26,.34)} .cmr-m.ext{opacity:0} .cmr-bola{position:absolute;top:50%;left:var(--p,50%);width:26px;height:26px;margin-top:-13px; border-radius:50%;background:#fff;border:2px solid var(--cap-tinta); box-shadow:0 1px 5px rgba(0,0,0,.18);transform:translateX(-50%); transition:transform .12s,box-shadow .12s;pointer-events:none} .cmr-in{position:absolute;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:grab; -webkit-appearance:none;appearance:none;background:transparent} .cmr-in:active{cursor:grabbing} .cmr-in:active ~ .cmr-bola{transform:translateX(-50%) scale(1.1);box-shadow:0 2px 9px rgba(0,0,0,.24)} .cmr-in:focus-visible ~ .cmr-bola{box-shadow:0 0 0 3px rgba(26,26,26,.26),0 1px 5px rgba(0,0,0,.18)} /* el área de toque son los 44px enteros, en los dos motores */ .cmr-in::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:44px} .cmr-in::-moz-range-thumb{width:34px;height:44px;border:none;background:transparent} .cp-esc{display:flex;justify-content:space-between;font-size:11px;color:var(--cap-gris); font-variant-numeric:tabular-nums;margin-top:2px} @media(prefers-reduced-motion:reduce){ .cp-it,.cp-panel,.cp-rta,.cmr-bola{transition:none} /* ⛔ las animaciones nuevas también se apagan, cada una a su manera: la rueda queda plana y legible, no invisible. */ .cp-it{animation:none !important;opacity:1 !important;scale:1 !important} table.cp-t.cp-entrando tbody tr{animation:none;opacity:1;translate:0 0} .cap-talle-bar svg,.cap-talle-bar .cap-regla-ico{transition:none} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}} /* Acá venía la etiqueta que cierra un bloque de estilos, arrastrada del render. Dentro de una hoja CSS cierra la hoja y el navegador descarta las reglas que siguen, sin un solo error en consola. El reemplazo tampoco puede traer delimitadores de comentario: esto vive DENTRO de un comentario, y meterle otro adentro cierra el de afuera antes de tiempo. CSS no admite comentarios anidados. */ /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ CAP-REGLA-CM · la cinta corrediza ║ ║ La eligió Fede el 07-10 entre cuatro: «la numero dos […] es comoda en el ║ ║ celular». ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .rg-tit{text-align:center;margin:0 0 4px;font-size:12px;color:var(--cap-gris)} .rg-val{display:block;font-size:28px;font-weight:700;letter-spacing:-.9px;line-height:1.15; color:var(--cap-tinta);font-variant-numeric:tabular-nums} .rg-tit em{font-style:normal;font-size:12px;font-weight:500;color:var(--cap-gris)} .rg-nota{margin:11px 0 0;font-size:12px;color:var(--cap-gris);line-height:1.5} .rg{position:relative;height:72px;margin:10px 0 0;overflow:hidden; background:linear-gradient(#FCFBF7,#F5F3EB); border:1px solid var(--cap-linea);border-radius:var(--cap-r); cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none} .rg.agarrando{cursor:grabbing} .rg:has(.rg-in:focus-visible){outline:2px solid var(--cap-si);outline-offset:2px} .rg-pista{position:absolute;top:0;bottom:0;will-change:transform} .rg-m{position:absolute;top:13px;width:1px;background:#C8C2B1;transform:translateX(-50%)} .rg-m.mm{height:7px;background:#DCD6C5} .rg-m.med{height:12px} .rg-m.cm{height:19px;width:1.5px;background:#8C8674} .rg-n{position:absolute;top:36px;transform:translateX(-50%);font-size:11px;font-weight:600; color:#7E7868;font-variant-numeric:tabular-nums} /* los talles de este modelo, sobre la cinta */ .rg-t{position:absolute;top:1px;width:3px;height:8px;border-radius:2px; background:var(--cap-si);opacity:.3;transform:translateX(-50%); transition:opacity .2s,height .2s} .rg-t.sin{background:var(--cap-borde);opacity:.55} .rg-t.act{opacity:1;height:10px} /* la aguja fija del centro · ⛔ con un hueco en la franja de los números: sin él tapaba el número del medio, que es justo el que hay que leer */ .rg-ag{position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:3;pointer-events:none; transform:translateX(-50%); background:linear-gradient(var(--cap-si) 0 33px,transparent 33px 51px,var(--cap-si) 51px 100%)} .rg-ag::before,.rg-ag::after{content:"";position:absolute;left:50%;transform:translateX(-50%); width:0;height:0;border:5px solid transparent} .rg-ag::before{top:0;border-top-color:var(--cap-si)} .rg-ag::after{bottom:0;border-bottom-color:var(--cap-si)} /* se desvanece en los bordes para que la cinta no se corte de golpe */ .rg-vel{position:absolute;top:0;bottom:0;width:44px;pointer-events:none;z-index:2} .rg-vel.iz{left:0;background:linear-gradient(90deg,#FAF8F1 15%,rgba(250,248,241,0))} .rg-vel.de{right:0;background:linear-gradient(270deg,#FAF8F1 15%,rgba(250,248,241,0))} /* ⛔ el input NO recibe toques: el arrastre lo maneja la caja, píxel a píxel. Queda sólo para el teclado y el lector de pantalla. */ .rg-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0; pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent} @media(prefers-reduced-motion:reduce){ .rg-pista{transition:none !important} .rg-t{transition:none}} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ CAP-PT-0910 · LO QUE ELIGIÓ FEDE EL 09-10 SOBRE EL RENDER DE OPCIONES ║ ║ Render comparado: 4_ficha/render/opciones_0910/panel_opciones.html ║ ║ ⛔ Va al FINAL del bloque y con la misma especificidad o más que las ║ ║ reglas base, o no gana (regla 28, y la 77 que la volvió a pagar). ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ── 1 · EL SELECTOR DE LA RUEDA · cápsula tinta ── Elegida entre seis el 09-10. El razonamiento es de reparto de significados, no de gusto: el VERDE ya quiere decir «lo tenemos» (el punto de la etiqueta y el botón) y el ROJO es «Añadir al carrito». La tinta es el único tono que destaca el renglón sin pisarle el significado a ninguno de los dos. ⭐ Y es el más legible de los seis: blanco sobre negro, sin velos. */ .capoc-pt .cp-halo{background:var(--cap-tinta);box-shadow:none;border-radius:12px} .capoc-pt .cp-it.act .cp-it-v{color:#FFFFFF} .capoc-pt .cp-it.act .cp-it-x{color:#A8A8A8} /* ⛔ el tachado sin stock también tiene que leerse SOBRE la tinta: el #C9C9C9 de la regla base está pensado para fondo blanco y acá queda muy flojo. */ .capoc-pt .cp-it.act.sin .cp-it-v{color:#BDBDBD} /* ── 2 · LA ETIQUETA · la celda del argentino, llena ── Fede, 09-10: *«dandole mas enfasis al talle argentino»*. ⛔ El énfasis NO va por cuerpo: el 08-10 medimos que un peso 800 contra 500 se ve más grande aunque mida lo mismo, y eso fue justo lo que no le gustó (regla 59). Acá los cuatro números siguen midiendo igual y lo que cambia es el FONDO de la celda. ⭐ Las claves y los números son hermanos de la misma grilla (fila 1 y fila 2), así que la «celda» se arma con dos mitades que se juntan en el row-gap: cada una se pasa 3,5 px, que es la mitad de los 7 px de hueco. */ /* ⛔⛔ EL PRIMER INTENTO FUE CON PADDING Y MÁRGENES NEGATIVOS EN LAS DOS MITADES, Y DESALINEÓ EL ARGENTINO 6 px RESPECTO DE LOS OTROS TRES. Medido en pruebas: el valor AR terminaba en y=448 y los otros tres en 442, las claves en 421 contra 417. Con align-items:baseline el padding debería compensarse solo, y NO lo hace cuando además hay margen negativo. 👉 Es exactamente el «están desalineados» que Fede ya había reportado y que la grilla de dos filas vino a arreglar. No se puede volver a romper. ✅ LA CELDA SE PINTA DETRÁS, CON UN PSEUDO-ELEMENTO POSICIONADO: no ocupa lugar, no empuja nada y por lo tanto NO PUEDE desalinear. El ancho de columna se calcula con el mismo --n que ya emite el motor. */ .capoc-pt.forma-cols .r-cols{position:relative} .capoc-pt.forma-cols .r-cols::before{ content:"";position:absolute;z-index:0; left:0;top:-5px;bottom:-5px; width:calc((100% - (var(--n,4) - 1) * 4px) / var(--n,4)); background:var(--cap-si);border-radius:9px} .capoc-pt.forma-cols .r-k, .capoc-pt.forma-cols .r-v{position:relative;z-index:1} .capoc-pt.forma-cols .r-k.pri, .capoc-pt.forma-cols .r-v.pri{color:#FFFFFF} /* ⛔ sin stock la celda se apaga: la pinta el pseudo, así que se apaga ahí */ .capoc-pt.forma-cols .r-etiq.sin .r-cols::before{background:#E8E8E8} /* la forma de valores largos (Crocs «M3 / W5») es una fila por escala: ahí la celda se arma en horizontal y el hueco que hay que cerrar son los 16 px de column-gap, 8 de cada lado. */ .capoc-pt.forma-filas .r-k.pri, .capoc-pt.forma-filas .r-v.pri{ background:var(--cap-si);color:#FFFFFF;border-top-color:transparent} .capoc-pt.forma-filas .r-k.pri{ border-radius:9px 0 0 9px;padding-left:8px;margin-left:-8px; padding-right:8px;margin-right:-8px} .capoc-pt.forma-filas .r-v.pri{ border-radius:0 9px 9px 0;padding-right:8px;margin-right:-8px; padding-left:8px;margin-left:-8px} /* ⛔ SIN STOCK LA CELDA SE APAGA, igual que el resto de la etiqueta. Si quedara verde, el verde dejaría de significar «lo tenemos» — que es justo lo que la regla de arriba (.r-etiq.sin) viene cuidando. */ .capoc-pt.forma-filas .r-etiq.sin .r-k.pri, .capoc-pt.forma-filas .r-etiq.sin .r-v.pri{background:#E8E8E8;color:#8E8E8E} .capoc-pt.forma-cols .r-etiq.sin .r-k.pri, .capoc-pt.forma-cols .r-etiq.sin .r-v.pri{color:#8E8E8E} /* ── 3 · «CÓMO MEDIR» · repartido entre los dos modos ── Medido el 09-10 sobre las 98 tablas de producción: 34 no traen ningún texto, 51 traen el MISMO párrafo con una errata cambiada, y hay UNA sola URL en las 98. Por eso el texto se escribe una vez acá y no se extrae tabla por tabla. 📄 _tareas/09_asesor_ia/4_ficha/EL_TEXTO_DE_CADA_TABLA.md */ /* ⭐ CAP-PIE-TRES-FILAS · ya no es un bloque con su propio aire y su propia linea: es una fila mas, identica a la de la tabla. El borde lo pone .cp-det. */ .capoc-pt .cp-ayuda{margin:0;padding:0} .capoc-pt .cp-ayuda .cp-ayuda-p{padding-bottom:13px} .capoc-pt .cp-ayuda-q{margin:0 0 5px;font-size:13px;font-weight:700;color:var(--cap-tinta);line-height:1.35} .capoc-pt .cp-ayuda-p{margin:0 0 4px;font-size:12.5px;color:var(--cap-gris);line-height:1.5} /* ⛔ en modo «sólo la tabla» este bloque no va: allá el enlace está al pie de la tabla. Si se vieran los dos, el enlace saldría dos veces en la misma pantalla. */ .capoc-pt.solo-tabla .cp-ayuda{display:none} /* ── LA LEYENDA DE LA TABLA ── Reemplaza la nota que decía algo falso. Cada renglón dibuja el símbolo REAL de la tabla, así que no puede describir algo que no se ve. */ /* ⭐ Fede, 10-10: «podrias darle mas aire debajo de — El modelo no viene en este talle». El aire va de relleno ABAJO de la lista, no de margen del ultimo
  • : asi no depende de cual sea el ultimo renglon, que cambia segun el producto. */ .capoc-pt .cp-leyenda{list-style:none;margin:11px 0 0;padding:11px 0 18px; border-top:1px solid var(--cap-linea);display:grid;gap:7px} .capoc-pt .cp-leyenda li{display:grid;grid-template-columns:14px 1fr;gap:9px; align-items:start;font-size:12px;color:var(--cap-gris);line-height:1.45} /* los símbolos, centrados sobre la primera línea del texto */ .capoc-pt .cp-leyenda i{justify-self:center;margin-top:5px} .capoc-pt .cp-leyenda .cp-raya{justify-self:center;font-style:normal;color:#AFAFAF; font-size:13px;line-height:1.35} /* ── «¿CÓMO MEDIR TU PIE?» ── ⛔ Antes: 13,5 px en peso 700, verde y con subrayado de 2 px, al lado de texto de 12. Fede, 09-10: *«quedo mucho mas grande que el resto»* y *«hacelo coherente con el resto de botones»*. Tenía razón: era el elemento más pesado del pie y no es la acción principal de ninguna de las dos vistas. ✅ Ahora es exactamente la misma fila que el «Ver la tabla de talles completa» de arriba —14 px, peso 600, tinta, con su flecha a la derecha— así que las dos salidas del panel se leen como la misma familia. ⭐ Los 50 px de alto salen de min-height + flex, no de padding (regla 80). */ .capoc-pt .cp-medir{display:block;margin:0} /* ⛔ EL COLOR VA FORZADO. Medido el 09-10 en pruebas: con `color:var(--cap-tinta)` normal el enlace salía en #777777, y hasta un `style="color:#1A1A1A!important"` puesto a mano seguía dando #777 — o sea que algo del tema le gana. Es el mismo caso que `.cap-talle-bar`, que ya estaba forzada por esto mismo. ⚠️ Y ojo con medirlo por consola: `r.style.color` devuelve CADENA VACÍA cuando el valor es un `var()`, así que recorrer `document.styleSheets` buscando quién pone el color NO encuentra nada y manda a buscar un culpable que no aparece. */ .capoc-pt .cp-medir-a{display:flex;align-items:center;justify-content:space-between; gap:10px;min-height:50px;text-decoration:none !important; padding:0 6px;margin:0 -6px;border-radius:8px; transition:background .18s,padding-left .18s; font-size:14px !important;font-weight:600 !important;color:var(--cap-tinta) !important; border-top:1px solid var(--cap-linea)} .capoc-pt .cp-medir-a span{color:inherit !important;font-size:inherit !important; font-weight:inherit !important} .capoc-pt .cp-ayuda .cp-medir-a{margin-top:10px} .capoc-pt .cp-medir-a:focus-visible{outline:2px solid var(--cap-tinta);outline-offset:2px} /* ── CAP-ANIM-1010 · las tres filas reaccionan igual ── */ @media (hover:hover){ .capoc-pt .cp-det summary:hover, .capoc-pt .cp-medir-a:hover{background:var(--cap-hueco);padding-left:11px} } .capoc-pt .cp-det summary:active, .capoc-pt .cp-medir-a:active{background:var(--cap-hueco);padding-left:11px} /* la flecha: dibujada con bordes, del mismo gris que el + del desplegable */ .capoc-pt .cp-fl{width:8px;height:8px;flex:0 0 8px;transform:rotate(-45deg); border-right:1.5px solid var(--cap-gris);border-bottom:1.5px solid var(--cap-gris); transition:transform .2s} .capoc-pt .cp-medir-a:hover .cp-fl{transform:rotate(-45deg) translate(2px,2px)} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ CAP-FOTO-PANEL · 09-10-2026 · el bloque de la foto de la etiqueta ║ ║ ⛔ LA ESTRUCTURA ES LO QUE IMPIDE QUE SE CORTE UN BOTÓN. La caja mide ║ ║ 200 px fijos —los mismos que la rueda y la regla— y es un flex ║ ║ column donde la FOTO toma lo que sobra (flex:1; min-height:0) y la ║ ║ fila de controles va flex:none. Si falta lugar encoge la imagen, ║ ║ nunca el control. El primer intento tenía foto + texto + botón ║ ║ apilados sin eso, y Fede vio los botones cortados. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .capoc-pt .cp-foto{height:200px;display:flex;flex-direction:column;gap:9px} /* la pastilla de la cámara, en la misma fila que US/UK/CM */ .capoc-pt .cp-seg-b{display:inline-flex;align-items:center;justify-content:center;gap:5px} .capoc-pt .cp-cam{width:14px;height:14px;flex:none} /* 1 · LA FOTO ES EL BOTÓN · un solo toque, sin control aparte */ .capoc-pt .cp-f-shot{position:relative;flex:1;min-height:0;width:100%;padding:0;border:0; display:block;cursor:pointer;border-radius:11px;overflow:hidden;background:var(--cap-hueco); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(20,30,15,.12)} /* ⛔ la imagen YA VIENE RECORTADA 2:1 y encuadrada a mano sobre la etiqueta. Antes era cuadrada y el CSS decidía dónde cortar: en escritorio la caja es 2,6:1 y el recorte automático se comía la mano y dejaba medio cuadro negro. Encuadrar en el archivo y no en el CSS es lo que lo hace prolijo en los dos anchos. 900x450, 78 KB. */ .capoc-pt .cp-f-shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} /* el velo garantiza que el texto se lea sobre CUALQUIER foto, no sólo sobre ésta */ .capoc-pt .cp-f-velo{position:absolute;left:0;right:0;bottom:0;height:62%; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));pointer-events:none} .capoc-pt .cp-f-lab{position:absolute;left:0;right:0;bottom:0;min-height:44px; display:flex;align-items:center;justify-content:center;gap:7px; color:#fff;font-size:13.5px;font-weight:700;letter-spacing:-.01em;pointer-events:none} .capoc-pt .cp-f-lab .cp-cam{width:17px;height:17px} .capoc-pt .cp-f-shot:focus-visible{outline:2px solid var(--cap-tinta);outline-offset:2px} .capoc-pt .cp-f-ayu{margin:0;flex:none;text-align:center;font-size:11.5px; color:var(--cap-gris);line-height:1.4} .capoc-pt .cp-f-ayu b{color:var(--cap-tinta);font-weight:700} /* 2 · leyendo · la MISMA foto, para que no cambie la forma del bloque */ .capoc-pt .cp-f-load img{filter:blur(1.5px) saturate(.5);transform:scale(1.03)} .capoc-pt .cp-f-load .cp-f-velo{height:100%;background:rgba(10,14,10,.62)} .capoc-pt .cp-f-load .cp-f-lab{inset:0;flex-direction:column;gap:11px} .capoc-pt .cp-f-spin{width:26px;height:26px;border-radius:50%; border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:cp-f-giro .9s linear infinite} @keyframes cp-f-giro{to{transform:rotate(360deg)}} /* 3 · lo que leyó */ .capoc-pt .cp-f-lei{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center; gap:9px;background:var(--cap-hueco);border:1px solid var(--cap-borde);border-radius:11px;padding:11px 12px} .capoc-pt .cp-f-leik{margin:0;font-size:9px;font-weight:750;letter-spacing:.12em; color:var(--cap-gris);text-transform:uppercase} .capoc-pt .cp-f-g{display:grid;grid-template-columns:repeat(var(--nf,3),minmax(0,1fr)); gap:1px 4px;text-align:center;font-variant-numeric:tabular-nums;position:relative} /* La celda que resuelve, pintada DETRÁS: no ocupa lugar y por eso no desalinea (regla 96, la misma del talle argentino en la etiqueta). ⛔⛔ ANTES ESTO SE PINTABA SIEMPRE Y SIEMPRE A LA DERECHA. Fede, 10-10, con una captura: la foto leyó «US W 5» y «UK 3», el panel decía «no encuentro ningún número que sirva para esta tabla» y aun así UK salía en verde — y esa tabla ni siquiera tiene UK. Funcionaba de casualidad: cuando hay CM, el CM es el último Y es el que resuelve, así que `right:0` acertaba sin saber por qué. 👉 Ahora la pinta el índice que emite el JS (--hf), y si no hay ninguna que resuelva, la clase `con-hit` no se pone y no se pinta nada. */ .capoc-pt .cp-f-g::before{content:"";position:absolute;top:-5px;bottom:-5px;z-index:0; width:calc((100% - (var(--nf,3) - 1) * 4px) / var(--nf,3)); left:calc(((100% - (var(--nf,3) - 1) * 4px) / var(--nf,3) + 4px) * var(--hf,0)); background:var(--cap-si);border-radius:8px;display:none} .capoc-pt .cp-f-g.con-hit::before{display:block} .capoc-pt .cp-f-k,.capoc-pt .cp-f-v{position:relative;z-index:1} .capoc-pt .cp-f-k{font-size:9px;font-weight:650;letter-spacing:.1em;color:var(--cap-gris);text-transform:uppercase} .capoc-pt .cp-f-v{font-size:17px;font-weight:600;line-height:1.25;color:var(--cap-tinta)} .capoc-pt .cp-f-k.hit,.capoc-pt .cp-f-v.hit{color:#fff} .capoc-pt .cp-f-pie{margin:0;font-size:10.5px;color:var(--cap-gris);line-height:1.35} .capoc-pt .cp-f-pie b{color:var(--cap-tinta);font-weight:700} /* 4 · no se pudo */ .capoc-pt .cp-f-mal{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center; gap:5px;text-align:center;padding:0 4px} .capoc-pt .cp-f-malt{font-size:13.5px;font-weight:700;color:var(--cap-tinta);line-height:1.3} .capoc-pt .cp-f-mal p{margin:0;font-size:11.5px;color:var(--cap-gris);line-height:1.45} /* los controles · flex:none, por eso NO se pueden recortar */ .capoc-pt .cp-f-btr{display:flex;gap:7px;flex:none} .capoc-pt .cp-f-bt{flex:1;min-height:44px;border:0;border-radius:10px;font:inherit; font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px; background:var(--cap-tinta);color:#fff} .capoc-pt .cp-f-bt .cp-cam{width:15px;height:15px} .capoc-pt .cp-f-ok{background:var(--cap-si);color:#fff} .capoc-pt .cp-f-g2{background:#fff;color:var(--cap-tinta);border:1px solid var(--cap-borde)} .capoc-pt .cp-f-wa{background:#1E8E3E;color:#fff} /* ── CAP-FOTO-TOPE · la pantalla del límite de 3 intentos ── Fede, 10-10. ⛔ Acá NO hay «Otra foto»: el proximo intento tambien daria tope, asi que el boton ocupa el renglon entero y queda una sola salida. */ .capoc-pt .cp-f-wa-solo{flex:1 1 100%} .capoc-pt .cp-wa-ico{width:17px;height:17px;flex:none;fill:currentColor} @media (prefers-reduced-motion:reduce){.capoc-pt .cp-f-spin{animation:none}} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ CAP-DOS-ARREGLOS-0910 · lo que Fede vio al probarlo en pruebas ║ ║ Va al FINAL del bloque a propósito: tiene que ganarle a las reglas ║ ║ base, y con la misma especificidad gana la última (reglas 28 y 77). ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ── 1 · LA CÁPSULA ERA UNA BARRA ── Fede: *«aparece como una barra toda negra de seleccion»*. Tenía razón y la medición lo confirmó: **452 px de ancho para 32 px de número**. En el render que aprobó, la rueda medía 318 y la cápsula se leía como una píldora; en el panel real mide 456 y la misma regla la convierte en una barra. ⛔ El error fue mío al trasladar: copié «left:2px; right:2px» del render sin volver a mirarlo en el ancho real. Un valor que se ve bien a 318 px no se ve igual a 456. 👉 Ahora la cápsula abraza el contenido: 180 px alcanzan para el número más ancho (32) más «SIN STOCK» (~110), y en el teléfono nunca pasa del ancho disponible. */ /* ⛔ ACÁ LA ACHIQUÉ A 180 px Y ESTABA MAL EL DIAGNÓSTICO. Fede vio «una barra toda negra que no selecciona nada» y yo leí «la barra es muy ancha». No era el ancho: era que al cambiar de escala NINGÚN renglón quedaba marcado (ver `actual = -1` en panel_talles.js). Fede: *«lo del ancho quedaba mejor antes»*. 👉 Vuelve a lo que estaba. Lección: arreglé el síntoma que me pareció y no el que me describió — la frase decía «no está seleccionando nada», no «es ancha», y esa parte la pasé por alto. */ /* ── 2 · LA PASTILLA ELEGIDA NO SE DISTINGUÍA ── Fede: *«el US y UK no aparecen seleccionados»*. Medido, el atributo estaba bien (aria-pressed="true"), así que mi control decía que funcionaba — pero él mira el CONTRASTE, no el atributo: blanco sobre gris muy claro, y ahora con CUATRO pastillas en vez de tres cada una es más angosta y se nota menos. Es la regla 37: él tiene razón sobre lo que ve, mi medición miraba otra cosa. 👉 Lo elegido pasa a ser TINTA con el texto en blanco — el mismo código que ya usa la cápsula de la rueda. Queda un solo idioma en el panel: **lo que está elegido es negro.** */ /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ CAP-ANIM-1010 · LA CAPSULA SE DESLIZA, NO SALTA ║ ║ Antes el fondo negro era el de la pastilla elegida: se apagaba en una ║ ║ y se prendia en otra. Ahora es UN elemento que cambia de posicion y de ║ ║ ancho, asi que el ojo lo sigue y entiende que es el MISMO selector ║ ║ moviendose. Es lo que hace iOS. ║ ║ ⛔ El color es TINTA, no blanco: en este panel lo elegido es negro. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ .capoc-pt .cp-seg{position:relative} /* ⛔ LA CAPSULA ES BLANCA, exactamente la del render. La puse en tinta mirando una regla vieja del archivo que decia eso —y mas abajo habia OTRA, posterior, que la dejaba blanca (regla 77: misma especificidad, gana la ultima)—. Resultado: la pastilla seguia blanca y mi capsula negra asomaba por detras. Fede, 10-10: *«se ve una sombra detras totalmente negra que quedo muy mal»*. Tenia razon. */ .capoc-pt .cp-seg-cap{position:absolute;top:4px;bottom:4px;left:0;width:0;z-index:0; border-radius:calc(var(--cap-r) - 4px);background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);opacity:0;pointer-events:none} .capoc-pt .cp-seg.listo .cp-seg-cap{ transition:left .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1),opacity .2s} .capoc-pt .cp-seg-b{position:relative;z-index:1; transition:color .2s,transform .12s cubic-bezier(.22,1,.36,1)} .capoc-pt .cp-seg-b[aria-pressed="true"]{ background:transparent;color:var(--cap-tinta);font-weight:700;box-shadow:none} /* ⚠️ dentro de (hover:hover): en una pantalla tactil el :hover QUEDA PEGADO despues de tocar, y una pastilla sin elegir se veria como elegida. */ @media (hover:hover){ .capoc-pt .cp-seg-b:not([aria-pressed="true"]):hover{color:var(--cap-tinta)} } .capoc-pt .cp-seg-b:active{transform:scale(.95)} /* ── CAP-FOTO-EXPLICA-0910 · la foto entera a la izquierda y la explicación a la derecha ── Fede: *«creo que hay que poner texto a la derecha y la imagen completa a la izquierda cuadrada, y en el texto explicar que le tenes que sacar una foto a la etiqueta y la ia la procesa»*. ⭐ La imagen bajó a 360x360 y 19 KB (de 2,2 MB). Para mostrarse a 150 px eso es más del doble de resolución: no se pierde nada y carga al toque. */ /* ⭐ la columna de la foto es `auto`: la mide la PROPIA foto, que se estira a todo el alto que deja el boton. Antes era 150 fijo y la foto no podia crecer. */ .capoc-pt .cp-f-inv{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr; gap:13px;align-items:center} /* align-self:stretch + aspect-ratio = cuadrada y del alto de la fila, sea cual sea. El tope de 147 es lo que queda de los 200 despues del boton (44) y el hueco (9): sin el, en el estado «leyendo» —que no tiene boton— el cuadrado se iria a 200. */ .capoc-pt .cp-f-ref{align-self:stretch;width:auto;height:auto;aspect-ratio:1/1; max-height:147px;border-radius:11px;display:block; object-fit:cover;background:var(--cap-hueco); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(20,30,15,.12)} /* ⭐ CAP-FOTO-TEXTO-1010 · MEDIDO: la columna mide ~180 x 147 y el texto ocupaba 54 de esos 147 — el 37%. Un bloque chico centrado al lado de una foto grande SIEMPRE se ve suelto, y eso es lo que Fede leyo como «justificado a la izquierda y se ve raro». La causa no era la alineacion: era el tamano. 👉 Con 15/800 y 12,5/1,5 el titulo pasa a dos renglones y el parrafo a tres: el bloque llena ~100 de 147 (el 68%) y la columna deja de verse vacia. ⛔ El 12,5 ademas lo iguala con .cp-ayuda-p, que es el otro parrafo del panel: no puede haber dos cuerpos distintos para el mismo tipo de texto. */ /* ⛔ Y MI PRIMERA CUENTA ESTABA MAL: supuse que la columna media 180 px y en escritorio mide 292. Con esa medida el titulo entra en UN renglon y el parrafo en DOS, asi que el texto llenaba el 42% de los 147 de la foto y seguia flotando. 👉 232 px es la medida de lectura: el titulo pasa a dos renglones y el parrafo a tres, y el bloque llena ~67%. En un telefono la columna ya mide menos de 232, asi que este tope no hace nada ahi: solo corrige el escritorio. */ .capoc-pt .cp-f-txt{display:flex;flex-direction:column;justify-content:center; gap:6px;min-width:0;max-width:232px} .capoc-pt .cp-f-t{margin:0;font-size:15px;font-weight:800;color:var(--cap-tinta); line-height:1.22;letter-spacing:-.01em;text-wrap:balance} .capoc-pt .cp-f-p{margin:0;font-size:12.5px;color:var(--cap-gris);line-height:1.5} .capoc-pt .cp-f-p b{color:var(--cap-tinta);font-weight:700} .capoc-pt .cp-f-ir{width:100%;flex:none;margin:0} /* el cuadrado del «leyendo» ocupa el mismo lugar que la foto: no salta nada */ .capoc-pt .cp-f-ref.cp-f-load{display:flex;align-items:center;justify-content:center; background:var(--cap-hueco);border:1px solid var(--cap-borde);box-shadow:none} .capoc-pt .cp-f-ref.cp-f-load .cp-f-spin{border-color:var(--cap-borde);border-top-color:var(--cap-tinta)} /* en pantallas angostas la foto cede primero, el texto nunca */ /* ⛔ Aca la foto bajaba a 118 para dejarle lugar al texto, porque el BOTON vivia en la columna del texto y necesitaba ancho. Ahora el boton esta abajo y el texto son dos renglones: la foto puede quedarse grande. Solo se achica el hueco. */ @media (max-width:420px){ .capoc-pt .cp-f-inv{gap:11px} } /* ── CAP-ARREGLOS-0910-B ──────────────────────────────────────────────── */ /* 1 · EL BOTÓN DE WHATSAPP TENÍA LA LETRA GRIS SOBRE VERDE. Fede: *«sale con verde de fondo y gris que no se ve en la letra»*. Es el mismo caso del enlace «¿Cómo medir tu pie?»: algo del tema le gana al color de un , y como acá el botón ES un , le pasó lo mismo. ⛔ Y yo ya lo había pagado hace tres horas y no lo apliqué acá. Va forzado. */ .capoc-pt .cp-f-wa, .capoc-pt a.cp-f-wa{background:#1E8E3E !important;color:#fff !important; text-decoration:none !important} /* 2 · LAS PASTILLAS: BLANCO CON SOMBRA, lo acordado. ⛔⛔ Y DESDE EL 10-10 EL BLANCO NO LO PINTA LA PASTILLA, LO PINTA LA CAPSULA (.cp-seg-cap), que es la que se desliza. Si la pastilla tambien se pintara, habria DOS rellenos: uno fijo y uno que viaja — que es justo lo que se vio mal. 👉 Aca solo queda el TEXTO. El fondo y la sombra viven en la capsula. ⚠️ Esta regla va ULTIMA a proposito: hay otra identica mas arriba y, con la misma especificidad, manda la de abajo (regla 77). */ .capoc-pt .cp-seg-b[aria-pressed="true"]{ background:transparent;color:var(--cap-tinta);font-weight:700; box-shadow:none} /* ── CAP-FOTO-ANIM-0910 · lo que pidió Fede después de probarlo en el celular ── */ /* 1 · LA RUEDA: SÓLO NÚMEROS EN GRIS, SIN TACHAR. Fede: *«no los taches tampoco, con que esten en gris esta bien porque la etiqueta de abajo dice lo que pasa»*. El tachado venía de cuando la rueda mostraba SÓLO los talles del modelo y el tachado era la excepción; ahora que se ven los 21, tachar media lista es ruido. */ .capoc-pt .cp-it.sin .cp-it-v{color:#C9C9C9;text-decoration:none} /* 2 · MIENTRAS LA FOTO CONVERSA, LA ETIQUETA DE ABAJO SE ESCONDE. Dos bloques casi iguales uno encima del otro, con números distintos, es la confusión que vio Fede en la captura. Se cierra con la misma transición que ya tiene .cp-rta, así que se va animado y no de golpe. */ .capoc-pt.cp-f-activa .cp-rta{max-height:0 !important;opacity:0 !important;margin:0 !important} /* 3 · EL RECIBO · «Etiqueta leída» */ .capoc-pt .cp-f-ok2{flex:1;min-height:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:6px;text-align:center} .capoc-pt .cp-f-tick{width:38px;height:38px;border-radius:50%;display:flex; align-items:center;justify-content:center;background:var(--cap-si-sw); color:var(--cap-si);border:1px solid var(--cap-si-ln)} .capoc-pt .cp-f-tick svg{width:19px;height:19px} .capoc-pt .cp-f-ok2 .cp-f-p{font-variant-numeric:tabular-nums} /* 4 · LAS ANIMACIONES. Fede: *«hay que ponerle animaciones a los botones y a como aparecen los datos que no tiene ninguna […] las mismas animaciones que tiene el resto»*. 👉 Se reusa `cp-subir`, que es la que ya entra las filas de la tabla: misma curva, mismo tiempo, mismo desplazamiento. No se inventa nada nuevo. */ @media (prefers-reduced-motion:no-preference){ .capoc-pt .cp-foto .cp-f-leik, .capoc-pt .cp-foto .cp-f-g > div, .capoc-pt .cp-foto .cp-f-pie, .capoc-pt .cp-foto .cp-f-t, .capoc-pt .cp-foto .cp-f-tick, .capoc-pt .cp-foto .cp-f-btr{ opacity:0;translate:0 7px;animation:cp-subir .32s cubic-bezier(.22,1,.36,1) forwards} /* escalonado: primero el rótulo, después los números uno por uno, al final los botones — el mismo orden en que se leen */ .capoc-pt .cp-foto .cp-f-tick{animation-delay:0s} .capoc-pt .cp-foto .cp-f-leik{animation-delay:.02s} .capoc-pt .cp-foto .cp-f-t{animation-delay:.05s} .capoc-pt .cp-foto .cp-f-g > div:nth-child(1){animation-delay:.07s} .capoc-pt .cp-foto .cp-f-g > div:nth-child(2){animation-delay:.12s} .capoc-pt .cp-foto .cp-f-g > div:nth-child(3){animation-delay:.17s} .capoc-pt .cp-foto .cp-f-pie{animation-delay:.21s} .capoc-pt .cp-foto .cp-f-btr{animation-delay:.25s} /* la celda verde del centímetro crece desde el centro, para que se note cuál es el número que resuelve */ .capoc-pt .cp-foto .cp-f-g::before{transform-origin:center; animation:cp-f-crece .34s cubic-bezier(.22,1,.36,1) .17s backwards} @keyframes cp-f-crece{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}} } /* 5 · los botones responden al toque, como el resto del panel */ .capoc-pt .cp-f-bt{transition:transform .12s cubic-bezier(.22,1,.36,1), filter .15s} /* ⛔⛔ brightness(1.06) SOBRE UN BOTON NEGRO NO SE VE. El boton principal de la foto usa --cap-tinta (#1A1A1A): subirle un 6% lo lleva de 26 a 28 sobre 255. Fede, 10-10: «le falta una animacion en el boton de sacar la foto» — y la tenia, solo que era invisible. 👉 En los oscuros se aclara el FONDO; el brillo queda para los de color, donde si rinde. ⚠️ Y el hover va dentro de (hover:hover): en tactil se queda pegado. */ @media (hover:hover){ .capoc-pt .cp-f-bt:hover{filter:brightness(1.06)} .capoc-pt .cp-f-ir:hover,.capoc-pt .cp-f-bt:hover{background:#333333} .capoc-pt .cp-f-ok:hover{background:var(--cap-si-h);filter:none} .capoc-pt .cp-f-g2:hover{background:var(--cap-hueco);filter:none} .capoc-pt .cp-f-wa:hover{background:#176B2F !important;filter:none} } .capoc-pt .cp-f-bt{transition:transform .12s cubic-bezier(.22,1,.36,1),filter .15s,background .15s} .capoc-pt .cp-f-bt:active{transform:scale(.97)} .capoc-pt .cp-f-ref{transition:transform .2s cubic-bezier(.22,1,.36,1)} @media (prefers-reduced-motion:reduce){ .capoc-pt .cp-f-bt,.capoc-pt .cp-f-ref{transition:none} .capoc-pt .cp-f-bt:active{transform:none} } /* ── CAP-FOTO-CONFIRMA-0910 ─────────────────────────────────────────────── */ /* 1 · AIRE ABAJO. Fede: *«estan muy pegados a la línea de abajo»*. Mientras la foto conversa, la etiqueta de abajo está plegada (max-height:0, margin:0), así que el bloque quedaba pegado al borde del desplegable. Este margen ocupa justo el lugar que la etiqueta deja libre. */ /* ⛔⛔ ESTE MARGEN ESTABA SOBRE .cp-foto, QUE VIVE DENTRO DEL ESCENARIO, y por lo tanto lo agrandaba: medido en pruebas, rueda 200 · centimetros 200 · foto 216. Fede, 10-10: «todos los tipos de mediciones tienen que tener el mismo alto siempre para que no se mueva de lugar la etiqueta que sale abajo». 👉 El aire sigue estando, pero AFUERA: un margen del escenario no cambia el alto del escenario. El control es medir .cp-escenario en los tres modos. */ .capoc-pt.cp-f-activa .cp-escenario{margin-bottom:16px} /* 2 · LA PREGUNTA Y LOS BOTONES, DENTRO DE LA TARJETA. Pregunta y respuesta tienen que ser una sola cosa; afuera se leían como un pie de página. Y el «sí» pesa más que el «no» porque es la acción que continúa: 1 contra 1,9 de ancho. */ .capoc-pt .cp-f-preg{margin:2px 0 0;font-size:12.5px;font-weight:700; color:var(--cap-tinta);text-align:center} .capoc-pt .cp-f-btr2{display:grid;grid-template-columns:1fr 1.9fr;gap:8px;margin-top:0} .capoc-pt .cp-f-btr2 .cp-f-bt{min-height:44px;font-size:13px} /* la tarjeta ahora contiene todo, así que respira un poco más */ .capoc-pt .cp-f-lei{gap:8px;padding:12px 12px 13px} /* 3 · EL TILDE. El círculo pasa a verde lleno con el tilde en blanco: antes era un trazo verde sobre fondo clarito y a 19 px se leía deforme. */ .capoc-pt .cp-f-tick{width:40px;height:40px;background:var(--cap-si); border:0;color:#fff} .capoc-pt .cp-f-tick svg{width:22px;height:22px;display:block} .capoc-pt .cp-f-vi{width:16px;height:16px;flex:none} /* ── CAP-ICONOS-RELLENO · 09-10 ───────────────────────────────────────────── ⛔⛔⛔ EL TILDE NO ESTABA MAL DIBUJADO: EL TEMA LO RELLENA. Fede lo reportó dos veces —*«el emoji se ve raro»*, *«se sigue viendo mal»*— y la primera vez lo redibujé, que no servía de nada. Medido recién: getComputedStyle(path).fill -> rgb(255,255,255) El tema tiene una regla que le pone `fill` a los `path`, y **una regla CSS le gana al atributo `fill="none"` del SVG**. Entonces el tilde se dibuja relleno ADEMÁS de trazado y sale un borrón con forma de garabato. ⭐ Y le pasaba lo mismo al icono de la cámara de la pastilla «Foto», que se veía como un rectángulo negro macizo. No lo había notado. 👉 Se arregla desde el CSS, que es el único lugar donde se le puede ganar. */ /* ⛔ Y NO ALCANZA CON path: la cámara tiene un (el lente) y el tema también se lo rellena. Medido: pathFill none pero circleFill rgb(26,26,26), o sea el lente salía como un disco macizo. Los tres iconos son de trazo puro, así que se apaga el relleno de TODO lo que tengan adentro. */ .capoc-pt .cp-cam *, .capoc-pt .cp-f-tick *, .capoc-pt .cp-f-vi *{fill:none !important} /* ── AIRE DEBAJO DE LA RESPUESTA ── Fede: *«tambien pasa debajo de los botones de elegir el talle xx, preguntar al asesor y avisarme»*. La respuesta tenía margen arriba y nada abajo, así que el botón quedaba pegado a la línea del desplegable. Mismo valor que el que ya le puse al bloque de la foto. */ .capoc-pt .cp-rta.on{margin:8px 0 16px} /* ── EL RENGLÓN DE «QUÉ HACER» ── Alto reservado para que cambiar de escala no mueva la rueda de lugar. */ .capoc-pt .cp-que{margin:0 0 11px;min-height:32px;text-align:center; font-size:12px;line-height:1.35;color:var(--cap-gris); display:flex;align-items:center;justify-content:center;padding:0 6px} /* ── CAP-ETIQUETA-COLUMNAS-0910 · la etiqueta SIEMPRE en columnas ─────────── El cuerpo lo calcula el motor midiendo el ancho real y lo deja en --cap-fit. Esta regla va al final y con 3 niveles para ganarle a .cuerpo-c1/c2/c3, que eran los tres escalones fijos que ya no alcanzan con 5 columnas. */ .capoc-pt .r-cols .r-v{font-size:var(--cap-fit, var(--cap-num))} /* con 5 columnas los rótulos también achican, o «US W» parte la columna */ .capoc-pt .r-cols .r-k{font-size:clamp(8px, calc(var(--cap-fit, 19px) * .52), 10.5px); letter-spacing:.06em} /* ⭐ los valores con barra («M10 / W12») pueden cortar ahí en vez de achicar todo el conjunto por culpa de uno solo */ .capoc-pt .r-cols .r-v{white-space:normal;overflow-wrap:anywhere;hyphens:none} /* la celda del argentino se adapta al número de columnas: ya salía de --n */ /* ── CAP-SEG-CINCO-0910 · la fila de escalas con CINCO pastillas ─────────── Fede, 09-10: *«en los que tienen 5 opciones en las tablas de talles como salomon […] se sale de la pantalla en movil»*. La causa son dos reglas que se suman: `.cp-seg{width:max-content}` hace que la fila crezca lo que haga falta, y `.cp-seg-b{min-width:72px}` la obliga a crecer. Con 5 pastillas son 72x5 + 4 huecos + 8 de padding = 388 px, y el panel en un teléfono mide 345. Antes nunca había pasado porque como máximo había 4 (tres escalas y la foto). 👉 La fila deja de crecer más allá del panel y las pastillas se reparten lo que hay. Siguen centradas cuando sobra lugar. */ /* ⭐ CAP-SEG-FOTO-APARTE · la fila ocupa el ancho entero y las escalas se reparten en partes IGUALES. Antes crecia hasta max-content y cada pastilla media segun su texto, asi que «US W» era mas ancha que «UK» sin ningun motivo. */ .capoc-pt .cp-seg{width:100%;max-width:none;margin:0 0 0} /* ⛔ min-width:0 las dejaba en 28-32 px de ancho: entraban, pero por debajo de los 44 que pide la regla 32. Con 44 de piso: 5x44 + 4 huecos + 8 de padding = 244, y el panel en un teléfono mide 373. Entra con lugar de sobra. */ .capoc-pt .cp-seg-b{min-width:44px;flex:1 1 0;padding:0 6px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ⭐⭐ CAP-SEG-FOTO-APARTE · EL BOTON DE LA FOTO ║ ║ Fede, 10-10, eligiendo entre cuatro propuestas: «Implementá la 3 que ║ ║ me encantó». ║ ║ El borde PUNTEADO no es decoracion: dice «esto no es una opcion mas ║ ║ de la fila de arriba, es otra cosa». Al elegirlo pasa a solido y se ║ ║ tiñe, igual que una pastilla elegida. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ⛔⛔ border-style NO SE PUEDE ANIMAR: un punteado no se convierte en solido con una transicion, cambia de golpe. 👉 Son DOS CAPAS superpuestas —una punteada y una solida— cruzando opacidades. Es la unica forma, y ademas deja el fondo verde entrando con el mismo tiempo. */ .capoc-pt .cp-foto-b{position:relative;display:flex;align-items:center;gap:9px;width:100%; min-height:46px;margin:7px 0 0;border:0;background:none;border-radius:11px; font:inherit;font-size:13px;font-weight:600;color:var(--cap-tinta);cursor:pointer; padding:0 12px;text-align:left;transition:transform .12s cubic-bezier(.22,1,.36,1)} .capoc-pt .cp-foto-b::before,.capoc-pt .cp-foto-b::after{ content:"";position:absolute;inset:0;border-radius:11px;transition:opacity .26s ease,border-color .16s} .capoc-pt .cp-foto-b::before{border:1px dashed var(--cap-borde);opacity:1} .capoc-pt .cp-foto-b::after{border:1px solid var(--cap-si);background:var(--cap-si-sw);opacity:0} .capoc-pt .cp-foto-b[aria-pressed="true"]::before{opacity:0} .capoc-pt .cp-foto-b[aria-pressed="true"]::after{opacity:1} .capoc-pt .cp-foto-b .cp-cam,.capoc-pt .cp-foto-b span{position:relative;z-index:1} @media (hover:hover){ .capoc-pt .cp-foto-b:hover::before{border-color:var(--cap-si-ln)} } .capoc-pt .cp-foto-b:active{transform:scale(.985)} /* ⛔ el color a mano: currentColor hereda lo que haya alrededor, y en esta barra el heredado es el rojo del tema (regla 90). */ .capoc-pt .cp-foto-b .cp-cam{width:19px;height:19px;flex:none;color:var(--cap-si)} /* ⛔ la regla vieja de un solo borde se fue: la reemplazan las dos capas de arriba */ .capoc-pt .cp-foto-b:focus-visible{outline:2px solid var(--cap-tinta);outline-offset:2px} /* una sola linea siempre: el alto del selector no puede cambiar segun el texto */ .capoc-pt .cp-foto-b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* con 5 ya no entra «Foto» al lado del icono a 14 px: baja el cuerpo, no el toque */ @media (max-width:460px){ .capoc-pt .cp-seg-b{font-size:13px;padding:0 5px;gap:4px} .capoc-pt .cp-cam{width:13px;height:13px} } /* ⚖️ CAP-DESCARGO · discreto pero legible: no es letra chica escondida, pero tampoco compite con la respuesta. */ /* ⭐ Fede, 10-10: «me gustaria que lo pongas en el mismo estilo que el texto de arriba, esta con una fuente mas chica y queda raro». El texto de arriba es .cp-ayuda-p: 12,5 px / 1,5. Ahora dicen exactamente lo mismo. */ .capoc-pt .cp-descargo{margin:0;font-size:12.5px;line-height:1.5;color:var(--cap-gris); padding:11px 0 0;border-top:1px solid var(--cap-linea)} /* ⛔ En el modo «solo la tabla» no hay equivalencias a la vista, asi que un descargo sobre equivalencias no viene a cuento. Antes quedaba escondido por estar DENTRO de .cp-ayuda; ahora que es hermano hay que decirlo. */ .capoc-pt.solo-tabla .cp-descargo{display:none} /* 🔴 Fede, 10-10: «en la tabla de talles veo que duplicaste el como medir tu pie». Y tenia razon: el enlace del PIE vivia dentro de .cp-ayuda, que en modo «solo la tabla» esta apagado, asi que se escondia solo. Al sacarlo de ahi para que fuera la tercera fila, quedo visible en los dos modos — y en modo tabla YA hay uno al pie de la tabla. 👉 Ahora se apaga a mano, igual que el descargo. ⛔ Es la misma familia que el descargo: sacar algo de adentro de un contenedor que estaba oculto le quita la regla que lo ocultaba, sin ningun error. */ .capoc-pt.solo-tabla .cp-medir-pie{display:none} /* CAP-PANEL-TALLES-FIN /* CAP-PT-NOCHE-INICIO */ /* ============================================================================ CAP-PT-NOCHE · el panel de talles, repintado para el escaner del local ---------------------------------------------------------------------------- El escaner (/compraenvivo) es una pagina NEGRA que no pasa por el tema. El panel es el MISMO de la ficha: mismo JS, mismo CSS, mismos datos. Lo unico que cambia es el color, y cambia por TOKENS, no reescribiendo reglas. La paleta NO se invento: esta medida sobre el :root del propio scan.tpl. --bg #0a0a0b . --surface #121214 . --surface-2 #17171a --line rgba(255,255,255,.09) . --line-strong rgba(255,255,255,.16) --t-2 #a2a2a9 . --green #04c44b . --red #E4000F EL UNICO COLOR QUE CAMBIA DE IDENTIDAD es el verde de "lo tenemos": el oliva #3B7D1E que eligio Fede el 07-10 da 1,9:1 sobre #121214 y no se lee. Sobre fondo negro va el verde que el escaner YA usa, #04c44b (7,6:1). En la ficha, que es blanca, el oliva se queda como esta. ORDEN Y ESPECIFICIDAD (regla 28 y 77): este bloque va DESPUES del bloque del panel y cada selector le suma la clase .cp-noche, asi que le gana a su regla base sin un solo !important. ============================================================================ */ /* los tokens: con esto solo ya se repinta casi todo el panel */ .capoc-pt.cp-noche{ color-scheme: only dark; /* barras de scroll y controles nativos */ --cap-tinta:#FFFFFF; --cap-gris:#A2A2A9; --cap-borde:rgba(255,255,255,.22); --cap-linea:rgba(255,255,255,.10); --cap-hueco:#1C1C20; --cap-hay:#04C44B; --cap-si:#04C44B; --cap-si-tx:#04C44B; --cap-si-sw:rgba(4,196,75,.12); --cap-si-ln:rgba(4,196,75,.34); } /* el velo: sobre una pagina ya negra, el de la ficha (46% de #141210) no separa nada. Aca tapa de verdad y deja ver que hay algo atras. */ .capoc-pt.cp-noche .capoc-pt-fondo{background:rgba(0,0,0,.66)} /* la hoja */ .capoc-pt.cp-noche .cp-panel{ background:#121214; border:1px solid rgba(255,255,255,.09); box-shadow:0 -18px 50px rgba(0,0,0,.6); } /* el boton de cerrar */ .capoc-pt.cp-noche .cp-x{background:#1C1C20;color:#fff} .capoc-pt.cp-noche .cp-x:hover{background:#26262c} /* ── la tabla ── El fondo del y del
    estan escritos a mano en el bloque base (#fff las dos veces), asi que los tokens no los alcanzan: van aca. El del NO es decorativo: es el que impide que las filas se vean atravesando el encabezado al scrollear (lo de Fede del 08-10, dos veces). Por eso va con el MISMO color opaco del panel, nunca transparente. */ .cp-noche table.cp-t{background:transparent} .cp-noche table.cp-t th{background:#121214;color:#A2A2A9} .cp-noche table.cp-t td{color:#FFFFFF} .cp-noche table.cp-t tr.sin td{color:#6E6E76} .cp-noche table.cp-t tr.aqui td{background:rgba(4,196,75,.12);color:#04C44B} /* el punto de "no hay": un borde gris oscuro sobre negro desaparece */ .cp-noche .cp-no{border-color:rgba(255,255,255,.3)} .cp-noche .cp-leyenda .cp-raya{color:#6E6E76} /* ── las dos sombras de scroll ── La de abajo es un degradado HACIA EL FONDO del panel: con #fff quedaba una banda blanca sobre negro. La de arriba era negro sobre blanco; sobre negro no existe, asi que se invierte a blanco muy tenue. */ .cp-noche .cp-sombra-t{background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,0))} .cp-noche .cp-sombra-b{background:linear-gradient(rgba(18,18,20,0),#121214)} /* el enlace del pie */ .capoc-pt.cp-noche .cp-medir-a{color:#FFFFFF} .capoc-pt.cp-noche .cp-medir-a:hover, .capoc-pt.cp-noche .cp-medir-a:active{background:#1C1C20} .capoc-pt.cp-noche .cp-fl{border-color:#A2A2A9} /* CAP-PT-NOCHE-FIN */