Laucha1312
1686 lines
49 KiB
CSS
1686 lines
49 KiB
CSS
/* =====================================================================
|
||
ONAPB — Kinetic Arena v3
|
||
Capa de innovación visual sobre kinetic-arena.css (sin tocar colores).
|
||
Carga DESPUÉS de base.css y kinetic-arena.css.
|
||
===================================================================== */
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
01. TOKENS DE MOTION
|
||
───────────────────────────────────────────────────────────────────── */
|
||
:root {
|
||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--ease-power: cubic-bezier(0.83, 0, 0.17, 1);
|
||
--ease-arc: cubic-bezier(0.65, 0.05, 0.36, 1);
|
||
|
||
--dur-snap: 140ms;
|
||
--dur-quick: 220ms;
|
||
--dur-base: 360ms;
|
||
--dur-soft: 560ms;
|
||
--dur-stage: 900ms;
|
||
|
||
--primary-glow: 0 0 0 0 rgba(194, 0, 0, 0.45);
|
||
--primary-shadow-soft: 0 18px 40px -22px rgba(194, 0, 0, 0.55);
|
||
--kinetic-shadow-deep: 0 40px 80px -30px rgba(26, 18, 8, 0.35);
|
||
--kinetic-shadow-card: 0 22px 45px -28px rgba(26, 18, 8, 0.28);
|
||
|
||
--grain-mix: multiply;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.001ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
02. SCROLLBAR PERSONALIZADA
|
||
───────────────────────────────────────────────────────────────────── */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--primary) transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--surface-container-low);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-deep));
|
||
border-radius: 999px;
|
||
border: 2px solid var(--surface-container-low);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--primary-deep);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
03. BARRA DE PROGRESO DE LECTURA (top)
|
||
───────────────────────────────────────────────────────────────────── */
|
||
#kinetic-reading-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
width: 0%;
|
||
background: linear-gradient(90deg, var(--primary), #ff3232, var(--primary-deep));
|
||
background-size: 200% 100%;
|
||
animation: barShimmer 3s linear infinite;
|
||
z-index: 2000;
|
||
transition: width 0.12s linear;
|
||
box-shadow: 0 0 12px rgba(194, 0, 0, 0.6);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes barShimmer {
|
||
from {
|
||
background-position: 0% 0;
|
||
}
|
||
|
||
to {
|
||
background-position: 200% 0;
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
04. CURSOR PERSONALIZADO (sólo desktop con puntero fino)
|
||
───────────────────────────────────────────────────────────────────── */
|
||
@media (hover: hover) and (pointer: fine) {
|
||
|
||
body.kinetic-cursor-on,
|
||
body.kinetic-cursor-on * {
|
||
cursor: none;
|
||
}
|
||
|
||
body.kinetic-cursor-on input,
|
||
body.kinetic-cursor-on textarea,
|
||
body.kinetic-cursor-on select {
|
||
cursor: text;
|
||
}
|
||
|
||
.kinetic-cursor-dot,
|
||
.kinetic-cursor-ring {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
will-change: transform;
|
||
/* sin mix-blend-mode: era el responsable de "perder" el cursor en fondos cálidos */
|
||
}
|
||
|
||
.kinetic-cursor-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: var(--primary);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
/* Doble anillo: borde negro fino para alto contraste sobre cualquier fondo */
|
||
border: 2px solid #111;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6),
|
||
0 2px 8px rgba(0, 0, 0, 0.45);
|
||
transition: transform var(--dur-snap) var(--ease-spring),
|
||
width var(--dur-quick), height var(--dur-quick),
|
||
background var(--dur-quick), border-color var(--dur-quick);
|
||
}
|
||
|
||
.kinetic-cursor-ring {
|
||
width: 38px;
|
||
height: 38px;
|
||
/* Anillo rojo grueso con outline negro para que se vea sobre claro y oscuro */
|
||
border: 3px solid var(--primary);
|
||
outline: 2px solid #111;
|
||
outline-offset: -1px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5),
|
||
0 4px 14px rgba(0, 0, 0, 0.35);
|
||
transform: translate(-50%, -50%);
|
||
transition: transform 0.18s var(--ease-out-soft),
|
||
width var(--dur-quick), height var(--dur-quick),
|
||
border-color var(--dur-quick),
|
||
opacity var(--dur-quick);
|
||
}
|
||
|
||
.kinetic-cursor-ring.is-hover {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-color: var(--primary-deep);
|
||
background: rgba(194, 0, 0, 0.18);
|
||
outline-color: #000;
|
||
}
|
||
|
||
.kinetic-cursor-dot.is-hover {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #fff;
|
||
border-color: var(--primary-deep);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
05. NAVBAR — efecto glass kinético + indicador animado
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.custom-navbar {
|
||
transition: background-color 0.4s var(--ease-out-soft),
|
||
border-color 0.4s var(--ease-out-soft),
|
||
box-shadow 0.4s var(--ease-out-soft),
|
||
padding 0.3s var(--ease-out-soft) !important;
|
||
}
|
||
|
||
.custom-navbar.is-scrolled {
|
||
background-color: rgba(245, 243, 239, 0.78) !important;
|
||
backdrop-filter: blur(28px) saturate(200%);
|
||
-webkit-backdrop-filter: blur(28px) saturate(200%);
|
||
border-bottom-color: rgba(194, 0, 0, 0.15) !important;
|
||
box-shadow: 0 8px 30px -20px rgba(26, 18, 8, 0.18) !important;
|
||
padding: 6px 0 !important;
|
||
}
|
||
|
||
.custom-navbar .navbar-logo {
|
||
transition: transform 0.45s var(--ease-spring), filter 0.4s ease;
|
||
}
|
||
|
||
.custom-navbar .navbar-brand:hover .navbar-logo {
|
||
transform: rotate(-6deg) scale(1.06);
|
||
filter: drop-shadow(0 6px 14px rgba(194, 0, 0, 0.35));
|
||
}
|
||
|
||
.custom-navbar .nav-link {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.custom-navbar .nav-link::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 14px;
|
||
right: 14px;
|
||
bottom: 4px;
|
||
height: 2px;
|
||
background: var(--primary);
|
||
transform: scaleX(0);
|
||
transform-origin: right center;
|
||
transition: transform 0.42s var(--ease-arc);
|
||
}
|
||
|
||
.custom-navbar .nav-link:hover::before,
|
||
.custom-navbar .nav-link.active::before {
|
||
transform: scaleX(1);
|
||
transform-origin: left center;
|
||
}
|
||
|
||
/* Cuadrito decorativo en active */
|
||
.custom-navbar .nav-link.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 6px;
|
||
width: 4px;
|
||
height: 4px;
|
||
background: var(--primary);
|
||
display: block !important;
|
||
animation: kineticBlink 1.6s steps(2, jump-none) infinite;
|
||
}
|
||
|
||
@keyframes kineticBlink {
|
||
50% {
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
/* Bell de notificaciones */
|
||
#notif-bell .bi-bell-fill {
|
||
transition: transform 0.35s var(--ease-spring);
|
||
}
|
||
|
||
#notif-bell:hover .bi-bell-fill {
|
||
animation: bellShake 0.6s var(--ease-out-soft);
|
||
}
|
||
|
||
@keyframes bellShake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: rotate(0);
|
||
}
|
||
|
||
20% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-12deg);
|
||
}
|
||
|
||
60% {
|
||
transform: rotate(8deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(-4deg);
|
||
}
|
||
}
|
||
|
||
#notif-badge {
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.7);
|
||
animation: badgeRing 1.8s var(--ease-out-soft) infinite;
|
||
}
|
||
|
||
@keyframes badgeRing {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
|
||
}
|
||
|
||
70% {
|
||
box-shadow: 0 0 0 12px rgba(194, 0, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
06. CARDS KINÉTICAS — tilt + spotlight + reveal
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kinetic-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
transform-style: preserve-3d;
|
||
transition:
|
||
transform 0.55s var(--ease-out-soft),
|
||
box-shadow 0.55s var(--ease-out-soft),
|
||
border-color 0.45s ease;
|
||
}
|
||
|
||
.kinetic-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
|
||
rgba(194, 0, 0, 0.08),
|
||
transparent 55%);
|
||
opacity: 0;
|
||
transition: opacity 0.45s ease;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.kinetic-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-deep));
|
||
transform: scaleY(0);
|
||
transform-origin: top center;
|
||
transition: transform 0.5s var(--ease-arc);
|
||
z-index: 2;
|
||
}
|
||
|
||
.kinetic-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--kinetic-shadow-card);
|
||
border-color: rgba(194, 0, 0, 0.3);
|
||
}
|
||
|
||
.kinetic-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.kinetic-card:hover::after {
|
||
transform: scaleY(1);
|
||
}
|
||
|
||
.kinetic-card>* {
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* Variante 3D tilt (activado vía JS con [data-tilt]) */
|
||
[data-tilt] {
|
||
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
|
||
transition: transform 0.25s var(--ease-out-soft);
|
||
will-change: transform;
|
||
}
|
||
|
||
[data-tilt].is-tilting {
|
||
transition: transform 0.05s linear;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
07. BOTONES KINÉTICOS — magnético + ripple + sweep
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.btn-kinetic-primary,
|
||
.btn,
|
||
.btn-admin-primary {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-kinetic-primary {
|
||
transition:
|
||
background-color var(--dur-quick) ease,
|
||
color var(--dur-quick) ease,
|
||
transform var(--dur-quick) var(--ease-spring),
|
||
box-shadow var(--dur-base) var(--ease-out-soft),
|
||
letter-spacing var(--dur-quick) ease !important;
|
||
}
|
||
|
||
.btn-kinetic-primary::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(120deg,
|
||
transparent 0%,
|
||
rgba(255, 255, 255, 0.28) 40%,
|
||
rgba(255, 255, 255, 0.55) 50%,
|
||
rgba(255, 255, 255, 0.28) 60%,
|
||
transparent 100%);
|
||
transform: translateX(-110%) skewX(-15deg);
|
||
transition: transform 0.65s var(--ease-arc);
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-kinetic-primary:hover {
|
||
box-shadow: var(--primary-shadow-soft);
|
||
letter-spacing: 0.16em !important;
|
||
transform: translateY(-2px) !important;
|
||
}
|
||
|
||
.btn-kinetic-primary:hover::after {
|
||
transform: translateX(110%) skewX(-15deg);
|
||
}
|
||
|
||
.btn-kinetic-primary>* {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Ripple universal: agrega clase .kinetic-ripple */
|
||
.kinetic-ripple-wave {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.45);
|
||
transform: translate(-50%, -50%) scale(0);
|
||
animation: ripple 0.6s var(--ease-out-soft);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
@keyframes ripple {
|
||
to {
|
||
transform: translate(-50%, -50%) scale(4);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* Botón magnético */
|
||
[data-magnetic] {
|
||
transition: transform 0.22s var(--ease-out-soft);
|
||
will-change: transform;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
08. HERO — text-reveal mask + parallax + CTA elevation
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.hero-title {
|
||
/* Sin overflow: hidden global — el clipping del reveal lo hace cada .word.
|
||
Además agregamos padding-bottom para dar lugar a descenders (p, q, j, g, y). */
|
||
display: inline-block;
|
||
padding-bottom: 0.18em;
|
||
line-height: 1.02 !important;
|
||
}
|
||
|
||
.hero-title .word,
|
||
.kinetic-reveal-text .word {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
vertical-align: bottom;
|
||
/* Espacio para que los descenders no queden cortados por el overflow:hidden */
|
||
padding-bottom: 0.22em;
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.hero-title .word>span,
|
||
.kinetic-reveal-text .word>span {
|
||
display: inline-block;
|
||
/* 130% > 100% + descender (~22%), garantiza ocultarlo completamente al inicio */
|
||
transform: translateY(130%);
|
||
transition: transform 0.95s var(--ease-arc);
|
||
}
|
||
|
||
/* Wrapper general del reveal-text */
|
||
.kinetic-reveal-text {
|
||
display: inline-block;
|
||
padding-bottom: 0.18em;
|
||
line-height: 1.05 !important;
|
||
}
|
||
|
||
/* Override global para todos los displays/headings: relajar line-height
|
||
demasiado ajustado del sistema base que recorta descenders. */
|
||
h1, h2, h3, h4, h5, h6,
|
||
.display-1, .display-2, .display-3,
|
||
.display-4, .display-5, .display-6,
|
||
.hero-title {
|
||
line-height: 1.05 !important;
|
||
padding-bottom: 0.08em;
|
||
}
|
||
|
||
/* Caso especial Antonio (font display) — necesita un poco más de aire */
|
||
.display-1, .display-2, .display-3, .hero-title {
|
||
padding-bottom: 0.12em;
|
||
}
|
||
|
||
.hero-title.is-in .word>span,
|
||
.kinetic-reveal-text.is-in .word>span {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(2)>span {
|
||
transition-delay: 0.08s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(3)>span {
|
||
transition-delay: 0.16s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(4)>span {
|
||
transition-delay: 0.24s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(5)>span {
|
||
transition-delay: 0.32s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(6)>span {
|
||
transition-delay: 0.40s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(7)>span {
|
||
transition-delay: 0.48s;
|
||
}
|
||
|
||
.hero-title.is-in .word:nth-child(8)>span {
|
||
transition-delay: 0.56s;
|
||
}
|
||
|
||
/* Highlight con barrido tras el texto */
|
||
.kinetic-highlight {
|
||
position: relative;
|
||
display: inline-block;
|
||
color: var(--primary);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.kinetic-highlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 8% -4% 8% -4%;
|
||
background: rgba(194, 0, 0, 0.12);
|
||
transform: scaleX(0);
|
||
transform-origin: left center;
|
||
transition: transform 0.7s var(--ease-arc) 0.4s;
|
||
z-index: -1;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.kinetic-highlight.is-in::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* Hero parallax (clip-path) */
|
||
.hero-clip,
|
||
img.hero-clip {
|
||
transition: clip-path 1.2s var(--ease-arc), transform 6s var(--ease-out-soft);
|
||
will-change: transform;
|
||
}
|
||
|
||
.carousel-item.active img.hero-clip {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
09. REVEAL ON SCROLL — variantes
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kfx-reveal {
|
||
opacity: 0;
|
||
transition: opacity 0.7s var(--ease-out-soft),
|
||
transform 0.7s var(--ease-out-soft),
|
||
filter 0.7s var(--ease-out-soft),
|
||
clip-path 0.9s var(--ease-arc);
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.kfx-reveal[data-fx="up"] {
|
||
transform: translateY(28px);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="down"] {
|
||
transform: translateY(-28px);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="left"] {
|
||
transform: translateX(-28px);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="right"] {
|
||
transform: translateX(28px);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="zoom"] {
|
||
transform: scale(0.92);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="blur"] {
|
||
filter: blur(14px);
|
||
transform: translateY(12px);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="curtain"] {
|
||
clip-path: inset(0 100% 0 0);
|
||
}
|
||
|
||
.kfx-reveal[data-fx="rise"] {
|
||
clip-path: inset(100% 0 0 0);
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
.kfx-reveal.is-in {
|
||
opacity: 1;
|
||
transform: none;
|
||
filter: none;
|
||
clip-path: inset(0 0 0 0);
|
||
}
|
||
|
||
/* Stagger para hijos */
|
||
[data-stagger]>* {
|
||
opacity: 0;
|
||
transform: translateY(22px);
|
||
transition: opacity 0.65s var(--ease-out-soft), transform 0.65s var(--ease-out-soft);
|
||
}
|
||
|
||
[data-stagger].is-in>* {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(1) {
|
||
transition-delay: 0.04s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(2) {
|
||
transition-delay: 0.10s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(3) {
|
||
transition-delay: 0.16s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(4) {
|
||
transition-delay: 0.22s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(5) {
|
||
transition-delay: 0.28s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(6) {
|
||
transition-delay: 0.34s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(7) {
|
||
transition-delay: 0.40s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(8) {
|
||
transition-delay: 0.46s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(9) {
|
||
transition-delay: 0.52s;
|
||
}
|
||
|
||
[data-stagger].is-in>*:nth-child(10) {
|
||
transition-delay: 0.58s;
|
||
}
|
||
|
||
/* Compatibilidad con animate-on-scroll original (mejorado) */
|
||
.animate-on-scroll {
|
||
transition:
|
||
opacity 0.75s var(--ease-out-soft),
|
||
transform 0.75s var(--ease-out-soft) !important;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
10. CONTADORES Y MARCADOR LIVE
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kfx-counter {
|
||
font-family: var(--font-display) !important;
|
||
font-feature-settings: "tnum" 1, "lnum" 1;
|
||
font-variant-numeric: tabular-nums lining-nums;
|
||
display: inline-block;
|
||
}
|
||
|
||
.kfx-live-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px;
|
||
background: rgba(194, 0, 0, 0.08);
|
||
border: 1px solid rgba(194, 0, 0, 0.3);
|
||
border-radius: 999px;
|
||
color: var(--primary);
|
||
font-family: var(--font-body);
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
.kfx-live-pill::before {
|
||
content: '';
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
|
||
animation: livePulseRing 1.8s ease-out infinite;
|
||
}
|
||
|
||
@keyframes livePulseRing {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
|
||
}
|
||
|
||
70% {
|
||
box-shadow: 0 0 0 12px rgba(194, 0, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
11. MARQUEE / TICKER (ej: sponsors, headlines)
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kfx-marquee {
|
||
overflow: hidden;
|
||
position: relative;
|
||
--marquee-speed: 40s;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
|
||
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
|
||
}
|
||
|
||
.kfx-marquee__track {
|
||
display: inline-flex;
|
||
gap: 4rem;
|
||
white-space: nowrap;
|
||
animation: marqueeSlide var(--marquee-speed) linear infinite;
|
||
}
|
||
|
||
.kfx-marquee:hover .kfx-marquee__track {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
@keyframes marqueeSlide {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
12. INPUTS — focus glow + label flotante (opcional)
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.form-control,
|
||
.form-select {
|
||
transition:
|
||
border-color 0.25s ease,
|
||
box-shadow 0.3s ease,
|
||
background-color 0.25s ease,
|
||
transform 0.2s ease !important;
|
||
}
|
||
|
||
.form-control:focus,
|
||
.form-select:focus {
|
||
box-shadow: 0 0 0 4px rgba(194, 0, 0, 0.10),
|
||
0 8px 22px -16px rgba(194, 0, 0, 0.6) !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Floating label compatible (envolver con .kfx-float) */
|
||
.kfx-float {
|
||
position: relative;
|
||
}
|
||
|
||
.kfx-float>.form-control {
|
||
padding-top: 1.4rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.kfx-float>label {
|
||
position: absolute;
|
||
top: 0.85rem;
|
||
left: 0.95rem;
|
||
color: var(--on-surface-muted);
|
||
pointer-events: none;
|
||
transition: transform 0.2s var(--ease-out-soft), color 0.2s ease, font-size 0.2s ease;
|
||
font-size: 0.95rem;
|
||
transform-origin: left center;
|
||
}
|
||
|
||
.kfx-float>.form-control:focus+label,
|
||
.kfx-float>.form-control:not(:placeholder-shown)+label {
|
||
transform: translateY(-12px) scale(0.78);
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
13. DIVIDERS Y SECCIONES KINÉTICAS
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kfx-section-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-family: var(--font-body) !important;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.22em;
|
||
color: var(--primary);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.kfx-section-tag::before {
|
||
content: '';
|
||
width: 32px;
|
||
height: 2px;
|
||
background: var(--primary);
|
||
transform-origin: left;
|
||
transform: scaleX(0);
|
||
transition: transform 0.7s var(--ease-arc);
|
||
}
|
||
|
||
.kfx-section-tag.is-in::before,
|
||
.kfx-reveal.is-in .kfx-section-tag::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.kfx-divider-sweep {
|
||
position: relative;
|
||
height: 1px;
|
||
background: var(--outline-variant);
|
||
overflow: hidden;
|
||
margin: 3rem 0;
|
||
}
|
||
|
||
.kfx-divider-sweep::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 60%;
|
||
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
||
animation: sweep 3.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes sweep {
|
||
0% {
|
||
transform: translateX(-110%);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(220%);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
14. TABLAS — hover slide + zebra suave
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.table tbody tr {
|
||
transition: background 0.2s ease, transform 0.25s var(--ease-out-soft);
|
||
}
|
||
|
||
.table tbody tr:hover {
|
||
background: rgba(194, 0, 0, 0.04);
|
||
}
|
||
|
||
.table tbody tr:hover td:first-child {
|
||
box-shadow: inset 3px 0 0 var(--primary);
|
||
}
|
||
|
||
.table-dark tbody tr:hover {
|
||
background: rgba(194, 0, 0, 0.18) !important;
|
||
}
|
||
|
||
/* Standings rank top-3 con resaltado */
|
||
#standingsCarousel tbody tr:nth-child(1) td:first-child {
|
||
color: #ffd34a !important;
|
||
font-weight: 800;
|
||
}
|
||
|
||
#standingsCarousel tbody tr:nth-child(2) td:first-child {
|
||
color: #d8d8d8 !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
#standingsCarousel tbody tr:nth-child(3) td:first-child {
|
||
color: #d28a4a !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
15. BADGES MEJORADOS
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.badge {
|
||
transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
|
||
}
|
||
|
||
.badge:hover {
|
||
transform: scale(1.06);
|
||
}
|
||
|
||
.badge.bg-primary {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
|
||
box-shadow: 0 4px 12px -6px rgba(194, 0, 0, 0.45);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
16. MODALES — entrada elegante
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.modal.fade .modal-dialog {
|
||
transform: translateY(40px) scale(0.96);
|
||
transition: transform 0.45s var(--ease-spring), opacity 0.4s ease !important;
|
||
}
|
||
|
||
.modal.show .modal-dialog {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
.modal-backdrop.show {
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
}
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--outline-variant);
|
||
border-radius: var(--radius) !important;
|
||
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
|
||
animation: modalGlow 0.6s ease;
|
||
}
|
||
|
||
@keyframes modalGlow {
|
||
from {
|
||
box-shadow: 0 0 0 rgba(194, 0, 0, 0);
|
||
}
|
||
|
||
to {
|
||
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
|
||
}
|
||
}
|
||
|
||
.nav-tabs .nav-link {
|
||
position: relative;
|
||
transition: color 0.25s ease;
|
||
}
|
||
|
||
.nav-tabs .nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 10%;
|
||
right: 10%;
|
||
bottom: -1px;
|
||
height: 3px;
|
||
background: var(--primary);
|
||
transform: scaleX(0);
|
||
transform-origin: left center;
|
||
transition: transform 0.4s var(--ease-arc);
|
||
}
|
||
|
||
.nav-tabs .nav-link.active::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
17. SPLASH — cinemático
|
||
───────────────────────────────────────────────────────────────────── */
|
||
#splash-screen {
|
||
background: radial-gradient(ellipse at center, #1a1a18 0%, #0a0a0a 100%);
|
||
}
|
||
|
||
#splash-screen::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -50%;
|
||
background:
|
||
repeating-linear-gradient(45deg,
|
||
rgba(194, 0, 0, 0.04) 0,
|
||
rgba(194, 0, 0, 0.04) 1px,
|
||
transparent 1px,
|
||
transparent 12px);
|
||
animation: splashSweep 8s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes splashSweep {
|
||
from {
|
||
transform: translate(-25%, -25%) rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: translate(-25%, -25%) rotate(360deg);
|
||
}
|
||
}
|
||
|
||
#splash-logo {
|
||
position: relative;
|
||
filter: drop-shadow(0 12px 30px rgba(194, 0, 0, 0.55));
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
18. PWA banner — refinado
|
||
───────────────────────────────────────────────────────────────────── */
|
||
#pwa-install-banner {
|
||
border-top: 1px solid var(--outline-variant) !important;
|
||
background: rgba(255, 255, 255, 0.96) !important;
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
animation: bannerRise 0.5s var(--ease-spring);
|
||
}
|
||
|
||
@keyframes bannerRise {
|
||
from {
|
||
transform: translateY(110%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
#pwa-install-btn {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
box-shadow: 0 8px 24px -10px rgba(194, 0, 0, 0.55);
|
||
transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease !important;
|
||
}
|
||
|
||
#pwa-install-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 14px 30px -10px rgba(194, 0, 0, 0.65);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
19. SKELETON / SHIMMER
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kfx-skeleton {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--surface-container);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.kfx-skeleton::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.5),
|
||
transparent);
|
||
animation: shimmer 1.6s linear infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
from {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
20. SPONSORS CAROUSEL — fade edges + hover lift
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.sponsor-carousel-container {
|
||
-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
|
||
mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
|
||
}
|
||
|
||
.sponsor-item {
|
||
transition: transform 0.4s var(--ease-out-soft);
|
||
}
|
||
|
||
.sponsor-item:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
21. FOOTER — refinado
|
||
───────────────────────────────────────────────────────────────────── */
|
||
footer.footer {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--arena-dark) !important;
|
||
color: rgba(255, 255, 255, 0.65) !important;
|
||
}
|
||
|
||
footer.footer::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
||
animation: sweep 5s ease-in-out infinite;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
22. UTILIDADES INNOVADORAS
|
||
───────────────────────────────────────────────────────────────────── */
|
||
|
||
/* Texto con gradiente animado */
|
||
.kfx-text-gradient {
|
||
background: linear-gradient(120deg, var(--primary) 0%, #ff3232 35%, var(--primary-deep) 70%, var(--primary) 100%);
|
||
background-size: 250% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
animation: textShift 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes textShift {
|
||
|
||
0%,
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
}
|
||
|
||
/* Borde animado */
|
||
.kfx-border-glow {
|
||
position: relative;
|
||
isolation: isolate;
|
||
}
|
||
|
||
.kfx-border-glow::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -1px;
|
||
border-radius: inherit;
|
||
background: conic-gradient(from 0deg, transparent 0%, var(--primary) 25%, transparent 50%);
|
||
animation: borderSpin 4s linear infinite;
|
||
z-index: -1;
|
||
}
|
||
|
||
.kfx-border-glow::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 1px;
|
||
background: var(--surface-container-lowest);
|
||
border-radius: inherit;
|
||
z-index: -1;
|
||
}
|
||
|
||
@keyframes borderSpin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* Underline kinético en links */
|
||
.kfx-link {
|
||
position: relative;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
background-image: linear-gradient(currentColor, currentColor);
|
||
background-position: 0% 100%;
|
||
background-repeat: no-repeat;
|
||
background-size: 0% 1.5px;
|
||
transition: background-size 0.45s var(--ease-arc), color 0.25s ease;
|
||
}
|
||
|
||
.kfx-link:hover {
|
||
background-size: 100% 1.5px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* Imagen con zoom suave en hover y mask reveal */
|
||
.kfx-img-cover {
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.kfx-img-cover img {
|
||
transition: transform 0.9s var(--ease-out-soft), filter 0.5s ease;
|
||
will-change: transform;
|
||
}
|
||
|
||
.kfx-img-cover:hover img {
|
||
transform: scale(1.06);
|
||
filter: saturate(1.1) contrast(1.05);
|
||
}
|
||
|
||
.kfx-img-cover::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
|
||
opacity: 0;
|
||
transition: opacity 0.45s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.kfx-img-cover:hover::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Spotlight: contenido sobre imagen */
|
||
.kfx-img-spotlight {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.kfx-img-spotlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%),
|
||
rgba(194, 0, 0, 0.18),
|
||
transparent 60%);
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.kfx-img-spotlight:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Etiqueta numerada estilo deportivo */
|
||
.kfx-jersey {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
background: var(--arena-dark);
|
||
color: var(--primary);
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
border-radius: 4px;
|
||
box-shadow: inset 0 0 0 2px var(--primary);
|
||
transition: transform 0.3s var(--ease-spring);
|
||
}
|
||
|
||
.kfx-jersey:hover {
|
||
transform: rotate(-4deg) scale(1.05);
|
||
}
|
||
|
||
/* Badge dot pulsante */
|
||
.kfx-dot {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.7);
|
||
animation: badgeRing 1.6s ease-out infinite;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* No-grain (en superficies oscuras) */
|
||
.no-grain::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Página entrada */
|
||
@keyframes pageIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
animation: pageIn 0.5s var(--ease-out-soft);
|
||
}
|
||
|
||
/* Fix para evitar que las letras con "pancita" (p, g, y, q) se corten abajo */
|
||
.texto-sin-cortar,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
.fc-toolbar-title {
|
||
line-height: 1.3 !important;
|
||
padding-bottom: 2px !important;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
23. ADMIN — sidebar premium e interacciones
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.admin-sidebar {
|
||
background:
|
||
linear-gradient(180deg, rgba(194, 0, 0, 0.05), transparent 30%),
|
||
var(--admin-sidebar-bg, #0A0A0A) !important;
|
||
}
|
||
|
||
.admin-sidebar::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 1px;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, transparent, rgba(194, 0, 0, 0.3) 50%, transparent);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.sidebar-link {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-link::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: var(--primary);
|
||
transform: scaleY(0);
|
||
transition: transform 0.35s var(--ease-arc);
|
||
}
|
||
|
||
.sidebar-link:hover::before,
|
||
.sidebar-link.active::before {
|
||
transform: scaleY(1);
|
||
}
|
||
|
||
.sidebar-link i {
|
||
transition: transform 0.35s var(--ease-spring), color 0.25s ease;
|
||
}
|
||
|
||
.sidebar-link:hover i {
|
||
transform: translateX(3px) scale(1.08);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.sidebar-link.active {
|
||
background:
|
||
linear-gradient(90deg,
|
||
rgba(194, 0, 0, 0.95),
|
||
rgba(138, 0, 0, 0.85)) !important;
|
||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.sidebar-link.active i {
|
||
color: white !important;
|
||
transform: none;
|
||
}
|
||
|
||
/* Stat-card admin: número con tick + glow */
|
||
.stat-card {
|
||
background: linear-gradient(135deg, #0a0a0a, #1a1a1a) !important;
|
||
transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s ease;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.stat-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 100% 0%, rgba(194, 0, 0, 0.25), transparent 60%);
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
.stat-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.stat-card .stat-value {
|
||
background: linear-gradient(135deg, #fff, #ffb4b4);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* Admin card hover */
|
||
.admin-card {
|
||
border-radius: 4px !important;
|
||
transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s ease;
|
||
}
|
||
|
||
.admin-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
/* Botones admin con sweep */
|
||
.btn-admin-primary {
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: transform 0.25s var(--ease-spring), box-shadow 0.3s ease, background 0.25s ease !important;
|
||
}
|
||
|
||
.btn-admin-primary::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
|
||
transform: translateX(-110%) skewX(-15deg);
|
||
transition: transform 0.6s var(--ease-arc);
|
||
}
|
||
|
||
.btn-admin-primary:hover::after {
|
||
transform: translateX(110%) skewX(-15deg);
|
||
}
|
||
|
||
.btn-admin-primary:hover {
|
||
box-shadow: 0 14px 28px -12px rgba(194, 0, 0, 0.55);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Topbar admin con glass */
|
||
.admin-topbar {
|
||
background: rgba(255, 255, 255, 0.85) !important;
|
||
backdrop-filter: blur(18px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* Avatar con anillo */
|
||
.admin-topbar .bg-primary {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
|
||
box-shadow:
|
||
0 0 0 3px rgba(194, 0, 0, 0.15),
|
||
0 6px 18px -6px rgba(194, 0, 0, 0.5);
|
||
transition: transform 0.3s var(--ease-spring);
|
||
}
|
||
|
||
.admin-topbar .bg-primary:hover {
|
||
transform: rotate(-6deg) scale(1.05);
|
||
}
|
||
|
||
/* Mejor scroll en sidebar (móvil overlay) */
|
||
.sidebar-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(4px);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
z-index: 999;
|
||
}
|
||
|
||
.sidebar-overlay.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* Tablas admin con accent */
|
||
.kinetic-table tr {
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.kinetic-table tr:hover td {
|
||
background: rgba(194, 0, 0, 0.04);
|
||
box-shadow: inset 3px 0 0 var(--primary);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
24. NOTICIAS / EVENTOS — micro UI
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.kinetic-news-item {
|
||
position: relative;
|
||
transition: background 0.3s var(--ease-out-soft), padding-left 0.3s var(--ease-out-soft);
|
||
}
|
||
|
||
.kinetic-news-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--primary);
|
||
transition: width 0.4s var(--ease-arc);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.kinetic-news-item:hover {
|
||
background: rgba(194, 0, 0, 0.03);
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.kinetic-news-item:hover::before {
|
||
width: 8px;
|
||
}
|
||
|
||
/* Eventos – tarjeta con flecha animada */
|
||
.kfx-event-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.kfx-event-cta::after {
|
||
content: '→';
|
||
transition: transform 0.35s var(--ease-arc);
|
||
display: inline-block;
|
||
}
|
||
|
||
.kinetic-card:hover .kfx-event-cta::after {
|
||
transform: translateX(6px);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
25. RESPONSIVE — desactivar efectos pesados en móvil
|
||
───────────────────────────────────────────────────────────────────── */
|
||
@media (max-width: 768px) {
|
||
.kinetic-card:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.kinetic-card::before {
|
||
display: none;
|
||
}
|
||
|
||
[data-tilt] {
|
||
transform: none !important;
|
||
}
|
||
|
||
.kinetic-cursor-dot,
|
||
.kinetic-cursor-ring {
|
||
display: none !important;
|
||
}
|
||
|
||
body.kinetic-cursor-on,
|
||
body.kinetic-cursor-on * {
|
||
cursor: auto;
|
||
}
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
26. SELECCIÓN DE TEXTO Y FOCUS GLOBAL
|
||
───────────────────────────────────────────────────────────────────── */
|
||
/* IMPORTANTE: ::selection sólo soporta `color` y `background-color`,
|
||
NO el shorthand `background`. Usar shorthand causa que la regla se ignore
|
||
silenciosamente en Chrome/Edge → quedaba selección invisible (blanco/blanco). */
|
||
::selection {
|
||
background-color: var(--primary) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
::-moz-selection {
|
||
background-color: var(--primary) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Override específico para que la selección dentro de modales SweetAlert
|
||
también respete los colores de marca (algunas reglas internas del SWAL
|
||
quedan más específicas y pisan la global). */
|
||
.swal2-popup ::selection,
|
||
.swal2-popup *::selection {
|
||
background-color: var(--primary) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.swal2-popup ::-moz-selection,
|
||
.swal2-popup *::-moz-selection {
|
||
background-color: var(--primary) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────
|
||
27. SWEETALERT2 — afinado de marca
|
||
───────────────────────────────────────────────────────────────────── */
|
||
.swal2-popup {
|
||
border-radius: var(--radius) !important;
|
||
font-family: var(--font-body) !important;
|
||
border: 1px solid var(--outline-variant);
|
||
box-shadow: 0 25px 60px -25px rgba(26, 18, 8, 0.4) !important;
|
||
}
|
||
|
||
.swal2-title {
|
||
font-family: var(--font-display) !important;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.swal2-toast {
|
||
border-left: 4px solid var(--primary) !important;
|
||
}
|
||
|
||
/* Botón CONFIRMAR de SweetAlert.
|
||
SWAL aplica `style="background-color: rgb(...)"` inline desde JS
|
||
(vía confirmButtonColor). Usamos background-color + background-image por
|
||
separado con !important para que el inline NO gane. Antes usábamos
|
||
shorthand `background:` que en algunos casos no se aplicaba como esperado. */
|
||
.swal2-styled.swal2-confirm,
|
||
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm,
|
||
button.swal2-confirm.swal2-styled {
|
||
background-color: var(--primary) !important;
|
||
background-image: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
|
||
color: #ffffff !important;
|
||
border: none !important;
|
||
border-radius: var(--radius-sm) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.08em !important;
|
||
font-weight: 700 !important;
|
||
box-shadow: 0 6px 18px -8px rgba(194, 0, 0, 0.55);
|
||
transition: transform 0.2s var(--ease-spring), box-shadow 0.25s ease, filter 0.2s ease;
|
||
}
|
||
|
||
.swal2-styled.swal2-confirm:hover,
|
||
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm:hover,
|
||
button.swal2-confirm.swal2-styled:hover {
|
||
background-color: var(--primary-deep) !important;
|
||
background-image: linear-gradient(135deg, var(--primary-deep), var(--primary)) !important;
|
||
color: #ffffff !important;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 10px 24px -10px rgba(194, 0, 0, 0.65);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.swal2-styled.swal2-confirm:focus,
|
||
button.swal2-confirm.swal2-styled:focus {
|
||
box-shadow: 0 0 0 3px rgba(194, 0, 0, 0.35),
|
||
0 6px 18px -8px rgba(194, 0, 0, 0.55) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Botón CANCELAR de SweetAlert: gris consistente, texto blanco legible. */
|
||
.swal2-styled.swal2-cancel,
|
||
.swal2-popup .swal2-actions .swal2-styled.swal2-cancel,
|
||
button.swal2-cancel.swal2-styled {
|
||
background-color: #6c757d !important;
|
||
background-image: none !important;
|
||
color: #ffffff !important;
|
||
border: none !important;
|
||
border-radius: var(--radius-sm) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.08em !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.swal2-styled.swal2-cancel:hover,
|
||
button.swal2-cancel.swal2-styled:hover {
|
||
background-color: #5a6268 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Botón DENY (cuando exista) */
|
||
.swal2-styled.swal2-deny,
|
||
button.swal2-deny.swal2-styled {
|
||
background-color: #b91c1c !important;
|
||
background-image: none !important;
|
||
color: #ffffff !important;
|
||
border: none !important;
|
||
border-radius: var(--radius-sm) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.08em !important;
|
||
font-weight: 700 !important;
|
||
} |