:root {
    --turf-deep: #063b4a;
    --turf-dark: #07586b;
    --turf-primary: #168fa7;
    --turf-primary-strong: #087b94;
    --turf-bright: #35b7c9;
    --turf-soft: #e8f7fa;
    --turf-mist: #f4fafb;
    --turf-line: #cde7ec;
    --turf-success: #16836f;
    --turf-shadow: rgba(6, 59, 74, .12);
    --ink: var(--turf-deep);
    --muted: #55727a;
    --paper: var(--turf-mist);
    --accent: var(--turf-primary);
    --line: var(--turf-line);
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 100% 0, rgba(53,183,201,.09), transparent 30rem),
        linear-gradient(180deg, #f8fcfd 0, #f2f9fa 100%);
    color: var(--turf-deep);
}

body.is-loading { overflow: hidden; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 104px;
    padding: 8px clamp(18px, 4vw, 64px);
    border-bottom: 1px solid rgba(22,143,167,.2);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 30px rgba(6,59,74,.07);
    backdrop-filter: blur(14px);
}

.brand-logo {
    width: clamp(205px, 13vw, 245px);
    height: 92px;
    max-width: none;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
}

[data-main-nav] > a,
[data-main-nav] > .nav-dropdown > .nav-dropdown-toggle {
    color: var(--turf-deep);
}

nav a, .nav-dropdown-toggle { transition: color .18s ease, background .18s ease; }
nav a:hover, .nav-dropdown-toggle:hover { color: var(--turf-primary-strong); }

.nav-dropdown-menu {
    border-color: var(--turf-line);
    box-shadow: 0 20px 50px rgba(6,59,74,.16);
}

.nav-dropdown-menu a:hover { background: var(--turf-soft); color: var(--turf-dark); }

.container { width: min(1240px, 92vw); }

.hero, .dashboard-heading {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 15%, rgba(255,255,255,.18), transparent 16rem),
        linear-gradient(135deg, var(--turf-deep), var(--turf-primary));
    box-shadow: 0 22px 55px rgba(6,59,74,.18);
}

.hero::after, .dashboard-heading::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border: 34px solid rgba(255,255,255,.07);
    border-radius: 50%;
    pointer-events: none;
}

.eyebrow { color: var(--turf-bright); }
.hero .eyebrow, .dashboard-heading .eyebrow { color: #8be6ef; }
.hero p, .dashboard-heading p { color: #d8f3f6; }

.button, button.button {
    border-radius: 12px;
    box-shadow: none;
    transition: transform .17s ease, box-shadow .17s ease, background .17s ease;
}

.button:hover, button.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(6,59,74,.16);
}

.button.primary, button.primary, .nav-install {
    background: linear-gradient(135deg, var(--turf-primary), var(--turf-primary-strong));
    color: #fff;
}

.button.secondary, button.secondary {
    border: 1px solid var(--turf-line);
    background: #fff;
    color: var(--turf-dark);
}

.button.secondary:hover { background: var(--turf-soft); }

a { color: var(--turf-primary-strong); }
.whatsapp { color: var(--turf-success); }

.panel-card, .metric-card, .action-card, .stats article,
.internal-product-card, .product-card, .table-card, .auth-card {
    border-color: rgba(22,143,167,.16);
    box-shadow: 0 14px 38px var(--turf-shadow);
}

.panel-card, .metric-card, .action-card, .stats article,
.internal-product-card, .product-card, .auth-card { background: rgba(255,255,255,.97); }

.action-card { color: var(--turf-deep); }
.action-card:hover { border-color: var(--turf-primary); transform: translateY(-2px); }
.metric-card a { color: var(--turf-primary-strong); }

.data-table th {
    background: #edf8fa;
    color: var(--turf-deep);
    font-size: .78rem;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.data-table tbody tr:hover td { background: #f5fbfc; }

.form-control, .field-group input, .field-group select, .field-group textarea,
.internal-search input, .internal-search select, .filters input, .filters select {
    border-color: #bfdae0;
    background: #fff;
    color: var(--turf-deep);
    transition: border-color .17s ease, box-shadow .17s ease;
}

.form-control:focus, .field-group input:focus, .field-group select:focus,
.field-group textarea:focus, .internal-search input:focus, .internal-search select:focus {
    outline: 0;
    border-color: var(--turf-primary);
    box-shadow: 0 0 0 4px rgba(22,143,167,.13);
}

.sku-badge { background: #e2f5f8; color: #086c81; }
.category-badge { background: #e9f8f2; color: #116d5d; }
.status { background: var(--turf-soft); color: var(--turf-dark); }
.status.success { background: #dcf6ec; color: #08644f; }
.nav-alert-badge { background: #dc4d42; }

.footer { border-top: 1px solid var(--turf-line); background: rgba(255,255,255,.7); }

/* Pantalla global de carga DOT */
.dot-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(244,250,251,.96);
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility .28s ease;
}

.dot-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.dot-loader-card {
    width: min(390px, 92vw);
    padding: 38px 30px 32px;
    border: 1px solid rgba(22,143,167,.18);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(6,59,74,.18);
    text-align: center;
}

.dot-loader-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    height: 70px;
    margin-bottom: 20px;
    color: var(--turf-deep);
    font-size: 2.7rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.dot-loader-mark::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: 7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--turf-bright);
    box-shadow: 0 0 0 7px rgba(53,183,201,.15);
    animation: dotPulse 1.25s ease-in-out infinite;
}

.dot-loader-track {
    width: 100%;
    height: 5px;
    margin: 4px 0 18px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--turf-soft);
}

.dot-loader-track::after {
    content: "";
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--turf-primary), var(--turf-bright));
    animation: dotTravel 1.15s ease-in-out infinite;
}

.dot-loader-message { margin: 0; color: var(--turf-dark); font-weight: 750; }
.dot-loader-submessage { margin: 7px 0 0; color: var(--muted); font-size: .9rem; }

@keyframes dotTravel {
    from { transform: translateX(-110%); }
    to { transform: translateX(250%); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(.78); opacity: .65; }
    50% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}

@media (max-width: 860px) {
    .topbar { min-height: 72px; padding: 7px 16px; }
    .brand-logo { width: 170px; height: 58px; }
    .menu-toggle { border-color: var(--turf-line); color: var(--turf-deep); background: var(--turf-soft); }
    .topbar nav a:hover { background: var(--turf-soft); }
}