/* ============ GearSoftware-UI v2 (ERP-ready) ============ */
/* Filosofía:
   - Tokens (variables) para colores, tipografía, radii y sombras.
   - Tres capas: base, componentes y utilidades.
   - Modo claro/oscuro con [data-theme] + fallback a prefers-color-scheme.
   - Accesibilidad: contrastes AA, focus visible, motion-safe.
   - ERP: tablas compactas, inputs limpios, cards y barras listas para WebForms. */

/* ---------- 1) TOKENS ---------- */
:root {
    /* Color palette (Light) */
    --gs-bg: #f7f8fa;
    --gs-surface: #ffffff;
    --gs-surface-2: #f1f3f6;
    --gs-text: #111827; /* gray-900 */
    --gs-text-muted: #6b7280; /* gray-500 */

    --gs-primary: #2563eb; /* blue-600 */
    --gs-primary-600: #1d4ed8;
    --gs-primary-700: #1e40af;
    --gs-success: #16a34a; /* green-600 */
    --gs-warning: #ca8a04; /* yellow-600 */
    --gs-danger: #dc2626; /* red-600 */
    --gs-info: #0891b2; /* cyan-700 */

    --gs-border: #e5e7eb; /* gray-200 */
    --gs-border-strong: #cbd5e1; /* gray-300 */
    /* Effects */
    --gs-radius-xs: .25rem;
    --gs-radius: .5rem;
    --gs-radius-lg: .75rem;
    --gs-radius-xl: 1rem;
    --gs-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --gs-shadow: 0 2px 8px rgba(0,0,0,.08);
    --gs-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    /* Typography & spacing */
    --gs-font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
    --gs-font-alt: "Raleway", "Advent Pro", var(--gs-font-sans);
    --gs-font-size: 15px;
    --gs-leading: 1.6;
    --gs-space-1: .25rem;
    --gs-space-2: .5rem;
    --gs-space-3: .75rem;
    --gs-space-4: 1rem;
    --gs-space-6: 1.5rem;
    --gs-space-8: 2rem;
}

    /* Dark theme overrides */
    :root[data-theme="dark"] {
        --gs-bg: #0b1017; /* near slate-950 */
        --gs-surface: #0f172a; /* slate-900 */
        --gs-surface-2: #111827; /* gray-900 */
        --gs-text: #e5e7eb; /* gray-200 */
        --gs-text-muted: #9ca3af; /* gray-400 */

        --gs-primary: #60a5fa; /* blue-400 for better contrast on dark */
        --gs-primary-600: #3b82f6;
        --gs-primary-700: #2563eb;
        --gs-success: #22c55e;
        --gs-warning: #eab308;
        --gs-danger: #f87171;
        --gs-info: #22d3ee;
        --gs-border: #1f2937; /* gray-800 */
        --gs-border-strong: #374151; /* gray-700 */

        --gs-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --gs-shadow: 0 6px 16px rgba(0,0,0,.45);
        --gs-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    }

/* Auto-respect system preference if no data-theme set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
    }
}

/* ---------- 2) BASE ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--gs-font-size);
    background: var(--gs-bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    color: var(--gs-text);
    font: 400 1rem/var(--gs-leading) var(--gs-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--gs-primary);
    outline-offset: 2px;
    border-radius: var(--gs-radius-xs);
}

/* Motion safe */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--gs-space-3);
    font-family: var(--gs-font-alt);
    font-weight: 600;
    letter-spacing: .2px;
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.5rem
}

h3 {
    font-size: 1.25rem
}

h4 {
    font-size: 1.125rem
}

/* Containers */
.gs-container {
    width: min(1240px, 100% - 2rem);
    margin-inline: auto;
}

.gs-section {
    padding-block: clamp(2rem, 3vw, 4rem);
}

/* ---------- 3) COMPONENTES ---------- */
/* Cards */
.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow-sm);
}

.gs-card--padded {
    padding: var(--gs-space-6);
}

.gs-card header {
    margin-bottom: var(--gs-space-4);
}

/* Botones */
.gs-btn {
    --_bg: var(--gs-surface-2);
    --_fg: var(--gs-text);
    --_bd: var(--gs-border);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .9rem;
    border: 1px solid var(--_bd);
    border-radius: var(--gs-radius);
    background: var(--_bg);
    color: var(--_fg);
    line-height: 1;
    cursor: pointer;
    transition: transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    box-shadow: var(--gs-shadow-sm);
    user-select: none;
}

    .gs-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--gs-shadow);
    }

    .gs-btn:active {
        transform: translateY(0);
        box-shadow: var(--gs-shadow-sm);
    }

.gs-btn--primary {
    --_bg: var(--gs-primary);
    --_fg: #fff;
    --_bd: var(--gs-primary-600);
}

.gs-btn--success {
    --_bg: var(--gs-success);
    --_fg: #fff;
    --_bd: var(--gs-success);
}

.gs-btn--danger {
    --_bg: var(--gs-danger);
    --_fg: #fff;
    --_bd: var(--gs-danger);
}

.gs-btn--ghost {
    --_bg: transparent;
    --_bd: var(--gs-border);
}

.gs-btn--link {
    --_bg: transparent;
    --_bd: transparent;
    color: var(--gs-primary);
    box-shadow: none;
    padding: 0;
}

.gs-btn--sm {
    padding: .45rem .65rem;
    border-radius: var(--gs-radius-xs);
    font-size: .9rem;
}

.gs-btn--lg {
    padding: .8rem 1.1rem;
    border-radius: var(--gs-radius-lg);
}

/* Badges */
.gs-badge {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .3px;
    background: var(--gs-surface-2);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
}

.gs-badge--primary {
    background: color-mix(in srgb, var(--gs-primary) 16%, transparent);
    color: var(--gs-primary-700);
    border-color: color-mix(in srgb, var(--gs-primary) 30%, var(--gs-border));
}

/* Inputs (WebForms friendly) */
.gs-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.gs-label {
    font-size: .875rem;
    color: var(--gs-text-muted);
}

.gs-input, .gs-select, .gs-textarea {
    width: 100%;
    padding: .6rem .7rem;
    border-radius: var(--gs-radius);
    border: 1px solid var(--gs-border);
    background: var(--gs-surface);
    color: var(--gs-text);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .gs-input:focus, .gs-select:focus, .gs-textarea:focus {
        border-color: var(--gs-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-primary) 20%, transparent);
    }

    .gs-input[disabled], .gs-select[disabled], .gs-textarea[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

/* NavBar */
.gs-navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
    backdrop-filter: saturate(180%) blur(8px);
}

    .gs-navbar .gs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-block: .6rem;
    }

/* Sidebar (colapsable si quieres con JS) */
.gs-sidebar {
    background: var(--gs-surface);
    border-right: 1px solid var(--gs-border);
    width: 260px;
    min-height: 100dvh;
    position: sticky;
    top: 0;
}

.gs-sidebar__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    color: var(--gs-text-muted);
    border-left: 3px solid transparent;
}

    .gs-sidebar__item:hover {
        background: var(--gs-surface-2);
        color: var(--gs-text);
    }

.gs-sidebar__item--active {
    color: var(--gs-text);
    border-left-color: var(--gs-primary);
    background: color-mix(in srgb, var(--gs-primary) 10%, transparent);
}

/* Tablas ERP compactas */
.gs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    overflow: hidden;
    box-shadow: var(--gs-shadow-sm);
}

    .gs-table thead th {
        background: var(--gs-surface-2);
        color: var(--gs-text);
        text-align: left;
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .2px;
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--gs-border-strong);
    }

    .gs-table tbody td {
        padding: .55rem .75rem;
        border-bottom: 1px solid var(--gs-border);
        vertical-align: top;
        font-size: .92rem;
    }

    .gs-table tbody tr:hover {
        background: color-mix(in srgb, var(--gs-primary) 6%, transparent);
    }

    .gs-table tfoot td {
        background: var(--gs-surface-2);
        font-weight: 600;
        border-top: 1px solid var(--gs-border-strong);
    }

/* Paginación/toolbar de GridView */
.gs-tablebar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    padding: .6rem;
    border: 1px solid var(--gs-border);
    border-top: none;
    background: var(--gs-surface);
}

/* Modales */
.gs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
}

.gs-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    display: none;
}

.gs-modal__panel {
    width: min(700px, 92vw);
    background: var(--gs-surface);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-lg);
    overflow: hidden;
}

.gs-modal__header {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--gs-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gs-modal__body {
    padding: 1rem 1.1rem;
}

.gs-modal__footer {
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--gs-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Toasts (posicionamiento básico) */
.gs-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: .6rem;
    z-index: 60;
}

.gs-toast {
    background: var(--gs-surface);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow);
    padding: .7rem .9rem;
    min-width: 260px;
}

.gs-toast--ok {
    border-color: color-mix(in srgb, var(--gs-success) 40%, var(--gs-border));
}

.gs-toast--warn {
    border-color: color-mix(in srgb, var(--gs-warning) 40%, var(--gs-border));
}

.gs-toast--err {
    border-color: color-mix(in srgb, var(--gs-danger) 40%, var(--gs-border));
}

/* Hero con imagen/gradiente (en vez de parallax fijo caro en móvil) */
.gs-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(180deg, rgba(2,0,36,.6) 0%, rgba(37,99,235,.7) 50%, rgba(2,0,36,.75) 100%), center/cover no-repeat var(--_img, url('/Images/ERP_Background.png'));
    padding-block: clamp(4rem, 8vw, 8rem);
}

    .gs-hero .gs-container {
        display: grid;
        gap: 1rem;
    }

    .gs-hero h1 {
        color: #fff;
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .gs-hero p {
        color: #e5e7eb;
        max-width: 62ch;
    }

/* ---------- 4) UTILIDADES ---------- */
.gs-hide {
    display: none !important;
}

.gs-flex {
    display: flex;
    gap: .75rem;
}

.gs-flex-col {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gs-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.gs-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

@media (max-width: 900px) {
    .gs-grid-2, .gs-grid-3 {
        grid-template-columns: 1fr;
    }
}

.gs-gap-2 {
    gap: .5rem
}

.gs-gap-4 {
    gap: 1rem
}

.gs-gap-6 {
    gap: 1.5rem
}

.gs-p-2 {
    padding: .5rem
}

.gs-p-4 {
    padding: 1rem
}

.gs-p-6 {
    padding: 1.5rem
}

.gs-mt-4 {
    margin-top: 1rem
}

.gs-mb-4 {
    margin-bottom: 1rem
}

.gs-w-full {
    width: 100%
}

.gs-max-w {
    max-width: 1240px
}

.gs-elev-0 {
    box-shadow: none
}

.gs-elev-1 {
    box-shadow: var(--gs-shadow-sm)
}

.gs-elev-2 {
    box-shadow: var(--gs-shadow)
}

.gs-elev-3 {
    box-shadow: var(--gs-shadow-lg)
}

.gs-rounded {
    border-radius: var(--gs-radius)
}

.gs-rounded-lg {
    border-radius: var(--gs-radius-lg)
}

.gs-rounded-xl {
    border-radius: var(--gs-radius-xl)
}

.gs-border {
    border: 1px solid var(--gs-border)
}

.gs-border-strong {
    border: 1px solid var(--gs-border-strong)
}

.gs-text-muted {
    color: var(--gs-text-muted)
}

.gs-text-center {
    text-align: center
}

.gs-text-right {
    text-align: right
}

/* ---------- 5) COMPAT / ALIAS PARA TU CSS ANTERIOR ---------- */
/* Mapea clases previas a tokens nuevos para no romper nada */
.w3-white {
    background: var(--gs-surface) !important;
    color: var(--gs-text) !important;
}

.w3-whiteSmoke {
    background: color-mix(in srgb, var(--gs-surface) 90%, transparent) !important;
    backdrop-filter: blur(8px) !important;
}

.w3-Smoke {
    background: rgba(0,0,0,.45) !important;
}

.w3-black {
    background: #000 !important;
    color: #fff !important;
}

.QuantaDarkColor {
    background: var(--gs-surface-2) !important;
    color: var(--gs-text) !important;
}

.QuantaDarkColor2 {
    background: color-mix(in srgb, var(--gs-surface-2) 85%, transparent) !important;
    color: var(--gs-text) !important;
    backdrop-filter: blur(10px) !important;
}

.QuantaLiteGlass {
    background: color-mix(in srgb, var(--gs-primary) 25%, transparent) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
}

.QuantaHover:hover {
    background: color-mix(in srgb, var(--gs-primary) 12%, transparent) !important;
}

.w3-button, .w3-btn {
    all: unset;
}

.w3-button, .w3-btn {
    display: inline-block;
}

.w3-button, .w3-btn { /* usa el botón base */
}

.w3-button, .w3-btn { /* agrega la clase nueva */
}

    .w3-button.gs, .w3-btn.gs { /* helper para migrar */
    }

    .w3-button.gs, .w3-btn.gs { /* ejemplo: <a class="w3-button gs gs-btn gs-btn--primary">... */
    }

/* Tablas antiguas → nuevo estilo */
.w3-table, .w3-table-all {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--gs-border) !important;
    border-radius: var(--gs-radius) !important;
    overflow: hidden !important;
}

    .w3-table-all th {
        background: var(--gs-surface-2);
        border-bottom: 1px solid var(--gs-border-strong);
        padding: .6rem .75rem;
    }

    .w3-table-all td {
        padding: .55rem .75rem;
        border-bottom: 1px solid var(--gs-border);
    }

/* Parallax pesado en móvil: desactivar por rendimiento */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8 {
    background-attachment: scroll !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}