/* =================================================================== PALETA DE COLORES — TEMA "MOVIES" (azul acero / aluminio oscuro) Cómo funciona el sistema de temas por categoría: Estas variables viven en :root, así que TODA la app las usa por default (tema Movies = azul). El día que empecemos Series/K-Dramas/ Videogames/Books, cada página solo necesita agregar una clase al (ej. ) y una regla nueva aquí abajo que sobreescriba estas mismas variables con otros colores — todo el resto del CSS (botones, paneles, tarjetas, etc.) se actualiza solo, sin tocar layout.css ni formulario.css nunca más. =================================================================== */ :root { /* Fondo general de la página */ --bg: #070b14; /* Paneles / tarjetas / superficies */ --superficie: #101b2e; --superficie-clara: #16273f; /* Bordes metálicos */ --borde: #294c78; --borde-suave: #1c3554; --borde-brillo: rgba(140, 180, 235, 0.35); /* filo de luz superior en biseles */ /* Acento de la categoría (Movies = azul eléctrico) */ --acento: #1d4ed8; --acento-suave: #60a5fa; --acento-glow: rgba(96, 165, 250, 0.35); /* Modo Claro: --acento-suave se vuelve más oscuro (para leerse sobre fondos blancos) — pero un puñado de elementos (metadatos y textos encima de la foto del hero, siempre con su propio scrim oscuro fijo, sin importar el modo) necesitan la versión BRILLANTE de siempre. Esta variable NUNCA se redefine en css/tema-claro.css a propósito, así se queda fija en este valor pase lo que pase con el modo. */ --acento-foto: #60a5fa; /* Mismos colores de arriba, pero como "r, g, b" sueltos — para poder usarlos dentro de un rgba(...) con transparencia (ej. brillos, bordes suaves) en layout.css/formulario.css y que sigan cambiando solos con el tema, en vez de quedar azules fijos ahí. */ --acento-rgb: 29, 78, 216; --acento-suave-rgb: 96, 165, 250; --bg-rgb: 7, 11, 20; --superficie-rgb: 16, 27, 46; --borde-rgb: 41, 76, 120; --panel-borde-int-rgb: 120, 170, 235; /* Texto */ --texto: #e6edf8; --texto-tenue: #aeb8c8; /* Tokens de acabado "aluminio/HUD" reutilizables en toda la app */ --panel-grad: linear-gradient(180deg, #0e1c30 0%, #04070c 100%); --panel-grad-clara: linear-gradient(180deg, #13253d 0%, #070d17 100%); /* Anillo oscuro exterior (borde "metal apagado") + línea azul interior — la combinación que da el efecto de panel mecanizado con doble borde que pediste. */ --panel-borde-ext: #030711; --panel-borde-int: rgba(120, 170, 235, 0.55); /* Relieve fuerte — para paneles grandes (secciones, hero, wizard, tarjetas de poster, buscador de TMDB, panel de Cast). Capas: 1) línea azul interior (bisel claro) 2) brillo superior muy sutil 3) sombra interior inferior (hunde el panel) 4) sombra exterior (lo separa del fondo, "flota" un poco). */ --panel-relieve: inset 0 0 0 1px var(--panel-borde-int), inset 0 1.5px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 9px rgba(0, 0, 0, 0.6), 0 14px 30px rgba(0, 0, 0, 0.6); /* Relieve suave — para tarjetas/módulos más chicos (pastillas de menú, resultados de TMDB, botón de 3 puntos). */ --panel-relieve-suave: inset 0 0 0 1px var(--panel-borde-int), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 5px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.45); --panel-sombra: var(--panel-relieve); --panel-sombra-suave: var(--panel-relieve-suave); /* Bisel de botón físico: brillo arriba, sombra abajo, sombra exterior. */ --boton-relieve: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.45); --boton-relieve-activo: inset 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.12); --linea-decorativa: linear-gradient(90deg, var(--acento-suave), rgba(96, 165, 250, 0)); /* Línea metálica con brillo azul al centro — para separadores tipo "línea técnica", vía border-image (no cambia el ancho del borde). */ --linea-metalica: linear-gradient(90deg, rgba(41,76,120,0) 0%, var(--acento-suave) 50%, rgba(41,76,120,0) 100%); /* Colores de alerta — a propósito NO usan --acento/--acento-suave. El día que Series/K-Dramas/etc. cambien la paleta general, estos se quedan fijos, para que "posible duplicado" siga leyéndose como alerta (rojo/ámbar) sin importar el color de la categoría. */ --alerta-fuerte: #ef4444; --alerta-suave: #d4a24d; } /* =================================================================== TEMA "SERIES" (verde + negros/blancos) — mismo sistema que Movies: los efectos (--panel-relieve, --boton-relieve, etc.) quedan exactamente igual, pero TODAS las variables de color que tenían tinte azul en :root (fondo, superficies y bordes, no solo el acento) se sobreescriben aquí — si no, quedaba fondo/bordes azulados debajo del verde. --texto/--texto-tenue no se tocan: ya son casi blanco/gris neutro, y esos sí se comparten entre categorías. =================================================================== */ .tema-series { --bg: #050c08; --superficie: #0e1a13; --superficie-clara: #16261c; --borde: #245c37; --borde-suave: #1a4027; --borde-brillo: rgba(120, 220, 150, 0.35); --acento: #16a34a; --acento-suave: #4ade80; --acento-glow: rgba(74, 222, 128, 0.35); --acento-foto: #4ade80; --panel-borde-ext: #020a05; --panel-borde-int: rgba(90, 200, 130, 0.55); --panel-grad: linear-gradient(180deg, #0e2418 0%, #030907 100%); --panel-grad-clara: linear-gradient(180deg, #163a26 0%, #0a1a12 100%); --acento-rgb: 22, 163, 74; --acento-suave-rgb: 74, 222, 128; --bg-rgb: 5, 12, 8; --superficie-rgb: 14, 26, 19; --borde-rgb: 36, 92, 55; --panel-borde-int-rgb: 90, 200, 130; } /* =================================================================== TEMA "K-DRAMAS" (violeta + negros/blancos) — K-Dramas es Series con su propia identidad encima (grilla filtrada por país y su propio formulario de alta), con esta paleta violeta (de la imagen de referencia: Russian violet #4A0754, Purple #800080, Dark violet #AB00C0, Phlox #D500FF) en vez del verde de Series. Mismo criterio que .tema-series: todas las variables de color, no solo el acento. =================================================================== */ .tema-kdramas { --bg: #0f0616; --superficie: #1f0a26; --superficie-clara: #2f0f3a; --borde: #800080; --borde-suave: #560056; --borde-brillo: rgba(230, 140, 255, 0.35); --acento: #ab00c0; --acento-suave: #d500ff; --acento-glow: rgba(213, 0, 255, 0.35); --acento-foto: #d500ff; --panel-borde-ext: #0a0410; --panel-borde-int: rgba(190, 20, 215, 0.55); --panel-grad: linear-gradient(180deg, #2a0a33 0%, #0a0410 100%); --panel-grad-clara: linear-gradient(180deg, #3d1049 0%, #170a1c 100%); --acento-rgb: 171, 0, 192; --acento-suave-rgb: 213, 0, 255; --bg-rgb: 15, 6, 22; --superficie-rgb: 31, 10, 38; --borde-rgb: 128, 0, 128; --panel-borde-int-rgb: 190, 20, 215; } /* =================================================================== Botón flotante de música (metálico) y botón flotante de índice (azul luminoso, a propósito en Movies) están armados con MUCHOS tonos de azul entrelazados a mano (gradientes + varios box-shadow en capas) — en vez de reescribir cada uno, se gira el matiz completo del botón con "hue-rotate" para Series/K-Dramas, conservando exactamente el mismo diseño de luces/sombras. El botón de IA NO se toca: es morado a propósito en todas las categorías (ver su comentario en layout.css). =================================================================== */ .tema-series .widget-musica-mini-play, .tema-series .boton-flotante-indice { filter: hue-rotate(-82deg); } .tema-series .boton-flotante-indice:hover { filter: hue-rotate(-82deg) brightness(1.13); } .tema-kdramas .widget-musica-mini-play, .tema-kdramas .boton-flotante-indice { filter: hue-rotate(69deg); } .tema-kdramas .boton-flotante-indice:hover { filter: hue-rotate(69deg) brightness(1.13); } /* =================================================================== TEMA "VIDEOGAMES" (rojo) — mismo sistema que Series/K-Dramas: todas las variables de color, no solo el acento. Paleta exacta que mandó el usuario (de más oscuro a más claro): Granate Oscuro #330000, Rojo Vino #660000, Rojo Carmesí #990000, Rojo Intenso #CC0000, Rojo Clásico #E60000, Rojo Vivo #FF3333, Rojo Coral #FF5959, Rojo Claro #FF6B6B. Fondo/paneles casi negros con tinte rojo (más oscuros que cualquier tono de la paleta, igual criterio que Series/K-Dramas), bordes con Rojo Vino/Granate Oscuro, acento con Rojo Intenso/Rojo Vivo, brillos con Rojo Claro. =================================================================== */ .tema-videogames { --bg: #0f0303; --superficie: #1a0808; --superficie-clara: #240d0d; --borde: #660000; --borde-suave: #330000; --borde-brillo: rgba(255, 107, 107, 0.35); --acento: #cc0000; --acento-suave: #ff3333; --acento-glow: rgba(255, 51, 51, 0.35); --acento-foto: #ff3333; --panel-borde-ext: #050101; --panel-borde-int: rgba(255, 107, 107, 0.55); --panel-grad: linear-gradient(180deg, #2a0a0a 0%, #0a0303 100%); --panel-grad-clara: linear-gradient(180deg, #3a1212 0%, #170808 100%); --acento-rgb: 204, 0, 0; --acento-suave-rgb: 255, 51, 51; --bg-rgb: 15, 3, 3; --superficie-rgb: 26, 8, 8; --borde-rgb: 102, 0, 0; --panel-borde-int-rgb: 255, 107, 107; } .tema-videogames .widget-musica-mini-play, .tema-videogames .boton-flotante-indice { filter: hue-rotate(136deg); } .tema-videogames .boton-flotante-indice:hover { filter: hue-rotate(136deg) brightness(1.13); } /* =================================================================== BOOKS: paleta cobriza/naranja (la misma que K-Dramas usó antes de pasar a violeta) — mismo criterio que Series/K-Dramas/Videogames: todas las variables de color, no solo el acento. =================================================================== */ .tema-books { --bg: #0f0906; --superficie: #1e130c; --superficie-clara: #2a1c11; --borde: #6b4020; --borde-suave: #4a2c17; --borde-brillo: rgba(230, 150, 90, 0.35); --acento: #c8763f; --acento-suave: #e8a366; --acento-glow: rgba(232, 163, 102, 0.35); --acento-foto: #e8a366; --panel-borde-ext: #0a0503; --panel-borde-int: rgba(200, 130, 80, 0.55); --panel-grad: linear-gradient(180deg, #2a1a0e 0%, #0a0603 100%); --panel-grad-clara: linear-gradient(180deg, #3d2814 0%, #170f08 100%); --acento-rgb: 200, 118, 63; --acento-suave-rgb: 232, 163, 102; --bg-rgb: 15, 9, 6; --superficie-rgb: 30, 19, 12; --borde-rgb: 107, 64, 32; --panel-borde-int-rgb: 200, 130, 80; } /* Botones flotantes de música/índice de Books (mismo hue-rotate que Series/K-Dramas, tomando --acento de arriba como referencia). */ .tema-books .widget-musica-mini-play, .tema-books .boton-flotante-indice { filter: hue-rotate(-27deg); } .tema-books .boton-flotante-indice:hover { filter: hue-rotate(-27deg) brightness(1.13); } * { box-sizing: border-box; } html { scrollbar-color: var(--borde) var(--superficie); } body { background: /* iluminación radial superior, como luz de gabinete */ radial-gradient(ellipse 1100px 480px at 50% -8%, rgba(var(--acento-suave-rgb), 0.09), transparent 60%), /* halo tenue a media altura, para que no se sienta "un solo color plano" */ radial-gradient(ellipse 900px 600px at 85% 35%, rgba(var(--borde-rgb), 0.10), transparent 65%), radial-gradient(ellipse 900px 600px at 10% 60%, rgba(var(--borde-rgb), 0.08), transparent 65%), /* viñeta inferior oscura */ radial-gradient(ellipse 1400px 700px at 50% 115%, rgba(0, 0, 0, 0.6), transparent 60%), /* textura de "metal cepillado" — dos rejillas finas cruzadas */ repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0px, rgba(255, 255, 255, 0.014) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 4px), var(--bg); background-attachment: fixed; color: var(--texto); font-family: system-ui, sans-serif; margin: 0; min-height: 100vh; } /* ===== Punto 10: barra inferior fija tipo "panel continuo" — aprovecha la franja vacía de abajo en vez de dejarla como fondo plano. Pura decoración (pointer-events:none), no agrega ningún elemento al HTML ni cambia el flujo de la página. ===== */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(180deg, rgba(var(--superficie-rgb), 0.75), rgba(var(--bg-rgb), 0.95)); border-top: 1px solid rgba(var(--panel-borde-int-rgb), 0.18); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); pointer-events: none; z-index: 250; } h1, h2, h3 { font-family: Georgia, serif; margin: 0; } /* ===== Scrollbar personalizado (Chrome/Edge/Android WebView) ===== */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--borde), var(--superficie-clara)); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--acento-suave); } ::-webkit-scrollbar-corner { background: var(--bg); } /* ===== Insignias / badges (Drama, Horror, etc.) — botones físicos ===== */ .badge { display: inline-block; background: linear-gradient(180deg, var(--superficie-clara), var(--superficie)); border: 1px solid var(--panel-borde-ext); color: var(--texto); font-size: 0.75rem; letter-spacing: 0.3px; padding: 0.25rem 0.7rem; border-radius: 7px; margin-right: 0.4rem; box-shadow: inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.4); } .estrellas { color: var(--acento-suave); text-shadow: 0 0 8px var(--acento-glow); letter-spacing: 1px; } /* =================================================================== Botones — REDISEÑO (Fase A): pastilla ovalada con doble borde y brillo azul, mismo lenguaje visual que el botón "NEW" de referencia. Este es el ÚNICO lugar donde se define .boton/.boton-primario/ .boton-secundario — por eso Home, Cancel, Save Movie y New (y cualquier otro botón que use estas clases en cualquier página) se actualizan juntos, sin tocar nada más (arquitectura "Forma B"). text-decoration:none aquí quita el subrayado de CUALQUIER botón que en realidad sea un (Home, Cancel, New), de una sola vez. =================================================================== */ .boton { border: none; border-radius: 999px; padding: 0.6rem 1.5rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .boton:active { transform: translateY(1px); } .boton-primario { background: var(--panel-grad); color: var(--texto); border: 1px solid var(--acento-suave); box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px var(--acento-glow), 0 4px 10px rgba(0, 0, 0, 0.5); } .boton-primario:hover { filter: brightness(1.2); box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px var(--acento-glow), 0 4px 10px rgba(0, 0, 0, 0.5); } .boton-primario:active { box-shadow: var(--boton-relieve-activo); } .boton-secundario { background: var(--panel-grad); color: var(--texto); border: 1px solid var(--borde); box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 8px rgba(0, 0, 0, 0.4); } .boton-peligro { background: rgba(220, 38, 38, 0.15); color: #ff8a8a; border: 1px solid rgba(220, 38, 38, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .boton-peligro:hover { background: rgba(220, 38, 38, 0.28); border-color: rgba(220, 38, 38, 0.8); } .boton-secundario:hover { border-color: var(--acento-suave); box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px var(--acento-glow), 0 3px 8px rgba(0, 0, 0, 0.4); } .boton-secundario:active { box-shadow: var(--boton-relieve-activo); }