/* =========================================================
   TEMA VIVO CORPORATIVO - Logística Latam
   Objetivo: dar vida visual sin perder apariencia profesional.
   Colores suaves, sombras limpias y acentos por módulo.
   ========================================================= */

:root {
    --vadal-navy: #111827;
    --vadal-indigo: #4f46e5;
    --vadal-purple: #7c3aed;
    --vadal-blue: #2563eb;
    --vadal-cyan: #0891b2;
    --vadal-teal: #0f766e;
    --vadal-emerald: #059669;
    --vadal-amber: #f59e0b;
    --vadal-orange: #ea580c;
    --vadal-rose: #e11d48;
    --vadal-soft-bg: #f4f7ff;
    --vadal-card-border: rgba(99, 102, 241, 0.14);
    --vadal-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    --vadal-shadow-soft: 0 10px 28px rgba(79, 70, 229, 0.08);
}

html,
body.vadal-theme,
body {
    background:
        radial-gradient(circle at 8% 8%, rgba(59, 130, 246, 0.13), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.11), transparent 30%),
        radial-gradient(circle at 72% 90%, rgba(16, 185, 129, 0.10), transparent 26%),
        linear-gradient(135deg, #f8fbff 0%, #f5f3ff 48%, #fff7ed 100%) !important;
}

body.vadal-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(79, 70, 229, 0.10) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.15));
}

body.vadal-theme > *:not(.fixed) {
    position: relative;
}

/* Header: conserva seriedad, pero con más profundidad visual */
body.vadal-theme header {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.96), rgba(67, 56, 202, 0.98)) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20) !important;
}

body.vadal-theme header::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
}


/* Fondo decorativo anterior del header: ahora con tonos más vivos y controlados */
body.vadal-theme .fixed.inset-0.z-0.pointer-events-none {
    background:
        radial-gradient(circle at 15% 12%, rgba(59, 130, 246, .16), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(168, 85, 247, .13), transparent 32%),
        radial-gradient(circle at 75% 84%, rgba(20, 184, 166, .12), transparent 28%),
        linear-gradient(135deg, #f8fbff 0%, #f5f3ff 55%, #fff7ed 100%) !important;
}

/* Sidebar general */
body.vadal-theme #app-sidebar,
body.vadal-theme aside#app-sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(239,246,255,.88) 46%, rgba(245,243,255,.92) 100%) !important;
    border-right: 1px solid rgba(99,102,241,.16) !important;
    box-shadow: 8px 0 24px rgba(15,23,42,.04) !important;
}

body.vadal-theme #app-sidebar .sticky,
body.vadal-theme aside#app-sidebar .sticky {
    background: rgba(255,255,255,.84) !important;
    border-bottom: 1px solid rgba(99,102,241,.12) !important;
}

body.vadal-theme .app-link {
    border: 1px solid transparent;
}

body.vadal-theme .app-link:hover,
body.vadal-theme button:hover {
    box-shadow: 0 8px 18px rgba(79,70,229,.07);
}

body.vadal-theme .app-link.active {
    background: linear-gradient(135deg, #eef2ff, #e0f2fe) !important;
    color: #4338ca !important;
    border-color: rgba(99,102,241,.18) !important;
    box-shadow: 0 10px 26px rgba(79,70,229,.12) !important;
}

/* Contenido principal */
body.vadal-theme .portal-main,
body.vadal-theme #iframe-view,
body.vadal-theme #dashboard-view {
    background: transparent !important;
}

body.vadal-theme #dashboard-view {
    background:
        radial-gradient(circle at 10% 10%, rgba(59,130,246,.10), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(124,58,237,.09), transparent 34%),
        radial-gradient(circle at 80% 88%, rgba(245,158,11,.09), transparent 26%) !important;
}

/* Tarjetas: menos blanco plano, más vidrio suave */
body.vadal-theme .bg-white,
body.vadal-theme .bg-white\/80,
body.vadal-theme .bg-white\/90,
body.vadal-theme .bg-white\/95 {
    background-color: rgba(255,255,255,.88) !important;
    border-color: var(--vadal-card-border) !important;
}

body.vadal-theme .shadow-sm {
    box-shadow: var(--vadal-shadow-soft) !important;
}

body.vadal-theme .shadow-md,
body.vadal-theme .shadow-lg {
    box-shadow: var(--vadal-shadow) !important;
}

/* Relojes del dashboard: cada tarjeta tiene personalidad muy sutil */
body.vadal-theme #dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div:nth-child(1) {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,253,250,.88)) !important;
    border-color: rgba(20,184,166,.22) !important;
}

body.vadal-theme #dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div:nth-child(2) {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.90)) !important;
    border-color: rgba(37,99,235,.20) !important;
}

body.vadal-theme #dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div:nth-child(3) {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(250,245,255,.90)) !important;
    border-color: rgba(147,51,234,.20) !important;
}

body.vadal-theme #dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div:nth-child(4) {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,251,235,.90)) !important;
    border-color: rgba(245,158,11,.22) !important;
}

/* Marcadores/listones del inicio desactivados */
body.vadal-theme .ll-title-bar {
    display: none !important;
}
body.vadal-theme .ll-section-title {
    gap: .5rem !important;
}


/* Avisos */
body.vadal-theme #dashboard-view article {
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,251,235,.90)) !important;
    border: 1px solid rgba(245,158,11,.22) !important;
    box-shadow: 0 16px 35px rgba(245,158,11,.08) !important;
}

body.vadal-theme #dashboard-view article:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(245,158,11,.12) !important;
}

/* Formularios y tablas de módulos internos */
body.vadal-theme input,
body.vadal-theme select,
body.vadal-theme textarea {
    background-color: rgba(255,255,255,.90) !important;
    border-color: rgba(99,102,241,.16) !important;
}

body.vadal-theme input:focus,
body.vadal-theme select:focus,
body.vadal-theme textarea:focus {
    border-color: rgba(79,70,229,.55) !important;
    box-shadow: 0 0 0 4px rgba(79,70,229,.12) !important;
}

body.vadal-theme table thead,
body.vadal-theme thead.bg-slate-50,
body.vadal-theme thead.bg-gray-50 {
    background: linear-gradient(90deg, #eef2ff, #ecfeff) !important;
}

body.vadal-theme th {
    color: #334155 !important;
}

body.vadal-theme tr:hover td {
    background-color: rgba(239,246,255,.55) !important;
}

/* Estados y chips */
body.vadal-theme .rounded-full,
body.vadal-theme .rounded-xl,
body.vadal-theme .rounded-2xl,
body.vadal-theme .rounded-3xl {
    border-color: rgba(99,102,241,.12);
}

/* AuditPro embebido */
body.vadal-theme #main-app {
    background:
        radial-gradient(circle at 0% 0%, rgba(99,102,241,.10), transparent 30%),
        radial-gradient(circle at 100% 8%, rgba(16,185,129,.08), transparent 28%),
        transparent !important;
}

body.vadal-theme #main-app main,
body.vadal-theme #audit-content,
body.vadal-theme .tab-content {
    background: transparent !important;
}

/* Login */
body.vadal-theme-login {
    background:
        radial-gradient(circle at 15% 15%, rgba(14,165,233,.22), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(124,58,237,.20), transparent 30%),
        radial-gradient(circle at 78% 90%, rgba(245,158,11,.15), transparent 28%),
        linear-gradient(135deg, #eff6ff 0%, #f5f3ff 52%, #fff7ed 100%) !important;
}

body.vadal-theme-login .login-card-vivo {
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(239,246,255,.88)) !important;
    border: 1px solid rgba(99,102,241,.16) !important;
    box-shadow: 0 28px 70px rgba(30,64,175,.14) !important;
}

/* Pequeño movimiento elegante */
body.vadal-theme .hover-card,
body.vadal-theme article,
body.vadal-theme #dashboard-view .grid > div {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.vadal-theme .hover-card:hover,
body.vadal-theme #dashboard-view .grid > div:hover {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    body.vadal-theme #app-sidebar,
    body.vadal-theme aside#app-sidebar {
        box-shadow: none !important;
    }
}


/* =========================================================
   AJUSTE FINAL: SIN LISTONES DECORATIVOS
   - Quita la línea multicolor debajo del header.
   - Quita los marcadores verticales de Horario Regional y Tablero de Avisos.
   ========================================================= */
body.vadal-theme header::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
}
body.vadal-theme .ll-title-bar {
    display: none !important;
}
body.vadal-theme .ll-section-title {
    gap: .5rem !important;
}


/* =========================================================
   FIX FINAL: quitar línea multicolor y permitir footer normal
   ========================================================= */
body.vadal-theme header,
body.vadal-theme-login header,
header {
    border-bottom: 0 !important;
}

body.vadal-theme header::after,
body.vadal-theme-login header::after,
header::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.vadal-theme .portal-main,
body.vadal-theme #app-sidebar,
body.vadal-theme aside#app-sidebar {
    border-top: 0 !important;
}

.portal-footer-safe {
    position: relative !important;
    z-index: 2 !important;
    width: 100%;
    margin-top: 0;
}