/**
 * style.css
 * ------------------------------------------------------------------
 * Estilos complementarios a Tailwind (Play CDN). Cubre: scrollbar
 * personalizada, transiciones del drawer, animación del splash de
 * login y reglas de impresión para el listado de leads.
 * ------------------------------------------------------------------
 */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Scrollbar personalizada (WebKit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.8);
}

/* Sidebar: submenú colapsable animado */
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.nav-group.open .nav-submenu {
    max-height: 500px;
}
.nav-group.open .nav-chevron {
    transform: rotate(90deg);
}
.nav-chevron {
    transition: transform 0.2s ease;
}

/* Fade genérico para transiciones de overlay */
.fade-transition {
    transition: opacity 0.25s ease;
}

/* Login: fondo decorativo con burbujas suaves */
.auth-bg {
    background-image: radial-gradient(circle at 15% 20%, rgba(124, 206, 243, 0.25), transparent 40%),
          radial-gradient(circle at 85% 80%, rgba(42, 160, 216, 0.2), transparent 45%);
}

@media print {
    @page {
          margin: 14mm;
    }
    body {
          background: #fff !important;
    }
    .no-print,
    aside,
    nav,
    #drawerOverlay,
    #toastContainer {
          display: none !important;
    }
    #printHeader {
          display: flex !important;
    }
    main {
          margin: 0 !important;
          padding: 0 !important;
    }
    #mainWrapper {
          margin-left: 0 !important;
    }
    #leadsTableCard {
          box-shadow: none !important;
          border: none !important;
    }
    table {
          width: 100% !important;
          font-size: 11px;
    }
    th, td {
          color: #111 !important;
    }
}