@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --insaga-default: #6366f1; /* Premium Indigo */
  --insaga-gris:  #334155;
  --insaga-blanco: #ffffff;
  --sidebar-bg: #0f172a; /* Slate 900 */
  --body-bg: #f8fafc; /* Slate 50 */
}

body {
  font-family: 'Outfit', sans-serif !important;
  background-color: var(--body-bg) !important;
  color: #334155 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    color: #1e293b;
}

/* Page Wrapper / Background */
.page-wrapper {
    background: var(--body-bg) !important;
    padding-top: 20px;
}

/* =======================================
   TOPBAR MODERNIZATION
   ======================================= */
.topbar {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
  border-bottom: none !important;
}

.topbar .navbar-header {
  background: var(--sidebar-bg) !important;
  box-shadow: 4px 0 15px rgba(0,0,0,0.1);
  border-right: 1px solid rgba(255,255,255,0.05);
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
  color: #64748b !important;
  transition: all 0.3s ease;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover {
  color: var(--insaga-default) !important;
  transform: translateY(-2px);
}

.topbar .navbar-brand span .text-white {
    color: #ffffff !important;
    font-weight: 600;
}
.topbar .navbar-brand .text-warning {
    color: #38bdf8 !important; /* Accent blue for REST */
    font-weight: 800;
}

/* =======================================
   SIDEBAR MODERNIZATION
   ======================================= */
.left-sidebar, .sidebar-nav {
  background: var(--sidebar-bg) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.05) !important;
}

.user-profile {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-nav ul li a {
  color: #94a3b8 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease;
  font-weight: 500;
}

.sidebar-nav ul li a i, .sidebar-nav ul li a svg {
    color: #64748b !important;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.sidebar-nav ul li a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
}
.sidebar-nav ul li a:hover i, .sidebar-nav ul li a:hover svg {
    color: #ffffff !important;
}

.sidebar-nav > ul > li.active > a, 
.sidebar-nav > ul > li.active:hover > a {
    background: linear-gradient(135deg, var(--insaga-default) 0%, #818cf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 15px -3px rgba(99, 102, 241, 0.4) !important;
}

.sidebar-nav > ul > li.active > a i, 
.sidebar-nav > ul > li.active > a svg {
    color: #ffffff !important;
}

.sidebar-nav ul li ul {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-top: 5px;
}

/* =======================================
   CARDS & WIDGETS
   ======================================= */
.card {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.04), 0 8px 10px -6px rgba(0,0,0,0.01) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    background: #ffffff;
    margin-bottom: 25px;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
}

/* Outlined cards -> Made clean white */
.card-outline-success, 
.card-outline-info, 
.card-outline-primary, 
.card-outline-danger, 
.card-outline-warning {
    border-top: none !important;
    background: #ffffff !important;
}

.card-title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 18px;
    letter-spacing: -0.5px;
}

/* Beautiful Gradients for colored elements */
.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    border: none !important;
}
.bg-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    border: none !important;
}
.bg-primary {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
    border: none !important;
}
.bg-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%) !important;
    border: none !important;
}
.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    border: none !important;
}

.text-success { color: #10b981 !important; }
.text-info { color: #0ea5e9 !important; }
.text-primary { color: #6366f1 !important; }
.text-danger { color: #f43f5e !important; }
.text-warning { color: #f59e0b !important; }

/* Progress bars inside cards */
.progress {
    border-radius: 10px !important;
    background-color: #f1f5f9 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    height: 8px !important;
}

.progress-bar {
    border-radius: 10px !important;
}

/* =======================================
   BUTTONS
   ======================================= */
.btn {
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.3s ease;
}

.btn-themecolor {
  background: linear-gradient(135deg, var(--insaga-default), #818cf8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
}

.btn-themecolor:hover, .btn-primary:hover, .btn-success:hover, .btn-danger:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
}

/* =======================================
   TABLES & MISC
   ======================================= */
.stylish-table thead th {
    font-weight: 600 !important;
    color: #64748b !important;
    border-bottom: 2px solid #f1f5f9 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stylish-table tbody tr {
    transition: all 0.2s ease;
}

.stylish-table tbody tr:hover, .stylish-table tbody tr.active {
  background-color: #f8fafc !important;
  border-left: 4px solid var(--insaga-default) !important;
}

.message-widget a {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease;
}
.message-widget a:hover {
    background: #f8fafc !important;
    transform: translateX(5px);
}
.round {
    border-radius: 14px !important; /* Squircle */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.preloader {
  width: 100%;
  height: 100%;
  top: 0px;
  position: fixed;
  z-index: 99999;
  background: var(--body-bg);
}

/* Overriding right sidebar specific */
.right-sidebar .rpanel-title {
  background: linear-gradient(135deg, var(--insaga-default), #818cf8) !important;
}

.nav-tabs .nav-link {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--insaga-default) !important;
    border-bottom: 3px solid var(--insaga-default) !important;
}

/* =======================================
   MINI-SIDEBAR FIXES
   ======================================= */

/* Ocultar el texto principal siempre en modo minimizado */
.mini-sidebar .sidebar-nav > ul > li > a .hide-menu {
    display: none !important;
}

/* El enlace base (el icono) */
.mini-sidebar .sidebar-nav > ul > li > a {
    text-align: center !important;
    padding: 12px 0 !important;
}

.mini-sidebar .sidebar-nav > ul > li > a i, 
.mini-sidebar .sidebar-nav > ul > li > a svg {
    margin: 0 !important;
    display: inline-block !important;
}

/* Cuando pasas el mouse por encima del li, anulamos el fondo oscuro expandido */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    background: rgba(255,255,255,0.05) !important;
    width: auto !important;
}

/* Asegurar que los contenedores no corten el submenú flotante */
.mini-sidebar .left-sidebar,
.mini-sidebar .scroll-sidebar,
.mini-sidebar .sidebar-nav {
    overflow: visible !important;
}

/* Posicionar el submenú como flotante a la derecha del icono */
.mini-sidebar .sidebar-nav #sidebarnav > li {
    position: relative !important;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,
.mini-sidebar .sidebar-nav #sidebarnav > li.active:hover > ul {
    display: block !important;
    position: absolute !important;
    left: 65px !important; /* Separación visual perfecta */
    top: 0 !important;
    width: 220px !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    padding: 10px 0 !important;
    z-index: 99999 !important;
}

/* PUENTE INVISIBLE PARA EVITAR QUE SE PIERDA EL HOVER */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 100%;
    background: transparent;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul > li > a {
    color: #475569 !important;
    padding: 10px 20px !important;
    text-align: left !important;
    display: block !important;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul > li > a:hover {
    color: var(--insaga-default) !important;
    background: #f8fafc !important;
}