/* ============================================================ Festival Etcétera — TEMAS Cuatro pieles sobre la misma estructura (estilos.css). Azul + blanco protagonistas en todas; acentos propios. Se aplican con ============================================================ */ /* ============================================================ 1 · BAUHAUS GEOMÉTRICO Blanco cálido, azul cobalto, círculos y bloques, acentos rojo y amarillo primarios. Museo de diseño. ============================================================ */ :root[data-tema="bauhaus"] { color-scheme: light; --fondo: #f6f3ea; --fondo-2: #ebe7da; --fondo-textura: none; --superficie: #ffffff; --superficie-2: #f1eee4; --superficie-3: #e5e1d2; --campo-fondo: #ffffff; --velo: rgba(21, 21, 28, .55); --nav-fondo: rgba(246, 243, 234, .93); --tinta: #15151c; --tinta-2: #4a4a58; --tinta-3: #84848f; --borde: rgba(21, 21, 28, .2); --borde-fuerte: rgba(21, 21, 28, .55); --grosor-borde: 2px; --primario: #1937c9; --primario-suave: rgba(25, 55, 201, .12); --sobre-primario: #ffffff; --coral: #c8250f; --coral-suave: rgba(200, 37, 15, .11); --ambar: #96660a; --ambar-suave: rgba(242, 183, 5, .2); --verde: #177245; --verde-suave: rgba(23, 114, 69, .12); --violeta: #4936c4; --violeta-suave: rgba(73, 54, 196, .11); --sobre-acento: #ffffff; --radio: 4px; --radio-chico: 2px; --sombra: 0 12px 30px rgba(21, 21, 28, .1); --sombra-flotante: 6px 6px 0 rgba(25, 55, 201, .25); --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } :root[data-tema="bauhaus"] .btn, :root[data-tema="bauhaus"] .chip, :root[data-tema="bauhaus"] .pestanias, :root[data-tema="bauhaus"] .pestanias button, :root[data-tema="bauhaus"] .insignia, :root[data-tema="bauhaus"] .chip-rubro, :root[data-tema="bauhaus"] .hero-chapa { border-radius: 0; } :root[data-tema="bauhaus"] .fab { border-radius: 0; } :root[data-tema="bauhaus"] .buscador input { border-radius: 0; } :root[data-tema="bauhaus"] .panelcito, :root[data-tema="bauhaus"] .ficha, :root[data-tema="bauhaus"] .registro, :root[data-tema="bauhaus"] .tarjeta-propuesta, :root[data-tema="bauhaus"] .tarjeta-venta, :root[data-tema="bauhaus"] .tarjeta-lugar, :root[data-tema="bauhaus"] .tarjeta-miembro, :root[data-tema="bauhaus"] .tarjeta-tarea, :root[data-tema="bauhaus"] .caja-acceso, :root[data-tema="bauhaus"] .modal, :root[data-tema="bauhaus"] .cuenta-celda, :root[data-tema="bauhaus"] .faq details { border-color: var(--tinta); } :root[data-tema="bauhaus"] .tarjeta-propuesta:hover, :root[data-tema="bauhaus"] a.tarjeta-venta:hover, :root[data-tema="bauhaus"] .registro:hover { border-color: var(--primario); box-shadow: 6px 6px 0 var(--primario-suave); } /* Composición geométrica del hero: círculo amarillo + anillo rojo */ :root[data-tema="bauhaus"] .hero::before { width: 36vmax; height: 36vmax; border-radius: 50%; background: #f2b705; top: -12vmax; right: -9vmax; } :root[data-tema="bauhaus"] .hero::after { width: 24vmax; height: 24vmax; border-radius: 50%; border: 3.2vmax solid #d92a12; background: transparent; bottom: -10vmax; left: -8vmax; } :root[data-tema="bauhaus"] .hero-chapa { background: #f2b705; color: #15151c; border-color: #15151c; } :root[data-tema="bauhaus"] .acceso::before { width: 30vmax; height: 30vmax; border-radius: 50%; background: #f2b705; top: -10vmax; right: -8vmax; } :root[data-tema="bauhaus"] .seccion-etiqueta::before { content: "●"; color: #d92a12; } :root[data-tema="bauhaus"] .marquesina { border-block: 3px solid var(--tinta); } /* Pictogramas con formas primarias: círculo, cuadrado, triángulo, semicírculo */ :root[data-tema="bauhaus"] .picto-0 { border-radius: 50%; background: #d92a12; color: #fff; } :root[data-tema="bauhaus"] .picto-1 { border-radius: 0; background: var(--primario); color: #fff; } :root[data-tema="bauhaus"] .picto-2 { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #f2b705; color: #15151c; } :root[data-tema="bauhaus"] .picto-2 svg { margin-top: 10px; } :root[data-tema="bauhaus"] .picto-3 { border-radius: 50% 50% 0 0; background: #177245; color: #fff; } :root[data-tema="bauhaus"] .pie-grande { opacity: .5; color: transparent; -webkit-text-stroke: 2px var(--tinta); } :root[data-tema="bauhaus"] .avatar { border-radius: 50%; } /* ============================================================ 2 · RISOGRAFÍA / IMPRENTA Papel, azul Klein, tinta azul, grano de impresión, sellos y sombras fuera de registro. Fanzine artesanal. ============================================================ */ :root[data-tema="riso"] { color-scheme: light; --fondo: #f9f5ea; --fondo-2: #efe9d8; --fondo-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.45 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --fondo-textura-tam: 140px 140px; --superficie: #fffdf4; --superficie-2: #f4eeda; --superficie-3: #eae3c8; --campo-fondo: #fffdf4; --velo: rgba(43, 42, 114, .5); --nav-fondo: rgba(249, 245, 234, .93); --tinta: #2b2a72; --tinta-2: #55549b; --tinta-3: #8987b8; --borde: rgba(43, 42, 114, .25); --borde-fuerte: rgba(43, 42, 114, .55); --grosor-borde: 1.5px; --primario: #2c41f0; --primario-suave: rgba(44, 65, 240, .12); --sobre-primario: #fffdf4; --coral: #d61f8b; --coral-suave: rgba(214, 31, 139, .13); --ambar: #a86a00; --ambar-suave: rgba(230, 160, 20, .18); --verde: #0d8a60; --verde-suave: rgba(13, 138, 96, .13); --violeta: #7a3ff0; --violeta-suave: rgba(122, 63, 240, .12); --sobre-acento: #fffdf4; --radio: 18px; --radio-chico: 12px; --sombra: 4px 4px 0 rgba(44, 65, 240, .16); --sombra-flotante: 5px 5px 0 rgba(214, 31, 139, .4); --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a72' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Tinta fuera de registro */ :root[data-tema="riso"] .hero h1 { text-shadow: 3px 3px 0 rgba(214, 31, 139, .45); } :root[data-tema="riso"] .seccion h2 { text-shadow: 2px 2px 0 rgba(44, 65, 240, .25); } :root[data-tema="riso"] .pie-grande { opacity: .3; text-shadow: 3px 3px 0 rgba(214, 31, 139, .5); } /* Sello de goma */ :root[data-tema="riso"] .hero-chapa { background: transparent; border: 2px dashed #d61f8b; color: #d61f8b; transform: rotate(-3deg); } /* Tarjetitas apiladas a mano */ :root[data-tema="riso"] .cuenta-celda:nth-child(odd) { transform: rotate(-1.4deg); } :root[data-tema="riso"] .cuenta-celda:nth-child(even) { transform: rotate(1.2deg); } :root[data-tema="riso"] .panelcito, :root[data-tema="riso"] .ficha, :root[data-tema="riso"] .registro, :root[data-tema="riso"] .tarjeta-propuesta, :root[data-tema="riso"] .tarjeta-venta, :root[data-tema="riso"] .tarjeta-miembro, :root[data-tema="riso"] .tarjeta-tarea, :root[data-tema="riso"] .cuenta-celda { box-shadow: var(--sombra); } :root[data-tema="riso"] .btn { box-shadow: 3px 3px 0 rgba(43, 42, 114, .3); } :root[data-tema="riso"] .btn:hover { transform: translate(-1px, -2px); } :root[data-tema="riso"] .btn-fantasma { box-shadow: none; } /* Semitonos (trama de puntos) en el hero */ :root[data-tema="riso"] .hero::before { width: 42vmax; height: 42vmax; border-radius: 50%; background-image: radial-gradient(rgba(44, 65, 240, .4) 26%, transparent 28%); background-size: 15px 15px; top: -14vmax; right: -12vmax; } :root[data-tema="riso"] .hero::after { width: 30vmax; height: 30vmax; border-radius: 50%; background-image: radial-gradient(rgba(214, 31, 139, .35) 26%, transparent 28%); background-size: 12px 12px; bottom: -10vmax; left: -8vmax; } :root[data-tema="riso"] .acceso::before { width: 36vmax; height: 36vmax; border-radius: 50%; background-image: radial-gradient(rgba(44, 65, 240, .35) 26%, transparent 28%); background-size: 14px 14px; top: -12vmax; right: -10vmax; } :root[data-tema="riso"] .marquesina { background: var(--primario); border-block: 2px solid var(--tinta); } :root[data-tema="riso"] .marquesina .m-coral { color: #ff9ad2; } :root[data-tema="riso"] .marquesina .m-ambar { color: #ffe27a; } :root[data-tema="riso"] .marquesina .m-violeta { color: #fffdf4; } :root[data-tema="riso"] .seccion-etiqueta::before { content: "✂"; color: #d61f8b; } /* ============================================================ 3 · NEOBRUTALISMO WEB Blanco puro, azul eléctrico, bordes negros gruesos, sombras duras, amarillo de marcador. Sticker energy. ============================================================ */ :root[data-tema="brutal"] { color-scheme: light; --fondo: #ffffff; --fondo-2: #f1f1f1; --fondo-textura: none; --superficie: #ffffff; --superficie-2: #f1f1f1; --superficie-3: #e2e2e2; --campo-fondo: #ffffff; --velo: rgba(10, 10, 10, .6); --nav-fondo: rgba(255, 255, 255, .95); --tinta: #0a0a0a; --tinta-2: #3d3d3d; --tinta-3: #707070; --borde: #0a0a0a; --borde-fuerte: #0a0a0a; --grosor-borde: 2.5px; --primario: #2b4bff; --primario-suave: rgba(43, 75, 255, .13); --sobre-primario: #ffffff; --coral: #d31437; --coral-suave: rgba(211, 20, 55, .11); --ambar: #8f6400; --ambar-suave: rgba(255, 213, 0, .25); --verde: #0e8345; --verde-suave: rgba(14, 131, 69, .12); --violeta: #7226e0; --violeta-suave: rgba(114, 38, 224, .11); --sobre-acento: #ffffff; --radio: 12px; --radio-chico: 8px; --sombra: 4px 4px 0 #0a0a0a; --sombra-flotante: 6px 6px 0 #0a0a0a; --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } :root[data-tema="brutal"] .panelcito, :root[data-tema="brutal"] .ficha, :root[data-tema="brutal"] .registro, :root[data-tema="brutal"] .tarjeta-propuesta, :root[data-tema="brutal"] .tarjeta-venta, :root[data-tema="brutal"] .tarjeta-lugar, :root[data-tema="brutal"] .tarjeta-miembro, :root[data-tema="brutal"] .tarjeta-tarea, :root[data-tema="brutal"] .caja-acceso, :root[data-tema="brutal"] .modal, :root[data-tema="brutal"] .cuenta-celda, :root[data-tema="brutal"] .faq details, :root[data-tema="brutal"] .chip, :root[data-tema="brutal"] .banner-aviso { box-shadow: var(--sombra); } :root[data-tema="brutal"] .registro:hover, :root[data-tema="brutal"] .tarjeta-propuesta:hover, :root[data-tema="brutal"] a.tarjeta-venta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; border-color: #0a0a0a; } :root[data-tema="brutal"] .btn { border-color: #0a0a0a; box-shadow: 4px 4px 0 #0a0a0a; text-transform: uppercase; letter-spacing: .03em; } :root[data-tema="brutal"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; filter: none; } :root[data-tema="brutal"] .btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #0a0a0a; } :root[data-tema="brutal"] .btn-fantasma { border-color: transparent; box-shadow: none; text-transform: none; } :root[data-tema="brutal"] .fab { border-color: #0a0a0a; } :root[data-tema="brutal"] .boton-tema { border-color: #0a0a0a; box-shadow: 4px 4px 0 #0a0a0a; } :root[data-tema="brutal"] .chip.activa { background: #ffd500; color: #0a0a0a; border-color: #0a0a0a; } :root[data-tema="brutal"] .pestanias { border: 2.5px solid #0a0a0a; } :root[data-tema="brutal"] .pestanias button.activa { background: #0a0a0a; color: #fff; box-shadow: none; } :root[data-tema="brutal"] .hero-chapa { background: #ffd500; color: #0a0a0a; border-color: #0a0a0a; transform: rotate(-3deg); box-shadow: 4px 4px 0 #0a0a0a; } :root[data-tema="brutal"] .hero h1 { text-shadow: 6px 6px 0 #ffd500; } :root[data-tema="brutal"] .hero::before { width: 26vmax; height: 26vmax; border-radius: 24%; background: var(--primario); border: 3px solid #0a0a0a; transform: rotate(14deg); top: -9vmax; right: -7vmax; opacity: .92; } :root[data-tema="brutal"] .hero::after { width: 18vmax; height: 18vmax; border-radius: 50%; background: #ffd500; border: 3px solid #0a0a0a; bottom: -6vmax; left: -5vmax; } :root[data-tema="brutal"] .acceso::before { width: 24vmax; height: 24vmax; border-radius: 24%; background: #ffd500; border: 3px solid #0a0a0a; transform: rotate(-12deg); top: -8vmax; right: -7vmax; } :root[data-tema="brutal"] .marquesina { background: var(--primario); border-block: 3px solid #0a0a0a; } :root[data-tema="brutal"] .marquesina .m-coral { color: #ffd500; } :root[data-tema="brutal"] .marquesina .m-ambar { color: #ffffff; } :root[data-tema="brutal"] .marquesina .m-violeta { color: #b9c6ff; } :root[data-tema="brutal"] .seccion-etiqueta::before { content: "★"; color: var(--primario); } :root[data-tema="brutal"] .medidor, :root[data-tema="brutal"] .fila-barra .pista { border: 2px solid #0a0a0a; } /* ============================================================ 4 · PLANO TÉCNICO / BLUEPRINT Azul profundo dominante, cuadrícula y líneas blancas, título trazado, acentos cian y amarillo de obra. ============================================================ */ :root[data-tema="plano"] { color-scheme: dark; --fondo: #0c2f80; --fondo-2: #0a2a70; --fondo-textura: linear-gradient(rgba(244, 248, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 248, 255, .05) 1px, transparent 1px), linear-gradient(rgba(244, 248, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 248, 255, .1) 1px, transparent 1px); --fondo-textura-tam: 24px 24px, 24px 24px, 120px 120px, 120px 120px; --superficie: #123a8f; --superficie-2: #1a4499; --superficie-3: #2451a6; --campo-fondo: #0e3384; --velo: rgba(4, 14, 40, .72); --nav-fondo: rgba(10, 42, 112, .92); --tinta: #f4f8ff; --tinta-2: #c6d5f3; --tinta-3: #93a9d6; --borde: rgba(244, 248, 255, .28); --borde-fuerte: rgba(244, 248, 255, .6); --grosor-borde: 1.5px; --primario: #ffffff; --primario-suave: rgba(255, 255, 255, .14); --sobre-primario: #0c2f80; --coral: #ff8d75; --coral-suave: rgba(255, 141, 117, .16); --ambar: #ffd23e; --ambar-suave: rgba(255, 210, 62, .15); --verde: #38e099; --verde-suave: rgba(56, 224, 153, .15); --violeta: #74d4ff; --violeta-suave: rgba(116, 212, 255, .15); --sobre-acento: #0c2f80; --radio: 6px; --radio-chico: 4px; --sombra: 0 10px 26px rgba(2, 10, 34, .5); --sombra-flotante: 0 10px 26px rgba(2, 10, 34, .65); --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f8ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Título trazado como plano */ :root[data-tema="plano"] .hero h1 { color: transparent; -webkit-text-stroke: 2px #f4f8ff; } :root[data-tema="plano"] .hero h1 .asterisco { color: #74d4ff; -webkit-text-stroke: 0; } :root[data-tema="plano"] .hero-bajada em { color: #74d4ff; } :root[data-tema="plano"] .hero-fecha svg { color: #74d4ff; } :root[data-tema="plano"] .hero-chapa { background: transparent; border: 1.5px dashed #ffd23e; color: #ffd23e; } :root[data-tema="plano"] .hero::before { width: 32vmax; height: 32vmax; border-radius: 50%; border: 1.5px dashed rgba(244, 248, 255, .4); background: transparent; top: -9vmax; right: -9vmax; } :root[data-tema="plano"] .hero::after { width: 26vmax; height: 26vmax; border: 1.5px solid rgba(244, 248, 255, .22); background: transparent; transform: rotate(45deg); bottom: -14vmax; left: -10vmax; } :root[data-tema="plano"] .acceso::before { width: 30vmax; height: 30vmax; border-radius: 50%; border: 1.5px dashed rgba(244, 248, 255, .35); top: -10vmax; right: -9vmax; } :root[data-tema="plano"] .cuenta-celda { background: rgba(244, 248, 255, .06); } :root[data-tema="plano"] .marquesina { background: transparent; border-block: 1.5px dashed var(--borde); } :root[data-tema="plano"] .marquesina .m-coral { color: #ffd23e; } :root[data-tema="plano"] .marquesina .m-ambar { color: #74d4ff; } :root[data-tema="plano"] .marquesina .m-violeta { color: #f4f8ff; } :root[data-tema="plano"] .seccion-etiqueta::before { content: "+"; color: #74d4ff; font-weight: 900; } :root[data-tema="plano"] .seccion-etiqueta, :root[data-tema="plano"] .campo label, :root[data-tema="plano"] .ficha .ficha-titulo { letter-spacing: .14em; } :root[data-tema="plano"] .editor-fila, :root[data-tema="plano"] .aviso-entradas { border-style: dashed; } :root[data-tema="plano"] .pie-grande { opacity: .35; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 248, 255, .8); } :root[data-tema="plano"] .pestanias { background: rgba(244, 248, 255, .08); } :root[data-tema="plano"] .pestanias button.activa { background: var(--superficie-3); color: var(--tinta); box-shadow: none; } :root[data-tema="plano"] .muestras i { border-color: rgba(255, 255, 255, .4); } /* El visor de fotos y la cámara ya son oscuros de por sí en todos los temas. */