/* ============================================================ MODULO DRESS CODE — render dentro de la invitacion (3 vistas). Direccion visual: TARJETA de papel sobre el fondo de la invitacion, con el NOMBRE DEL ESTILO como protagonista, separador decorativo, tonos grandes y los consejos en su propia caja. Nada de texto suelto ni listas de vinetas. Colores 100% adaptativos via --dc-* (heredan de las --color-* de la invitacion: plantilla o paleta activa). Layout a 375px base (el canvas lo escala con transform:scale). ============================================================ */ .dresscode { width: 100%; box-sizing: border-box; padding: 0 16px; color: var(--dc-texto, #44403c); } /* ------------------------------------------------------------ TIPOGRAFIA Y COLOR — LOS DE LA PLANTILLA, no unos propios. CADENA DE FALLBACK (de mas concreto a mas generico): 1. --dc-fuente-titulo / --dc-color-titulo / --dc-fuente-texto / --dc-color-texto: el diseno que el admin poso en la plantilla para `campo:ceremonia` (encabezados) y para el nombre del lugar (cuerpo). Los emite el partial via EstiloModuloService, exactamente el mismo origen del que Regalos saca `regalos_titulo` y `regalos_descripcion`: asi el bloque cambia de cara solo al cambiar de plantilla. 2. Las vars de la invitacion (--fuente-titulos, --color-titulos...). Es lo que aplica en plantillas sin ese campo posado y, para el COLOR, SIEMPRE que hay paleta desde foto activa (el service no emite entonces el color canonico: manda la paleta, igual que en el resto del sistema). 3. El literal, por si el bloque se pinta fuera de una invitacion. OJO con los nombres de las vars de la invitacion: la de la fuente de texto es `--fuente` (`--fuente-texto` NO existe en ninguna vista). Mientras se pidio la inexistente, la declaracion entera era invalida y el texto caia a la fuente HEREDADA: dentro de la invitacion eso daba Montserrat de casualidad —la del body—, pero en el preview del modal daba la fuente del EDITOR (Inter) y el mismo bloque salia con dos tipografias distintas segun donde se mirase. Con el hub de tipografia activo, `.container2 *{font-family:X!important}` gana a todo esto y el bloque sigue al hub: es CRECIMIENTO sobre el diseno, igual que en Regalos. ------------------------------------------------------------ */ .dresscode { --dc-fuente: var(--dc-fuente-texto, var(--fuente, 'Montserrat')); --dc-fuente-t: var(--dc-fuente-titulo, var(--fuente-titulos, var(--fuente, 'Cormorant Garamond'))); --dc-titulo: var(--dc-color-titulo, var(--color-titulos, #44403c)); --dc-texto: var(--dc-color-texto, var(--color-texto, #44403c)); /* Lo que hay DETRAS del contenido. Sirve para los aros de los tonos, que tienen que fundirse con la superficie sobre la que se pintan. */ --dc-superficie: var(--dc-fondo, #fdfbf7); } /* ------------------------------------------------------------ LA ESCALA — ni un solo tamano en pixeles sueltos. EL PROBLEMA. El bloque hereda la familia de la plantilla —a menudo una caligrafica— pero sus tamanos estaban escritos para una sans. El pixel no es la unidad en la que se VE el texto: 13px de Pinyon Script miden 4,4px de altura de letra, la mitad que el cuerpo de la invitacion que tienen al lado. Medidos asi, TODOS los roles del bloque estaban al 55% de la altura optica del cuerpo de la invitacion. Por eso no se leia ninguno. EL ANCLA. Cada rol pasa a ser una FRACCION del `font_size` del elemento de la plantilla del que ya hereda su familia (--dc-a-titulo / --dc-a-texto, que emite EstiloModuloService). Ese numero es la calibracion de esa familia hecha por el admin y ya viene ajustada a altura optica: el encabezado ronda las 15-18px de altura de letra en las 20 plantillas, con Sacramento a 53,3px, Pinyon a 45 y Spectral a 35. No hay que medir ninguna fuente. LOS FALLBACKS SON PARES COMPLETOS, nunca mitades cruzadas. El titulo cae a --titulo2-size con --fuente-titulos; el texto a --normal-size con --fuente. Familia y tamano del mismo sitio SIEMPRE: darle a un texto en Pinyon el tamano calibrado para Cormorant lo deja igual de descompensado que no tocar nada. EL TECHO SALE SOLO. Todos los ratios son < 1, asi que ningun texto del bloque puede alcanzar al campo de la invitacion del que cuelga. No hace falta ningun limite superior: lo garantiza la forma de la formula. EL ORDEN, POR CONSTRUCCION. Dos roles de familias distintas NO pueden tener su orden garantizado con ratios fijos: la relacion entre la altura optica del encabezado y la del cuerpo cambia con la plantilla (1,25 en Duna frente a 1,89 en Olive), asi que el ratio que ordena en una desordena en otra —eso rompia el orden en 5 de las 6 plantillas de prueba, con el titulo del consejo saliendo mas pequeno que su propia lista—. Por eso SOLO el nombre del estilo usa la fuente de titulo. Todo lo demas comparte la de cuerpo y su ancla, y entonces el orden lo decide unicamente el ratio: 0.92 > 0.86 > 0.84 > 0.80 > 0.76. Comprobado en las 20 plantillas: el titulo queda por encima de la linea con un margen minimo de 1,14x, y el rol mas pequeno del bloque no baja del 76% de la altura de letra del cuerpo de la invitacion. Verificado en el navegador con las fuentes reales cargadas, midiendo el bounding box del glifo — no la tabla OS/2 de la fuente, que en 6 de las 60 familias del catalogo declara valores falsos (Courgette dice tener una x-height de 0,055em cuando su glifo mide 0,505em). ------------------------------------------------------------ */ .dresscode { --dc-a-t: var(--dc-a-titulo, var(--titulo2-size, 30px)); --dc-a-x: var(--dc-a-texto, var(--normal-size, 18px)); } /* ------------------------------------------------------------ HALO DE LEGIBILIDAD — el MISMO que llevan los campos de la invitacion. Lo emite `css_variables_invitacion()` en helpers.php para .campo-texto-colocado y la cuenta atras: ocho sombras del color del FONDO repartidas alrededor de la letra. Sobre fondo limpio es invisible —la sombra es del mismo color que lo que hay detras— y solo aparece donde el texto se cruza con un patron, una foto o un decorativo, que es justo donde hace falta. El bloque quedaba fuera de ese CSS porque sus textos no son campos colocados: son

y

dentro del modulo. Aqui se replica con la misma receta. EL COLOR DEL HALO ES LA SUPERFICIE, NO --color-fondo. En los campos coinciden porque un campo siempre se pinta sobre el fondo de la invitacion, pero el bloque puede ir sobre la tarjeta translucida del modo resaltado o sobre la banda clara de la lamina. Un halo del color del fondo sobre una superficie mas clara se ve como una mancha sucia alrededor de la letra, que es lo contrario de lo que se busca. --dc-superficie ya significa "lo que hay detras" y cambia sola en cada modo (la usan los aros de los tonos). FUERA de aqui: la burbuja de configurar (tiene fondo propio y el CSS de los campos tambien la excluye) y el texto de lector de pantalla. ------------------------------------------------------------ */ .dresscode-kicker, .dresscode-titulo, .dresscode-linea, .dresscode-mensaje, .dresscode-nota-color, .dresscode-consejo-titulo, .dresscode-consejo-texto, .dresscode-inspiracion-label, .dresscode-vacio-texto { text-shadow: 0 0 4px var(--dc-superficie, #fdfbf7), 0 0 8px var(--dc-superficie, #fdfbf7), 1px 1px 2px var(--dc-superficie, #fdfbf7), -1px -1px 2px var(--dc-superficie, #fdfbf7), 2px 0 3px var(--dc-superficie, #fdfbf7), -2px 0 3px var(--dc-superficie, #fdfbf7), 0 2px 3px var(--dc-superficie, #fdfbf7), 0 -2px 3px var(--dc-superficie, #fdfbf7); } /* ------------------------------------------------------------ LA TARJETA — dos presentaciones, una decision de la pareja. INTEGRADO (por defecto): sin fondo, sin sombra y sin recuadro. El dress code se lee como una parte mas de la invitacion, igual que el resto de modulos. RESALTADO: la misma tarjeta levantada sobre un velo BLANCO TRANSLUCIDO (no un color opaco): el fondo de la invitacion —patron, foto o degradado— se sigue viendo por detras, que es justo lo que se pide. Funciona sobre fondos claros y oscuros sin fijar ningun color a mano. El PADDING es el mismo en los dos modos a proposito: los margenes negativos de .dresscode-inspiracion dependen de el (ver nota alli). ------------------------------------------------------------ */ .dresscode-card { position: relative; padding: 30px 22px 26px; text-align: center; } .dresscode--resaltado { --dc-superficie: color-mix(in srgb, var(--dc-fondo, #fdfbf7) 82%, #fff 18%); } .dresscode--resaltado .dresscode-card { border-radius: 18px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px -22px rgba(0, 0, 0, 0.28); } @supports not (color: color-mix(in srgb, red 50%, white)) { .dresscode--resaltado { --dc-superficie: rgba(255, 255, 255, 0.42); } } /* ------------------------------------------------------------ ETIQUETA — versalitas pequenas. Dice QUE es el bloque; el protagonista es el nombre del estilo, no esto. Fuente y color de TITULO, como el nombre del estilo al que encabeza. Antes iba en el color de ACENTO de la plantilla y eso no lo decidia nadie: en Azur, Elegance o Duna el acento es un turquesa (#93c2b9) que no aparece en ningun otro texto de la invitacion, asi que el bloque tenia un color propio que ninguna pareja habia elegido. ------------------------------------------------------------ */ .dresscode-kicker { margin: 0 0 8px; color: var(--dc-titulo, #44403c); /* Fuente de CUERPO, no la de titulo. Es lo que permite garantizar el orden (ver la nota de LA ESCALA) y ademas resuelve solo el problema que ya obligo a quitarle las versalitas: la mitad de las plantillas ponen una manuscrita en los encabezados y "Cómo vestir" en cursiva a tamaño de etiqueta no hay quien lo lea. Sigue siendo tipografia de la plantilla, y el color de titulo la mantiene emparentada con el nombre del estilo. */ font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.76); font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; opacity: 0.85; } /* ------------------------------------------------------------ NOMBRE DEL ESTILO — el elemento con mas peso de todo el bloque. ------------------------------------------------------------ */ .dresscode-titulo { margin: 0 0 10px; color: var(--dc-titulo, #44403c); font-family: var(--dc-fuente-t), Georgia, serif; /* EL UNICO rol que luce la fuente de los encabezados, y el unico que se mide contra el ancla de titulo. El !important es OBLIGATORIO y no es defensivo: las 3 vistas declaran un `h2{font-size:var(--titulo2-size)!important}` global, y --titulo2-size vale 30 en las 20 plantillas porque nadie ha tocado nunca est_plantilla_base.tamano_titulo_2. Sin el !important, el nombre del estilo se pintaba a poco mas de la mitad del "Ceremonia" que tiene justo encima, con su misma fuente. Ese ancla era falsa: la de verdad es el font_size del elemento (53,3 en Olive, 45 en Elegance, 35 en Azur). */ font-size: calc(var(--dc-a-t) * 0.85) !important; font-weight: 400; /* 1.28, no 1.15: las caligraficas tienen ascendentes y descendentes muy largos y a este tamaño un titulo de dos lineas se MONTABA consigo mismo (Sacramento a 42px). Una linea superpuesta es tan ilegible como una diminuta, y no sale en ninguna comparacion de tamaños. */ line-height: 1.28; letter-spacing: -0.01em; overflow-wrap: break-word; } /* La linea accionable: si el invitado solo lee esto, ya sabe que ponerse. Es el texto de cuerpo mas importante del bloque, asi que se lleva el ratio mas alto de su familia. */ .dresscode-linea { margin: 0 auto; max-width: 280px; color: var(--dc-texto, #44403c); font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.92); font-weight: 400; line-height: 1.5; opacity: 0.95; } /* ------------------------------------------------------------ SEPARADOR — marca el cambio de voz: de la etiqueta al mensaje personal. En el color de los TITULOS: es un adorno del encabezado, no una pieza con color propio. ------------------------------------------------------------ */ .dresscode-sep { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px auto 18px; max-width: 190px; color: var(--dc-titulo, #44403c); } .dresscode-sep-linea { flex: 1 1 auto; height: 1px; background: currentColor; opacity: 0.35; } .dresscode-sep-icono { flex: 0 0 auto; width: 15px; height: 15px; opacity: 0.75; } /* ------------------------------------------------------------ MENSAJE — voz de la pareja. Lineas cortas, aire generoso. ------------------------------------------------------------ */ .dresscode-mensaje { margin: 0 auto; max-width: 290px; color: var(--dc-texto, #44403c); font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.86); line-height: 1.7; opacity: 0.92; overflow-wrap: break-word; } /* ------------------------------------------------------------ TONOS — circulos grandes, borde interior suave (para que los tonos muy claros como el marfil sigan viendose) y sombra corta. ------------------------------------------------------------ */ .dresscode-tonos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; } /* El aro interior se pinta con la SUPERFICIE del bloque (el fondo de la invitacion en modo integrado, el papel de la tarjeta si esta resaltado): asi parece recortado en el papel en vez de un anillo blanco pegado encima. */ .dresscode-tono { width: 42px; height: 42px; border-radius: 50%; background: var(--dc-tono, #ccc); box-shadow: inset 0 0 0 3px var(--dc-superficie, #fdfbf7), inset 0 0 0 4px rgba(0, 0, 0, 0.07), 0 3px 8px -3px rgba(0, 0, 0, 0.25); } /* Sin @supports propio: --dc-superficie ya trae su fallback sin color-mix. */ /* Reservado: tachado en diagonal. Comunica "este no" sin una palabra escrita. Linea BLANCA con halo oscuro, no `mix-blend-mode: difference`. El difference invierte el color de debajo: sobre blanco y negro funcionaba, pero sobre un burdeos pintaba una raya turquesa y sobre un esmeralda una rosa — parecia un fallo de color, no una prohibicion. El halo hace que la linea se lea sobre CUALQUIER tono de la paleta. */ .dresscode-tono--reservado { position: relative; overflow: hidden; } .dresscode-tono--reservado::after { content: ""; position: absolute; inset: 0; --dc-tacha: 1.4px; /* mitad del grosor de la linea blanca */ --dc-tacha-halo: 2.8px; /* mitad del grosor del halo oscuro */ background: linear-gradient(135deg, transparent calc(50% - var(--dc-tacha)), rgba(255, 255, 255, 0.97) calc(50% - var(--dc-tacha)), rgba(255, 255, 255, 0.97) calc(50% + var(--dc-tacha)), transparent calc(50% + var(--dc-tacha))), linear-gradient(135deg, transparent calc(50% - var(--dc-tacha-halo)), rgba(0, 0, 0, 0.45) calc(50% - var(--dc-tacha-halo)), rgba(0, 0, 0, 0.45) calc(50% + var(--dc-tacha-halo)), transparent calc(50% + var(--dc-tacha-halo))); } /* Version pequena para la banda de la lamina: mismo lenguaje, menos peso. Aqui el anillo va de TINTA, no de --dc-superficie como el grande: a 26px un aro de 3px se come el circulo, y sin ningun borde el blanco y el marfil se quedaban sin silueta — parecian dos diagonales flotando sin circulo. Un hilo fino de tinta les devuelve el borde sobre cualquier superficie clara (la banda ya no pinta fondo: debajo esta el papel de la tarjeta o el fondo de la invitacion) y no molesta a los tonos oscuros, que ya recortan solos. */ .dresscode-tono--mini { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 5px -2px rgba(0, 0, 0, 0.3); } /* A 26px la linea se afina un punto para que no se coma el circulo. */ .dresscode-tono--mini.dresscode-tono--reservado::after { --dc-tacha: 1.2px; --dc-tacha-halo: 2.4px; } .dresscode-nota-color { margin: 14px auto 0; max-width: 280px; color: var(--dc-texto, #44403c); font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.76); font-style: italic; line-height: 1.55; opacity: 0.75; } /* La misma nota cuando acompana a los tonos DE LA LAMINA: pegada a los circulos (el gap de la banda ya da el aire). MISMO TAMAÑO que la nota suelta, a proposito. Era un punto mas pequena y con eso se convertia en el unico texto del bloque por debajo del liston de legibilidad en 4 de las 6 plantillas de prueba. Que ahi la banda sea estrecha se resuelve con el ancho y la opacidad, no encogiendo la letra. */ .dresscode-nota-color--lamina { margin: 0; max-width: 300px; line-height: 1.45; opacity: 0.7; } /* ------------------------------------------------------------ CONSEJO — UNA caja para todos los avisos: titulo una sola vez arriba y dentro la lista, cada linea con su icono ilustrado. Es el contenido que de verdad cambia lo que el invitado se pone (calzado, abrigo, tejidos), asi que se le da entidad en vez de una vineta mas. El aro fino que la delimita va en el color de los TITULOS al 18%: la caja pertenece al bloque, no a una paleta propia. SIN PANEL cuando el bloque va integrado: un rectangulo mas claro flotando sobre la invitacion delataria la tarjeta que precisamente se ha quitado. El aro basta para que se siga leyendo como una caja. ------------------------------------------------------------ */ .dresscode-consejo { margin: 22px 0 0; padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-titulo, #44403c) 18%, transparent); text-align: left; } /* Translucida, como la tarjeta que la contiene: un panel opaco DENTRO de una tarjeta que deja ver el fondo se lee como un parche pegado encima. */ .dresscode--resaltado .dresscode-consejo { background: rgba(255, 255, 255, 0.3); } @supports not (color: color-mix(in srgb, red 50%, white)) { .dresscode-consejo { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); } } .dresscode-consejo-titulo { margin: 0 0 10px; color: var(--dc-titulo, #44403c); /* MISMA FAMILIA que la lista que encabeza, y por eso mismo la de cuerpo. Este es el par que mas se nota cuando el orden se rompe: un encabezado mas pequeno que su propio contenido, a un centimetro de distancia. Con familias distintas no habia ratio que lo garantizara en las 20 plantillas; compartiendola, basta con 0.84 > 0.80. Se distingue por PESO y por el color de titulo, que es como se hace. */ font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.84); /* 500, nunca 600 ni 700. Casi ninguna caligrafica del catalogo trae mas de un peso, asi que el navegador finge la negrita ensanchando el glifo y el texto se convierte en una mancha. */ font-weight: 500; line-height: 1.3; } .dresscode-consejo-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .dresscode-consejo-item { display: flex; align-items: center; gap: 12px; } /* Separador finisimo entre avisos: los agrupa sin convertirlos en una tabla. */ .dresscode-consejo-item + .dresscode-consejo-item { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--dc-titulo, #44403c) 14%, transparent); } @supports not (color: color-mix(in srgb, red 50%, white)) { .dresscode-consejo-item + .dresscode-consejo-item { border-top-color: rgba(0,0,0,0.06); } } /* El color solo lo usa la marca sobria de respaldo (SVG en currentColor) mientras el consejo no tenga su icono ilustrado. */ .dresscode-consejo-icono { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--dc-titulo, #44403c); } .dresscode-consejo-icono svg { width: 30px; height: 30px; } .dresscode-consejo-icono img { width: 40px; height: 40px; object-fit: contain; } .dresscode-consejo-texto { min-width: 0; margin: 0; color: var(--dc-texto, #44403c); font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.80); line-height: 1.55; opacity: 0.9; } /* ------------------------------------------------------------ INSPIRACION — UNA foto, SIEMPRE visible. NO usar
ni nada que cambie la altura despues del primer pintado: el auto-calibrado mide el bloque una vez, y si luego crece, la foto se solapa con la seccion siguiente. El alto tiene que ser el real desde el principio; quien no quiera inspiracion, la quita desde la configuracion. A SANGRE dentro de la tarjeta. Antes la foto sumaba el padding del bloque (16px) + el de la tarjeta (22px) a cada lado y quedaba diminuta en el centro. Ahora la lamina anula el padding de la tarjeta y ocupa su ancho completo, como la imagen de portada; la separacion entre bloques sigue siendo la del padding lateral de .dresscode, que no se toca. Los margenes negativos DEBEN coincidir con el padding de .dresscode-card (30px 22px 26px). Si se cambia uno, hay que cambiar el otro. ------------------------------------------------------------ */ .dresscode-inspiracion { margin: 24px -22px -26px; } /* Etiqueta, igual que el kicker y con el mismo trato: fuente de cuerpo, sin versalitas ni tracking ancho. */ .dresscode-inspiracion-label { margin: 0 22px 12px; color: var(--dc-titulo, #44403c); font-family: var(--dc-fuente), sans-serif; font-size: calc(var(--dc-a-x) * 0.76); font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; opacity: 0.8; } /* La lamina: foto + banda de tonos como UNA sola pieza. Con el bloque RESALTADO las esquinas de abajo siguen el radio de la tarjeta, para que la cierre sin costura. Integrado no hay tarjeta que cerrar: la lamina es una pieza suelta y se redondea por los cuatro lados. SIN FONDO PROPIO, Y ESTO NO ES UN OLVIDO. La lamina vive DENTRO de .dresscode-card (los margenes negativos solo le comen el padding, no la sacan de la tarjeta), asi que la base ya la decide la tarjeta y el fondo del bloque tiene UNA sola fuente de verdad: integrado no se ve nada, resaltado se ve el velo blanco translucido de .dresscode-card. Tenia `color-mix(--dc-fondo 70%, #fff 30%)`, que se pintaba en los dos modos y encima OPACO: era un parche claro que ignoraba el ajuste de la pareja y que sobre una invitacion con foto o patron de fondo tapaba justo lo que se tiene que ver por detras (--dc-fondo es --color-fondo, un color plano que en esas plantillas no aparece en ningun sitio). */ .dresscode-lamina { position: relative; margin: 0; overflow: hidden; border-radius: 18px; } .dresscode--resaltado .dresscode-lamina { border-radius: 0 0 18px 18px; } /* LA FOTO SE VE ENTERA. El hueco toma la proporcion REAL del fichero (--dc-foto-ratio, que calcula DressCodeService::ratioFoto y escribe el partial), asi que `cover` no llega a recortar nada. El cuadrado fijo valia mientras la unica fuente era la IA (genera 1:1), pero la pareja tambien sube su foto: una vertical perdia cabeza y pies, una apaisada perdia medio ancho. El fallback sigue siendo 1:1 para lo que no se puede medir (una URL remota) y para el preview del editor. El ratio va en el CSS, NO en `height:auto`: asi el alto del bloque es el definitivo antes de que la imagen se descargue. El auto-calibrado mide una sola vez; si el alto creciera despues, la foto se solaparia con la seccion siguiente. */ .dresscode-lamina-foto { display: block; width: 100%; aspect-ratio: var(--dc-foto-ratio, 1); object-fit: cover; } /* ------------------------------------------------------------ BANDA DE TONOS — al pie de la foto, dentro de la misma lamina. Dos grupos separados por una linea: a la izquierda los tonos que encajan, a la derecha los reservados, cruzados por una diagonal. CERO texto y CERO emojis: la diagonal es el simbolo universal de "este no" y funciona en los 9 idiomas sin traducir nada. TAMPOCO PINTA FONDO, por lo mismo que la lamina (ver la nota de alli): la banda era la superficie mas blanca del bloque (45% fondo + 55% blanco) y, al ir justo debajo de la foto, era EL sitio donde se veia el parche. Lo que la separa de la foto es la linea de arriba, no un color: una linea basta y funciona igual en los dos modos. ------------------------------------------------------------ */ .dresscode-lamina-tonos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 16px 14px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-titulo, #44403c) 20%, transparent); } @supports not (color: color-mix(in srgb, red 50%, white)) { .dresscode-lamina-tonos { box-shadow: inset 0 1px 0 rgba(0,0,0,0.06); } } /* Los circulos, en su fila. La banda es una COLUMNA (circulos + nota) desde que la nota de color viaja pegada a los tonos: hablar de unos tonos que estan 400px mas arriba no lo entiende nadie. */ .dresscode-lamina-tonos-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 100%; } .dresscode-tonos-grupo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 0; list-style: none; } /* El separador es lo que convierte una fila de circulos en DOS grupos: sin el, la diagonal se lee como decoracion y no como prohibicion. */ .dresscode-tonos-sep { flex: 0 0 auto; width: 1px; height: 22px; background: currentColor; color: var(--dc-texto, #44403c); opacity: 0.22; } /* ------------------------------------------------------------ BUBBLE "Configurar" (SOLO editor) EN FLUJO: ocupa su sitio y empuja, nunca pisa el contenido. Los !important vencen los estilos globales de