/* ================================================== MODO OSCURO · IMPRIMI2 Todo el modo oscuro vive aquí: el modo claro sigue siendo exactamente el de siempre. tema.js pone data-tema="oscuro" en (por el sistema o por el botón de la cabecera) y estas reglas se activan. Cada regla va con :where([data-tema="oscuro"]) para que pese lo mismo que la original del componente: como este archivo se carga el último, gana a la regla base, pero los :hover, :checked, etc. que no se tocan aquí siguen funcionando igual. Criterio: · Fondo casi negro y superficies algo más claras. · Lo que en claro es texto o línea negra pasa a claro. · Los botones negros se invierten (fondo claro, texto negro) para seguir siendo lo más visible. · Los bloques negros de información siguen oscuros, con un borde para no fundirse. · Los bloques de marca (rosa, amarillo, cyan, beige) no cambian: siguen con texto negro. · El lienzo del personalizador sigue claro para que los colores del producto se vean fieles. Si añades un componente con colores escritos a mano (#111, #fff, #666...), añade aquí su versión oscura. ================================================== */ html[data-tema="oscuro"] { color-scheme: dark; /* Variables de style.css */ --blanco: #141414; --texto: #efeee9; --gris: #2a2a2a; /* Paleta oscura */ --osc-superficie: #1d1d1d; --osc-suave: #242424; --osc-hover: #2e2e2e; --osc-bloque: #1f1f1f; --osc-borde: #3a3a3a; --osc-borde-campo: #5c5c5c; --osc-linea: #d6d4cf; --osc-texto-suave: #b5b4ae; --osc-texto-tenue: #93928d; --osc-tinta: #efeee9; --osc-sobre-tinta: #111111; /* Texto de color legible sobre fondo oscuro */ --osc-rosa-texto: #ff5c9d; --osc-verde-texto: #3fd0dd; --osc-amarillo-texto: #ffd84d; } /* Variables propias de fiesta.css */ :where([data-tema="oscuro"]) .pagina-fiesta { --fiesta-rosa-texto: var(--osc-rosa-texto); --fiesta-borde: #444444; --fiesta-gris-texto: var(--osc-texto-suave); --fiesta-fondo-suave: var(--osc-suave); } /* ================================================== PÁGINA, PORTADA Y PIE (style.css) ================================================== */ :where([data-tema="oscuro"]) .cabecera-principal { box-shadow: 0 1px 0 #262626; } /* Bloques de marca: el texto heredado sería claro */ :where([data-tema="oscuro"]) .bloque-marca, :where([data-tema="oscuro"]) .cierre-texto { color: #111111; } :where([data-tema="oscuro"]) .cierre-productos { background: var(--osc-superficie); } :where([data-tema="oscuro"]) .footer-redes a:nth-child(3) { background: #3a3a3a; } /* Flechas del carrusel de index.html */ :where([data-tema="oscuro"]) .carrusel-flecha { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); } :where([data-tema="oscuro"]) .whatsapp-flotante { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } /* ================================================== FONDOS DE PÁGINA CON COLOR PROPIO ================================================== */ :where([data-tema="oscuro"]) .pagina-empresas, :where([data-tema="oscuro"]) .pagina-historial { background: var(--blanco); color: var(--texto); } :where([data-tema="oscuro"]) .carrito-lateral { background: #171717; } :where([data-tema="oscuro"]) .carrito-overlay { background: rgba(0, 0, 0, 0.6); } /* ================================================== TEXTO ================================================== */ /* Negro → claro */ :where([data-tema="oscuro"]) .revision-cabecera > strong, :where([data-tema="oscuro"]) .revision-cara-titulo > strong, :where([data-tema="oscuro"]) .revision-cara-fila strong, :where([data-tema="oscuro"]) .revision-notas span, :where([data-tema="oscuro"]) .revision-lateral strong, :where([data-tema="oscuro"]) .item-cantidad button, :where([data-tema="oscuro"]) .seguir-comprando, :where([data-tema="oscuro"]) .cerrar-carrito, :where([data-tema="oscuro"]) .descuento-fila input, :where([data-tema="oscuro"]) .perfil-opcion, :where([data-tema="oscuro"]) .aviso-pedidos-invitado, :where([data-tema="oscuro"]) .cuenta-formulario-panel input, :where([data-tema="oscuro"]) .cuenta-mensaje-panel input, :where([data-tema="oscuro"]) .perfil-datos input, :where([data-tema="oscuro"]) #form-empresas input[type="email"], :where([data-tema="oscuro"]) #form-empresas textarea, :where([data-tema="oscuro"]) .historial-item-precio, :where([data-tema="oscuro"]) .historial-cara p strong, :where([data-tema="oscuro"]) .historial-produccion-pasos .activo, :where([data-tema="oscuro"]) .legal-indice a, :where([data-tema="oscuro"]) .legal-destacado.legal-aviso strong, :where([data-tema="oscuro"]) .caras-producto button, :where([data-tema="oscuro"]) .lienzo-herramientas button, :where([data-tema="oscuro"]) .control-bloque select, :where([data-tema="oscuro"]) .control-seccion select, :where([data-tema="oscuro"]) .control-seccion input[type="text"], :where([data-tema="oscuro"]) .control-seccion textarea, :where([data-tema="oscuro"]) .color-elegido b, :where([data-tema="oscuro"]) .talla-pastilla, :where([data-tema="oscuro"]) .cantidad-personalizador button, :where([data-tema="oscuro"]) .archivo-nombre, :where([data-tema="oscuro"]) .rango-valor, :where([data-tema="oscuro"]) .rango-paso, :where([data-tema="oscuro"]) .producto-select, :where([data-tema="oscuro"]) .selector-producto, :where([data-tema="oscuro"]) .cantidad-producto button, :where([data-tema="oscuro"]) .resenas-media, :where([data-tema="oscuro"]) .resena-campo input[type="text"], :where([data-tema="oscuro"]) .resena-campo textarea, :where([data-tema="oscuro"]) .stock-carrito-aviso, :where([data-tema="oscuro"]) .stock-carrito-tope, :where([data-tema="oscuro"]) .tienda-filtros button, :where([data-tema="oscuro"]) .tienda-buscador-campo input, :where([data-tema="oscuro"]) .tienda-buscador-limpiar, :where([data-tema="oscuro"]) .fiesta-chip-caja, :where([data-tema="oscuro"]) .fiesta-campo input, :where([data-tema="oscuro"]) .fiesta-campo select, :where([data-tema="oscuro"]) .fiesta-campo textarea, :where([data-tema="oscuro"]) .fiesta-producto select, :where([data-tema="oscuro"]) .fiesta-producto .item-cantidad input, :where([data-tema="oscuro"]) .fiesta-talla input { color: var(--texto); } /* Gris medio (#555, #666, #777...) → gris claro */ :where([data-tema="oscuro"]) .revision-cara-titulo > span, :where([data-tema="oscuro"]) .revision-cara-fila span, :where([data-tema="oscuro"]) .revision-colocacion summary, :where([data-tema="oscuro"]) .revision-lateral span, :where([data-tema="oscuro"]) .carrito-encabezado, :where([data-tema="oscuro"]) .item-info p, :where([data-tema="oscuro"]) .item-eliminar, :where([data-tema="oscuro"]) .carrito-vacio p, :where([data-tema="oscuro"]) .vaciar-carrito, :where([data-tema="oscuro"]) .item-lateral p, :where([data-tema="oscuro"]) .descuento-etiqueta, :where([data-tema="oscuro"]) .cuenta-cabecera > span, :where([data-tema="oscuro"]) .cuenta-cargando, :where([data-tema="oscuro"]) .cuenta-tab, :where([data-tema="oscuro"]) .cuenta-formulario-panel > p, :where([data-tema="oscuro"]) .cuenta-mensaje-panel > p, :where([data-tema="oscuro"]) .cuenta-enlace, :where([data-tema="oscuro"]) .perfil-email, :where([data-tema="oscuro"]) .perfil-opcion p, :where([data-tema="oscuro"]) .cerrar-sesion, :where([data-tema="oscuro"]) .empresas-intro, :where([data-tema="oscuro"]) .empresas-formulario-intro, :where([data-tema="oscuro"]) .empresas-confirmacion p, :where([data-tema="oscuro"]) .fiesta-cargando, :where([data-tema="oscuro"]) .fiesta-confirmacion p, :where([data-tema="oscuro"]) .historial-intro, :where([data-tema="oscuro"]) .historial-estado p, :where([data-tema="oscuro"]) .historial-dato span, :where([data-tema="oscuro"]) .historial-item-datos p, :where([data-tema="oscuro"]) .historial-cara-cabecera span, :where([data-tema="oscuro"]) .historial-cara p, :where([data-tema="oscuro"]) .historial-notas, :where([data-tema="oscuro"]) .historial-produccion-cabecera span, :where([data-tema="oscuro"]) .repetir-aviso-lista li, :where([data-tema="oscuro"]) .legal-cabecera .legal-actualizado, :where([data-tema="oscuro"]) .pago-texto, :where([data-tema="oscuro"]) .pedido-confirmado-fila span, :where([data-tema="oscuro"]) .pedido-producto p, :where([data-tema="oscuro"]) .control-bloque > label, :where([data-tema="oscuro"]) .control-seccion > label, :where([data-tema="oscuro"]) .color-elegido, :where([data-tema="oscuro"]) .control-rango > label, :where([data-tema="oscuro"]) .texto-controles > div > label, :where([data-tema="oscuro"]) .aviso-preview, :where([data-tema="oscuro"]) .producto-cargando, :where([data-tema="oscuro"]) .producto-categoria-pagina, :where([data-tema="oscuro"]) .producto-descripcion-pagina, :where([data-tema="oscuro"]) .resenas-cargando, :where([data-tema="oscuro"]) .resenas-vacio, :where([data-tema="oscuro"]) .resena-texto, :where([data-tema="oscuro"]) .resenas-aviso, :where([data-tema="oscuro"]) .resena-campo label, :where([data-tema="oscuro"]) .resena-etiqueta-campo, :where([data-tema="oscuro"]) .stock-carrito-aviso small, :where([data-tema="oscuro"]) .tienda-introduccion, :where([data-tema="oscuro"]) .tienda-cargando, :where([data-tema="oscuro"]) .tienda-producto-descripcion, :where([data-tema="oscuro"]) .tienda-vacia p, :where([data-tema="oscuro"]) .tienda-buscador-icono, :where([data-tema="oscuro"]) .tienda-buscador-resumen, :where([data-tema="oscuro"]) .tienda-stock-agotado, :where([data-tema="oscuro"]) .footer-legal a, :where([data-tema="oscuro"]) .footer-copyright { color: var(--osc-texto-suave); } /* Estas llevan !important en carrito-personalizacion.css */ :where([data-tema="oscuro"]) .revision-notas p, :where([data-tema="oscuro"]) .revision-aviso { color: var(--osc-texto-suave) !important; } /* La pestaña activa va después de .cuenta-tab para ganarle */ :where([data-tema="oscuro"]) .cuenta-tab-activo { color: var(--texto); } /* Gris claro (#888, #999...) → gris tenue */ :where([data-tema="oscuro"]) .cuenta-formulario-panel small, :where([data-tema="oscuro"]) .empresas-contador, :where([data-tema="oscuro"]) .fiesta-contador, :where([data-tema="oscuro"]) .fiesta-progreso-etapas, :where([data-tema="oscuro"]) .historial-produccion-pasos > div, :where([data-tema="oscuro"]) .lienzo-pista, :where([data-tema="oscuro"]) .seccion-nota, :where([data-tema="oscuro"]) .zona-soltar em, :where([data-tema="oscuro"]) .archivo-peso, :where([data-tema="oscuro"]) .pago-aviso, :where([data-tema="oscuro"]) .resenas-total, :where([data-tema="oscuro"]) .resenas-sin-datos, :where([data-tema="oscuro"]) .resena-fecha, :where([data-tema="oscuro"]) .resena-nota, :where([data-tema="oscuro"]) .tienda-sin-imagen, :where([data-tema="oscuro"]) .tienda-producto-categoria, :where([data-tema="oscuro"]) .fiesta-miniatura { color: var(--osc-texto-tenue); } :where([data-tema="oscuro"]) .historial-produccion-pasos .activo, :where([data-tema="oscuro"]) .fiesta-progreso-etapas li.actual { color: var(--texto); } /* Textos de color que en claro son muy oscuros */ :where([data-tema="oscuro"]) .empresas-archivo-nombre, :where([data-tema="oscuro"]) .empresas-mensaje.exito, :where([data-tema="oscuro"]) .descuento-mensaje-exito, :where([data-tema="oscuro"]) .resumen-descuento strong, :where([data-tema="oscuro"]) .mensaje-cuenta.exito, :where([data-tema="oscuro"]) .repetir-aviso-titulo, :where([data-tema="oscuro"]) .mensaje-producto, :where([data-tema="oscuro"]) .producto-stock[data-estado="disponible"], :where([data-tema="oscuro"]) .personalizador-stock[data-estado="disponible"] { color: var(--osc-verde-texto); } :where([data-tema="oscuro"]) .producto-stock[data-estado="bajo"], :where([data-tema="oscuro"]) .personalizador-stock[data-estado="bajo"], :where([data-tema="oscuro"]) .tienda-stock-bajo { color: var(--osc-amarillo-texto); } :where([data-tema="oscuro"]) .producto-stock[data-estado="agotado"], :where([data-tema="oscuro"]) .personalizador-stock[data-estado="agotado"], :where([data-tema="oscuro"]) .historial-produccion-aviso { color: var(--osc-rosa-texto); } /* stock-visual.css los marca con !important */ :where([data-tema="oscuro"]) .stock-item-estado[data-estado="ok"] { color: var(--osc-verde-texto) !important; } :where([data-tema="oscuro"]) .stock-item-estado[data-estado="bajo"], :where([data-tema="oscuro"]) .stock-item-estado[data-estado="limite"] { color: var(--osc-amarillo-texto) !important; } :where([data-tema="oscuro"]) .stock-item-estado[data-estado="agotado"] { color: var(--osc-rosa-texto) !important; } /* ================================================== FONDOS ================================================== */ /* Blanco → superficie oscura (tarjetas, campos, paneles) */ :where([data-tema="oscuro"]) .revision-cara, :where([data-tema="oscuro"]) .descuento-fila input, :where([data-tema="oscuro"]) .cuenta-formulario-panel input, :where([data-tema="oscuro"]) .cuenta-mensaje-panel input, :where([data-tema="oscuro"]) .perfil-datos input, :where([data-tema="oscuro"]) #form-empresas input[type="email"], :where([data-tema="oscuro"]) #form-empresas textarea, :where([data-tema="oscuro"]) .fiesta-asistente-marco, :where([data-tema="oscuro"]) .fiesta-opcion-caja, :where([data-tema="oscuro"]) .fiesta-campo input, :where([data-tema="oscuro"]) .fiesta-campo select, :where([data-tema="oscuro"]) .fiesta-campo textarea, :where([data-tema="oscuro"]) .fiesta-recomendacion-lista li, :where([data-tema="oscuro"]) .fiesta-subida-zona, :where([data-tema="oscuro"]) .fiesta-archivo-ficha, :where([data-tema="oscuro"]) .fiesta-producto select, :where([data-tema="oscuro"]) .fiesta-talla input, :where([data-tema="oscuro"]) .fiesta-resumen-imagen, :where([data-tema="oscuro"]) .historial-estado, :where([data-tema="oscuro"]) .historial-pedido, :where([data-tema="oscuro"]) .historial-cara, :where([data-tema="oscuro"]) .repetir-aviso, :where([data-tema="oscuro"]) .legal-indice, :where([data-tema="oscuro"]) .lienzo-marco, :where([data-tema="oscuro"]) .lienzo-herramientas, :where([data-tema="oscuro"]) .lienzo-herramientas button, :where([data-tema="oscuro"]) .control-seccion, :where([data-tema="oscuro"]) .control-bloque select, :where([data-tema="oscuro"]) .control-seccion select, :where([data-tema="oscuro"]) .control-seccion input[type="text"], :where([data-tema="oscuro"]) .control-seccion textarea, :where([data-tema="oscuro"]) .color-chip, :where([data-tema="oscuro"]) .talla-pastilla, :where([data-tema="oscuro"]) .archivo-ficha, :where([data-tema="oscuro"]) .archivo-quitar, :where([data-tema="oscuro"]) .rango-paso, :where([data-tema="oscuro"]) #color-texto, :where([data-tema="oscuro"]) .producto-select, :where([data-tema="oscuro"]) .resena-formulario, :where([data-tema="oscuro"]) .resena-campo input[type="text"], :where([data-tema="oscuro"]) .resena-campo textarea, :where([data-tema="oscuro"]) .resena-estrella-boton, :where([data-tema="oscuro"]) .tienda-buscador-campo, :where([data-tema="oscuro"]) .tienda-buscador-limpiar { background: var(--osc-superficie); } /* Grises muy claros → gris oscuro suave */ :where([data-tema="oscuro"]) .resumen-carrito, :where([data-tema="oscuro"]) .cuenta-mensaje-panel, :where([data-tema="oscuro"]) .historial-pedido-cabecera, :where([data-tema="oscuro"]) .zona-soltar, :where([data-tema="oscuro"]) .rango-valor, :where([data-tema="oscuro"]) .archivo-ficha-miniatura, :where([data-tema="oscuro"]) .resenas-aviso, :where([data-tema="oscuro"]) .producto-imagen-principal, :where([data-tema="oscuro"]) .tienda-producto-imagen, :where([data-tema="oscuro"]) .item-producto img, :where([data-tema="oscuro"]) .fiesta-miniatura { background: var(--osc-suave); } :where([data-tema="oscuro"]) .legal-tabla tr:nth-child(even) td { background: #1a1a1a; } :where([data-tema="oscuro"]) .tienda-stock-agotado { background: rgba(255, 255, 255, 0.08); } /* Paneles tintados */ :where([data-tema="oscuro"]) .empresas-confirmacion, :where([data-tema="oscuro"]) .fiesta-confirmacion { background: rgba(19, 174, 192, 0.12); } :where([data-tema="oscuro"]) .stock-carrito-tope { background: rgba(255, 0, 110, 0.1); } :where([data-tema="oscuro"]) .historial-produccion { border-color: rgba(255, 255, 255, 0.1); border-left-color: #13aec0; background: rgba(19, 174, 192, 0.08); } :where([data-tema="oscuro"]) .historial-produccion-in_production { border-left-color: #ffd600; background: rgba(255, 214, 0, 0.08); } :where([data-tema="oscuro"]) .historial-produccion-ready { border-left-color: #13aec0; background: rgba(19, 174, 192, 0.1); } :where([data-tema="oscuro"]) .historial-produccion-hold { border-left-color: #ff006e; background: rgba(255, 0, 110, 0.1); } :where([data-tema="oscuro"]) .historial-produccion-pasos > div::before, :where([data-tema="oscuro"]) .historial-produccion-pasos i { background: #444444; } /* Bloques negros de información: siguen oscuros, con borde */ :where([data-tema="oscuro"]) .empresas-contacto-bloque, :where([data-tema="oscuro"]) .fiesta-alternativa-bloque, :where([data-tema="oscuro"]) .fiesta-total-barra, :where([data-tema="oscuro"]) .legal-contacto, :where([data-tema="oscuro"]) .personalizador-precio, :where([data-tema="oscuro"]) .personalizador-aviso, :where([data-tema="oscuro"]) .barra-accion { border-color: var(--osc-borde); background: var(--osc-bloque); box-shadow: 0 0 0 1px var(--osc-borde); } /* Hover que en claro es beige */ :where([data-tema="oscuro"]) .caras-producto button:hover, :where([data-tema="oscuro"]) .lienzo-herramientas button:hover:not(:disabled), :where([data-tema="oscuro"]) .talla-pastilla:hover:not(:disabled), :where([data-tema="oscuro"]) .cantidad-personalizador button:hover:not(:disabled), :where([data-tema="oscuro"]) .rango-paso:hover:not(:disabled), :where([data-tema="oscuro"]) .zona-soltar:hover { background: var(--osc-hover); } /* ================================================== BORDES Primero los genéricos y luego los acentos de color, que si no quedarían tapados. ================================================== */ /* Líneas gris claro → gris oscuro */ :where([data-tema="oscuro"]) .carrito-revision-personalizacion, :where([data-tema="oscuro"]) .revision-cara, :where([data-tema="oscuro"]) .revision-lateral, :where([data-tema="oscuro"]) .carrito-encabezado, :where([data-tema="oscuro"]) .item-carrito, :where([data-tema="oscuro"]) .resumen-fila, :where([data-tema="oscuro"]) .carrito-lateral-cabecera, :where([data-tema="oscuro"]) .item-lateral, :where([data-tema="oscuro"]) .carrito-lateral-pie, :where([data-tema="oscuro"]) .descuento-bloque, :where([data-tema="oscuro"]) .cuenta-tabs, :where([data-tema="oscuro"]) .perfil-opcion, :where([data-tema="oscuro"]) .perfil-datos, :where([data-tema="oscuro"]) .fiesta-ventajas, :where([data-tema="oscuro"]) .fiesta-asistente-marco, :where([data-tema="oscuro"]) .fiesta-grupo-lista, :where([data-tema="oscuro"]) .fiesta-producto, :where([data-tema="oscuro"]) .fiesta-bloque-color + .fiesta-bloque-color, :where([data-tema="oscuro"]) .fiesta-resumen-fila, :where([data-tema="oscuro"]) .fiesta-tabla th, :where([data-tema="oscuro"]) .fiesta-tabla td, :where([data-tema="oscuro"]) .historial-estado, :where([data-tema="oscuro"]) .historial-pedido, :where([data-tema="oscuro"]) .historial-pedido-cabecera, :where([data-tema="oscuro"]) .historial-item, :where([data-tema="oscuro"]) .historial-personalizacion, :where([data-tema="oscuro"]) .historial-cara, :where([data-tema="oscuro"]) .historial-pedido-pie, :where([data-tema="oscuro"]) .legal-seccion h2, :where([data-tema="oscuro"]) .legal-tabla th, :where([data-tema="oscuro"]) .legal-tabla td, :where([data-tema="oscuro"]) .estado-pago, :where([data-tema="oscuro"]) .pedido-confirmado, :where([data-tema="oscuro"]) .pedido-confirmado-fila, :where([data-tema="oscuro"]) .pedido-producto, :where([data-tema="oscuro"]) .lienzo-herramientas button, :where([data-tema="oscuro"]) .color-chip, :where([data-tema="oscuro"]) .texto-color-preset, :where([data-tema="oscuro"]) .rango-valor, :where([data-tema="oscuro"]) .rango-paso, :where([data-tema="oscuro"]) .archivo-ficha-miniatura, :where([data-tema="oscuro"]) .producto-compartir, :where([data-tema="oscuro"]) .resena, :where([data-tema="oscuro"]) .resena-foto, :where([data-tema="oscuro"]) .resenas-aviso, :where([data-tema="oscuro"]) .resena-estrella-boton, :where([data-tema="oscuro"]) .tienda-filtros, :where([data-tema="oscuro"]) .tienda-filtros button, :where([data-tema="oscuro"]) .tienda-vacia, :where([data-tema="oscuro"]) .tienda-buscador-limpiar, :where([data-tema="oscuro"]) .fiesta-opcion-caja, :where([data-tema="oscuro"]) .fiesta-chip-caja { border-color: var(--osc-borde); } /* Bordes de campo gris → gris medio */ :where([data-tema="oscuro"]) .item-cantidad, :where([data-tema="oscuro"]) .cuenta-formulario-panel input, :where([data-tema="oscuro"]) .cuenta-mensaje-panel input, :where([data-tema="oscuro"]) .perfil-datos input, :where([data-tema="oscuro"]) #form-empresas input[type="email"], :where([data-tema="oscuro"]) #form-empresas textarea, :where([data-tema="oscuro"]) .fiesta-campo input, :where([data-tema="oscuro"]) .fiesta-campo select, :where([data-tema="oscuro"]) .fiesta-campo textarea, :where([data-tema="oscuro"]) .fiesta-producto select, :where([data-tema="oscuro"]) .fiesta-talla input, :where([data-tema="oscuro"]) .fiesta-subida-zona, :where([data-tema="oscuro"]) .color-producto, :where([data-tema="oscuro"]) .selector-producto, :where([data-tema="oscuro"]) .cantidad-producto, :where([data-tema="oscuro"]) .zona-soltar { border-color: var(--osc-borde-campo); } /* Líneas negras del diseño → líneas claras (mantienen el trazo gráfico) */ :where([data-tema="oscuro"]) .descuento-fila input, :where([data-tema="oscuro"]) .legal-cabecera, :where([data-tema="oscuro"]) .legal-indice, :where([data-tema="oscuro"]) .personalizador-pasos li, :where([data-tema="oscuro"]) .caras-producto, :where([data-tema="oscuro"]) .caras-producto button + button, :where([data-tema="oscuro"]) .lienzo-marco, :where([data-tema="oscuro"]) .lienzo-herramientas, :where([data-tema="oscuro"]) .control-seccion, :where([data-tema="oscuro"]) .control-bloque select, :where([data-tema="oscuro"]) .control-seccion select, :where([data-tema="oscuro"]) .control-seccion input[type="text"], :where([data-tema="oscuro"]) .control-seccion textarea, :where([data-tema="oscuro"]) .select-envoltorio::after, :where([data-tema="oscuro"]) .talla-pastilla, :where([data-tema="oscuro"]) .cantidad-personalizador, :where([data-tema="oscuro"]) .zona-soltar-icono, :where([data-tema="oscuro"]) .archivo-ficha, :where([data-tema="oscuro"]) .archivo-quitar, :where([data-tema="oscuro"]) #color-texto, :where([data-tema="oscuro"]) .producto-select, :where([data-tema="oscuro"]) .color-producto.color-activo::after, :where([data-tema="oscuro"]) .resenas-cabecera, :where([data-tema="oscuro"]) .resena-formulario, :where([data-tema="oscuro"]) .resena-campo input[type="text"], :where([data-tema="oscuro"]) .resena-campo textarea, :where([data-tema="oscuro"]) .tienda-buscador-campo, :where([data-tema="oscuro"]) .repetir-aviso, :where([data-tema="oscuro"]) .fiesta-subida-icono, :where([data-tema="oscuro"]) .fiesta-archivo-ficha, :where([data-tema="oscuro"]) .perfil-opcion:hover, :where([data-tema="oscuro"]) .fiesta-opcion:hover .fiesta-opcion-caja, :where([data-tema="oscuro"]) .fiesta-chip:hover .fiesta-chip-caja, :where([data-tema="oscuro"]) .color-chip:hover:not(:disabled), :where([data-tema="oscuro"]) .texto-color-preset:hover, :where([data-tema="oscuro"]) .fiesta-campo input:focus, :where([data-tema="oscuro"]) .fiesta-campo select:focus, :where([data-tema="oscuro"]) .fiesta-campo textarea:focus, :where([data-tema="oscuro"]) .fiesta-subida-zona:hover, :where([data-tema="oscuro"]) .zona-soltar:hover { border-color: var(--osc-linea); } /* Acentos de color que el borde genérico taparía */ :where([data-tema="oscuro"]) .revision-cara-frontal, :where([data-tema="oscuro"]) .historial-cara-frontal { border-left-color: #13aec0; } :where([data-tema="oscuro"]) .revision-cara-trasera, :where([data-tema="oscuro"]) .historial-cara-trasera { border-left-color: #ff006e; } :where([data-tema="oscuro"]) .barra-accion { border-top-color: var(--osc-borde); } /* ================================================== BOTONES CON BORDE → borde y texto claros (van antes que los rellenos para que el botón principal de la fiesta se quede relleno) ================================================== */ :where([data-tema="oscuro"]) .lateral-ver-carrito, :where([data-tema="oscuro"]) .empresas-boton-archivo, :where([data-tema="oscuro"]) .historial-diseno-boton, :where([data-tema="oscuro"]) .historial-repetir, :where([data-tema="oscuro"]) .repetir-aviso-cerrar, :where([data-tema="oscuro"]) .error-acciones a, :where([data-tema="oscuro"]) .pago-boton-secundario, :where([data-tema="oscuro"]) .botones-ajuste button, :where([data-tema="oscuro"]) .boton-restablecer, :where([data-tema="oscuro"]) .boton-personalizar-producto, :where([data-tema="oscuro"]) .boton-comprar-producto, :where([data-tema="oscuro"]) .compartir-boton, :where([data-tema="oscuro"]) .tienda-personalizar, :where([data-tema="oscuro"]) .tienda-vacia-boton, :where([data-tema="oscuro"]) .fiesta-boton, :where([data-tema="oscuro"]) .fiesta-boton-secundario, :where([data-tema="oscuro"]) .fiesta-archivo-quitar, :where([data-tema="oscuro"]) .archivo-quitar { border-color: var(--osc-linea); color: var(--texto); } :where([data-tema="oscuro"]) .botones-ajuste button:disabled, :where([data-tema="oscuro"]) .talla-pastilla:disabled { border-color: #333333; color: #5f5f5f; } /* ================================================== RELLENOS NEGROS → CLAROS Botones, etiquetas, cabeceras de tabla y estados seleccionados: siguen siendo lo que más destaca. ================================================== */ :where([data-tema="oscuro"]) .boton-finalizar, :where([data-tema="oscuro"]) .boton-seguir-comprando, :where([data-tema="oscuro"]) .lateral-finalizar, :where([data-tema="oscuro"]) .descuento-fila button, :where([data-tema="oscuro"]) .cuenta-formulario-panel form button, :where([data-tema="oscuro"]) .cuenta-mensaje-panel form button, :where([data-tema="oscuro"]) .perfil-datos form button, :where([data-tema="oscuro"]) .historial-boton, :where([data-tema="oscuro"]) .historial-badge, :where([data-tema="oscuro"]) .historial-badge[data-estado="shipped"], :where([data-tema="oscuro"]) .historial-personalizacion-titulo span, :where([data-tema="oscuro"]) .revision-cabecera > span, :where([data-tema="oscuro"]) .legal-tabla th, :where([data-tema="oscuro"]) .pago-boton-principal, :where([data-tema="oscuro"]) .personalizador-pasos li b, :where([data-tema="oscuro"]) .control-seccion h2::before, :where([data-tema="oscuro"]) .boton-subir, :where([data-tema="oscuro"]) .tienda-ver-producto, :where([data-tema="oscuro"]) .boton-carrito-producto, :where([data-tema="oscuro"]) .carrusel-flecha, :where([data-tema="oscuro"]) .fiesta-boton-principal, :where([data-tema="oscuro"]) .fiesta-subida-boton, :where([data-tema="oscuro"]) .tienda-filtros button:hover, :where([data-tema="oscuro"]) .tienda-filtros button.filtro-activo, :where([data-tema="oscuro"]) .caras-producto button.cara-activa, :where([data-tema="oscuro"]) .lienzo-herramientas button[aria-pressed="true"], :where([data-tema="oscuro"]) .talla-pastilla[aria-pressed="true"], :where([data-tema="oscuro"]) .fiesta-oculto:checked + .fiesta-opcion-caja, :where([data-tema="oscuro"]) .fiesta-oculto:checked + .fiesta-chip-caja, :where([data-tema="oscuro"]) .fiesta-oculto:checked + .fiesta-color-caja .fiesta-color-muestra::after, :where([data-tema="oscuro"]) .empresas-boton-archivo:hover, :where([data-tema="oscuro"]) .historial-repetir:hover:not(:disabled), :where([data-tema="oscuro"]) .repetir-aviso-cerrar:hover, :where([data-tema="oscuro"]) .repetir-aviso-boton:hover, :where([data-tema="oscuro"]) .error-acciones a:hover, :where([data-tema="oscuro"]) .error-acciones a.error-principal:hover, :where([data-tema="oscuro"]) .botones-ajuste button:hover:not(:disabled), :where([data-tema="oscuro"]) .boton-restablecer:hover, :where([data-tema="oscuro"]) .boton-anadir-personalizado:hover:not(:disabled), :where([data-tema="oscuro"]) .resena-enviar:hover:not(:disabled), :where([data-tema="oscuro"]) .tienda-vacia-boton:hover, :where([data-tema="oscuro"]) .fiesta-boton-secundario:hover, :where([data-tema="oscuro"]) .fiesta-archivo-quitar:hover { border-color: var(--osc-tinta); background: var(--osc-tinta); color: var(--osc-sobre-tinta); } :where([data-tema="oscuro"]) .boton-anadir-personalizado:disabled, :where([data-tema="oscuro"]) .resena-enviar:disabled { background: #3a3a3a; color: #8f8f8f; } :where([data-tema="oscuro"]) .fiesta-producto-check { accent-color: var(--osc-tinta); } /* ================================================== DETALLES SUELTOS ================================================== */ /* Estrellas vacías de las reseñas */ :where([data-tema="oscuro"]) .resena-estrella, :where([data-tema="oscuro"]) .resena-estrella-boton { color: #555555; } :where([data-tema="oscuro"]) .resena-estrella-llena { color: #ffd600; } :where([data-tema="oscuro"]) .resena-estrella-activa { border-color: var(--osc-linea); color: #ffd600; } /* Barra de los deslizadores del personalizador */ :where([data-tema="oscuro"]) input[type="range"]::-webkit-slider-runnable-track { background: #444444; } :where([data-tema="oscuro"]) input[type="range"]::-moz-range-track { background: #444444; } /* Muestras de color de la fiesta */ :where([data-tema="oscuro"]) .fiesta-color-muestra, :where([data-tema="oscuro"]) .fiesta-colores-mini i { border-color: rgba(255, 255, 255, 0.25); } :where([data-tema="oscuro"]) .fiesta-color:hover .fiesta-color-muestra { box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px #777777; } :where([data-tema="oscuro"]) .fiesta-oculto:checked + .fiesta-color-caja .fiesta-color-muestra { box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--osc-linea); } :where([data-tema="oscuro"]) .repetir-aviso { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); } /* Rosa de marca sobre paneles oscuros: se queda justo por debajo de 4,5:1 en texto pequeño, así que se aclara. */ :where([data-tema="oscuro"]) .cierre-frase span, :where([data-tema="oscuro"]) .resenas-aviso a, :where([data-tema="oscuro"]) .resumen-total strong, :where([data-tema="oscuro"]) .historial-total strong { color: var(--osc-rosa-texto); } /* "SUBIR ARCHIVO" es un