/* ============================================================ PLAN 3P — Sistema de diseño: variables CSS Paleta: noche de cine. Fondo oscuro cálido, acento ámbar-película, texto en crema suave. Modo claro disponible con data-tema="claro". ============================================================ */ :root { /* --- Paleta principal (modo oscuro por defecto) --- */ --color-fondo: #0f0e17; /* Negro cine, ligeramente violáceo */ --color-fondo-card: #1a1825; /* Tarjetas y paneles */ --color-fondo-elevado: #231f32; /* Modales, dropdowns */ --color-borde: #2e2a3e; /* Bordes sutiles */ --color-borde-activo: #f5a623; /* Borde foco y selección */ /* Acento principal: ámbar película / luz de proyector */ --color-acento: #f5a623; --color-acento-hover: #ffc04d; --color-acento-suave: rgba(245, 166, 35, 0.15); /* Acento secundario: rojo palomitas */ --color-secundario: #e8453c; --color-secundario-hover: #ff6b61; /* Texto */ --color-texto: #fffffe; /* Casi blanco cálido */ --color-texto-suave: #a7a3b8; /* Texto secundario */ --color-texto-muy-suave:#5c5874; /* Placeholders, deshabilitados */ --color-texto-inverso: #0f0e17; /* Texto sobre acento */ /* Valoraciones */ --color-nota-obra: #f5c518; /* Obra maestra ≥9 — dorado */ --color-nota-excelente: #7ecba1; /* Excepcional 8-9 — verde */ --color-nota-buena: #5ba4cf; /* Buena 7-8 — azul */ --color-nota-pasable: #a7a3b8; /* Pasable 6-7 — gris */ --color-nota-malilla: #f5a623; /* Malilla 5-6 — ámbar */ --color-nota-mala: #e8453c; /* Una M <5 — rojo */ /* Estado películas */ --color-estado-propuesta: #5ba4cf; --color-estado-pendiente: #f5a623; --color-estado-vista: #7ecba1; --color-estado-descartada: #5c5874; /* --- Tipografía --- */ /* Display: Bebas Neue — condensada, enérgica, muy cinematográfica */ --fuente-display: 'Bebas Neue', 'Impact', sans-serif; /* Texto: DM Sans — geométrica, muy legible en pantallas pequeñas */ --fuente-texto: 'DM Sans', 'Segoe UI', system-ui, sans-serif; /* Mono: para datos, puntuaciones */ --fuente-mono: 'JetBrains Mono', 'Consolas', monospace; /* Escala tipográfica */ --texto-xs: 0.75rem; /* 12px */ --texto-sm: 0.875rem; /* 14px */ --texto-base: 1rem; /* 16px */ --texto-lg: 1.125rem; /* 18px */ --texto-xl: 1.25rem; /* 20px */ --texto-2xl: 1.5rem; /* 24px */ --texto-3xl: 1.875rem; /* 30px */ --texto-4xl: 2.25rem; /* 36px */ --texto-display: 3.5rem; /* 56px — títulos pantalla */ /* --- Espaciado (escala 4px) --- */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.25rem; /* 20px */ --esp-6: 1.5rem; /* 24px */ --esp-8: 2rem; /* 32px */ --esp-10: 2.5rem; /* 40px */ --esp-12: 3rem; /* 48px */ --esp-16: 4rem; /* 64px */ /* --- Bordes y radios --- */ --radio-sm: 4px; --radio-md: 8px; --radio-lg: 12px; --radio-xl: 16px; --radio-full: 9999px; /* --- Sombras --- */ --sombra-sm: 0 1px 3px rgba(0,0,0,0.4); --sombra-md: 0 4px 12px rgba(0,0,0,0.5); --sombra-lg: 0 8px 32px rgba(0,0,0,0.6); --sombra-acento: 0 4px 20px rgba(245, 166, 35, 0.25); /* --- Transiciones --- */ --trans-rapida: 150ms ease; --trans-normal: 250ms ease; --trans-lenta: 400ms ease; /* --- Layout --- */ --ancho-maximo: 1280px; --ancho-contenido: 960px; --alto-nav: 64px; --alto-nav-movil: 56px; } /* ============================================================ MODO CLARO — activado con data-tema="claro" en ============================================================ */ [data-tema="claro"] { --color-fondo: #f8f6f2; --color-fondo-card: #ffffff; --color-fondo-elevado: #f0ecf8; --color-borde: #e0dced; --color-borde-activo: #d4870a; --color-acento: #d4870a; --color-acento-hover: #f5a623; --color-acento-suave: rgba(212, 135, 10, 0.10); --color-texto: #0f0e17; --color-texto-suave: #4a4560; --color-texto-muy-suave:#9994b0; --color-texto-inverso: #ffffff; --sombra-sm: 0 1px 3px rgba(0,0,0,0.10); --sombra-md: 0 4px 12px rgba(0,0,0,0.12); --sombra-lg: 0 8px 32px rgba(0,0,0,0.15); } /* ============================================================ PREFERENCIA REDUCIR MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }