/* ==========================================================================
   🚀 SISTEMA DE DISEÑO CRECE SAAS (Multi-Tenancy Visual)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES MAESTRAS (Paletas de Colores por Subdominio)
   -------------------------------------------------------------------------- */
:root {
    /* 🌐 WWW.CRECE.COM (Web Pública / Ventas) - Estilo StartUp / Landing */
    --public-primary: #0EA5E9;  /* Azul Sky vibrante (Botón de registro) */
    --public-dark: #0F172A;     /* Slate muy oscuro (Hero y Footer) */
    --public-bg: #FFFFFF;       /* Blanco puro (Cuerpo de la página) */
    --public-text: #334155;     /* Gris oscuro (Lectura cómoda) */

    /* 🏪 APP.CRECE.COM (PYMES - B2B) - Estilo Claro/Limpio (Shopify) */
    --b2b-primary: #4F46E5;     /* Índigo (Botones principales POS) */
    --b2b-primary-dark: #3730A3;
    --b2b-success: #10B981;     /* Verde esmeralda (Cobros/Ok) */
    --b2b-bg: #F8FAFC;          /* Gris muy pálido (Fondo del POS) */
    --b2b-text-main: #1E293B;   /* Slate oscuro (Textos) */
    --b2b-panel: #FFFFFF;       /* Tarjetas blancas */

    /* 🪙 SOCIOS.CRECE.COM (Red MLM) - Estilo Oscuro (Binance) */
    --mlm-primary: #FCD535;     /* Amarillo Binance (Llamados a la acción) */
    --mlm-primary-dark: #E2B912;
    --mlm-bg: #0B0E11;          /* Gris casi negro (Fondo) */
    --mlm-panel: #1E2329;       /* Gris oscuro (Tarjetas/Paneles) */
    --mlm-border: #2B3139;      /* Gris medio (Bordes sutiles) */
    --mlm-text-main: #EAECEF;   /* Blanco roto (Textos) */
    --mlm-text-muted: #848E9C;  /* Gris claro (Textos secundarios) */

    /* 👔 BPO.CRECE.COM (Contadores) - Estilo Corporativo/Sobrio */
    --bpo-primary: #1E293B;     /* Slate oscuro (Header/Botones) */
    --bpo-bg: #F1F5F9;          /* Gris neutro (Fondo) */
    --bpo-panel: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. CLASES GLOBALES (Utilidades para todo el ecosistema)
   -------------------------------------------------------------------------- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Animaciones suaves globales */
.transition-all {
    transition: all 0.3s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Switch estilo Apple (Interruptores de Permisos RBAC) */
.form-switch .apple-switch {
    width: 3.5rem !important;
    height: 1.75rem !important;
    cursor: pointer;
    border-radius: 2rem !important;
}


/* --------------------------------------------------------------------------
   3. ESTILOS EXCLUSIVOS: WEB PÚBLICA (Landing Page)
   -------------------------------------------------------------------------- */
body.public-theme {
    background-color: var(--public-bg) !important;
    color: var(--public-text);
}

.public-theme .navbar {
    background-color: var(--public-dark) !important;
}

.public-theme .btn-primary {
    background-color: var(--public-primary) !important;
    border-color: var(--public-primary) !important;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   4. ESTILOS EXCLUSIVOS: B2B (Modo Claro - PYMES)
   -------------------------------------------------------------------------- */
body.b2b-theme {
    background-color: var(--b2b-bg) !important;
    color: var(--b2b-text-main);
}

.b2b-theme .apple-switch:checked {
    background-color: var(--b2b-success) !important;
    border-color: var(--b2b-success) !important;
}

/* Botón Flotante (Soporte BPO para la PYME) */
.btn-support-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: linear-gradient(135deg, var(--b2b-primary) 0%, var(--b2b-primary-dark) 100%);
    color: white;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-support-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(79, 70, 229, 0.4);
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   5. ESTILOS EXCLUSIVOS: MLM (Modo Oscuro - Binance)
   -------------------------------------------------------------------------- */
body.mlm-theme {
    background-color: var(--mlm-bg) !important;
    color: var(--mlm-text-main) !important;
}

/* Forzamos que las tarjetas de Bootstrap adopten el modo oscuro */
.mlm-theme .card, 
.mlm-theme .modal-content,
.mlm-theme .bg-white {
    background-color: var(--mlm-panel) !important;
    border: 1px solid var(--mlm-border) !important;
    color: var(--mlm-text-main) !important;
}

.mlm-theme .text-muted {
    color: var(--mlm-text-muted) !important;
}

/* Botones de acción amarillos */
.mlm-theme .btn-warning {
    background-color: var(--mlm-primary) !important;
    color: #000 !important;
    border: none;
    font-weight: 900;
}

.mlm-theme .btn-warning:hover {
    background-color: var(--mlm-primary-dark) !important;
}

/* Campos de formulario (Inputs) */
.mlm-theme .form-control, 
.mlm-theme .form-select {
    background-color: var(--mlm-bg) !important;
    border-color: var(--mlm-border) !important;
    color: white !important;
}

.mlm-theme .form-control:focus, 
.mlm-theme .form-select:focus {
    border-color: var(--mlm-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(252, 213, 53, 0.25) !important;
}

/* Tablas */
.mlm-theme .table {
    color: var(--mlm-text-main);
}
.mlm-theme .table-hover tbody tr:hover {
    color: var(--mlm-text-main);
    background-color: rgba(255, 255, 255, 0.05);
}


/* --------------------------------------------------------------------------
   6. ESTILOS EXCLUSIVOS: BPO (Modo Institucional)
   -------------------------------------------------------------------------- */
body.bpo-theme {
    background-color: var(--bpo-bg) !important;
}

.bpo-navbar {
    background-color: var(--bpo-primary) !important;
}