/* =================================================================== 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 { /* =================================================================== BASE NEUTRA — el "chrome" (fondo, superficies, bordes, paneles) es el MISMO negro elegante para todas las categorías (mismo criterio que Wishlist / body.fondo-home). El color de cada categoría vive SOLO en los tokens de acento (--acento*, más abajo), que sí redefine cada .tema-* — con eso los botones, bordes activos, glows y líneas técnicas toman su identidad sin teñir el marco base. =================================================================== */ /* Fondo general de la página */ --bg: #060606; /* Paneles / tarjetas / superficies */ --superficie: #101010; --superficie-clara: #1b1b1b; /* Bordes metálicos (neutros) */ --borde: #3a3a3a; --borde-suave: #262626; --borde-brillo: rgba(255, 255, 255, 0.22); /* 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: 6, 6, 6; --superficie-rgb: 16, 16, 16; --borde-rgb: 58, 58, 58; --panel-borde-int-rgb: 255, 255, 255; /* Texto */ --texto: #ececf0; --texto-tenue: #a6a6ae; /* Tokens de acabado "aluminio/HUD" reutilizables en toda la app (neutros) */ --panel-grad: linear-gradient(180deg, #161616 0%, #040404 100%); --panel-grad-clara: linear-gradient(180deg, #1f1f1f 0%, #0a0a0a 100%); /* Anillo oscuro exterior (borde "metal apagado") + filo interior claro — doble borde de panel mecanizado, ahora neutro (el color de categoría llega por --acento-*). */ --panel-borde-ext: #000000; --panel-borde-int: rgba(255, 255, 255, 0.16); /* 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); /* =================================================================== DARK GLASS — un solo sistema visual para los contenedores de las fichas (.seccion y equivalentes). Cristal oscuro cinematográfico: superficie translúcida con luz ambiental, profundidad interna real (más claro arriba, más oscuro abajo) y el fondo de la app filtrándose por detrás. La categoría solo aporta su ACENTO: estos tokens NO se redefinen por tema, se resuelven en el punto de uso (--acento-*, --superficie-rgb, --bg-rgb, --panel-borde-int-rgb ya cambian con cada .tema-*). En Modo Claro los mismos tokens dan un "light glass" (override en css/tema-claro.css). El color solo aparece como TINTE ambiental muy tenue arriba + borde fino + glow discreto — nunca llena el panel, nunca es neon. --glass-fondo, de abajo hacia arriba en la pila (refinamiento: cuerpo CASI uniforme para matar la sensación de "degradado pintado"; la materialidad la dan un reflejo de luz amplísimo y una variación de tono casi imperceptible): 1) cuerpo del vidrio: opacidad alta y pareja (texto legible), con micro-variación — arriba un pelín más levantado, centro neutro, base un pelín más honda (color --bg, no menos opacidad) 2) luz de ambiente de la categoría: radial que parece entrar POR DETRÁS del borde superior y reflejarse (no pintura sobre el panel) 3) reflejo de luz sobre el vidrio: radial gigante y descentrado, casi invisible — un brillo de material, nunca una franja */ --glass-fondo: radial-gradient(150% 120% at 28% -12%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.014) 26%, rgba(255, 255, 255, 0) 58%), radial-gradient(120% 70% at 50% -22%, rgba(var(--acento-rgb), 0.10) 0%, rgba(var(--acento-rgb), 0.028) 42%, rgba(var(--acento-rgb), 0) 78%), linear-gradient(180deg, rgba(var(--superficie-rgb), 0.82) 0%, rgba(var(--superficie-rgb), 0.76) 38%, rgba(var(--superficie-rgb), 0.75) 68%, rgba(var(--bg-rgb), 0.80) 100%); --glass-fondo-suave: radial-gradient(150% 120% at 28% -12%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 58%), radial-gradient(120% 70% at 50% -22%, rgba(var(--acento-rgb), 0.07) 0%, rgba(var(--acento-rgb), 0) 78%), linear-gradient(180deg, rgba(var(--superficie-rgb), 0.70) 0%, rgba(var(--superficie-rgb), 0.64) 60%, rgba(var(--bg-rgb), 0.66) 100%); --glass-blur: blur(16px) saturate(1.3); /* Borde fino, semitransparente, con el tinte del acento (mismo rgb que --panel-borde-int) — filo de luz integrado, NO neon. Sin cambios de intensidad respecto a la versión anterior. */ --glass-borde: rgba(var(--panel-borde-int-rgb), 0.24); /* Profundidad en capas, todas discretas — el peso lo llevan las sombras internas (grosor del cristal), no el glow: 1) doble filo interno: luz arriba + línea de acento tenue 2) baño de luz ambiental en el interior superior 3) hundido interior inferior (da grosor y curva la luz) 4) línea de contacto/oclusión en el borde inferior 5) elevación: sombra exterior suave y amplia 6) glow ambiental de la categoría — MUY tenue, sin subir */ --glass-sombra: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.06), inset 0 18px 30px -24px rgba(255, 255, 255, 0.06), inset 0 -44px 60px -44px rgba(0, 0, 0, 0.68), inset 0 -1px 0 0 rgba(0, 0, 0, 0.35), 0 24px 50px -18px rgba(0, 0, 0, 0.62), 0 0 30px -8px rgba(var(--acento-suave-rgb), 0.09); --glass-sombra-suave: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -30px 44px -38px rgba(0, 0, 0, 0.55), 0 14px 30px -16px rgba(0, 0, 0, 0.5), 0 0 20px -10px rgba(var(--acento-suave-rgb), 0.08); /* 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 { --acento: #16a34a; --acento-suave: #4ade80; --acento-glow: rgba(74, 222, 128, 0.35); --acento-foto: #4ade80; --acento-rgb: 22, 163, 74; --acento-suave-rgb: 74, 222, 128; } /* =================================================================== 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 { --acento: #ab00c0; --acento-suave: #d500ff; --acento-glow: rgba(213, 0, 255, 0.35); --acento-foto: #d500ff; --acento-rgb: 171, 0, 192; --acento-suave-rgb: 213, 0, 255; } /* =================================================================== 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 { --acento: #cc0000; --acento-suave: #ff3333; --acento-glow: rgba(255, 51, 51, 0.35); --acento-foto: #ff3333; --acento-rgb: 204, 0, 0; --acento-suave-rgb: 255, 51, 51; } .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 { --acento: #c8763f; --acento-suave: #e8a366; --acento-glow: rgba(232, 163, 102, 0.35); --acento-foto: #e8a366; --acento-rgb: 200, 118, 63; --acento-suave-rgb: 232, 163, 102; } /* 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 — NEUTRA (blanco muy tenue), no teñida por la categoría: da profundidad sin ensuciar el negro. */ radial-gradient(ellipse 1100px 480px at 50% -8%, rgba(255, 255, 255, 0.05), transparent 60%), /* halos tenues a media altura, para que no se sienta "un solo color plano" */ radial-gradient(ellipse 900px 600px at 85% 35%, rgba(255, 255, 255, 0.028), transparent 65%), radial-gradient(ellipse 900px 600px at 10% 60%, rgba(255, 255, 255, 0.022), transparent 65%), /* viñeta inferior oscura */ radial-gradient(ellipse 1400px 700px at 50% 115%, rgba(0, 0, 0, 0.55), 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); }