/* Hoja de estilos: Estilos Qanty
   Estos estilos sobrescribirán al tema gracias a la prioridad de carga.
*/

/* =========================================
           ESTILOS DEL BOTÓN (SWITCH)
           ========================================= */
        
        /* Contenedor para aislar estilos */
        .qanty-switch-wrapper {
            display: inline-block;
            line-height: 0;
        }

        /* Riel del botón - Usamos !important para vencer al tema */
        button.qanty-switch {
            appearance: none !important;
            -webkit-appearance: none !important;
            background-color: var(--bg-grid-example) !important;
            background-image: none !important; /* Quita gradientes del tema */
            border: 1px solid var(--border-color) !important;
            border-radius: 50px !important;
            width: 52px !important;
            height: 28px !important;
            min-width: 52px !important; /* Evita que el tema lo aplaste */
            min-height: 28px !important;
            position: relative !important;
            cursor: pointer !important;
            outline: none !important;
            transition: all 0.3s ease !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
            padding: 0 !important; /* Quita padding del tema */
            margin: 0 !important;
            box-sizing: border-box !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }

        button.qanty-switch:hover {
            border-color: var(--color-inactivo) !important;
            background-color: var(--bg-grid-example) !important; /* Mantiene color al hover */
        }

        html.dark button.qanty-switch {
            background-color: var(--bg-sidebar) !important;
            border-color: var(--border-color) !important;
        }

        /* Círculo deslizante (Thumb) */
        .qanty-thumb {
            width: 20px !important;
            height: 20px !important;
            background-color: #ffffff !important;
            border-radius: 50% !important;
            position: absolute !important;
            top: 3px !important; 
            left: 3px !important;
            box-shadow: var(--shadow-md) !important;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            pointer-events: none !important;
            margin: 0 !important; /* Asegura que no tenga margen interno */
            padding: 0 !important;
            border: none !important;
        }

        html.dark .qanty-thumb {
            transform: translateX(24px) !important;
        }

        /* Iconos */
        .qanty-icon {
            width: 14px !important;
            height: 14px !important;
            transition: opacity 0.3s ease !important;
            margin: 0 !important;
            display: block; /* Asegura display block base */
            line-height: 1 !important;
        }

        /* Sol: Color variable */
        .icon-sun { 
            color: var(--color-advertencia) !important; 
            display: block !important; 
        }
        
        /* Luna: Color fijo #06008f para contraste sobre blanco */
        .icon-moon { 
            color: #06008f !important; 
            display: none !important; 
        }

        html.dark .icon-sun { display: none !important; }
        html.dark .icon-moon { display: block !important; }
        
  /* * SISTEMA DE VARIABLES */
        :root {
            /* Marca */
            --color-titulo: #06008f;
            --color-texto: #2c2c2c;
            --color-interactivo: #18aaf4;
            --color-acento: #1974e1;
            
            /* Estados */
            --color-exito: #28a745;
            --color-advertencia: #ffc107;
            --color-error: #dc3545;
            --color-inactivo: #94a3b8; 

            /* Degradados */
            --gradient-qanty: linear-gradient(135deg, #665fee, #27c2de, #05f2db);
            --gradient-btn: linear-gradient(90deg, #18aaf4 0%, #1974e1 100%); /* Nuevo gradiente para botones */
            
            /* UI */
            --bg-body: #f8fafc;
            --bg-sidebar: #ffffff;
            --bg-card: rgba(255, 255, 255, 0.7); /* Fondo base para glassmorphism */
            --bg-card-hover: #f1f5f9;
            --bg-grid-example: #e2e8f0; 
            --border-color: #e2e8f0;
            --text-main: #334155;
            --text-muted: #64748b;
            
            /* Sombras & Elevaciones */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
            --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.05); /* Sombra específica glass */
            
            /* Radios - SISTEMA UNIFICADO */
            --radius-sm: 4px;   /* Etiquetas pequeñas, inputs simples */
            --radius-md: 8px;   /* Enlaces nav, elementos internos pequeños */
            --radius-element: 12px; /* Botones, Iconos, Cajas internas, Badges grandes */
            --radius-lg: 16px;  /* Tarjetas estándar */
            --radius-container: 24px; /* Contenedores grandes (Hero, Banners, Secciones destacadas) */

            /* Tipografía */
            --font-display: 'Plus Jakarta Sans', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        /* Modo Oscuro */
        html.dark {
            --color-titulo: #ffffff;
            --color-texto: #e2e8f0;
            --bg-body: #0f172a;
            --bg-sidebar: #1e293b;
            --bg-card: rgba(30, 41, 59, 0.6); /* Glass oscuro */
            --bg-card-hover: #334155;
            --bg-grid-example: #334155;
            --border-color: rgba(255, 255, 255, 0.1);
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
            --color-inactivo: #475569;
        }

        /* RESET & BASE */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
font-family: var(--font-body);
	background-color: var(--bg-body);
	color: var(--text-main);
	line-height: 1.6;
	transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-titulo);
	line-height: 1.2;
}
.container-max {
    max-width: 980px; /* Puedes ajustar esto a 1440px o 1200px según prefieras */
    margin-left: auto; /* Centra el contenido horizontalmente */
    margin-right: auto;
    width: 100%;
}