/* =============================================================================
RESONUM · TEMA "CONCERT HALL"
Identidad visual extraída del logo: petrol profundo + coral encendido +
marfil cálido + tinta antracita. Una sola paleta. Definida y atrevida.
Sobrescribe Flora vía variables CSS y refina componentes clave para
transmitir música académica y profesional.
============================================================================= */
/* ── Paleta Resonum — extraída del logo ──────────────────────────────────── */
:root {
/* Petrol (color dominante de la clave de sol) */
--rs-petrol-50: #EAF1F4;
--rs-petrol-100: #C9DCE2;
--rs-petrol-200: #9DBCC7;
--rs-petrol-300: #6B97A7;
--rs-petrol-400: #3F7384;
--rs-petrol-500: #1F4E5F;
--rs-petrol-600: #163E4D;
--rs-petrol-700: #11303D;
--rs-petrol-800: #0B2330;
--rs-petrol-900: #061722;
--rs-petrol-950: #030C13;
/* Coral (acento atrevido) */
--rs-coral-50: #FDF1EC;
--rs-coral-100: #FADCD0;
--rs-coral-200: #F5BCA8;
--rs-coral-300: #EE9B82;
--rs-coral-400: #E47C5F;
--rs-coral-500: #D55F44;
--rs-coral-600: #B94732;
--rs-coral-700: #93372A;
--rs-coral-800: #6E2A22;
--rs-coral-900: #4A1D17;
/* Marfil cálido (canvas — reemplaza el blanco frío) */
--rs-marfil-50: #FBF7EE;
--rs-marfil-100: #F6F0E1;
--rs-marfil-200: #EFE6CF;
--rs-marfil-300: #E6D9B7;
/* Tinta antracita (líneas y texto fuerte) */
--rs-tinta-900: #0A1620;
--rs-tinta-800: #182632;
--rs-tinta-700: #2A3845;
--rs-tinta-500: #4F5D6A;
--rs-tinta-400: #75828E;
--rs-tinta-300: #A4ADB5;
--rs-tinta-200: #C9CFD4;
/* Semánticos puntuales (consistentes con la paleta) */
--rs-exito: #2F7D5C;
--rs-exito-suave: #DDEFE5;
--rs-error: #B94732; /* coral profundo · alinea con la marca */
--rs-error-suave: #FADCD0;
--rs-adv: #B97A1F;
--rs-adv-suave: #F6E5C8;
--rs-info: #1F4E5F; /* el petrol mismo */
--rs-info-suave: #C9DCE2;
/* Sombras "newspaper-print" — duras, posicionadas */
--rs-sombra-baja: 0 1px 0 var(--rs-petrol-700), 0 2px 0 -1px rgba(11,35,48,.10);
--rs-sombra-media: 0 2px 0 var(--rs-petrol-700), 0 8px 24px -8px rgba(11,35,48,.25);
--rs-sombra-alta: 0 3px 0 var(--rs-petrol-700), 0 18px 36px -12px rgba(11,35,48,.30);
--rs-sombra-coral: 0 2px 0 var(--rs-coral-600), 0 10px 28px -10px rgba(185,71,50,.35);
/* Tipografía */
--rs-fuente-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Bookman', Georgia, serif;
--rs-fuente-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
--rs-fuente-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Consolas, monospace;
/* Radios Resonum — sutil y geométrico (no rounded blob) */
--rs-radio-xs: 2px;
--rs-radio-sm: 4px;
--rs-radio-md: 6px;
--rs-radio-lg: 10px;
/* Pauta musical decorativa */
--rs-pentagrama: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 5px,
var(--rs-petrol-200) 5px,
var(--rs-petrol-200) 6px,
transparent 6px,
transparent 11px
);
}
/* ── Override de TODAS las variantes de énfasis de Flora ─────────────────────
El usuario quiere UNA paleta. No importa qué énfasis/intensidad esté en
sesión: la marca manda. Aplica a `:root` y a todos los `[data-fl-enfasis]`
posibles que setea Flora. */
:root,
html[data-fl-enfasis],
[data-fl-enfasis="rojo"],
[data-fl-enfasis="azul"],
[data-fl-enfasis="verde"],
[data-fl-enfasis="naranja"],
[data-fl-enfasis="rosa"],
[data-fl-enfasis="violeta"],
[data-fl-enfasis="gris"],
[data-fl-enfasis="oscuro"] {
/* Acento de Flora → Petrol Resonum */
--fl-acento-50: var(--rs-petrol-50);
--fl-acento-100: var(--rs-petrol-100);
--fl-acento-200: var(--rs-petrol-200);
--fl-acento-300: var(--rs-petrol-300);
--fl-acento-400: var(--rs-petrol-400);
--fl-acento-500: var(--rs-petrol-500);
--fl-acento-600: var(--rs-petrol-600);
--fl-acento-700: var(--rs-petrol-700);
--fl-acento-800: var(--rs-petrol-800);
--fl-acento-900: var(--rs-petrol-900);
--fl-acento-950: var(--rs-petrol-950);
--fl-acento: var(--rs-petrol-600);
--fl-acento-hover: var(--rs-petrol-700);
--fl-acento-activo: var(--rs-petrol-800);
--fl-acento-suave: var(--rs-petrol-50);
--fl-acento-suave-hover: var(--rs-petrol-100);
--fl-acento-borde: var(--rs-petrol-200);
--fl-acento-borde-fuerte: var(--rs-petrol-500);
--fl-acento-enlace: var(--rs-petrol-600);
--fl-acento-texto: var(--rs-petrol-700);
--fl-acento-texto-sobre: var(--rs-marfil-50);
--fl-acento-fuerte: var(--rs-petrol-800);
--fl-acento-foco: color-mix(in srgb, var(--rs-coral-500) 45%, transparent);
/* Semánticos Flora → Resonum */
--fl-exito: var(--rs-exito);
--fl-exito-hover: #1F5A40;
--fl-exito-suave: var(--rs-exito-suave);
--fl-exito-borde: #B7DACA;
--fl-exito-texto: #1F5A40;
--fl-exito-texto-sobre: var(--rs-marfil-50);
--fl-error: var(--rs-coral-600);
--fl-error-hover: var(--rs-coral-700);
--fl-error-suave: var(--rs-coral-100);
--fl-error-borde: var(--rs-coral-200);
--fl-error-texto: var(--rs-coral-800);
--fl-error-texto-sobre: var(--rs-marfil-50);
--fl-advertencia: var(--rs-adv);
--fl-advertencia-hover: #8A5A14;
--fl-advertencia-suave: var(--rs-adv-suave);
--fl-advertencia-borde: #E5CFA1;
--fl-advertencia-texto: #6E4612;
--fl-advertencia-texto-sobre: var(--rs-marfil-50);
--fl-info: var(--rs-petrol-500);
--fl-info-hover: var(--rs-petrol-600);
--fl-info-suave: var(--rs-petrol-50);
--fl-info-borde: var(--rs-petrol-200);
--fl-info-texto: var(--rs-petrol-700);
--fl-info-texto-sobre: var(--rs-marfil-50);
/* Destaque (botones primarios, etc.) → Petrol gradiente */
--fl-destaque-fondo: var(--rs-petrol-700);
--fl-destaque-fondo-hover: var(--rs-petrol-800);
--fl-destaque-borde: var(--rs-petrol-900);
--fl-destaque-texto: var(--rs-marfil-50);
--fl-destaque-gradiente: linear-gradient(135deg, var(--rs-petrol-800) 0%, var(--rs-petrol-600) 60%, var(--rs-petrol-500) 100%);
/* Fondos y superficies → marfil cálido (NO blanco frío) */
--fl-fondo: var(--rs-marfil-100);
--fl-fondo-sutil: var(--rs-marfil-200);
--fl-fondo-tenue: var(--rs-marfil-300);
--fl-superficie: var(--rs-marfil-50);
--fl-superficie-elevada: #FFFEF8;
--fl-superficie-hover: var(--rs-marfil-100);
--fl-superficie-activa: var(--rs-marfil-200);
--fl-superficie-muda: var(--rs-marfil-200);
--fl-superficie-invertida: var(--rs-petrol-900);
/* Bordes → petrol traslúcido (definidos, no fofos) */
--fl-borde: color-mix(in srgb, var(--rs-petrol-700) 18%, transparent);
--fl-borde-sutil: color-mix(in srgb, var(--rs-petrol-700) 10%, transparent);
--fl-borde-fuerte: color-mix(in srgb, var(--rs-petrol-700) 35%, transparent);
--fl-borde-intenso: var(--rs-petrol-800);
/* Texto */
--fl-texto: var(--rs-tinta-900);
--fl-texto-fuerte: var(--rs-petrol-900);
--fl-texto-suave: var(--rs-tinta-500);
--fl-texto-tenue: var(--rs-tinta-400);
--fl-texto-deshabilitado: var(--rs-tinta-300);
--fl-texto-invertido: var(--rs-marfil-50);
--fl-texto-enlace: var(--rs-coral-600);
/* Tipografías de Flora → Resonum */
--fl-fuente-sans: var(--rs-fuente-sans);
--fl-fuente-display: var(--rs-fuente-display);
--fl-fuente-mono: var(--rs-fuente-mono);
/* Sombras Flora con tinta petrol */
--fl-sombra-color: rgba(11, 35, 48, .18);
--fl-sombra-xs: 0 1px 0 rgba(11,35,48,.06);
--fl-sombra-sm: 0 2px 0 -1px rgba(11,35,48,.10), 0 1px 0 rgba(11,35,48,.04);
--fl-sombra-md: var(--rs-sombra-media);
--fl-sombra-lg: var(--rs-sombra-alta);
--fl-sombra-xl: 0 4px 0 var(--rs-petrol-700), 0 28px 56px -16px rgba(11,35,48,.45);
}
/* ── Body global ─────────────────────────────────────────────────────────── */
body {
background: var(--rs-marfil-100);
color: var(--rs-tinta-900);
font-family: var(--rs-fuente-sans);
font-feature-settings: 'ss01' on, 'cv11' on;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── FONDO ANIMADO · AROS BLUREADOS DE LA PALETA ──────────────────────────
Capa fija detrás de todo. Cada aro es un círculo con borde grueso, blur
intenso y una animación lenta y orgánica. Mezcla petrol + coral. */
.rs-fondo {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
background:
radial-gradient(ellipse 120% 80% at 0% 0%, color-mix(in srgb, var(--rs-petrol-100) 40%, transparent), transparent 60%),
radial-gradient(ellipse 100% 70% at 100% 100%, color-mix(in srgb, var(--rs-coral-100) 25%, transparent), transparent 55%),
var(--rs-marfil-100);
}
/* Pentagrama sutil decorativo (esquina sup. derecha) */
.rs-fondo::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 240px;
background-image: var(--rs-pentagrama);
background-size: 100% 220px;
background-repeat: no-repeat;
mask-image: linear-gradient(to left, var(--rs-petrol-900), transparent 90%);
-webkit-mask-image: linear-gradient(to left, var(--rs-petrol-900), transparent 90%);
opacity: .18;
}
/* Figuras musicales decorativas (mismas clases .rs-aro) — usan mask-image
con SVGs inline para que el color venga del background-color. */
.rs-aro {
position: absolute;
border: none;
border-radius: 0;
will-change: transform;
filter: blur(2px);
opacity: .35;
mix-blend-mode: multiply;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Figura 1 — Corchea + negra (paired notes, ♫) · HORIZONTAL ←→ */
.rs-aro--1 {
width: 396px; height: 396px;
top: 6%; left: -140px;
background-color: var(--rs-petrol-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHoriz 130s ease-in-out infinite;
opacity: .35;
}
/* Figura 2 — Negra (quarter note, ♩) · VERTICAL ↑↓ */
.rs-aro--2 {
width: 288px; height: 288px;
top: -80px; right: 18%;
background-color: var(--rs-coral-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroVert 110s ease-in-out infinite;
animation-delay: -7s;
opacity: .35;
}
/* Figura 3 — Corchea con bandera (♪) · OBLICUO ↘ */
.rs-aro--3 {
width: 306px; height: 306px;
top: 32%; left: 20%;
background-color: var(--rs-petrol-700);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSE 148s linear infinite;
animation-delay: -14s;
opacity: .25;
}
/* Figura 4 — Doble corchea unida (♬) · HORIZONTAL REVERSO →← */
.rs-aro--4 {
width: 432px; height: 432px;
bottom: -60px; right: -100px;
background-color: var(--rs-coral-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHorizRev 140s ease-in-out infinite;
animation-delay: -10s;
opacity: .30;
}
/* Figura 5 — Negra invertida (stem hacia arriba ↑) · VERTICAL REVERSO ↓↑ */
.rs-aro--5 {
width: 234px; height: 234px;
bottom: -50px; left: 10%;
background-color: var(--rs-petrol-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroVertRev 101s ease-in-out infinite;
animation-delay: -16s;
opacity: .35;
}
/* Figura 6 — Fermata (𝄐 calderón) · OBLICUO ↗ */
.rs-aro--6 {
width: 234px; height: 234px;
top: 58%; left: 46%;
background-color: var(--rs-coral-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoNE 120s linear infinite;
animation-delay: -4s;
opacity: .35;
}
/* Figura 7 — Sostenido (♯) · OBLICUO ↙ */
.rs-aro--7 {
width: 270px; height: 270px;
top: 18%; right: 12%;
background-color: var(--rs-petrol-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSW 157s linear infinite;
animation-delay: -22s;
opacity: .25;
}
/* Figura 8 — Bemol (♭) · OBLICUO ↘ chico abajo */
.rs-aro--8 {
width: 198px; height: 198px;
top: 78%; left: 32%;
background-color: var(--rs-coral-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSE 141s linear infinite;
animation-delay: -19s;
opacity: .35;
}
/* Figura 9 — Becuadro (♮) · VERTICAL ↑↓ central */
.rs-aro--9 {
width: 234px; height: 234px;
top: -40px; left: 38%;
background-color: var(--rs-petrol-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroVert 117s ease-in-out infinite;
animation-delay: -11s;
opacity: .25;
}
/* Figura 10 — Tresillo de corcheas (3 beamed eighths) · HORIZONTAL REV */
.rs-aro--10 {
width: 468px; height: 360px;
top: 70%; right: 4%;
background-color: var(--rs-coral-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHorizRev 156s ease-in-out infinite;
animation-delay: -25s;
opacity: .28;
}
/* Figura 11 — Calderón invertido (𝄐 al revés) · OBLICUO ↙ chico arriba */
.rs-aro--11 {
width: 198px; height: 198px;
top: 6%; right: 36%;
background-color: var(--rs-petrol-300);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSW 136s linear infinite;
animation-delay: -6s;
opacity: .30;
}
/* Figura 12 — Silencio de negra simplificado · OBLICUO ↗ */
.rs-aro--12 {
width: 180px; height: 234px;
bottom: 35%; right: -40px;
background-color: var(--rs-petrol-600);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoNE 145s linear infinite;
animation-delay: -13s;
opacity: .30;
}
/* Figura 13 — Semicorchea (doble bandera) · VERTICAL ↑↓ */
.rs-aro--13 {
width: 252px; height: 252px;
top: 28%; left: -60px;
background-color: var(--rs-coral-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroVert 126s ease-in-out infinite;
animation-delay: -3s;
opacity: .30;
}
/* Figura 14 — Corchea sola chica (♪) · OBLICUO ↗ esquina inferior */
.rs-aro--14 {
width: 162px; height: 162px;
top: 86%; left: 56%;
background-color: var(--rs-petrol-600);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoNE 132s linear infinite;
animation-delay: -29s;
opacity: .30;
}
/* Figura 15 — Bemol grande (♭) · HORIZONTAL REV alto */
.rs-aro--15 {
width: 324px; height: 324px;
top: 5%; right: 38%;
background-color: var(--rs-petrol-400);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHorizRev 163s ease-in-out infinite;
animation-delay: -32s;
opacity: .22;
}
/* Figura 16 — Sostenido chico (♯) · VERTICAL REV */
.rs-aro--16 {
width: 144px; height: 144px;
bottom: 24%; left: 62%;
background-color: var(--rs-coral-300);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroVertRev 110s ease-in-out infinite;
animation-delay: -2s;
opacity: .35;
}
/* Figura 17 — Negra invertida chica · OBLICUO ↘ */
.rs-aro--17 {
width: 134px; height: 134px;
top: 48%; right: 38%;
background-color: var(--rs-petrol-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSE 124s linear infinite;
animation-delay: -17s;
opacity: .25;
}
/* Figura 18 — Becuadro chico (♮) · OBLICUO ↙ */
.rs-aro--18 {
width: 170px; height: 170px;
top: 42%; left: 3%;
background-color: var(--rs-coral-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroOblicuoSW 152s linear infinite;
animation-delay: -34s;
opacity: .28;
}
/* Figura 19 — Doble negra unida (♫ alterno) · HORIZONTAL */
.rs-aro--19 {
width: 432px; height: 360px;
top: 38%; left: 60%;
background-color: var(--rs-coral-300);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHoriz 172s ease-in-out infinite;
animation-delay: -28s;
opacity: .25;
}
/* Figura 20 — Fermata grande (𝄐) · HORIZONTAL abajo */
.rs-aro--20 {
width: 360px; height: 360px;
bottom: 6%; left: 28%;
background-color: var(--rs-petrol-700);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
animation: rsAroHorizRev 179s ease-in-out infinite;
animation-delay: -42s;
opacity: .20;
}
/* ── Movimientos direccionales bien definidos ─────────────────────────── */
/* Horizontal: barre de izquierda a derecha y vuelve */
@keyframes rsAroHoriz {
0% { transform: translateX(0); }
50% { transform: translateX(60vw); }
100% { transform: translateX(0); }
}
/* Horizontal reverso: barre de derecha a izquierda y vuelve */
@keyframes rsAroHorizRev {
0% { transform: translateX(0); }
50% { transform: translateX(-55vw); }
100% { transform: translateX(0); }
}
/* Vertical: cae y vuelve a subir */
@keyframes rsAroVert {
0% { transform: translateY(0); }
50% { transform: translateY(70vh); }
100% { transform: translateY(0); }
}
/* Vertical reverso: sube y vuelve a bajar */
@keyframes rsAroVertRev {
0% { transform: translateY(0); }
50% { transform: translateY(-65vh); }
100% { transform: translateY(0); }
}
/* Oblicuo SE (↘) — viaje completo y regreso */
@keyframes rsAroOblicuoSE {
0% { transform: translate(0, 0); }
50% { transform: translate(40vw, 50vh); }
100% { transform: translate(0, 0); }
}
/* Oblicuo NE (↗) */
@keyframes rsAroOblicuoNE {
0% { transform: translate(0, 0); }
50% { transform: translate(35vw, -45vh); }
100% { transform: translate(0, 0); }
}
/* Oblicuo SW (↙) */
@keyframes rsAroOblicuoSW {
0% { transform: translate(0, 0); }
50% { transform: translate(-45vw, 40vh); }
100% { transform: translate(0, 0); }
}
/* Reduce el movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
.rs-aro { animation: none !important; }
}
/* El contenido principal va por encima del fondo decorativo (.rs-fondo z-index:0).
Los sticky/fixed (navbar, toggle, modales, toasts) ya tienen su propio z-index
alto y NO se tocan: aplicarles position:relative rompería su comportamiento. */
.fl-contenedor,
.flora-container,
main { position: relative; z-index: 1; }
/* ── Selección de texto ──────────────────────────────────────────────────── */
::selection {
background: var(--rs-coral-300);
color: var(--rs-petrol-900);
}
/* ── Tipografía display ──────────────────────────────────────────────────── */
h1, h2, h3,
.fl-header-pagina-titulo,
.fl-tarjeta-titulo,
.fl-modal-titulo {
font-family: var(--rs-fuente-display);
color: var(--rs-petrol-900);
letter-spacing: -0.01em;
font-weight: 600;
}
h1, .fl-header-pagina-titulo {
/* HD-first: max 2rem (32px) — antes 2.5rem competía con la cuota y
acciones en pantallas HD (1280x720). */
font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.02em;
}
/* ── HEADER DE PÁGINA — pentagrama decorativo + subtítulo coral ──────────── */
.fl-header-pagina {
position: relative;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--rs-petrol-800);
margin-bottom: 2rem;
background: transparent;
}
/* 5 líneas musicales debajo del header */
.fl-header-pagina::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 22px;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
var(--rs-petrol-300) 0,
var(--rs-petrol-300) 1px,
transparent 1px,
transparent 5px
);
background-size: 100% 25px;
background-repeat: no-repeat;
mask-image: linear-gradient(to right, var(--rs-petrol-900) 0%, transparent 35%);
-webkit-mask-image: linear-gradient(to right, var(--rs-petrol-900) 0%, transparent 35%);
opacity: .55;
}
.fl-header-pagina-subtitulo {
color: var(--rs-coral-600) !important;
font-style: italic;
font-weight: 500;
font-family: var(--rs-fuente-display);
letter-spacing: 0.02em;
}
.fl-header-pagina-icono {
background: var(--rs-petrol-800) !important;
color: var(--rs-marfil-50) !important;
border-radius: var(--rs-radio-sm);
box-shadow: var(--rs-sombra-baja);
}
/* ── BOTONES — definidos, sin tibieza ────────────────────────────────────── */
.fl-boton {
border-radius: var(--rs-radio-sm);
font-weight: 600;
letter-spacing: 0.01em;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.fl-boton:active { transform: translateY(1px); }
/* Primario → petrol oscuro fill */
.fl-boton--primario {
background: var(--rs-petrol-800);
border-color: var(--rs-petrol-900);
color: var(--rs-marfil-50);
box-shadow: var(--rs-sombra-baja);
}
.fl-boton--primario:hover {
background: var(--rs-petrol-900);
box-shadow: var(--rs-sombra-media);
}
/* Secundario → outline petrol con relleno marfil */
.fl-boton--secundario {
background: var(--rs-marfil-50);
border: 1.5px solid var(--rs-petrol-700);
color: var(--rs-petrol-800);
}
.fl-boton--secundario:hover {
background: var(--rs-petrol-50);
border-color: var(--rs-petrol-900);
color: var(--rs-petrol-900);
}
/* Fantasma → minimal con underline coral en hover */
.fl-boton--fantasma {
color: var(--rs-petrol-700);
background: transparent;
border: 1.5px solid transparent;
}
.fl-boton--fantasma:hover {
background: var(--rs-coral-50);
color: var(--rs-coral-700);
}
/* "Acento" / botones de acción destacada → coral fill */
.fl-boton--acento,
.fl-boton[data-rs-acento],
.fl-boton.boton-coral {
background: var(--rs-coral-500);
border-color: var(--rs-coral-600);
color: var(--rs-marfil-50);
box-shadow: var(--rs-sombra-coral);
}
.fl-boton--acento:hover,
.fl-boton[data-rs-acento]:hover,
.fl-boton.boton-coral:hover {
background: var(--rs-coral-600);
}
.fl-boton--peligro {
background: var(--rs-coral-600);
border-color: var(--rs-coral-700);
color: var(--rs-marfil-50);
}
.fl-boton--peligro:hover { background: var(--rs-coral-700); }
/* ── TARJETAS — glassmorphism: marfil translúcido + blur ────────────────── */
.fl-tarjeta {
background: color-mix(in srgb, var(--rs-marfil-50) 78%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
border: 1px solid color-mix(in srgb, var(--rs-petrol-300) 40%, transparent);
border-radius: var(--rs-radio-md);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--rs-marfil-50) 90%, transparent),
0 2px 0 -1px rgba(11,35,48,.08),
0 18px 40px -22px rgba(11,35,48,.20);
overflow: hidden;
position: relative;
}
.fl-tarjeta-cabecera {
border-bottom: 1px solid var(--rs-petrol-100);
background: linear-gradient(180deg, var(--rs-marfil-100) 0%, var(--rs-marfil-50) 100%);
}
.fl-tarjeta-titulo {
color: var(--rs-petrol-900);
font-family: var(--rs-fuente-display);
font-weight: 600;
letter-spacing: -0.01em;
}
.fl-tarjeta--destaque,
.fl-tarjeta--info,
.fl-tarjeta--acentuada {
border-color: var(--rs-petrol-700);
border-left: 4px solid var(--rs-coral-500);
}
.fl-tarjeta--exito { border-left: 4px solid var(--rs-exito); }
.fl-tarjeta--error { border-left: 4px solid var(--rs-coral-600); }
.fl-tarjeta--adv { border-left: 4px solid var(--rs-adv); }
/* Tarjeta interactiva → hover con elevación clara */
.fl-tarjeta--interactiva:hover {
transform: translateY(-2px);
box-shadow: var(--rs-sombra-media);
border-color: var(--rs-petrol-500);
}
/* ── TARJETA-MÉTRICA — glass + número grande serif + acento coral arriba ─ */
.fl-tarjeta-metrica {
background: color-mix(in srgb, var(--rs-marfil-50) 75%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
border: 1px solid color-mix(in srgb, var(--rs-petrol-300) 35%, transparent);
border-top: 3px solid var(--rs-coral-500);
border-radius: 0 0 var(--rs-radio-md) var(--rs-radio-md);
padding: 1.25rem 1.25rem 1.1rem;
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--rs-marfil-50) 90%, transparent),
0 2px 0 -1px rgba(11,35,48,.08),
0 14px 30px -18px rgba(11,35,48,.18);
}
.fl-tarjeta-metrica:hover {
transform: translateY(-2px);
box-shadow: var(--rs-sombra-media);
border-top-color: var(--rs-coral-600);
}
.fl-tarjeta-metrica-etiqueta {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: .68rem;
font-weight: 700;
color: var(--rs-petrol-700);
font-family: var(--rs-fuente-mono);
}
.fl-tarjeta-metrica-valor {
font-family: var(--rs-fuente-display);
font-weight: 600;
font-size: clamp(2rem, 3.5vw, 2.75rem);
line-height: 1;
color: var(--rs-petrol-900);
letter-spacing: -0.03em;
margin-top: .35rem;
}
.fl-tarjeta-metrica-icono {
color: var(--rs-coral-500) !important;
background: var(--rs-coral-50) !important;
border-radius: var(--rs-radio-sm);
}
.fl-tarjeta-metrica-pie,
.fl-tarjeta-metrica-cuerpo p {
color: var(--rs-tinta-500);
font-size: .82rem;
}
/* Variantes de métrica */
.fl-tarjeta-metrica--exito { border-top-color: var(--rs-exito); }
.fl-tarjeta-metrica--exito .fl-tarjeta-metrica-valor { color: var(--rs-exito); }
.fl-tarjeta-metrica--error { border-top-color: var(--rs-coral-600); }
.fl-tarjeta-metrica--error .fl-tarjeta-metrica-valor { color: var(--rs-coral-700); }
.fl-tarjeta-metrica--adv { border-top-color: var(--rs-adv); }
.fl-tarjeta-metrica--adv .fl-tarjeta-metrica-valor { color: var(--rs-adv); }
.fl-tarjeta-metrica--info,
.fl-tarjeta-metrica--acentuada {
border-top-color: var(--rs-petrol-700);
background: linear-gradient(180deg, var(--rs-petrol-50) 0%, var(--rs-marfil-50) 100%);
}
/* ── BADGES — sharp, mayúsculas, sin tibio rounded pill ──────────────────── */
.fl-badge {
border-radius: var(--rs-radio-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: .7rem;
padding: .25rem .55rem;
border-width: 1px;
border-style: solid;
}
.fl-badge--info { background: var(--rs-petrol-100); border-color: var(--rs-petrol-300); color: var(--rs-petrol-800); }
.fl-badge--exito { background: var(--rs-exito-suave); border-color: #B7DACA; color: #1F5A40; }
.fl-badge--error { background: var(--rs-coral-100); border-color: var(--rs-coral-300); color: var(--rs-coral-800); }
.fl-badge--adv { background: var(--rs-adv-suave); border-color: #E5CFA1; color: #6E4612; }
.fl-badge--destaque,
.fl-badge--acento { background: var(--rs-coral-500); border-color: var(--rs-coral-600); color: var(--rs-marfil-50); }
.fl-badge--solido.fl-badge--info { background: var(--rs-petrol-700); border-color: var(--rs-petrol-800); color: var(--rs-marfil-50); }
.fl-badge--solido.fl-badge--exito { background: var(--rs-exito); border-color: #1F5A40; color: var(--rs-marfil-50); }
.fl-badge--solido.fl-badge--error { background: var(--rs-coral-600); border-color: var(--rs-coral-700); color: var(--rs-marfil-50); }
.fl-badge--solido.fl-badge--adv { background: var(--rs-adv); border-color: #8A5A14; color: var(--rs-marfil-50); }
/* ── TABLAS — header petrol oscuro + filas ritmo de partitura ───────────── */
.fl-tabla,
.fl-tabla-datos,
.fl-tabla-datos-wrapper table {
background: transparent;
}
.fl-tabla thead th,
.fl-tabla-datos thead th {
background: var(--rs-petrol-800);
color: var(--rs-marfil-50);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: .72rem;
font-weight: 700;
border-bottom: none;
font-family: var(--rs-fuente-mono);
}
.fl-tabla tbody tr,
.fl-tabla-datos tbody tr {
border-bottom: 1px solid var(--rs-petrol-100);
transition: background .12s ease;
}
.fl-tabla tbody tr:hover,
.fl-tabla-datos tbody tr:hover {
background: var(--rs-coral-50);
}
.fl-tabla tbody tr:nth-child(even),
.fl-tabla-datos tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--rs-marfil-100) 50%, transparent);
}
.fl-tabla tbody tr:nth-child(even):hover,
.fl-tabla-datos tbody tr:nth-child(even):hover {
background: var(--rs-coral-50);
}
.fl-tabla tbody td,
.fl-tabla-datos tbody td {
color: var(--rs-tinta-900);
padding-top: .85rem;
padding-bottom: .85rem;
}
/* ── INPUTS / FORMULARIOS — bordes petrol definidos ─────────────────────── */
input.fl-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-input {
background: var(--rs-marfil-50);
border: 1.5px solid var(--rs-petrol-300);
color: var(--rs-tinta-900);
border-radius: var(--rs-radio-sm);
font-family: var(--rs-fuente-sans);
transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
input.fl-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.form-input:focus {
outline: none;
border-color: var(--rs-coral-500);
background: var(--rs-marfil-50);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-coral-500) 25%, transparent);
}
label,
.form-label,
.fl-form-label {
font-weight: 600;
color: var(--rs-petrol-800);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: .72rem;
font-family: var(--rs-fuente-mono);
}
/* ── NAVBAR — petrol oscuro translúcido (la sala antes del concierto) ──── */
.navbar,
.fl-navbar,
.flora-navbar {
background: color-mix(in srgb, var(--rs-petrol-900) 88%, transparent) !important;
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid color-mix(in srgb, var(--rs-petrol-700) 70%, transparent);
color: var(--rs-marfil-100);
box-shadow: 0 1px 0 rgba(11,35,48,.4), 0 6px 16px -8px rgba(0,0,0,.35);
}
.navbar--elevada,
.fl-navbar--elevada,
.flora-navbar--elevada {
background: color-mix(in srgb, var(--rs-petrol-900) 88%, transparent) !important;
}
.navbar-marca,
.fl-navbar-marca,
.flora-navbar-marca {
color: var(--rs-marfil-50) !important;
font-family: var(--rs-fuente-display);
font-weight: 600;
letter-spacing: -0.01em;
}
.navbar-nav-item,
.fl-navbar-nav-item,
.flora-navbar-nav-item {
color: var(--rs-marfil-200) !important;
border-radius: 0;
position: relative;
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: .72rem;
font-weight: 600;
padding: .5rem .85rem;
transition: color .12s ease, background-color .12s ease;
font-family: var(--rs-fuente-mono);
}
.navbar-nav-item:hover,
.fl-navbar-nav-item:hover,
.flora-navbar-nav-item:hover {
color: var(--rs-marfil-50) !important;
background: rgba(255,255,255,.04);
}
/* Item activo: subrayado coral grueso (linea de spotlight) */
.navbar-nav-item--activo,
.fl-navbar-nav-item--activo,
.flora-navbar-nav-item--activo {
color: var(--rs-marfil-50) !important;
background: transparent;
}
.navbar-nav-item--activo::after,
.fl-navbar-nav-item--activo::after,
.flora-navbar-nav-item--activo::after {
content: '';
position: absolute;
left: .5rem;
right: .5rem;
bottom: -1px;
height: 3px;
background: var(--rs-coral-500);
box-shadow: 0 0 12px color-mix(in srgb, var(--rs-coral-400) 60%, transparent);
}
/* Logo de la marca (logo redondeado en navbar) */
.navbar-marca img,
.fl-navbar-marca img {
border-radius: var(--rs-radio-md);
border: 1.5px solid var(--rs-coral-500);
box-shadow: 0 0 0 1px var(--rs-petrol-900), 0 2px 12px rgba(212,112,68,.35);
}
/* Acciones en navbar (logout) */
.navbar-acciones .fl-boton--fantasma,
.fl-navbar-acciones .fl-boton--fantasma {
color: var(--rs-marfil-200);
border-color: transparent;
}
.navbar-acciones .fl-boton--fantasma:hover,
.fl-navbar-acciones .fl-boton--fantasma:hover {
background: var(--rs-coral-500);
color: var(--rs-marfil-50);
}
/* ── MODALES — glass + tinta petrol oscura ──────────────────────────────── */
.fl-modal {
background: color-mix(in srgb, var(--rs-marfil-50) 88%, transparent);
backdrop-filter: blur(22px) saturate(1.2);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
border: 1px solid color-mix(in srgb, var(--rs-petrol-300) 50%, transparent);
border-top: 4px solid var(--rs-coral-500);
border-radius: var(--rs-radio-md);
box-shadow: var(--rs-sombra-alta);
}
.fl-modal-cabecera {
border-bottom: 1px solid color-mix(in srgb, var(--rs-petrol-200) 50%, transparent);
background: color-mix(in srgb, var(--rs-marfil-100) 60%, transparent);
}
.fl-modal-titulo {
font-family: var(--rs-fuente-display);
color: var(--rs-petrol-900);
}
.fl-modal-fondo {
background: color-mix(in srgb, var(--rs-petrol-950) 70%, transparent) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* ── ALERTAS ─────────────────────────────────────────────────────────────── */
.fl-alerta {
border-left: 4px solid var(--rs-petrol-500);
border-radius: var(--rs-radio-sm);
background: color-mix(in srgb, var(--rs-marfil-50) 80%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--rs-tinta-900);
box-shadow: var(--rs-sombra-baja);
}
.fl-alerta--exito { border-left-color: var(--rs-exito); background: var(--rs-exito-suave); color: #1F5A40; }
.fl-alerta--error { border-left-color: var(--rs-coral-600); background: var(--rs-coral-100); color: var(--rs-coral-800); }
.fl-alerta--adv { border-left-color: var(--rs-adv); background: var(--rs-adv-suave); color: #6E4612; }
.fl-alerta--info { border-left-color: var(--rs-petrol-600); background: var(--rs-petrol-50); color: var(--rs-petrol-900); }
/* ── BREADCRUMB — separadores coral ──────────────────────────────────────── */
.fl-breadcrumb,
nav[aria-label="breadcrumb"] {
font-family: var(--rs-fuente-mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rs-tinta-500);
}
.fl-breadcrumb a,
nav[aria-label="breadcrumb"] a {
color: var(--rs-petrol-700);
font-weight: 600;
}
.fl-breadcrumb a:hover,
nav[aria-label="breadcrumb"] a:hover {
color: var(--rs-coral-600);
}
/* ── COREUTA AVATAR (componente custom de Resonum) ──────────────────────── */
.coreuta-avatar {
background: linear-gradient(135deg, var(--rs-petrol-800) 0%, var(--rs-petrol-500) 100%) !important;
color: var(--rs-marfil-50) !important;
font-family: var(--rs-fuente-display);
font-weight: 600;
letter-spacing: 0.02em;
border: 2px solid var(--rs-coral-300);
box-shadow: 0 2px 8px rgba(11,35,48,.25);
}
.coreuta-celda-nombre {
color: var(--rs-petrol-900);
font-weight: 600;
}
.coreuta-celda-email {
color: var(--rs-tinta-500);
font-family: var(--rs-fuente-mono);
font-size: .78rem;
}
/* ── CHIPS DE CORO (módulo coros) — alinear a la marca ───────────────────── */
.coro-chip {
background: var(--rs-petrol-100);
color: var(--rs-petrol-900);
border-radius: var(--rs-radio-xs);
font-family: var(--rs-fuente-mono);
letter-spacing: 0.08em;
}
.coro-chip-coordinador {
background: var(--rs-coral-500);
color: var(--rs-marfil-50);
}
.coro-chip-miembro {
background: var(--rs-petrol-700);
color: var(--rs-marfil-50);
}
.coro-chip-propietario,
.coro-chip-propio {
background: var(--rs-marfil-200);
color: var(--rs-petrol-900);
border: 1px solid var(--rs-coral-500);
}
/* ── MUSICAL STAFF · accesorios para encabezados internos ────────────────── */
.rs-staff {
height: 18px;
background: repeating-linear-gradient(
to bottom,
var(--rs-petrol-700) 0,
var(--rs-petrol-700) 1px,
transparent 1px,
transparent 4px
);
background-size: 100% 21px;
background-repeat: no-repeat;
opacity: .5;
}
/* ── BAR DE TEMA (selector de énfasis/intensidad) — OCULTAR ──────────────── */
.flora-bar-tema { display: none !important; }
/* ── TOGGLE NAVBAR — pegado al navbar (sin gap), separado del contenido ─── */
.flora-toggle-navbar {
top: 56px;
background: var(--rs-petrol-900);
}
.flora-toggle-navbar:hover {
background: var(--rs-petrol-950);
}
/* Margen superior compacto: separa del toggle/navbar sin desperdiciar pantalla.
Aplica a todas las páginas Resonum (el header.blade.php envuelve con
). */
.fl-contenedor.u-py-6 {
padding-top: var(--fl-sp-3, 0.75rem);
}
/* Padding-top compacto SOLO cuando la tarjeta envuelve directamente un
formulario. Listados y dashboards (que tienen forms anidados en celdas)
mantienen el padding original simétrico. */
.fl-tarjeta-cuerpo:has(> form),
.fl-tarjeta-cuerpo:has(> .formulario-base),
.fl-tarjeta-cuerpo:has(> .form-grupo),
.fl-tarjeta-cuerpo:has(> .coro-seccion-titulo) {
padding-top: var(--fl-sp-3, 0.75rem);
}
/* ── Selección invitación / chip / toggle / pill / etc. (varios) ────────── */
.fl-tarjeta-cabecera-acciones .fl-boton {
border-radius: var(--rs-radio-sm);
}
/* Asegurar contraste de íconos sobre marfil */
.fl-tarjeta svg,
.fl-tabla svg {
color: var(--rs-petrol-700);
}
/* ── Pequeñeces para que TODO se sienta del mismo set ────────────────────── */
.fl-vacio {
color: var(--rs-tinta-500);
background: transparent;
}
.fl-vacio-titulo {
font-family: var(--rs-fuente-display);
color: var(--rs-petrol-900);
font-weight: 600;
}
hr {
border: 0;
border-top: 1px solid var(--rs-petrol-200);
margin: 1.25rem 0;
}
a { color: var(--rs-coral-600); }
a:hover { color: var(--rs-coral-700); }
/* Scrollbar refinada (Chromium) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--rs-marfil-200); }
*::-webkit-scrollbar-thumb { background: var(--rs-petrol-500); border-radius: 0; border: 2px solid var(--rs-marfil-200); }
*::-webkit-scrollbar-thumb:hover { background: var(--rs-petrol-700); }
/* Foco accesible global con coral */
:focus-visible {
outline: 3px solid var(--rs-coral-500);
outline-offset: 2px;
}
/* ── COMPAT: clases legado rn-* (partials de auth/profile) que aún no fueron
refactorizadas. Se mapean al tema Resonum para consistencia visual. ──── */
.rn-grupo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.rn-label {
font-weight: 600;
color: var(--rs-petrol-800);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: .72rem;
font-family: var(--rs-fuente-mono);
}
.rn-input,
.rn-select,
.rn-textarea {
background: var(--rs-marfil-50);
border: 1.5px solid var(--rs-petrol-300);
color: var(--rs-tinta-900);
border-radius: var(--rs-radio-sm);
font-family: var(--rs-fuente-sans);
padding: .65rem .8rem;
width: 100%;
transition: border-color .12s ease, box-shadow .12s ease;
}
.rn-input:focus,
.rn-select:focus,
.rn-textarea:focus {
outline: none;
border-color: var(--rs-coral-500);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-coral-500) 25%, transparent);
}
.rn-textarea { resize: vertical; min-height: 80px; }
.rn-auth-error,
.rn-error {
color: var(--rs-coral-700);
font-size: .78rem;
font-weight: 600;
}
.rn-ayuda {
color: var(--rs-tinta-500);
font-size: .78rem;
}
.rn-alerta {
padding: .85rem 1rem;
border-left: 4px solid var(--rs-petrol-500);
border-radius: var(--rs-radio-sm);
background: color-mix(in srgb, var(--rs-marfil-50) 80%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--rs-tinta-900);
margin-bottom: 1rem;
}
.rn-alerta-exito { border-left-color: var(--rs-exito); background: var(--rs-exito-suave); color: #1F5A40; }
.rn-alerta-error { border-left-color: var(--rs-coral-600); background: var(--rs-coral-100); color: var(--rs-coral-800); }
.rn-alerta-info { border-left-color: var(--rs-petrol-600); background: var(--rs-petrol-50); color: var(--rs-petrol-900); }
.rn-alerta-advertencia { border-left-color: var(--rs-adv); background: var(--rs-adv-suave); color: #6E4612; }
/* Botones legado rn-btn → mapeo al sistema Flora */
.rn-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--rs-radio-sm);
border: 1.5px solid transparent;
cursor: pointer;
transition: transform .12s ease, background-color .12s ease, color .12s ease;
font-family: var(--rs-fuente-sans);
font-size: .9rem;
}
.rn-btn:active { transform: translateY(1px); }
.rn-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rn-btn-primario { background: var(--rs-petrol-800); color: var(--rs-marfil-50); border-color: var(--rs-petrol-900); box-shadow: var(--rs-sombra-baja); }
.rn-btn-primario:hover { background: var(--rs-petrol-900); }
.rn-btn-secundario { background: var(--rs-marfil-50); color: var(--rs-petrol-800); border-color: var(--rs-petrol-700); }
.rn-btn-secundario:hover { background: var(--rs-petrol-50); }
.rn-btn-peligro { background: var(--rs-coral-600); color: var(--rs-marfil-50); border-color: var(--rs-coral-700); }
.rn-btn-peligro:hover { background: var(--rs-coral-700); }
.rn-btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.rn-btn-xs { padding: .25rem .55rem; font-size: .72rem; }
.rn-auth-enlace {
background: none;
border: none;
padding: 0;
color: var(--rs-coral-600);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
font-family: inherit;
}
.rn-auth-enlace:hover { color: var(--rs-coral-700); }
/* ════════════════════════════════════════════════════════════════════════
AUTH — pantallas de login/registro/recupero (Resonum primer acto)
Pantalla partida: identidad dramática + formulario glass
════════════════════════════════════════════════════════════════════════ */
body.rs-auth {
margin: 0;
min-height: 100vh;
background: var(--rs-marfil-100);
color: var(--rs-tinta-900);
font-family: var(--rs-fuente-sans);
overflow-x: hidden;
}
/* Anula el body::before del tema general (en auth queremos otro fondo) */
body.rs-auth::before { display: none !important; }
/* Fondo escenográfico del auth — paleta Resonum sobre marfil cálido */
.rs-auth-fondo {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 15% 20%, color-mix(in srgb, var(--rs-petrol-200) 70%, transparent), transparent 65%),
radial-gradient(ellipse 70% 70% at 90% 85%, color-mix(in srgb, var(--rs-coral-200) 65%, transparent), transparent 60%),
radial-gradient(ellipse 50% 50% at 85% 15%, color-mix(in srgb, var(--rs-coral-100) 55%, transparent), transparent 55%),
linear-gradient(135deg, var(--rs-marfil-100) 0%, var(--rs-marfil-200) 100%);
}
/* Pentagrama gigante decorativo en la esquina */
.rs-auth-pentagrama {
position: absolute;
top: 8%;
left: -8%;
width: 75%;
height: 360px;
opacity: .22;
background: repeating-linear-gradient(
to bottom,
var(--rs-petrol-700) 0,
var(--rs-petrol-700) 1px,
transparent 1px,
transparent 28px
);
transform: rotate(-8deg);
mask-image: linear-gradient(to right, transparent, var(--rs-petrol-700) 30%, var(--rs-petrol-700) 60%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, var(--rs-petrol-700) 30%, var(--rs-petrol-700) 60%, transparent);
}
/* Aros más grandes para auth — paleta visible sobre marfil */
/* En el auth las figuras musicales son más grandes y bien visibles */
.rs-auth-fondo .rs-aro--1 { width: 756px; height: 756px; top: 4%; left: -120px; opacity: .28; }
.rs-auth-fondo .rs-aro--2 { width: 576px; height: 576px; top: -110px; right: 22%; opacity: .32; }
.rs-auth-fondo .rs-aro--3 { width: 504px; height: 504px; top: 38%; left: 18%; opacity: .22; }
.rs-auth-fondo .rs-aro--4 { width: 792px; height: 792px; bottom: -120px; right: -80px; opacity: .28; }
.rs-auth-fondo .rs-aro--5 { width: 396px; height: 396px; bottom: -40px; left: 12%; opacity: .30; }
/* Capa principal — dos secciones FULL-SCREEN, proporción 60/40 */
.rs-auth-pagina {
position: relative;
z-index: 1;
min-height: 100vh;
display: grid;
grid-template-columns: 60% 40%;
align-items: stretch;
width: 100%;
margin: 0;
padding: 0;
gap: 0;
}
/* ── Sección IZQUIERDA: identidad de marca (petrol oscuro full-bleed) ──
Padding más compacto pensado para HD (1280x720). En FHD también se ve
bien — solo no desperdicia tanta pantalla. */
.rs-auth-marca {
padding: 3rem clamp(2rem, 4vw, 4.5rem) 2.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--rs-marfil-100);
position: relative;
overflow: hidden;
min-height: 100vh;
/* Sección sólida petrol con gradiente sutil */
background:
radial-gradient(ellipse 70% 50% at 30% 20%, color-mix(in srgb, var(--rs-petrol-500) 60%, transparent), transparent 65%),
radial-gradient(ellipse 60% 60% at 80% 100%, color-mix(in srgb, var(--rs-coral-700) 35%, transparent), transparent 60%),
linear-gradient(135deg, var(--rs-petrol-900) 0%, var(--rs-petrol-800) 60%, var(--rs-petrol-700) 100%);
border-radius: 0;
border: none;
box-shadow: none;
}
/* Decoración interna: pentagrama tenue + acento coral */
.rs-auth-marca::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 60%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
color-mix(in srgb, var(--rs-marfil-50) 22%, transparent) 0,
color-mix(in srgb, var(--rs-marfil-50) 22%, transparent) 1px,
transparent 1px,
transparent 32px
);
mask-image: linear-gradient(to right, transparent, var(--rs-marfil-50) 60%);
-webkit-mask-image: linear-gradient(to right, transparent, var(--rs-marfil-50) 60%);
pointer-events: none;
opacity: .15;
}
.rs-auth-marca::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--rs-coral-500), var(--rs-coral-300), var(--rs-coral-500));
box-shadow: 0 0 18px color-mix(in srgb, var(--rs-coral-400) 60%, transparent);
}
.rs-auth-marca > * { position: relative; z-index: 1; }
.rs-auth-marca-superior {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .75rem;
margin-bottom: 1rem;
}
.rs-auth-marca-logo {
width: 110px;
height: 110px;
border-radius: 20px;
object-fit: cover;
border: 3px solid var(--rs-coral-500);
box-shadow:
0 0 0 5px color-mix(in srgb, var(--rs-coral-500) 25%, transparent),
0 16px 40px -12px rgba(212,112,68,.5),
0 6px 18px -8px rgba(0,0,0,.3);
}
@media (max-width: 920px) {
.rs-auth-marca-superior { align-items: center; }
.rs-auth-marca-logo { width: 120px; height: 120px; border-radius: 20px; }
}
.rs-auth-marca-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--rs-fuente-mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--rs-coral-300);
font-weight: 700;
}
.rs-auth-marca-eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
}
.rs-auth-marca-nombre {
font-family: var(--rs-fuente-display);
/* HD-first: en 1280px era 9vw = 115px (~7.2rem) — exagerado para una
columna 60% (~768px). Max bajado a 5rem (80px). */
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 600;
line-height: .92;
margin: .85rem 0 .5rem;
color: var(--rs-marfil-50);
letter-spacing: -0.04em;
display: inline-flex;
}
.rs-auth-marca-nombre .rs-letra {
display: inline-block;
transition: transform .35s var(--fl-ease-resorte, cubic-bezier(.34,1.56,.64,1)), color .25s ease;
}
.rs-auth-marca-nombre .rs-letra:nth-child(odd):hover { transform: translateY(-8px) rotate(-2deg); color: var(--rs-coral-400); }
.rs-auth-marca-nombre .rs-letra:nth-child(even):hover { transform: translateY(-8px) rotate(2deg); color: var(--rs-coral-400); }
.rs-auth-marca-tagline {
font-family: var(--rs-fuente-display);
font-style: italic;
font-size: clamp(1rem, 1.1vw, 1.25rem);
color: color-mix(in srgb, var(--rs-marfil-100) 82%, transparent);
margin: 0 0 .5rem;
max-width: 46ch;
line-height: 1.45;
}
.rs-auth-marca-tagline::before {
content: '“';
font-size: 2.6em;
line-height: 0;
vertical-align: -0.4em;
margin-right: .15em;
color: var(--rs-coral-400);
}
/* Features en la parte central-baja del panel marca — grid responsive
HD-first: gap y padding más chicos para entrar bien en 720px de alto. */
.rs-auth-marca-features {
margin-top: 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--rs-coral-500) 35%, transparent);
}
.rs-auth-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.rs-auth-feature-num {
font-family: var(--rs-fuente-mono);
font-size: .82rem;
letter-spacing: 0.18em;
color: var(--rs-coral-300);
font-weight: 700;
min-width: 28px;
margin-top: .15rem;
}
.rs-auth-feature-titulo {
font-family: var(--rs-fuente-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--rs-marfil-50);
margin-bottom: .25rem;
}
.rs-auth-feature-desc {
font-size: .9rem;
color: color-mix(in srgb, var(--rs-marfil-100) 65%, transparent);
line-height: 1.5;
}
.rs-auth-marca-footer {
margin-top: 2.5rem;
display: flex;
flex-direction: column;
gap: .25rem;
font-family: var(--rs-fuente-mono);
font-size: .68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--rs-marfil-100) 50%, transparent);
}
/* ── Sección DERECHA: formulario sobre marfil (full-bleed) ───────────
HD-first: menos padding para que el form (que es lo que importa) tenga
prioridad visual en 720px. */
.rs-auth-form-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 2.5rem;
position: relative;
background: var(--rs-marfil-50);
border-radius: 0;
border: none;
box-shadow: inset 4px 0 0 -3px color-mix(in srgb, var(--rs-petrol-200) 50%, transparent);
overflow: hidden;
min-height: 100vh;
}
/* Decoración derecha: curvas tenues de partitura */
.rs-auth-form-wrap::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 50%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
var(--rs-petrol-700) 0,
var(--rs-petrol-700) 1px,
transparent 1px,
transparent 32px
);
mask-image: linear-gradient(to left, transparent, var(--rs-petrol-700) 80%);
-webkit-mask-image: linear-gradient(to left, transparent, var(--rs-petrol-700) 80%);
pointer-events: none;
opacity: .08;
}
.rs-auth-card {
width: 100%;
max-width: 420px;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
position: relative;
overflow: visible;
z-index: 1;
}
.rs-auth-card::before { display: none; }
.rs-auth-card-titulo {
font-family: var(--rs-fuente-display);
font-size: 1.85rem;
font-weight: 600;
color: var(--rs-petrol-900);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.05;
}
.rs-auth-card-titulo::after {
content: '';
display: block;
width: 56px;
height: 3px;
background: var(--rs-coral-500);
margin-top: .65rem;
border-radius: 2px;
}
.rs-auth-card-subtitulo {
color: var(--rs-tinta-500);
margin: .35rem 0 1.5rem;
font-size: .92rem;
}
.rs-auth-card-status {
background: var(--rs-exito-suave);
border: 1px solid #B7DACA;
color: #1F5A40;
padding: .6rem .85rem;
border-radius: 8px;
font-size: .85rem;
margin-bottom: 1rem;
}
/* Campo (label flotante minimalista) */
.rs-auth-campo {
margin-bottom: 1.1rem;
position: relative;
}
.rs-auth-campo label {
display: block;
font-family: var(--rs-fuente-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: .68rem;
font-weight: 700;
color: var(--rs-petrol-700);
margin-bottom: .4rem;
}
.rs-auth-campo-wrap {
position: relative;
}
.rs-auth-campo input {
width: 100%;
padding: .85rem 2.6rem .85rem 1rem;
background: color-mix(in srgb, var(--rs-marfil-50) 92%, transparent);
border: 1.5px solid var(--rs-petrol-300);
border-radius: 8px;
color: var(--rs-tinta-900);
font-size: .98rem;
font-family: var(--rs-fuente-sans);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.rs-auth-campo input::placeholder {
color: var(--rs-tinta-300);
}
.rs-auth-campo input:focus {
outline: none;
border-color: var(--rs-coral-500);
background: var(--rs-marfil-50);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--rs-coral-500) 22%, transparent);
}
.rs-auth-campo-icono {
position: absolute;
right: .85rem;
top: 50%;
transform: translateY(-50%);
color: var(--rs-tinta-400);
background: none;
border: none;
cursor: pointer;
padding: .25rem;
display: flex;
align-items: center;
}
.rs-auth-campo-icono:hover {
color: var(--rs-coral-600);
}
.rs-auth-campo-error {
display: block;
color: var(--rs-coral-700);
font-size: .78rem;
margin-top: .35rem;
font-weight: 600;
}
/* Fila checkbox + olvidé */
.rs-auth-fila-aux {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
gap: 1rem;
flex-wrap: wrap;
}
.rs-auth-check {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .85rem;
color: var(--rs-tinta-700);
cursor: pointer;
user-select: none;
}
.rs-auth-check input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--rs-petrol-400);
border-radius: 4px;
background: var(--rs-marfil-50);
cursor: pointer;
display: grid;
place-items: center;
transition: background-color .15s ease, border-color .15s ease;
}
.rs-auth-check input:checked {
background: var(--rs-coral-500);
border-color: var(--rs-coral-600);
}
.rs-auth-check input:checked::before {
content: '✓';
color: var(--rs-marfil-50);
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.rs-auth-link {
color: var(--rs-coral-700);
font-size: .85rem;
text-decoration: none;
font-weight: 700;
}
.rs-auth-link:hover {
color: var(--rs-coral-800);
text-decoration: underline;
}
/* CTA principal */
.rs-auth-cta {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .95rem 1rem;
background: linear-gradient(135deg, var(--rs-coral-500) 0%, var(--rs-coral-600) 100%);
color: var(--rs-marfil-50);
border: 1px solid var(--rs-coral-700);
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
box-shadow:
0 8px 22px -6px rgba(212,112,68,.55),
inset 0 1px 0 color-mix(in srgb, var(--rs-marfil-50) 35%, transparent);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
font-family: var(--rs-fuente-sans);
}
.rs-auth-cta:hover {
transform: translateY(-2px);
box-shadow:
0 14px 30px -6px rgba(212,112,68,.65),
inset 0 1px 0 color-mix(in srgb, var(--rs-marfil-50) 45%, transparent);
}
.rs-auth-cta:active {
transform: translateY(0);
}
.rs-auth-cta svg {
width: 18px; height: 18px;
transition: transform .15s ease;
}
.rs-auth-cta:hover svg { transform: translateX(4px); }
/* Divider y secundario */
.rs-auth-divider {
margin: 1.5rem 0;
display: flex;
align-items: center;
gap: 1rem;
color: var(--rs-tinta-400);
font-family: var(--rs-fuente-mono);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.rs-auth-divider::before,
.rs-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--rs-petrol-700) 20%, transparent);
}
.rs-auth-secundario {
display: block;
text-align: center;
padding: .85rem 1rem;
border: 1.5px solid var(--rs-petrol-700);
border-radius: 8px;
color: var(--rs-petrol-800);
background: var(--rs-marfil-50);
text-decoration: none;
font-weight: 700;
transition: border-color .15s ease, background .15s ease, color .15s ease;
font-size: .92rem;
}
.rs-auth-secundario:hover {
border-color: var(--rs-coral-500);
background: var(--rs-coral-50);
color: var(--rs-coral-700);
}
/* Animaciones de entrada del card y de la marca */
@keyframes rsAuthEntra {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes rsAuthEntraLetra {
from { opacity: 0; transform: translateY(40px) rotate(-6deg); }
to { opacity: 1; transform: translateY(0) rotate(0); }
}
.rs-auth-marca-eyebrow,
.rs-auth-marca-tagline,
.rs-auth-marca-features,
.rs-auth-marca-footer { animation: rsAuthEntra .8s ease .2s backwards; }
.rs-auth-marca-tagline { animation-delay: .35s; }
.rs-auth-marca-features { animation-delay: .5s; }
.rs-auth-marca-footer { animation-delay: .7s; }
.rs-auth-marca-nombre .rs-letra {
animation: rsAuthEntraLetra .7s var(--fl-ease-resorte, cubic-bezier(.34,1.56,.64,1)) backwards;
}
.rs-auth-marca-nombre .rs-letra:nth-child(1) { animation-delay: .05s; }
.rs-auth-marca-nombre .rs-letra:nth-child(2) { animation-delay: .12s; }
.rs-auth-marca-nombre .rs-letra:nth-child(3) { animation-delay: .19s; }
.rs-auth-marca-nombre .rs-letra:nth-child(4) { animation-delay: .26s; }
.rs-auth-marca-nombre .rs-letra:nth-child(5) { animation-delay: .33s; }
.rs-auth-marca-nombre .rs-letra:nth-child(6) { animation-delay: .40s; }
.rs-auth-marca-nombre .rs-letra:nth-child(7) { animation-delay: .47s; }
.rs-auth-card { animation: rsAuthEntra .7s ease .35s backwards; }
/* Responsive: stack en pantallas chicas, sin márgenes externos.
En mobile la marca pasa a ser una cabecera compacta para que el form
quede a la vista sin scroll. */
@media (max-width: 920px) {
.rs-auth-pagina {
grid-template-columns: 1fr;
padding: 0;
gap: 0;
}
.rs-auth-marca {
padding: 1.5rem 1.25rem 1.75rem;
text-align: center;
align-items: center;
min-height: auto;
gap: .75rem;
}
.rs-auth-marca-superior {
flex-direction: row;
align-items: center;
justify-content: center;
gap: .85rem;
margin-bottom: .5rem;
}
.rs-auth-marca-logo {
width: 56px;
height: 56px;
border-radius: 12px;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--rs-coral-500) 25%, transparent),
0 8px 20px -8px rgba(212,112,68,.55);
}
.rs-auth-marca-eyebrow {
font-size: .6rem;
letter-spacing: .18em;
}
.rs-auth-marca-eyebrow::before { width: 18px; }
.rs-auth-marca-nombre {
font-size: 2.25rem;
margin: 0;
line-height: 1;
}
.rs-auth-marca-tagline {
margin: .25rem auto 0;
font-size: .9rem;
line-height: 1.35;
max-width: 32ch;
}
.rs-auth-marca-features { display: none; }
.rs-auth-marca-footer { display: none; }
.rs-auth-form-wrap {
padding: 1.75rem 1.25rem 2.5rem;
min-height: auto;
box-shadow: inset 0 4px 0 -3px color-mix(in srgb, var(--rs-petrol-200) 50%, transparent);
}
.rs-auth-card {
max-width: 100%;
}
.rs-auth-card-titulo { font-size: 1.65rem; }
}
@media (max-width: 480px) {
.rs-auth-marca {
padding: 1.25rem 1rem 1.5rem;
}
.rs-auth-marca-superior {
flex-direction: column;
gap: .5rem;
}
.rs-auth-marca-logo {
width: 48px;
height: 48px;
border-radius: 10px;
}
.rs-auth-marca-nombre {
font-size: 1.85rem;
}
.rs-auth-marca-tagline {
font-size: .82rem;
}
.rs-auth-form-wrap {
padding: 1.5rem 1rem 2rem;
}
}
/* =============================================================================
ANCHO DEL CONTENEDOR — abarcar ~90% del ancho en pantallas grandes
============================================================================= */
@media (min-width: 1280px) {
.fl-contenedor:not(.fl-contenedor--estrecho):not(.fl-contenedor--medio) {
max-width: 90vw;
}
}
/* En pantallas ultra anchas, evitar líneas de texto demasiado largas */
@media (min-width: 2200px) {
.fl-contenedor:not(.fl-contenedor--estrecho):not(.fl-contenedor--medio) {
max-width: 2000px;
}
}
/* =============================================================================
MICROINTERACCIONES — la app respira, late, responde
Tres principios:
1) "Lift" sutil al hover (la pieza se eleva 2-4px).
2) Sombras coral/petrol que aparecen sólo al interactuar (la marca aparece).
3) Iconos con micro-rotación + scale (sensación táctil, casi musical).
============================================================================= */
/* Curva de easing común — "resorte controlado" */
:root {
--rs-easing-suave: cubic-bezier(0.2, 0.8, 0.2, 1);
--rs-easing-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── TARJETAS — lift + glow coral ──────────────────────────────────────── */
.fl-tarjeta {
transition: transform 240ms var(--rs-easing-suave),
box-shadow 240ms var(--rs-easing-suave),
border-color 200ms ease;
}
.fl-tarjeta:hover {
transform: translateY(-2px);
}
.fl-tarjeta--interactiva {
transition: transform 260ms var(--rs-easing-suave),
box-shadow 260ms var(--rs-easing-suave),
border-color 200ms ease,
background 200ms ease;
}
.fl-tarjeta--interactiva:hover {
transform: translateY(-4px);
box-shadow: 0 4px 0 var(--rs-coral-600),
0 18px 38px -14px rgba(11, 35, 48, 0.35),
0 0 0 3px color-mix(in srgb, var(--rs-coral-400) 25%, transparent) !important;
border-color: var(--rs-coral-400) !important;
}
.fl-tarjeta--interactiva:active {
transform: translateY(-1px) scale(0.997);
transition-duration: 80ms;
}
.fl-tarjeta--elevada {
transition: transform 240ms var(--rs-easing-suave),
box-shadow 240ms var(--rs-easing-suave);
}
.fl-tarjeta--elevada:hover {
transform: translateY(-3px);
}
/* Anclas usadas como tarjeta (Mis coros, accesos globales) */
a.fl-tarjeta,
.fl-tarjeta a:not(.fl-boton):not(.fl-badge),
.fl-grilla > a {
transition: transform 240ms var(--rs-easing-suave),
box-shadow 240ms var(--rs-easing-suave),
border-color 200ms ease,
border-left-width 220ms var(--rs-easing-suave);
}
.fl-grilla > a:hover {
transform: translateY(-3px);
box-shadow: var(--rs-sombra-coral);
}
/* ── TARJETA-MÉTRICA — el icono cobra vida ─────────────────────────────── */
.fl-tarjeta-metrica {
transition: transform 280ms var(--rs-easing-suave),
border-color 240ms ease,
box-shadow 280ms var(--rs-easing-suave);
}
.fl-tarjeta-metrica:hover {
transform: translateY(-4px);
}
.fl-tarjeta-metrica-icono {
transition: transform 320ms var(--rs-easing-rebote),
background 220ms ease;
}
.fl-tarjeta-metrica-valor {
transition: transform 280ms var(--rs-easing-suave);
}
.fl-tarjeta-metrica:hover .fl-tarjeta-metrica-valor {
transform: scale(1.04);
}
/* ── BOTONES — pulso táctil ────────────────────────────────────────────── */
.fl-boton {
transition: transform 160ms var(--rs-easing-suave),
box-shadow 220ms ease,
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
}
.fl-boton:hover:not(:disabled) {
transform: translateY(-1px);
}
.fl-boton:active:not(:disabled) {
transform: translateY(0) scale(0.96);
transition-duration: 80ms;
}
.fl-boton--primario:hover:not(:disabled) {
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--rs-petrol-700) 70%, transparent),
0 2px 0 var(--rs-petrol-800);
}
.fl-boton--acento:hover:not(:disabled),
.fl-boton--peligro:hover:not(:disabled) {
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--rs-coral-500) 75%, transparent),
0 2px 0 var(--rs-coral-700);
}
.fl-boton--secundario:hover:not(:disabled) {
box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--rs-petrol-500) 35%, transparent);
}
/* ── BADGES — entran con escala al renderizar / hover en padre ─────────── */
.fl-badge {
transition: transform 200ms var(--rs-easing-rebote),
box-shadow 220ms ease,
background-color 200ms ease;
}
a:hover > .fl-badge,
.fl-tarjeta:hover .fl-badge,
tr:hover .fl-badge {
transform: translateY(-1px) scale(1.04);
}
/* ── AVATARES — anillo coral al hover ──────────────────────────────────── */
.coreuta-avatar {
transition: transform 280ms var(--rs-easing-rebote),
border-color 220ms ease,
box-shadow 280ms ease;
}
a:hover .coreuta-avatar,
.fl-tarjeta:hover .coreuta-avatar,
tr:hover .coreuta-avatar {
transform: scale(1.06) rotate(-2deg);
border-color: var(--rs-coral-500);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-coral-300) 35%, transparent),
0 8px 18px -6px rgba(213, 95, 68, 0.40);
}
/* ── ICONO DEL HEADER-PÁGINA — micro-tilt al hover del bloque ──────────── */
.fl-header-pagina-icono,
.fl-tarjeta-cabecera-icono,
.fl-tarjeta-titulo .fl-icono,
.fl-tarjeta-metrica-icono .fl-icono {
transition: transform 320ms var(--rs-easing-rebote);
}
.fl-tarjeta:hover .fl-tarjeta-cabecera-icono,
.fl-tarjeta:hover .fl-tarjeta-titulo .fl-icono {
transform: rotate(-6deg) scale(1.08);
}
/* ── ITEMS DE NAVBAR — subrayado coral animado ──────────────────────────── */
.fl-navbar-nav-item {
overflow: visible;
}
.fl-navbar-nav-item:not(.fl-navbar-nav-item--activo)::after {
content: '';
position: absolute;
left: 50%;
right: 50%;
bottom: 2px;
height: 2px;
background: var(--rs-coral-500);
box-shadow: 0 0 10px color-mix(in srgb, var(--rs-coral-400) 60%, transparent);
transition: left 280ms var(--rs-easing-suave),
right 280ms var(--rs-easing-suave);
pointer-events: none;
}
.fl-navbar-nav-item:not(.fl-navbar-nav-item--activo):hover::after {
left: .65rem;
right: .65rem;
}
/* ── FILAS DE TABLA — tinte marfil/coral suave ──────────────────────────── */
.fl-tabla tbody tr,
.fl-tabla-datos tbody tr {
transition: background 200ms ease,
box-shadow 200ms ease;
}
.fl-tabla tbody tr:hover,
.fl-tabla-datos tbody tr:hover {
background: color-mix(in srgb, var(--rs-coral-50) 75%, transparent) !important;
box-shadow: inset 3px 0 0 var(--rs-coral-500);
}
/* ── INPUTS — anillo coral al focus ─────────────────────────────────────── */
.fl-campo-entrada,
.fl-campo-textarea,
.fl-campo-select,
.fl-campo input[type="text"],
.fl-campo input[type="email"],
.fl-campo input[type="password"],
.fl-campo input[type="number"],
.fl-campo input[type="tel"],
.fl-campo input[type="url"],
.fl-campo input[type="date"],
.fl-campo textarea,
.fl-campo select {
transition: border-color 200ms ease,
box-shadow 220ms ease,
background 200ms ease;
}
.fl-campo-entrada:focus,
.fl-campo-textarea:focus,
.fl-campo-select:focus,
.fl-campo input:focus,
.fl-campo textarea:focus,
.fl-campo select:focus {
border-color: var(--rs-coral-500) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-coral-400) 28%, transparent) !important;
outline: none;
}
/* ── ALERTAS — entran con un pulso suave ────────────────────────────────── */
@keyframes rs-alerta-entra {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.fl-alerta {
animation: rs-alerta-entra 360ms var(--rs-easing-suave) backwards;
}
/* ── DROPDOWNS / TOOLTIPS — fade ligero (Flora ya da base, reforzamos) ── */
.fl-dropdown-panel,
.fl-tooltip {
transition: opacity 180ms ease, transform 200ms var(--rs-easing-suave);
}
/* ── ENLACES DE TEXTO — subrayado coral ────────────────────────────────── */
a.fl-texto-enlace,
.fl-tarjeta-cuerpo a:not(.fl-boton):not(.fl-badge):not(.fl-tarjeta) {
background-image: linear-gradient(to right, var(--rs-coral-500), var(--rs-coral-500));
background-size: 0% 2px;
background-position: left bottom;
background-repeat: no-repeat;
transition: background-size 280ms var(--rs-easing-suave),
color 200ms ease;
}
a.fl-texto-enlace:hover,
.fl-tarjeta-cuerpo a:not(.fl-boton):not(.fl-badge):not(.fl-tarjeta):hover {
background-size: 100% 2px;
}
/* ── REDUCED MOTION — respetar preferencia del usuario ──────────────────── */
@media (prefers-reduced-motion: reduce) {
.fl-tarjeta,
.fl-tarjeta--interactiva,
.fl-tarjeta--elevada,
.fl-tarjeta-metrica,
.fl-tarjeta-metrica-icono,
.fl-tarjeta-metrica-valor,
.fl-boton,
.fl-badge,
.coreuta-avatar,
.fl-header-pagina-icono,
.fl-tarjeta-cabecera-icono,
.fl-tabla tbody tr,
.fl-tabla-datos tbody tr,
.fl-alerta,
a.fl-tarjeta,
.fl-grilla > a {
animation: none !important;
transition: none !important;
transform: none !important;
}
.fl-navbar-nav-item::after { transition: none !important; }
}
/* =============================================================================
REDISEÑO PLANETARIO — refinamientos editoriales que cuidan el alma retro
Estos bloques NO reemplazan la identidad: la afilan. Cada detalle empuja
más fuerte hacia "programa de concierto académico", no hacia SaaS genérico.
============================================================================= */
/* ─────────────────────────────────────────────────────────────────────────────
1 · TIPOGRAFÍA EDITORIAL · features OpenType + ritmo + balance
───────────────────────────────────────────────────────────────────────────── */
:root {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Titulares: ligaduras discrecionales + cifras old-style cuando aparecen */
h1, h2, h3, h4,
.fl-header-pagina-titulo,
.fl-tarjeta-titulo,
.fl-modal-titulo,
.fl-vacio-titulo {
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
text-wrap: balance;
}
/* H1 del header-página: tracking más comprimido, óptica de magazine */
.fl-header-pagina-titulo {
letter-spacing: -0.022em;
line-height: 1.05;
}
/* Cifras tabulares en TODO lo numérico (alineación perfecta en columnas) */
.fl-tarjeta-metrica-valor,
.fl-tabla td,
.fl-tabla-datos td,
.fl-badge,
time,
[data-rs-numero],
.rs-numero {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Subtítulos del header-página ya están en italic display.
Reforzamos balance + max-width para que respiren. */
.fl-header-pagina-subtitulo {
text-wrap: balance;
max-width: 70ch;
}
/* Párrafos dentro de tarjetas: ancho de medida cómoda + ritmo */
.fl-tarjeta-cuerpo p {
max-width: 75ch;
line-height: 1.6;
}
/* ─────────────────────────────────────────────────────────────────────────────
2 · RITMO Y RESPIRACIÓN · spacing aireado en pantallas grandes
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
.fl-grilla { gap: var(--fl-sp-6); }
.fl-grilla--2 { gap: var(--fl-sp-7); }
.fl-grilla--3 { gap: var(--fl-sp-6); }
.fl-grilla--4 { gap: var(--fl-sp-5); }
.fl-tarjeta-cuerpo {
padding: var(--fl-sp-6);
}
.fl-tarjeta-cuerpo:has(> form),
.fl-tarjeta-cuerpo:has(> .formulario-base),
.fl-tarjeta-cuerpo:has(> .form-grupo),
.fl-tarjeta-cuerpo:has(> .coro-seccion-titulo) {
padding-top: var(--fl-sp-3, 0.75rem);
}
}
@media (min-width: 1600px) {
.fl-grilla--2 { gap: var(--fl-sp-8); }
.fl-tarjeta-cuerpo {
padding: var(--fl-sp-7);
}
.fl-tarjeta-cuerpo:has(> form),
.fl-tarjeta-cuerpo:has(> .formulario-base),
.fl-tarjeta-cuerpo:has(> .form-grupo),
.fl-tarjeta-cuerpo:has(> .coro-seccion-titulo) {
padding-top: var(--fl-sp-3, 0.75rem);
}
}
/* ─────────────────────────────────────────────────────────────────────────────
3 · ESTADOS VACÍOS · icono en marco de pentagrama, copy editorial
───────────────────────────────────────────────────────────────────────────── */
.fl-vacio {
padding: var(--fl-sp-10) var(--fl-sp-6);
text-align: center;
}
.fl-vacio .fl-icono,
.fl-vacio-icono {
width: 96px;
height: 96px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rs-coral-100) 65%, transparent), transparent 70%),
var(--rs-pentagrama);
background-size: 100%, 100% 12px;
background-blend-mode: multiply;
border: 1px dashed color-mix(in srgb, var(--rs-petrol-300) 60%, transparent);
color: var(--rs-petrol-700);
margin: 0 auto var(--fl-sp-5);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: inset 0 -8px 24px -8px color-mix(in srgb, var(--rs-coral-200) 40%, transparent);
}
.fl-vacio .fl-icono svg,
.fl-vacio-icono svg {
width: 38px;
height: 38px;
}
.fl-vacio-titulo {
font-size: 1.35rem;
letter-spacing: -0.01em;
margin-bottom: var(--fl-sp-2);
}
.fl-vacio-descripcion,
.fl-vacio p {
color: var(--rs-tinta-500);
font-style: italic;
font-family: var(--rs-fuente-display);
max-width: 42ch;
margin: 0 auto var(--fl-sp-4);
line-height: 1.55;
font-size: 1.02rem;
}
/* ─────────────────────────────────────────────────────────────────────────────
4 · SKELETON LOADERS · shimmer marfil → coral
Uso: agregar clase .rs-skeleton (o .fl-skeleton) a un elemento mientras carga
───────────────────────────────────────────────────────────────────────────── */
@keyframes rs-shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.rs-skeleton,
.fl-skeleton,
[data-rs-skeleton] {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--rs-marfil-200) 70%, transparent) 0%,
color-mix(in srgb, var(--rs-coral-100) 90%, transparent) 50%,
color-mix(in srgb, var(--rs-marfil-200) 70%, transparent) 100%
);
background-size: 200% 100%;
animation: rs-shimmer 1.6s linear infinite;
border-radius: var(--rs-radio-sm);
color: transparent !important;
user-select: none;
pointer-events: none;
min-height: 1em;
}
.rs-skeleton--circulo,
.fl-skeleton--circulo {
border-radius: 50%;
}
.rs-skeleton--linea,
.fl-skeleton--linea {
height: 0.85em;
margin: 0.25em 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
5 · NAVBAR · marca de programa coral en item activo (punto luminoso)
───────────────────────────────────────────────────────────────────────────── */
.fl-navbar-nav-item--activo {
position: relative;
}
.fl-navbar-nav-item--activo::before {
content: '';
position: absolute;
top: 4px;
left: 50%;
width: 5px;
height: 5px;
transform: translateX(-50%);
background: var(--rs-coral-500);
border-radius: 50%;
box-shadow: 0 0 8px var(--rs-coral-400),
0 0 14px color-mix(in srgb, var(--rs-coral-300) 80%, transparent);
animation: rs-pulso-coral 2.4s ease-in-out infinite;
}
@keyframes rs-pulso-coral {
0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
50% { opacity: 0.6; transform: translateX(-50%) scale(0.85); }
}
/* ─────────────────────────────────────────────────────────────────────────────
6 · SCROLLBAR TEMATIZADO · petrol con thumb coral al hover
───────────────────────────────────────────────────────────────────────────── */
* {
scrollbar-width: thin;
scrollbar-color: var(--rs-petrol-400) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--rs-marfil-200) 60%, transparent);
}
*::-webkit-scrollbar-thumb {
background: var(--rs-petrol-500);
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 99px;
transition: background 240ms ease;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--rs-coral-500);
background-clip: padding-box;
}
/* ─────────────────────────────────────────────────────────────────────────────
7 · FOCUS RING coral · accesibilidad con identidad
───────────────────────────────────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--rs-coral-500);
outline-offset: 2px;
border-radius: var(--rs-radio-sm);
}
a:focus-visible,
button:focus-visible,
.fl-boton:focus-visible {
outline-offset: 3px;
}
/* ─────────────────────────────────────────────────────────────────────────────
8 · SOMBRAS PROFUNDAS · multi-layer "luz desde arriba-izquierda"
───────────────────────────────────────────────────────────────────────────── */
:root {
--rs-sombra-profunda:
0 1px 0 color-mix(in srgb, var(--rs-petrol-700) 30%, transparent),
0 4px 8px -2px color-mix(in srgb, var(--rs-petrol-900) 14%, transparent),
0 16px 32px -12px color-mix(in srgb, var(--rs-petrol-900) 22%, transparent),
0 32px 64px -24px color-mix(in srgb, var(--rs-petrol-950) 18%, transparent);
--rs-sombra-flotante:
0 1px 0 color-mix(in srgb, var(--rs-coral-700) 25%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--rs-coral-600) 20%, transparent),
0 24px 48px -16px color-mix(in srgb, var(--rs-petrol-900) 25%, transparent);
}
.fl-modal {
box-shadow: var(--rs-sombra-profunda);
}
.fl-tarjeta--destaque {
box-shadow: var(--rs-sombra-flotante);
}
/* ─────────────────────────────────────────────────────────────────────────────
9 · HEADER-PÁGINA · hairline coral debajo del título (firma editorial)
───────────────────────────────────────────────────────────────────────────── */
.fl-header-pagina {
position: relative;
}
.fl-header-pagina::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 2px;
background: var(--rs-coral-500);
box-shadow: 0 0 10px color-mix(in srgb, var(--rs-coral-400) 40%, transparent);
}
/* ─────────────────────────────────────────────────────────────────────────────
10 · BOTÓN FANTASMA · underline coral editorial al hover
───────────────────────────────────────────────────────────────────────────── */
.fl-boton--fantasma {
background-image: linear-gradient(to right, var(--rs-coral-500), var(--rs-coral-500));
background-size: 0% 1.5px;
background-position: left 92%;
background-repeat: no-repeat;
transition: background-size 320ms var(--rs-easing-suave),
color 200ms ease,
transform 160ms ease;
}
.fl-boton--fantasma:hover:not(:disabled) {
background-size: 100% 1.5px;
}
/* ─────────────────────────────────────────────────────────────────────────────
11 · KBD · teclas estilo programa (keys con relieve papel)
───────────────────────────────────────────────────────────────────────────── */
kbd, .fl-kbd, .rs-kbd {
font-family: var(--rs-fuente-mono);
font-size: 0.78em;
font-weight: 600;
background: var(--rs-marfil-50);
border: 1px solid var(--rs-petrol-300);
border-bottom-width: 2px;
border-radius: var(--rs-radio-sm);
padding: 1px 6px;
box-shadow: 0 1px 0 color-mix(in srgb, var(--rs-petrol-200) 60%, transparent);
color: var(--rs-petrol-800);
line-height: 1.4;
display: inline-block;
min-width: 1.6em;
text-align: center;
}
/* ─────────────────────────────────────────────────────────────────────────────
12 · SELECTION · tinta coral fuerte (firma de marca al seleccionar texto)
───────────────────────────────────────────────────────────────────────────── */
::selection {
background: var(--rs-coral-500);
color: var(--rs-marfil-50);
text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-coral-700) 70%, transparent);
}
::-moz-selection {
background: var(--rs-coral-500);
color: var(--rs-marfil-50);
}
/* ─────────────────────────────────────────────────────────────────────────────
13 · SCROLL · suave por defecto + offset al anclar (header sticky no tapa)
───────────────────────────────────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
/* ─────────────────────────────────────────────────────────────────────────────
14 · TARJETA · doble-borde editorial (dentro del marco principal)
Sólo en variante destaque, para no saturar.
───────────────────────────────────────────────────────────────────────────── */
.fl-tarjeta--destaque {
position: relative;
}
.fl-tarjeta--destaque::before {
content: '';
position: absolute;
top: 6px; left: 6px; right: 6px; bottom: 6px;
border: 1px solid color-mix(in srgb, var(--rs-coral-400) 30%, transparent);
border-radius: calc(var(--rs-radio-md) - 2px);
pointer-events: none;
z-index: 0;
}
.fl-tarjeta--destaque > * {
position: relative;
z-index: 1;
}
/* ─────────────────────────────────────────────────────────────────────────────
15 · BLOCKQUOTE · cita editorial con comilla coral
───────────────────────────────────────────────────────────────────────────── */
blockquote, .rs-cita {
position: relative;
margin: var(--fl-sp-5) 0;
padding: var(--fl-sp-3) var(--fl-sp-5);
border-left: 3px solid var(--rs-coral-500);
font-family: var(--rs-fuente-display);
font-style: italic;
font-size: 1.1rem;
color: var(--rs-petrol-800);
line-height: 1.5;
background: color-mix(in srgb, var(--rs-marfil-100) 50%, transparent);
}
blockquote::before, .rs-cita::before {
content: '"';
position: absolute;
top: -10px;
left: 8px;
font-size: 3rem;
line-height: 1;
color: var(--rs-coral-400);
font-family: var(--rs-fuente-display);
}
/* ─────────────────────────────────────────────────────────────────────────────
16 · ALERTA · pull-quote vertical · gradient petrol → coral en lateral
───────────────────────────────────────────────────────────────────────────── */
.fl-alerta {
position: relative;
padding-left: calc(var(--fl-sp-4) + 4px);
}
.fl-alerta::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 0 var(--rs-radio-sm) var(--rs-radio-sm) 0;
}
.fl-alerta--info::before {
background: linear-gradient(to bottom, var(--rs-petrol-600), var(--rs-coral-500));
}
.fl-alerta--exito::before { background: var(--rs-exito); }
.fl-alerta--error::before { background: var(--rs-coral-600); }
.fl-alerta--adv::before { background: var(--rs-adv); }
/* ─────────────────────────────────────────────────────────────────────────────
17 · NÚMEROS GRANDES (métrica) · ligero "drop" decorativo cuando son únicos
───────────────────────────────────────────────────────────────────────────── */
.fl-tarjeta-metrica-valor {
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* ─────────────────────────────────────────────────────────────────────────────
18 · LINK · subrayado coral animado en enlaces de cuerpo
(refinamiento del bloque anterior — ahora usa background-position-y para
no chocar con :focus-visible)
───────────────────────────────────────────────────────────────────────────── */
a:not(.fl-boton):not(.fl-badge):not(.fl-tarjeta):not(.fl-navbar-nav-item):not(.fl-navbar-marca):not(.fl-breadcrumb-enlace):not(.fl-tarjeta-metrica) {
text-decoration-color: color-mix(in srgb, var(--rs-coral-500) 50%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color 200ms ease, color 200ms ease;
}
a:not(.fl-boton):not(.fl-badge):not(.fl-tarjeta):not(.fl-navbar-nav-item):not(.fl-navbar-marca):not(.fl-breadcrumb-enlace):not(.fl-tarjeta-metrica):hover {
text-decoration-color: var(--rs-coral-500);
}
/* ─────────────────────────────────────────────────────────────────────────────
19 · ICONO DE TARJETA · "marco de placa" sutil
───────────────────────────────────────────────────────────────────────────── */
.fl-header-pagina-icono,
.fl-tarjeta-cabecera-icono {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--rs-marfil-50) 30%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--rs-petrol-950) 35%, transparent);
}
/* =============================================================================
SPINNER RESONUM · overlay con logo + nombre, animado tipo "afinando"
Se activa con el atributo data-rs-activo="true" desde spinner-resonum.js
============================================================================= */
.rs-spinner-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at center, color-mix(in srgb, var(--rs-petrol-900) 92%, transparent) 0%, var(--rs-petrol-950) 75%);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.rs-spinner-overlay[data-rs-activo="true"] {
opacity: 1;
visibility: visible;
pointer-events: all;
transition: opacity 240ms ease, visibility 0s;
}
/* Pentagrama decorativo de fondo (reutiliza --rs-pentagrama del tema) */
.rs-spinner-overlay::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--rs-pentagrama);
background-size: 100% 28px;
background-repeat: repeat-y;
opacity: 0.10;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
pointer-events: none;
}
.rs-spinner-bloque {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--fl-sp-4);
padding: var(--fl-sp-6);
transform: translateY(8px);
opacity: 0;
transition: transform 360ms var(--rs-easing-suave), opacity 320ms ease;
}
.rs-spinner-overlay[data-rs-activo="true"] .rs-spinner-bloque {
transform: translateY(0);
opacity: 1;
transition-delay: 80ms;
}
/* ── Logo + anillo coral pulsante ─────────────────────────────────────────── */
.rs-spinner-logo-marco {
position: relative;
width: 110px;
height: 110px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rs-spinner-logo {
width: 86px;
height: 86px;
border-radius: 50%;
object-fit: cover;
box-shadow:
0 0 0 3px var(--rs-marfil-50),
0 0 0 4px color-mix(in srgb, var(--rs-coral-500) 60%, transparent),
0 12px 36px -8px rgba(213, 95, 68, 0.45);
animation: rs-spinner-logo-respira 2.4s ease-in-out infinite;
}
@keyframes rs-spinner-logo-respira {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.rs-spinner-anillo {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--rs-coral-500);
border-right-color: color-mix(in srgb, var(--rs-coral-400) 60%, transparent);
animation: rs-spinner-anillo-gira 1.4s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
box-shadow: 0 0 24px color-mix(in srgb, var(--rs-coral-400) 35%, transparent);
}
@keyframes rs-spinner-anillo-gira {
to { transform: rotate(360deg); }
}
/* ── Nombre "Resonum" letra por letra ─────────────────────────────────────── */
.rs-spinner-nombre {
font-family: var(--rs-fuente-display);
font-size: 2.2rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rs-marfil-50);
display: inline-flex;
gap: 0.02em;
}
.rs-spinner-nombre span {
display: inline-block;
animation: rs-spinner-letra 1.6s ease-in-out infinite;
text-shadow: 0 2px 12px color-mix(in srgb, var(--rs-coral-500) 30%, transparent);
}
.rs-spinner-nombre span:nth-child(1) { animation-delay: 0.00s; }
.rs-spinner-nombre span:nth-child(2) { animation-delay: 0.08s; }
.rs-spinner-nombre span:nth-child(3) { animation-delay: 0.16s; }
.rs-spinner-nombre span:nth-child(4) { animation-delay: 0.24s; }
.rs-spinner-nombre span:nth-child(5) { animation-delay: 0.32s; }
.rs-spinner-nombre span:nth-child(6) { animation-delay: 0.40s; }
.rs-spinner-nombre span:nth-child(7) { animation-delay: 0.48s; }
@keyframes rs-spinner-letra {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(-3px); opacity: 1; }
}
/* ── Pista (línea coral con onda viajera tipo señal de afinación) ────────── */
.rs-spinner-pista {
position: relative;
width: 180px;
height: 2px;
background: color-mix(in srgb, var(--rs-marfil-50) 18%, transparent);
border-radius: 99px;
overflow: hidden;
}
.rs-spinner-pista-onda {
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(
to right,
transparent,
var(--rs-coral-500),
transparent
);
animation: rs-spinner-pista-viaja 1.2s ease-in-out infinite;
box-shadow: 0 0 12px var(--rs-coral-400);
}
@keyframes rs-spinner-pista-viaja {
0% { left: -40%; }
100% { left: 100%; }
}
/* ── Texto "Cargando…" en monoespaciada uppercase ─────────────────────────── */
.rs-spinner-texto {
font-family: var(--rs-fuente-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.28em;
color: color-mix(in srgb, var(--rs-marfil-100) 70%, transparent);
font-weight: 600;
margin-top: 4px;
}
/* ── Mobile · escala más chica ────────────────────────────────────────────── */
@media (max-width: 540px) {
.rs-spinner-logo-marco { width: 94px; height: 94px; }
.rs-spinner-logo { width: 72px; height: 72px; }
.rs-spinner-nombre { font-size: 1.85rem; }
.rs-spinner-pista { width: 150px; }
}
/* ─────────────────────────────────────────────────────────────────────────────
20 · REDUCED MOTION · respetar
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rs-skeleton,
.fl-skeleton,
[data-rs-skeleton],
.fl-navbar-nav-item--activo::before,
.rs-spinner-logo,
.rs-spinner-anillo,
.rs-spinner-nombre span,
.rs-spinner-pista-onda {
animation: none !important;
}
.rs-spinner-bloque { transition: none !important; transform: none !important; }
html { scroll-behavior: auto; }
}