/* ========================================================================== MiSalaUCR — Temas de temporada Se carga DESPUÉS de assets/style.css y solo redefine variables y unos pocos bloques. No cambia la estructura HTML existente ni los nombres de clase. Activación: (lo imprime page_top() según organizations.theme — ver lib/temas.php) ========================================================================== */ /* ============================ 1. INDEPENDENCIA ============================ MiSalaUCR — TEMA PATRIO DE SETIEMBRE ("Cinco franjas") Se conserva la clave de tema 'independencia' (organizations.theme) para no tocar la base de datos. No cambia estructura HTML ni nombres de clase existentes: solo redefine variables y unos pocos bloques. Idea: la bandera de Costa Rica NO se dibuja como ilustración; se usa como ESTRUCTURA. Siempre aparece como una banda de cinco franjas (azul 20% / blanco 13% / rojo 34% / blanco 13% / azul 20%). Única pieza que ondea: .deco-bandera (paño con mástil). */ body.tema-independencia { /* --- marca --- */ --navy: #10214a; --navy-2: #0a1733; --ink: #10214a; --teal: #0b3fa0; /* el "acento" del sistema pasa a ser azul bandera */ --teal-ink: #0b3fa0; --teal-soft: #e8eefa; --paper: #f7f8fb; /* --- alias usados en línea desde PHP (no renombrar) --- */ --azul: #0b3fa0; --azul-osc: #082f78; --celeste: #e8eefa; --verde: #17795a; --verde-cl: #e7f2ea; --rojo: #d81e34; --rojo-cl: #fcecef; /* --- neutros fríos --- */ --gris: #6c7680; --gris-cl: #f0f2f6; --borde: #e4e8f0; --tinta: #10214a; --fondo: #f7f8fb; /* --- radios casi rectos: es lo que le da el aire institucional --- */ --r-lg: 4px; --r-md: 3px; --r-sm: 3px; --r-pill: 999px; /* --- sombras: neutras y mínimas, cero sombras de color --- */ --sh-sm: none; --sh-md: 0 1px 2px rgba(16, 33, 74, .05); --sh-lg: 0 20px 46px -26px rgba(16, 33, 74, .40); --glow-teal: 0 0 0 3px rgba(11, 63, 160, .16); /* --- tipografía: NO se agrega ninguna fuente nueva --- */ --f-display: "Space Grotesk", Helvetica, Arial, sans-serif; /* --- la bandera, en sus dos orientaciones --- */ --bandera: linear-gradient(180deg, #0b3fa0 0 20%, #fff 20% 33%, #d81e34 33% 67%, #fff 67% 80%, #0b3fa0 80% 100%); --bandera-h: linear-gradient(90deg, #0b3fa0 0 20%, #fff 20% 33%, #d81e34 33% 67%, #fff 67% 80%, #0b3fa0 80% 100%); } /* fondo plano: se quitan los dos radial-gradient de style.css */ body.tema-independencia { background-image: none; } /* ---------- barra superior: blanca + banda bandera de 5 px ------------- */ body.tema-independencia .topbar { background: #fff; border-bottom: 1px solid var(--borde); } body.tema-independencia .topbar nav a { color: var(--navy); } body.tema-independencia .topbar nav a:hover { background: #eef1f7; color: var(--azul); } body.tema-independencia .topbar nav a.on { background: var(--navy); color: #fff; font-weight: 600; } body.tema-independencia .topbar nav a.salir { color: var(--rojo); } body.tema-independencia .topbar nav a.salir:hover { background: var(--rojo-cl); } body.tema-independencia .topbar::after { height: 5px; bottom: -5px; opacity: 1; animation: none; background: var(--bandera); background-size: auto; } /* ---------- logo: cupo lleno en rojo, contornos en tinta -------------- */ body.tema-independencia .msu-logo { --msu-fg: #10214a; --msu-word: #10214a; --msu-sub: #0b3fa0; --msu-accent: #d81e34; } body.tema-independencia .msu-mark > i:first-child { box-shadow: none; } body.tema-independencia .msu-mark > i:last-child { border-color: #0b3fa0; } /* ---------- títulos: viñeta = asta roja ------------------------------- */ body.tema-independencia h1, body.tema-independencia h2 { font-family: var(--f-display); letter-spacing: -.03em; } body.tema-independencia h2::before { width: 4px; height: 20px; border-radius: 0; box-shadow: none; background: var(--rojo); } /* ---------- botones: planos ------------------------------------------- */ body.tema-independencia .btn { background: var(--azul); box-shadow: none; border-radius: var(--r-md); } body.tema-independencia .btn:hover { background: var(--rojo); box-shadow: none; transform: none; } body.tema-independencia .btn.verde { background: var(--verde); color: #fff; } body.tema-independencia .btn.verde:hover { background: #106047; } body.tema-independencia .btn.gris { background: #fff; color: var(--navy); border-color: #dfe4ec; } body.tema-independencia .btn.gris:hover { background: var(--gris-cl); } /* ---------- saldo de horas: bandera vertical como filo --------------- */ body.tema-independencia .saldo { background: #fff; border-color: var(--borde); border-radius: var(--r-lg); padding: 18px 22px 18px 34px; } body.tema-independencia .saldo::before { width: 12px; background: var(--bandera); } /* ---------- rejilla de salas ----------------------------------------- */ body.tema-independencia .blk { border-width: 1px; border-radius: var(--r-sm); } body.tema-independencia .blk.libre { background: #fff; color: var(--azul); border-color: #c3cede; } body.tema-independencia a.blk.libre:hover, body.tema-independencia button.blk.libre:hover { border-color: var(--azul); color: var(--azul); transform: none; box-shadow: inset 0 -3px 0 var(--azul); } /* "Tuya": azul lleno + franja bandera de 4 px al pie */ body.tema-independencia .blk.mio { position: relative; overflow: hidden; background: var(--azul); color: #fff; border-color: transparent; box-shadow: none; } body.tema-independencia .blk.mio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bandera-h); } body.tema-independencia .blk.ocupado { background: var(--gris-cl); color: #8b93a1; border-color: var(--borde); } body.tema-independencia a.blk.ocupado:hover { border-color: var(--navy); color: var(--navy); transform: none; box-shadow: none; } body.tema-independencia .blk.cerrado { background: var(--gris-cl); color: #8b93a1; border-color: var(--borde); } body.tema-independencia .blk.pasado { background: transparent; color: #b3bac6; border-color: #d7dce6; } /* el bloque seleccionado (outline en línea desde PHP) se ve así: */ body.tema-independencia .blk.libre[style*="outline"] { box-shadow: inset 0 -3px 0 var(--rojo); } /* ---------- tarjetas, reservas, pestañas, KPIs ----------------------- */ body.tema-independencia .card { border-radius: var(--r-lg); box-shadow: none; } body.tema-independencia .res { border-radius: var(--r-md); border-left-color: var(--azul); box-shadow: none; } body.tema-independencia .res:hover { transform: none; box-shadow: none; border-color: #d5dbe6; } body.tema-independencia .tabs a { border-radius: var(--r-pill); box-shadow: none; } body.tema-independencia .tabs a:hover { border-color: var(--azul); color: var(--azul); transform: none; } body.tema-independencia .tabs a.on { background: var(--navy); border-color: transparent; box-shadow: none; } body.tema-independencia .kpi { border-radius: var(--r-lg); box-shadow: none; } body.tema-independencia .kpi:hover { transform: none; box-shadow: none; } body.tema-independencia .kpi::before { height: 4px; background: var(--bandera-h); } body.tema-independencia .barra i { background: var(--azul); } body.tema-independencia .pill { border-radius: var(--r-pill); } body.tema-independencia .pill.activa { background: var(--celeste); color: var(--azul); border-color: #c3cede; } body.tema-independencia input, body.tema-independencia select, body.tema-independencia textarea { border-radius: var(--r-sm); border-color: #dfe4ec; } /* ---------- barra de confirmación: banda bandera arriba -------------- */ body.tema-independencia .confirmar { border: 1px solid var(--borde); border-top: 0; border-radius: var(--r-lg); padding: 0; overflow: hidden; background: #fff; } body.tema-independencia .confirmar::before { content: ""; display: block; height: 5px; background: var(--bandera-h); } body.tema-independencia .confirmar > * { margin-left: 18px; margin-right: 18px; } body.tema-independencia .confirmar > b { display: block; margin-top: 16px; } body.tema-independencia .confirmar > form:last-child, body.tema-independencia .confirmar > p:last-child { margin-bottom: 16px; } /* ---------- ingreso (login.php / password.php / suspendida.php) ------- */ body.tema-independencia.pantalla-ingreso { background: var(--paper); color: var(--tinta); } body.tema-independencia .login-box { margin-top: 34px; } /* la línea turquesa del borde superior de la tarjeta pasa a banda bandera */ body.tema-independencia .login-box .card::before { height: 5px; width: auto; margin: -26px -26px 20px; border-radius: 0; background: var(--bandera-h); } /* ====================================================================== DECORACIÓN 1 · .deco-franja (banda superior del ingreso, con destello) Se imprime como primer hijo de
en login/password/suspendida. ====================================================================== */ .deco-franja { position: relative; overflow: hidden; pointer-events: none; height: 120px; margin: -64px calc(-50vw + 50%) 26px; width: 100vw; z-index: 51; background: var(--bandera); } .deco-franja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); animation: msu-franja-brillo 6s ease-in-out infinite alternate; } @keyframes msu-franja-brillo { from { transform: translateX(-40%); } to { transform: translateX(40%); } } /* ====================================================================== DECORACIÓN 2 · .deco-bandera (la bandera que ondea, con su mástil) El es el mástil (2 px de tinta); el es el paño. Dos animaciones simultáneas y de duración distinta: a) msu-bandera-onda 3.2 s ease-in-out → skewY ±1.6° + scaleY .985, con transform-origin en el borde del mástil (0 50%), así el paño se mece pero el asta queda clavada. b) msu-bandera-tela 2.4 s linear → una capa de franjas verticales de luz/sombra (paso 18 px, 16 % de opacidad) que se desplaza con background-position de 0 a 18px: son los pliegues de la tela viajando del mástil hacia afuera. 3.2 y 2.4 no son múltiplos, así el bucle nunca se siente mecánico. Solo se animan transform y background-position → compuestas por GPU, sin reflow: fluido en teléfonos modestos. ====================================================================== */ .deco-bandera { display: inline-flex; align-items: stretch; flex: none; vertical-align: middle; } .deco-bandera::before { content: ""; display: block; width: 2px; background: #10214a; } .deco-bandera > i { display: block; width: 40px; height: 26px; transform-origin: 0 50%; background-image: repeating-linear-gradient(90deg, rgba(16, 33, 74, .16) 0 9px, rgba(255, 255, 255, .16) 9px 18px), var(--bandera); background-size: 18px 100%, 100% 100%; animation: msu-bandera-onda 3.2s ease-in-out infinite, msu-bandera-tela 2.4s linear infinite; } @keyframes msu-bandera-onda { 0% { transform: skewY(0deg) scaleY(1); } 25% { transform: skewY(-1.6deg) scaleY(.985); } 50% { transform: skewY(0deg) scaleY(1); } 75% { transform: skewY(1.6deg) scaleY(.985); } 100% { transform: skewY(0deg) scaleY(1); } } @keyframes msu-bandera-tela { from { background-position: 0 0; } to { background-position: 18px 0; } } /* rótulo "SETIEMBRE · MES DE LA PATRIA" que acompaña a la bandera */ .deco-mes { display: flex; align-items: center; gap: 10px; margin-top: 40px; margin-bottom: 16px; font-family: var(--f-mono); font-size: .69rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--azul); } /* --- ajustes responsive/accesibilidad propios del tema patrio --- */ @media (max-width: 720px) { .deco-franja { height: 74px; margin: -64px calc(-50vw + 50%) 20px; } .deco-bandera > i { width: 30px; height: 20px; } .deco-mes { margin-top: 28px; margin-bottom: 12px; font-size: .64rem; letter-spacing: .16em; } body.tema-independencia .topbar::after { height: 4px; bottom: -4px; } body.tema-independencia .login-box .card::before { margin: -20px -20px 16px; } } @media (prefers-reduced-motion: reduce) { .deco-bandera > i, .deco-franja::after { animation: none !important; } } @media print { .deco-franja, .deco-bandera, .deco-mes { display: none !important; } } /* ================================ 2. HALLOWEEN ============================ 31 de octubre · noche de calabazas (único tema oscuro) */ body.tema-halloween { --navy: #ff8a2a; --navy-2: #ff7a1a; --ink: #f6f1e6; --teal: #ff7a1a; --teal-ink: #ff9d4d; --teal-soft: rgba(255, 122, 26, .16); --paper: #1c1529; --azul: #ff7a1a; --azul-osc: #d1550c; --celeste: rgba(255, 122, 26, .18); --verde: #7ee081; --verde-cl: rgba(126, 224, 129, .12); --rojo: #ff8d8d; --rojo-cl: rgba(184, 35, 42, .22); --gris: #a99ac6; --gris-cl: #2c2140; --borde: #3a2b52; --tinta: #f6f1e6; --fondo: #1c1529; --f-display: "Space Grotesk", Helvetica, Arial, sans-serif; --glow-teal: 0 0 0 3px rgba(255, 122, 26, .30); } body.tema-halloween { background-color: #1c1529; background-image: radial-gradient(900px 400px at 86% -8%, rgba(255, 122, 26, .16), transparent 60%), radial-gradient(800px 420px at -6% 6%, rgba(96, 49, 150, .30), transparent 58%); color: #f6f1e6; } body.tema-halloween .topbar { background: #14101f; border-bottom-color: #14101f; } body.tema-halloween .topbar nav a { color: #e6dcf5; } body.tema-halloween .topbar nav a.on { background: #ff7a1a; color: #241407; font-weight: 700; } body.tema-halloween .topbar nav a:hover { background: rgba(255, 122, 26, .18); color: #ffb03a; } body.tema-halloween .topbar::after { bottom: -2px; background: linear-gradient(90deg, transparent, #ff7a1a 30%, #ffb03a 70%, transparent); } body.tema-halloween .msu-logo { --msu-fg: #f6f1e6; --msu-word: #f6f1e6; --msu-sub: #ff9d4d; --msu-accent: #ff7a1a; } body.tema-halloween .msu-mark > i:first-child { box-shadow: 0 0 13px 2px rgba(255, 122, 26, .65); } /* borde de goteo bajo la barra */ body.tema-halloween .topbar { --gota: #14101f; } body.tema-halloween .topbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; z-index: 1; background: radial-gradient(9px 9px at 9px 0, var(--gota) 96%, transparent 100%) 0 0/26px 9px repeat-x; } body.tema-halloween h1, body.tema-halloween h2 { font-family: "Creepster", "Space Grotesk", cursive; letter-spacing: .02em; font-weight: 400; } body.tema-halloween h1 { font-size: 2.5rem; color: #ff8a2a; text-shadow: 0 0 22px rgba(255, 122, 26, .35); } body.tema-halloween h2 { font-size: 1.62rem; color: #ff8a2a; } body.tema-halloween .card { background: #241a36; border-color: #3a2b52; } body.tema-halloween .btn { background: linear-gradient(180deg, #ffa23a, #ff7a1a); color: #241407; } body.tema-halloween .btn:hover { background: linear-gradient(180deg, #8ee889, #57c463); color: #0e2e12; } body.tema-halloween .btn.gris { background: transparent; color: #e6dcf5; border-color: #453360; } body.tema-halloween input, body.tema-halloween select, body.tema-halloween textarea { background: #1a1327; color: #f6f1e6; border-color: #453360; } body.tema-halloween input::placeholder { color: #7d6f99; } body.tema-halloween .saldo { background: linear-gradient(120deg, #241a36, #33204d); border-color: rgba(255, 122, 26, .32); } body.tema-halloween .saldo::before { background: linear-gradient(180deg, #ffb03a, #ff7a1a); width: 6px; } body.tema-halloween .saldo b { color: #ffb03a; font-family: "Creepster", cursive; } body.tema-halloween .blk { background: transparent; } body.tema-halloween .blk.libre { background: transparent; color: #f6f1e6; border-color: #5a4480; } body.tema-halloween .blk.mio { background: linear-gradient(180deg, #ffb03a, #ff7a1a); color: #3d1d02; box-shadow: 0 0 20px 3px rgba(255, 122, 26, .45); } body.tema-halloween .blk.ocupado { background: #2c2140; color: #8d80a8; border-color: #3a2b52; } body.tema-halloween .blk.pasado { color: #5c5075; border-color: #3a2b52; } body.tema-halloween .blk.cerrado { background: #2c2140; color: #8d80a8; border-color: #3a2b52; } body.tema-halloween .res, body.tema-halloween .kpi, body.tema-halloween .tabs a { background: #241a36; border-color: #3a2b52; color: #f6f1e6; } body.tema-halloween .tabla tbody tr:hover { background: #2c2140; } body.tema-halloween .alert.good { background: rgba(126, 224, 129, .12); color: #a5eaa7; border-color: rgba(126, 224, 129, .35); } body.tema-halloween .foot { color: #8c7ba8; border-top-color: #3a2b52; } body.tema-halloween.pantalla-ingreso { background-color: #14101f; background-image: radial-gradient(700px 340px at 50% -6%, rgba(255, 176, 58, .20), transparent 62%), radial-gradient(900px 480px at 88% 8%, rgba(96, 49, 150, .35), transparent 60%), linear-gradient(180deg, #14101f, #1e1430 55%, #2a1b45); } body.tema-halloween .login-box .brand-big b, body.tema-halloween .login-box .msu-word b { font-family: "Creepster", cursive; color: #ff8a2a; letter-spacing: .03em; } /* ------- pastilla "Abiertas ahora" (tema oscuro) ----------------------- */ body.tema-halloween .pastilla-abiertas > summary { background: #241a36; border-color: #3a2b52; color: #e6dcf5; } body.tema-halloween .pastilla-abiertas > summary:hover, body.tema-halloween .pastilla-abiertas[open] > summary { border-color: #ff7a1a; } body.tema-halloween .pastilla-abiertas__panel { background: #241a36; border-color: #3a2b52; } body.tema-halloween .pastilla-abiertas__barras i { background: #3a2b52; } body.tema-halloween .pastilla-abiertas__flecha { background: rgba(255, 122, 26, .18); color: #ffb03a; } body.tema-halloween .pastilla-abiertas__rotulo { color: #8d80a8; } body.tema-halloween .pastilla-abiertas__lista .nom { color: #f6f1e6; } body.tema-halloween .pastilla-abiertas__lista > li.cerrada .nom { color: #8d80a8; } body.tema-halloween .pastilla-abiertas__lista > li.abierta .est { color: #a5eaa7; } /* ------- decoración: calabazas colgantes (div.deco-calabazas > i) --------- */ .deco-calabazas { display: flex; justify-content: space-between; padding: 0 44px; pointer-events: none; } .deco-calabazas i { display: block; width: 40px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffb03a, #ff7a1a 55%, #d1550c); box-shadow: 0 0 30px 8px rgba(255, 122, 26, .30), inset -6px -8px 14px rgba(140, 50, 4, .4); animation: msu-flotar 7s ease-in-out infinite; } .deco-calabazas i:nth-child(odd) { margin-top: 22px; transform: scale(.88); animation-delay: .8s; } .deco-calabazas i:nth-child(3n) { margin-top: 40px; animation-delay: 1.6s; } @keyframes msu-flotar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(9px) rotate(2deg); } } /* ================================ 3. NAVIDAD ============================== diciembre · Santa, trineo y luna llena */ body.tema-navidad { --navy: #0e3b2e; --navy-2: #0b2b22; --ink: #0b2b22; --teal: #b3252b; --teal-ink: #0f5140; --teal-soft: #fdefd4; --paper: #fdf8ee; --azul: #b3252b; --azul-osc: #a51f25; --celeste: #fdefd4; --verde: #0f5140; --verde-cl: #e2f0e9; --rojo: #b3252b; --rojo-cl: #fbe4e4; --gris: #6b6553; --gris-cl: #f2eee3; --borde: #ecdfc4; --tinta: #0b2b22; --fondo: #fdf8ee; --f-display: "Mountains of Christmas", Georgia, cursive; --glow-teal: 0 0 0 3px rgba(232, 185, 90, .32); } body.tema-navidad { background-image: radial-gradient(900px 400px at 86% -8%, rgba(232, 185, 90, .22), transparent 60%), radial-gradient(800px 420px at -6% 6%, rgba(15, 81, 64, .10), transparent 58%); } body.tema-navidad .topbar { background: #0e3b2e; border-bottom-color: #0e3b2e; } body.tema-navidad .topbar nav a { color: #e3f0ea; } body.tema-navidad .topbar nav a.on { background: #b3252b; color: #fff4e8; font-weight: 700; } body.tema-navidad .topbar nav a:hover { background: rgba(232, 185, 90, .18); color: #e8b95a; } body.tema-navidad .topbar nav a.salir { color: #ff9a9e; } body.tema-navidad .msu-logo { --msu-fg: #fdf6e9; --msu-word: #fdf6e9; --msu-sub: #e8b95a; --msu-accent: #e8b95a; position: relative; } body.tema-navidad .msu-mark > i:first-child { box-shadow: 0 0 13px 2px rgba(232, 185, 90, .6); } body.tema-navidad .msu-mark > i:last-child { border-color: #d9424a; } /* gorro de Santa sobre el isotipo */ body.tema-navidad .msu-logo::before { content: ""; position: absolute; left: -6px; top: -13px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 16px solid #cf3239; transform: rotate(-18deg); } body.tema-navidad .msu-logo::after { content: ""; position: absolute; left: -12px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: #fdf6e9; } /* banda de bastón de caramelo bajo la barra */ body.tema-navidad .topbar::after { height: 3px; bottom: -3px; opacity: 1; animation: none; background: repeating-linear-gradient(135deg, #b3252b 0 14px, #fdf6e9 14px 28px); } body.tema-navidad h1, body.tema-navidad h2 { font-family: "Mountains of Christmas", Georgia, cursive; font-weight: 700; letter-spacing: 0; } body.tema-navidad h1 { font-size: 3.2rem; line-height: 1; color: #b3252b; } body.tema-navidad h2 { font-size: 2.1rem; color: #b3252b; } body.tema-navidad .btn { background: linear-gradient(180deg, #cf3239, #a51f25); color: #fff4e8; } body.tema-navidad .btn:hover { background: linear-gradient(180deg, #14664f, #0d3f31); } body.tema-navidad .btn.gris { background: #fff; color: #0e3b2e; } body.tema-navidad .saldo { background: linear-gradient(120deg, #fff, #fdefd4); border-color: #ecd8a6; } body.tema-navidad .saldo::before { background: linear-gradient(180deg, #0f5140 0 40%, #e8b95a 40% 60%, #b3252b 60% 100%); width: 6px; } body.tema-navidad .saldo b { font-family: "Mountains of Christmas", cursive; color: #a51f25; font-size: 2.9rem; } body.tema-navidad .blk.mio { background: linear-gradient(180deg, #d9424a, #b3252b); color: #fff4e8; border-color: transparent; } body.tema-navidad .blk.libre { color: #0f5140; border-color: #bcd3c9; } body.tema-navidad .blk.cerrado { background: #f2eee3; color: #8a6553; border-color: #ecdfc4; } body.tema-navidad .grid-salas .hd { font-family: "Playfair Display", Georgia, serif; } body.tema-navidad .login-box .card::before { height: 10px; width: auto; margin: -6px -6px 20px; border-radius: 6px; background: repeating-linear-gradient(135deg, #b3252b 0 16px, #fdf6e9 16px 32px); } body.tema-navidad.pantalla-ingreso { background-color: #07211a; background-image: radial-gradient(900px 460px at 50% -12%, rgba(232, 185, 90, .18), transparent 60%), linear-gradient(180deg, #07211a, #0d3529 58%, #123f31); color: #e3f0ea; } body.tema-navidad.pantalla-ingreso .sub { color: #cfe6da; } body.tema-navidad.pantalla-ingreso .mini { color: #9dbcb1; } body.tema-navidad.pantalla-ingreso .foot { color: #8a8168; background: #fdf6e9; border-top: 0; } body.tema-navidad.pantalla-ingreso .login-box .msu-word b, body.tema-navidad.pantalla-ingreso .brand-big b { color: #fdf6e9; font-size: 4.4rem; } /* ------- decoración navideña -------------------------------------------- */ /* luna llena detrás del logo (div.deco-luna) */ .deco-luna { position: absolute; top: 120px; left: 50%; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 40% 36%, #fff6df, #f0dfae 62%, #e0c789); box-shadow: 0 0 120px 30px rgba(240, 223, 174, .28); } /* Santa + trineo (img.deco-trineo) — assets/brand/navidad/trineo.png */ .deco-trineo { display: block; position: relative; z-index: 2; margin: 6px auto 0; width: min(860px, 92%); max-height: 250px; object-fit: contain; animation: msu-trineo 7s ease-in-out infinite; } @keyframes msu-trineo { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } } /* cinta roja del saludo (div.deco-banner) en student.php */ .deco-banner { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 30px; display: flex; align-items: center; gap: 22px; margin-bottom: 20px; background: linear-gradient(110deg, #a51f25, #cf3239 58%, #d9585d); box-shadow: 0 22px 46px -22px rgba(120, 20, 26, .75); } .deco-banner::before { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background: repeating-linear-gradient(135deg, #fff 0 22px, transparent 22px 44px); } .deco-banner h1 { color: #fff4e8 !important; margin: 0 0 6px; } .deco-banner .sub { color: #ffe3d6; margin: 0; } .deco-banner img { width: 330px; max-height: 190px; object-fit: contain; flex: none; } @media (max-width: 720px) { .deco-banner { flex-direction: column; align-items: stretch; padding: 18px; } .deco-banner img { width: 100%; max-height: 130px; } } /* guirnalda de bombillos (div.deco-guirnalda > i) */ .deco-guirnalda { display: flex; justify-content: space-between; padding: 0 26px; pointer-events: none; } .deco-guirnalda i { display: block; width: 14px; height: 20px; border-radius: 0 0 60% 60% / 0 0 70% 70%; animation: msu-bombillo 3s ease-in-out infinite; } .deco-guirnalda i:nth-child(4n+1) { background: linear-gradient(180deg, #f7dc9a, #e8b95a); box-shadow: 0 0 22px 5px rgba(232, 185, 90, .45); } .deco-guirnalda i:nth-child(4n+2) { background: linear-gradient(180deg, #ef6a70, #c62f36); box-shadow: 0 0 22px 5px rgba(214, 60, 67, .40); margin-top: 12px; } .deco-guirnalda i:nth-child(4n+3) { background: linear-gradient(180deg, #63c9a4, #199a72); box-shadow: 0 0 22px 5px rgba(38, 168, 124, .38); margin-top: 24px; } .deco-guirnalda i:nth-child(4n) { background: linear-gradient(180deg, #fdf6e9, #e6dcc3); box-shadow: 0 0 22px 5px rgba(253, 246, 233, .35); margin-top: 12px; } .deco-guirnalda i:nth-child(odd) { animation-delay: .5s; } @keyframes msu-bombillo { 0%, 100% { filter: brightness(1); opacity: .9; } 50% { filter: brightness(1.35); opacity: 1; } } /* nieve (div.deco-nieve > i) */ .deco-nieve { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-start; pointer-events: none; overflow: hidden; } .deco-nieve i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #fdf6e9; opacity: .8; animation: msu-nieve 10s linear infinite; } .deco-nieve i:nth-child(3n) { width: 3px; height: 3px; animation-duration: 13s; animation-delay: 2s; } .deco-nieve i:nth-child(4n+1) { width: 6px; height: 6px; animation-duration: 8s; animation-delay: 4s; } @keyframes msu-nieve { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: .95; } 100% { transform: translateY(300px); opacity: 0; } } /* colinas nevadas al pie del ingreso (div.deco-colinas) */ .deco-colinas { position: relative; height: 120px; margin-top: -30px; } .deco-colinas::before, .deco-colinas::after { content: ""; position: absolute; bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .deco-colinas::before { left: -6%; width: 62%; height: 120px; background: #f4ecdc; } .deco-colinas::after { right: -8%; width: 66%; height: 96px; background: #fdf6e9; } /* ============================== responsive =============================== */ @media (max-width: 720px) { .deco-calabazas i:nth-child(n+5), .deco-guirnalda i:nth-child(n+7), .deco-nieve i:nth-child(n+11) { display: none; } .deco-calabazas { padding: 0 8px; } .deco-guirnalda { padding: 0 12px; } .deco-luna { top: 150px; width: 220px; height: 220px; margin-left: -110px; } .deco-trineo { max-height: 150px; } .deco-colinas { height: 80px; margin-top: -14px; } .deco-colinas::before { height: 80px; } .deco-colinas::after { height: 62px; } body.tema-halloween h1 { font-size: 2.1rem; } body.tema-navidad h1 { font-size: 2.4rem; } body.tema-navidad h2 { font-size: 1.8rem; } } /* ====================== accesibilidad / preferencias ===================== */ @media (prefers-reduced-motion: reduce) { .deco-calabazas i, .deco-guirnalda i, .deco-nieve i, .deco-trineo { animation: none !important; } .deco-nieve { display: none; } } @media print { .deco-calabazas, .deco-guirnalda, .deco-nieve, .deco-luna, .deco-colinas, .deco-trineo { display: none !important; } }