/* ============================================================================
   ADUAPORTIX BASE - Design Tokens & Resets
   Parte de la Fase 1 de Refactorización.
   ============================================================================ */

:root, .aduaportix-scope {
    --ix-bg: #020617;
    --ix-accent: #6366f1;
    --ix-accent-lt: #818cf8;
    --ix-accent-cyan: #22d3ee;
    --ix-green: #38bdf8;
    --ix-text: #f8fafc;
    --ix-text-2: #cbd5e1;
    --ix-text-3: #64748b;
    --ix-border: rgba(255, 255, 255, 0.1);
    --ix-bg-card: rgba(15, 23, 42, 0.62);
    --ix-bg-hover: rgba(148, 163, 184, 0.08);
    --ix-border-hover: rgba(148, 163, 184, 0.3);
    --ix-accent-sub: rgba(99, 102, 241, 0.16);
    --ix-accent-glow: rgba(99, 102, 241, 0.2);
    --ix-green-glow: rgba(56, 189, 248, 0.4);
    --ix-font: 'Inter', sans-serif;
    --ix-icon: #ffffff;

    --ix-r-sm: 12px;
    --ix-r-md: 14px;
    --ix-r-lg: 40px;
    --ix-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --adx-header-height: 58px;
    --adx-live-pill-height: 38px;
    --adx-header-tab-height: 28px;
    --adx-live-pill-gap: 17px;
}

/* Resets Globales de Scroll */
::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Estructura Base del Scope */
.aduaportix-scope {
    color: var(--ix-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    overflow-x: clip;
    width: 100%;
    position: relative;
    background:
        radial-gradient(circle at 10% 10%, rgba(34, 211, 238, 0.12), transparent 32%),
        radial-gradient(circle at 85% 5%, rgba(99, 102, 241, 0.16), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.08), transparent 36%),
        var(--ix-bg);
}

.aduaportix-scope *,
.aduaportix-scope *::before,
.aduaportix-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==================== SELECTS & FORMS RESET ==================== */
.aduaportix-scope select {
    background: var(--ix-surface-2, #111827);
    color: var(--ix-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ix-r-md);
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    width: 100%;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: var(--ix-transition);
}

.aduaportix-scope select:hover {
    border-color: var(--ix-accent);
    background-color: var(--ix-bg-hover);
}

.aduaportix-scope select:focus {
    border-color: var(--ix-accent);
    box-shadow: 0 0 0 3px var(--ix-accent-glow);
}

.aduaportix-scope select option {
    background: var(--ix-bg);
    color: #fff;
    padding: 10px;
}

/* ==================== UTILITY CLASSES ==================== */
.aduaportix-hidden {
    display: none !important;
}

/* --- Contenedores de Ancho Controlado --- */
.aduaportix-scope .container,
.adx-container-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Utilidades Flex de Alineación --- */
.adx-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.adx-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}