/** * Tema del login (index.php) según data-erp-login-saludo en . * Convive con html.tema-oscuro / tema-azul-oscuro (localStorage). */ /* ---------- Navidad ---------- */ html[data-erp-login-saludo="navidad"] body { background: linear-gradient(165deg, #fff5f5 0%, #f0fdf4 45%, #eff6ff 100%) fixed; } html[data-erp-login-saludo="navidad"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 12% 18%, rgba(239, 68, 68, 0.08) 0%, transparent 42%), radial-gradient(circle at 88% 12%, rgba(34, 197, 94, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 95%, rgba(59, 130, 246, 0.06) 0%, transparent 45%); } html[data-erp-login-saludo="navidad"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="navidad"] .login-panel { border-color: rgba(22, 163, 74, 0.22); box-shadow: 0 12px 32px rgba(185, 28, 28, 0.1), 0 0 0 1px rgba(22, 163, 74, 0.12); } html[data-erp-login-saludo="navidad"] .login-panel .panel-heading { background: linear-gradient(90deg, rgba(220, 38, 38, 0.08), rgba(22, 163, 74, 0.1)); border-bottom-color: rgba(22, 163, 74, 0.25); } html[data-erp-login-saludo="navidad"] .btn-primary { background: linear-gradient(180deg, #16a34a, #15803d); border-color: #166534; } html.tema-oscuro[data-erp-login-saludo="navidad"] body, html.tema-azul-oscuro[data-erp-login-saludo="navidad"] body { background: linear-gradient(165deg, #1c1917 0%, #14532d 42%, #1e3a5f 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="navidad"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="navidad"] .login-panel .panel-heading { background: linear-gradient(90deg, rgba(220, 38, 38, 0.15), rgba(34, 197, 94, 0.12)); border-bottom-color: rgba(74, 222, 128, 0.25); } /* ---------- Reyes ---------- */ html[data-erp-login-saludo="reyes"] body { background: linear-gradient(168deg, #faf5ff 0%, #fef9c3 40%, #fff7ed 100%) fixed; } html[data-erp-login-saludo="reyes"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 8% 25%, rgba(234, 179, 8, 0.14) 0%, transparent 38%), radial-gradient(circle at 92% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 42%); } html[data-erp-login-saludo="reyes"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="reyes"] .login-panel { border-color: rgba(234, 179, 8, 0.35); box-shadow: 0 12px 32px rgba(126, 34, 206, 0.12), 0 0 0 1px rgba(234, 179, 8, 0.2); } html[data-erp-login-saludo="reyes"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(250, 204, 21, 0.15), rgba(192, 132, 252, 0.12)); border-bottom-color: rgba(202, 138, 4, 0.35); } html[data-erp-login-saludo="reyes"] .btn-primary { background: linear-gradient(180deg, #7c3aed, #6d28d9); border-color: #5b21b6; } html.tema-oscuro[data-erp-login-saludo="reyes"] body, html.tema-azul-oscuro[data-erp-login-saludo="reyes"] body { background: linear-gradient(168deg, #1e1b4b 0%, #422006 50%, #0f172a 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="reyes"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="reyes"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(250, 204, 21, 0.12), rgba(167, 139, 250, 0.15)); border-bottom-color: rgba(253, 224, 71, 0.25); } /* ---------- Año nuevo ---------- */ html[data-erp-login-saludo="ano_nuevo"] body { background: linear-gradient(175deg, #fefce8 0%, #e0f2fe 50%, #fce7f3 100%) fixed; } html[data-erp-login-saludo="ano_nuevo"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 35%), radial-gradient(circle at 80% 75%, rgba(14, 165, 233, 0.12) 0%, transparent 38%), radial-gradient(circle at 50% 5%, rgba(250, 204, 21, 0.18) 0%, transparent 30%); } html[data-erp-login-saludo="ano_nuevo"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="ano_nuevo"] .login-panel { border-color: rgba(14, 165, 233, 0.28); box-shadow: 0 12px 36px rgba(14, 165, 233, 0.14), 0 0 0 1px rgba(236, 72, 153, 0.12); } html[data-erp-login-saludo="ano_nuevo"] .login-panel .panel-heading { background: linear-gradient(95deg, rgba(14, 165, 233, 0.12), rgba(236, 72, 153, 0.1)); border-bottom-color: rgba(14, 165, 233, 0.35); } html[data-erp-login-saludo="ano_nuevo"] .btn-primary { background: linear-gradient(180deg, #0284c7, #0369a1); border-color: #075985; } html.tema-oscuro[data-erp-login-saludo="ano_nuevo"] body, html.tema-azul-oscuro[data-erp-login-saludo="ano_nuevo"] body { background: linear-gradient(175deg, #0c4a6e 0%, #831843 48%, #0f172a 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="ano_nuevo"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="ano_nuevo"] .login-panel .panel-heading { background: linear-gradient(95deg, rgba(56, 189, 248, 0.15), rgba(244, 114, 182, 0.12)); border-bottom-color: rgba(56, 189, 248, 0.3); } /* ---------- Halloween ---------- */ html[data-erp-login-saludo="halloween"] body { background: linear-gradient(170deg, #fff7ed 0%, #e9d5ff 55%, #ffedd5 100%) fixed; } html[data-erp-login-saludo="halloween"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(ellipse at 15% 30%, rgba(124, 58, 237, 0.14) 0%, transparent 50%), radial-gradient(ellipse at 85% 70%, rgba(234, 88, 12, 0.12) 0%, transparent 48%); } html[data-erp-login-saludo="halloween"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="halloween"] .login-panel { border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 14px 36px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(234, 88, 12, 0.15); } html[data-erp-login-saludo="halloween"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(253, 186, 116, 0.35), rgba(196, 181, 253, 0.35)); border-bottom-color: rgba(124, 58, 237, 0.35); } html[data-erp-login-saludo="halloween"] .btn-primary { background: linear-gradient(180deg, #7c3aed, #5b21b6); border-color: #4c1d95; } html.tema-oscuro[data-erp-login-saludo="halloween"] body, html.tema-azul-oscuro[data-erp-login-saludo="halloween"] body { background: linear-gradient(170deg, #1a0a12 0%, #3b0764 45%, #431407 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="halloween"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="halloween"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(124, 58, 237, 0.25), rgba(234, 88, 12, 0.18)); border-bottom-color: rgba(251, 146, 60, 0.35); } /* ---------- Uruguay ---------- */ html[data-erp-login-saludo="uruguay"] body { background: linear-gradient(168deg, #e0f2fe 0%, #bae6fd 38%, #fef9c3 100%) fixed; } html[data-erp-login-saludo="uruguay"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.14) 0%, transparent 42%), radial-gradient(circle at 90% 25%, rgba(250, 204, 21, 0.16) 0%, transparent 40%), radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.08) 0%, transparent 45%); } html[data-erp-login-saludo="uruguay"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="uruguay"] .login-panel { border-color: rgba(14, 165, 233, 0.35); box-shadow: 0 12px 32px rgba(14, 165, 233, 0.12), 0 0 0 1px rgba(250, 204, 21, 0.18); } html[data-erp-login-saludo="uruguay"] .login-panel .panel-heading { background: linear-gradient(95deg, rgba(56, 189, 248, 0.18), rgba(250, 204, 21, 0.14)); border-bottom-color: rgba(2, 132, 199, 0.35); } html[data-erp-login-saludo="uruguay"] .btn-primary { background: linear-gradient(180deg, #0284c7, #0369a1); border-color: #075985; } html.tema-oscuro[data-erp-login-saludo="uruguay"] body, html.tema-azul-oscuro[data-erp-login-saludo="uruguay"] body { background: linear-gradient(168deg, #0c4a6e 0%, #075985 45%, #422006 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="uruguay"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="uruguay"] .login-panel .panel-heading { background: linear-gradient(95deg, rgba(56, 189, 248, 0.2), rgba(202, 138, 4, 0.15)); border-bottom-color: rgba(125, 211, 252, 0.35); } /* ---------- Mundial de fútbol ---------- */ html[data-erp-login-saludo="mundial_futbol"] body { background: linear-gradient(172deg, #ecfdf5 0%, #fefce8 48%, #e0f2fe 100%) fixed; } html[data-erp-login-saludo="mundial_futbol"] .page-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 12% 75%, rgba(22, 163, 74, 0.12) 0%, transparent 40%), radial-gradient(circle at 88% 18%, rgba(234, 179, 8, 0.14) 0%, transparent 38%), radial-gradient(circle at 50% 8%, rgba(59, 130, 246, 0.08) 0%, transparent 32%); } html[data-erp-login-saludo="mundial_futbol"] .page-wrap > .container { position: relative; z-index: 1; } html[data-erp-login-saludo="mundial_futbol"] .login-panel { border-color: rgba(22, 163, 74, 0.32); box-shadow: 0 12px 34px rgba(22, 163, 74, 0.12), 0 0 0 1px rgba(234, 179, 8, 0.16); } html[data-erp-login-saludo="mundial_futbol"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(34, 197, 94, 0.14), rgba(234, 179, 8, 0.12)); border-bottom-color: rgba(21, 128, 61, 0.35); } html[data-erp-login-saludo="mundial_futbol"] .btn-primary { background: linear-gradient(180deg, #15803d, #166534); border-color: #14532d; } html.tema-oscuro[data-erp-login-saludo="mundial_futbol"] body, html.tema-azul-oscuro[data-erp-login-saludo="mundial_futbol"] body { background: linear-gradient(172deg, #052e16 0%, #422006 48%, #0f172a 100%) fixed; } html.tema-oscuro[data-erp-login-saludo="mundial_futbol"] .login-panel .panel-heading, html.tema-azul-oscuro[data-erp-login-saludo="mundial_futbol"] .login-panel .panel-heading { background: linear-gradient(100deg, rgba(34, 197, 94, 0.18), rgba(202, 138, 4, 0.14)); border-bottom-color: rgba(74, 222, 128, 0.3); } /* Emoji decorativo sobre el encabezado del panel */ html[data-erp-login-saludo] .erp-login-tema-heading-deco { font-size: 2rem; line-height: 1; margin-bottom: 8px; display: block; animation: erpLoginTemaEmoji 2.2s ease-in-out infinite; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", emoji, sans-serif; } html.tema-oscuro[data-erp-login-saludo] .erp-login-tema-heading-deco, html.tema-azul-oscuro[data-erp-login-saludo] .erp-login-tema-heading-deco { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); } @keyframes erpLoginTemaEmoji { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { html[data-erp-login-saludo] .erp-login-tema-heading-deco { animation: none; } } /* Footer del login: mejor contraste sobre fondos temáticos */ html[data-erp-login-saludo] footer.footer { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); } html.tema-oscuro[data-erp-login-saludo] footer.footer, html.tema-azul-oscuro[data-erp-login-saludo] footer.footer { background: rgba(15, 23, 42, 0.82); border-top-color: rgba(255, 255, 255, 0.1); }