/* Estilos para el Portal Web Puerto Gas C.A. - Tema Claro Profesional */

:root {
    --bg-main: #f8fafc; /* slate-50 */
    --text-main: #0f172a; /* slate-900 */
    --border-light: rgba(15, 23, 42, 0.06);
    
    /* Variables de Glassmorphism Claro */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(15, 23, 42, 0.05);
    
    /* Fondos decorativos */
    --blob-opacity: 0.15;
}

/* Forzar valores por defecto claros y prevenir zoom accidental */
html, body {
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

button, a, input, select, textarea, [role="button"], .cursor-pointer {
    touch-action: manipulation;
}

/* Evitar auto-zoom en inputs en tablets/móviles al enfocar */
@media screen and (max-width: 1024px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Paneles translúcidos claros premium */
.glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02), 0 2px 8px -1px rgba(15, 23, 42, 0.02);
}

.glassmorphism-light {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
}

/* Animación de desvanecimiento suave para el Chatbot */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Barra de desplazamiento personalizada clara */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Animaciones flotantes para bombonas en el fondo */
@keyframes floatUp {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(6deg) scale(1.02);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes floatDown {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(20px) rotate(-6deg) scale(0.98);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.animate-float-up {
    animation: floatUp 12s ease-in-out infinite;
}

.animate-float-down {
    animation: floatDown 15s ease-in-out infinite;
}

/* FullCalendar Custom Theme Overrides */
.fc {
    font-family: 'Inter', system-ui, sans-serif !important;
}

.fc .fc-toolbar {
    margin-bottom: 1.5rem !important;
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    justify-content: space-between; align-items: center;
}
.fc .fc-toolbar-title {
    font-size: 1.15rem; font-weight: 850;
    color: #0f172a; letter-spacing: -0.02em; text-transform: capitalize;
}
.fc .fc-button-primary {
    background-color: #ffffff; border: 1px solid #e2e8f0; color: #475569;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; border-radius: 0.75rem; padding: 0.45rem 0.9rem;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
}
.fc .fc-button-primary:hover { background-color: #f8fafc; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); }
.fc .fc-button-primary:active, .fc .fc-button-primary:focus {
    background-color: #f1f5f9 !important; border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 2px rgba(203,213,225,0.3) !important;
}
.fc .fc-button-active {
    background-color: #0284c7 !important; border-color: #0284c7 !important;
    color: #ffffff !important; box-shadow: 0 1px 3px 0 rgba(2,132,199,0.3) !important;
}
.fc .fc-theme-standard th { border-color: #e2e8f0; }
.fc .fc-col-header { background-color: #f8fafc; border-radius: 0.75rem; overflow: hidden; }
.fc .fc-col-header-cell { padding: 0.75rem 0; }
.fc .fc-col-header-cell-cushion {
    font-weight: 850; font-size: 0.75rem; color: #475569;
    text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none !important;
}
.fc .fc-theme-standard td, .fc .fc-theme-standard th { border-color: #f1f5f9 !important; }
.fc .fc-timegrid-slot-label {
    font-weight: 600; font-size: 0.7rem; color: #64748b;
    text-transform: uppercase; padding-right: 0.5rem; text-align: right;
}
.fc .fc-timegrid-slot-label-cushion { padding: 0; }
.fc .fc-day-today { background-color: rgba(240,249,255,0.45) !important; }
.fc .fc-day-disabled { background-color: #f8fafc !important; }
.fc-v-event, .fc-timegrid-event {
    border-radius: 0.5rem !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.fc-v-event:hover, .fc-timegrid-event:hover {
    transform: scale(1.02) translateY(-1px) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
    filter: brightness(0.95) !important;
}
.fc-event-main { padding: 0 !important; display: flex; flex-direction: column; gap: 0.05rem; }
.fc-event-time { font-size: 0.7rem !important; font-weight: 850 !important; color: #0369a1 !important; text-transform: uppercase; letter-spacing: 0.025em; }
.fc-event-title { font-size: 0.7rem !important; font-weight: 750 !important; color: #0c4a6e !important; line-height: 1.25 !important; white-space: normal !important; }
.fc .fc-timegrid-slot {
    height: 1.5rem !important;
}
.fc .fc-timegrid-slot-label {
    vertical-align: middle;
}
.fc-daygrid-event { background: #e0f2fe !important; border-left: 3px solid #0284c7 !important; border-radius: 0.375rem !important; padding: 2px 6px !important; margin: 2px 4px !important; }
.fc-daygrid-event .fc-event-time { color: #0369a1 !important; font-weight: 800 !important; }
.fc-daygrid-event .fc-event-title { color: #0c4a6e !important; font-weight: 700 !important; }
.fc-scroller { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f8fafc; }
.fc-scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.fc-scroller::-webkit-scrollbar-track { background: #f8fafc; border-radius: 9999px; }
.fc-scroller::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.fc-scroller::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ==============================================================================
   COMPONENTES DE DISEÑO ESTANDARIZADOS (PUERTO GAS C.A.)
   ============================================================================== */

/* Inputs & Form Controls */
.pg-input, .pg-select, .pg-textarea {
    width: 100%;
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.75rem;    /* rounded-xl */
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;        /* text-xs */
    font-weight: 600;
    color: #1e293b;            /* slate-800 */
    transition: all 0.2s ease-in-out;
}

.pg-input:focus, .pg-select:focus, .pg-textarea:focus {
    outline: none;
    border-color: #0284c7;    /* gas-600 */
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.pg-label {
    display: block;
    font-size: 0.65rem;        /* text-[10px] */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;            /* slate-500 */
    margin-bottom: 0.25rem;
}

/* Tarjetas y Marcos Herméticos */
.pg-card {
    background-color: #ffffff;
    border-radius: 1rem;       /* rounded-2xl */
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}

.pg-card-table {
    background-color: #ffffff;
    border-radius: 1rem;       /* rounded-2xl */
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ==========================================================================
   TABLA ESTÁNDAR UNIFICADA (Estilo Base de Datos Clientes)
   ========================================================================== */
.pg-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #cbd5e1; /* border-slate-300 */
    background-color: #ffffff;
    font-size: 0.75rem;        /* text-xs */
}

.pg-table thead tr,
.pg-table-header {
    background-color: #f1f5f9; /* bg-slate-100 */
    font-size: 0.6875rem;      /* text-[11px] */
    font-weight: 900;          /* font-black */
    color: #475569;            /* text-slate-600 */
    text-transform: uppercase;
    letter-spacing: 0.05em;    /* tracking-wider */
}

.pg-table th {
    padding: 0.5rem 0.625rem;  /* px-2.5 py-2 */
    border: 1px solid #cbd5e1; /* border-slate-300 */
    background-color: #f1f5f9;
    font-size: 0.6875rem;
    font-weight: 900;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.pg-table tbody tr {
    transition: background-color 0.15s ease;
}

.pg-table tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.85); /* hover:bg-slate-50/80 */
}

.pg-table td {
    padding: 0.375rem 0.625rem; /* px-2.5 py-1.5 */
    border: 1px solid #cbd5e1;  /* border-slate-300 */
    font-size: 0.75rem;         /* text-xs */
    vertical-align: middle;
}

/* Botones Estandarizados */
.pg-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background-color: #0284c7; /* gas-600 */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    cursor: pointer;
}
.pg-btn-primary:hover {
    background-color: #0369a1;
    transform: translateY(-1px);
}

.pg-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 0.75rem;
    background-color: #f1f5f9; /* slate-100 */
    color: #334155;            /* slate-700 */
    font-weight: 700;
    font-size: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.pg-btn-secondary:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.pg-btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 0.75rem;
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.pg-btn-dark:hover {
    background-color: #1e293b;
}

/* Badges / Chips de Estatus */
.pg-badge-sky {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background-color: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-size: 0.65rem;
    font-weight: 800;
}

.pg-badge-slate {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background-color: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ==========================================================================
   Comportamiento del Sidebar Colapsado (Desktop & Responsive)
   ========================================================================== */
html.sidebar-collapsed #sidebar-container {
    width: 5rem !important; /* 80px */
}

html.sidebar-collapsed .sidebar-hide-on-collapsed {
    display: none !important;
}

html.sidebar-collapsed .sidebar-center-on-collapsed {
    justify-content: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    text-align: center !important;
}

html.sidebar-collapsed .sidebar-nav-item {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

html.sidebar-collapsed .sidebar-nav-item i {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html.sidebar-collapsed #sidebar-toggle-icon {
    transform: rotate(180deg);
}

#sidebar-bottom-actions {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.25s ease;
    max-height: 50px;
    opacity: 1;
    overflow: hidden;
}

html.sidebar-collapsed #sidebar-bottom-actions {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

#sidebar-toggle-icon {
    transition: transform 0.25s ease;
}

/* ==============================================================================
   AURORA GLOW EN MOVIMIENTO (COLORES DIFUMINADOS BAJO LA TABLA)
   ============================================================================== */
/* ==============================================================================
   LÁMPARA DE LAVA DIFUMINADA EN EL FONDO (Detrás de la Tabla)
   ============================================================================== */
.lava-bg-ambient {
    filter: blur(50px);
    opacity: 0.35;
}

.lava-orb {
    position: absolute;
    border-radius: 9999px;
    will-change: transform;
}

/* Orbe 1: Cian / Gas Intenso */
.orb-1 {
    width: 280px;
    height: 90px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.9) 0%, rgba(2, 132, 199, 0.4) 70%, transparent 100%);
    left: 8%;
    bottom: -15px;
    animation: orbMove1 9s ease-in-out infinite alternate;
}

/* Orbe 2: Púrpura Neón / Magenta */
.orb-2 {
    width: 320px;
    height: 100px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.9) 0%, rgba(236, 72, 153, 0.4) 70%, transparent 100%);
    left: 32%;
    bottom: -25px;
    animation: orbMove2 11s ease-in-out infinite alternate;
}

/* Orbe 3: Esmeralda Eléctrico */
.orb-3 {
    width: 300px;
    height: 95px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.9) 0%, rgba(6, 182, 212, 0.4) 70%, transparent 100%);
    left: 56%;
    bottom: -10px;
    animation: orbMove3 10s ease-in-out infinite alternate;
}

/* Orbe 4: Ámbar / Fuego Líquido */
.orb-4 {
    width: 260px;
    height: 85px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.85) 0%, rgba(239, 68, 68, 0.4) 70%, transparent 100%);
    left: 78%;
    bottom: -20px;
    animation: orbMove4 8s ease-in-out infinite alternate;
}

@keyframes orbMove1 {
    0% { transform: translateX(0px) scale(1) translateY(0); }
    50% { transform: translateX(60px) scale(1.2, 0.85) translateY(-20px); }
    100% { transform: translateX(120px) scale(0.9, 1.15) translateY(-5px); }
}

@keyframes orbMove2 {
    0% { transform: translateX(0px) scale(0.95) translateY(-10px); }
    50% { transform: translateX(-80px) scale(1.25, 0.8) translateY(-25px); }
    100% { transform: translateX(50px) scale(1.1) translateY(5px); }
}

@keyframes orbMove3 {
    0% { transform: translateX(0px) scale(1.15, 0.9) translateY(5px); }
    50% { transform: translateX(80px) scale(0.85, 1.2) translateY(-22px); }
    100% { transform: translateX(-40px) scale(1.05) translateY(-8px); }
}

@keyframes orbMove4 {
    0% { transform: translateX(0px) scale(1) translateY(-5px); }
    50% { transform: translateX(-70px) scale(1.2, 0.8) translateY(-24px); }
    100% { transform: translateX(50px) scale(0.9, 1.1) translateY(0); }
}





/* Mezcla de orbes: se solapan y fusionan */
.lava-orb { width: 460px !important; height: 150px !important; mix-blend-mode: multiply; }
.orb-1 { left: 0% !important; }
.orb-2 { left: 22% !important; }
.orb-3 { left: 44% !important; }
.orb-4 { left: 66% !important; }


/* Plasma sutil: morphing organico, lento y muy difuso */
.lava-bg-ambient { filter: blur(60px) saturate(1.2); opacity: 0.28; }
.lava-orb { animation-duration: 18s, 11s !important; animation-name: plasmaDrift, plasmaMorph !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; }
.orb-2 { animation-delay: -4s, -3s !important; }
.orb-3 { animation-delay: -9s, -6s !important; }
.orb-4 { animation-delay: -13s, -8s !important; }
@keyframes plasmaDrift { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 33% { transform: translate(90px,-22px) rotate(25deg) scale(1.2,0.85); } 66% { transform: translate(-60px,-8px) rotate(-18deg) scale(0.9,1.2); } 100% { transform: translate(40px,-28px) rotate(12deg) scale(1.1); } }
@keyframes plasmaMorph { 0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 50% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; } 100% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; } }


/* Humo: volutas que suben, se expanden y se disipan */
.lava-bg-ambient { filter: blur(45px); opacity: 0.4; height: 14rem !important; }
.lava-orb { width: 340px !important; height: 240px !important; mix-blend-mode: normal; border-radius: 50% !important; bottom: -90px !important; opacity: 0; animation: smokeRise 14s ease-in-out infinite !important; animation-direction: normal !important; }
.orb-1 { left: 2% !important; animation-delay: 0s !important; }
.orb-2 { left: 24% !important; animation-delay: -3.5s !important; animation-duration: 17s !important; }
.orb-3 { left: 48% !important; animation-delay: -7s !important; animation-duration: 15s !important; }
.orb-4 { left: 70% !important; animation-delay: -10.5s !important; animation-duration: 19s !important; }
@keyframes smokeRise { 0% { transform: translate(0,30px) scale(0.7,0.6) rotate(0deg); opacity: 0; } 25% { opacity: 0.85; } 55% { transform: translate(40px,-45px) scale(1.15,1.0) rotate(12deg); opacity: 0.7; } 100% { transform: translate(-30px,-110px) scale(1.5,1.3) rotate(-10deg); opacity: 0; } }


/* Humo SVG: tenue, desvanecido hacia arriba */
.smoke-bg { opacity: 0.30; filter: blur(6px); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%); }


/* Mesh gradient vivo: sin formas, colores que se funden lentamente */
.smoke-bg { filter: none !important; opacity: 0.55 !important; height: 18rem !important; }
.smoke-bg svg { display: none; }
.smoke-bg::before, .smoke-bg::after { content: ''; position: absolute; inset: -20%; }
.smoke-bg::before { background: radial-gradient(60% 70% at 15% 90%, rgba(0,200,255,.45), transparent 70%), radial-gradient(55% 65% at 55% 100%, rgba(139,92,246,.40), transparent 70%), radial-gradient(50% 60% at 90% 90%, rgba(16,185,129,.40), transparent 70%); background-size: 160% 160%; animation: meshA 22s ease-in-out infinite alternate; }
.smoke-bg::after { background: radial-gradient(55% 65% at 35% 100%, rgba(236,72,153,.35), transparent 70%), radial-gradient(60% 70% at 75% 100%, rgba(0,200,255,.35), transparent 70%), radial-gradient(45% 55% at 5% 100%, rgba(245,158,11,.25), transparent 70%); background-size: 170% 170%; animation: meshB 28s ease-in-out infinite alternate; }
@keyframes meshA { 0% { background-position: 0% 50%; transform: translateX(-4%); } 100% { background-position: 100% 50%; transform: translateX(4%); } }
@keyframes meshB { 0% { background-position: 100% 50%; transform: translateX(5%) scale(1.05); } 100% { background-position: 0% 50%; transform: translateX(-5%) scale(1); } }

/* Colores saliendo de la esquina inferior derecha */
.smoke-bg { height: 26rem !important; -webkit-mask-image: none !important; mask-image: none !important; }
.smoke-bg::before { background: radial-gradient(60% 80% at 100% 100%, rgba(0,200,255,.50), transparent 70%), radial-gradient(50% 70% at 88% 105%, rgba(139,92,246,.45), transparent 70%), radial-gradient(40% 60% at 100% 75%, rgba(16,185,129,.40), transparent 70%) !important; background-size: 140% 140% !important; transform-origin: 100% 100%; animation: cornerA 18s ease-in-out infinite alternate !important; }
.smoke-bg::after { background: radial-gradient(55% 75% at 95% 100%, rgba(236,72,153,.42), transparent 70%), radial-gradient(45% 65% at 75% 110%, rgba(0,200,255,.35), transparent 70%), radial-gradient(35% 55% at 100% 85%, rgba(245,158,11,.30), transparent 70%) !important; background-size: 150% 150% !important; transform-origin: 100% 100%; animation: cornerB 24s ease-in-out infinite alternate !important; }
@keyframes cornerA { 0% { transform: scale(0.85) translate(0,0); } 100% { transform: scale(1.25) translate(-6%,-4%); } }
@keyframes cornerB { 0% { transform: scale(1.2) translate(-5%,-3%); } 100% { transform: scale(0.9) translate(0,0); } }


.smoke-bg::before, .smoke-bg::after { background-size: 100% 100% !important; background-position: 100% 100% !important; background-repeat: no-repeat !important; inset: 0 !important; }
.smoke-bg { opacity: 0.8 !important; }


/* Correccion: sin cortes/bordes duros (sin tiles repetidos), fade superior suave */
.smoke-bg { height: 11rem !important; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%) !important; mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%) !important; }
.smoke-bg::before, .smoke-bg::after { inset: 0 -30% !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; }
@keyframes meshA { 0% { transform: translateX(-12%) scale(1.05,1); } 100% { transform: translateX(12%) scale(1,1.1); } }
@keyframes meshB { 0% { transform: translateX(14%) scale(1,1.1); } 100% { transform: translateX(-14%) scale(1.05,1); } }


/* Correccion linea blanca inferior: el efecto cubre hasta el borde real */
.smoke-bg { bottom: -3px !important; height: calc(11rem + 3px) !important; }
.smoke-bg::before, .smoke-bg::after { inset: 0 -30% -12px -30% !important; }


/* Modo aleatorio: manchas con colores y trayectorias al azar (JS) */
.smoke-random::before, .smoke-random::after { display: none !important; }
.smoke-random { opacity: 0.6 !important; }
.smoke-blob { position: absolute; border-radius: 50%; will-change: transform, opacity; filter: blur(18px); }


/* Color animable: cambios suaves, sin saltos */
@property --c { syntax: '<color>'; inherits: false; initial-value: rgba(0,200,255,.5); }
.smoke-blob { background: radial-gradient(closest-side, var(--c), transparent 100%); }