/* ============================================================================
   LonkyDev — Theme del panel superadmin.
   Identidad propia (violeta), distinta de /css/lonky-theme.css (azul, ERP tenant).
   Se carga DESPUÉS de Bootstrap para pisar sus defaults. Nunca convive con
   lonky-theme.css: el panel admin no la carga.
   ============================================================================ */

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

:root {
    --lonkydev-violet-50:  #F5F1FF;
    --lonkydev-violet-100: #E4D9FF;
    --lonkydev-violet-300: #A98CFF;
    --lonkydev-violet-500: #8C52FF;
    --lonkydev-violet-600: #7440DB;
    --lonkydev-violet-700: #5C30B3;
    --lonkydev-violet-900: #050A30;

    --lonkydev-navbar-bg: #0D0F1A;
    --lonkydev-bg:        #F6F5FA;

    --lonkydev-grey-100: #EAEAF2;
    --lonkydev-grey-200: #D7D6E4;
    --lonkydev-grey-400: #8D8BA6;
    --lonkydev-grey-500: #666480;
    --lonkydev-grey-900: #1C1B29;

    --lonkydev-success: #2FAE60;
    --lonkydev-warning: #E8A83C;
    --lonkydev-danger:  #DD3838;

    --lonkydev-radius:      10px;
    --lonkydev-radius-sm:   6px;
    --lonkydev-radius-pill: 999px;
    --lonkydev-focus-ring:  0 0 0 3px rgba(140, 82, 255, .25);

    --lonkydev-font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lonkydev-font-title: 'Poppins', 'Inter', sans-serif;

    --bs-primary:     #8C52FF;
    --bs-primary-rgb: 140, 82, 255;
}

body {
    font-family: var(--lonkydev-font-ui);
    background-color: var(--lonkydev-bg);
    color: var(--lonkydev-grey-900);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lonkydev-font-title);
    font-weight: 600;
    color: var(--lonkydev-grey-900);
}

.text-muted, .text-secondary { color: var(--lonkydev-grey-500) !important; }

a { color: var(--lonkydev-violet-600); }
a:hover { color: var(--lonkydev-violet-700); }

/* ---- Navbar / login ---- */
.lonkydev-navbar { background-color: var(--lonkydev-navbar-bg); }
.lonkydev-login  { background-color: var(--lonkydev-navbar-bg); }

/* ---- Botones ---- */
.btn-primary {
    background-color: var(--lonkydev-violet-500);
    border-color: var(--lonkydev-violet-500);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--lonkydev-violet-600) !important;
    border-color: var(--lonkydev-violet-600) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--lonkydev-violet-50);
    border-color: var(--lonkydev-violet-300);
    color: var(--lonkydev-violet-700);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--lonkydev-focus-ring);
}

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--lonkydev-violet-500);
    box-shadow: var(--lonkydev-focus-ring);
}

/* ---- Cards ---- */
.card {
    border-color: var(--lonkydev-grey-200);
    border-radius: var(--lonkydev-radius);
}

/* ---- KPI tiles (índice de tenants) ---- */
.lonkydev-kpi {
    border-radius: var(--lonkydev-radius);
    border: 1px solid var(--lonkydev-grey-200);
    background: #fff;
    padding: 1rem 1.25rem;
}
.lonkydev-kpi-value {
    font-family: var(--lonkydev-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lonkydev-grey-900);
    line-height: 1.2;
}
.lonkydev-kpi-label {
    font-size: .8rem;
    color: var(--lonkydev-grey-500);
}
.lonkydev-kpi--accent .lonkydev-kpi-value { color: var(--lonkydev-violet-600); }

/* ---- Tabla ---- */
.table > thead tr th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--lonkydev-grey-500);
    border-bottom-color: var(--lonkydev-grey-200);
}
.table-hover > tbody > tr:hover { background-color: var(--lonkydev-violet-50); }

/* ---- Badges de estado de onboarding (índice) ---- */
.badge-onboarding-ready     { background-color: var(--lonkydev-success); }
.badge-onboarding-pending   { background-color: var(--lonkydev-warning); color: #2E2410; }
.badge-onboarding-unchecked { background-color: var(--lonkydev-grey-400); }

/* ---- Tabs (ficha de tenant) ---- */
.nav-tabs .nav-link {
    color: var(--lonkydev-grey-500);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--lonkydev-violet-600);
    border-bottom-color: var(--lonkydev-violet-500);
    background: transparent;
}