/* ============================================================
   Stow Guide — Dashboard de carts pendientes de stow
   Resolución objetivo: 1920×1080, thin clients
   ============================================================ */

/* ── Reset fullscreen ── */
.sg-dashboard {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    cursor: none;
}

.sg-dashboard--cursor-visible {
    cursor: default;
}

/* ══════════ NAVBAR ══════════ */
.sg-navbar {
    height: 5vh;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 1rem;
    border-bottom: 2px solid var(--border-primary);
}

.sg-navbar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 12rem;
}

.sg-navbar__brand {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--white);
}
.sg-navbar__brand-stow { font-weight: 700; }

.sg-navbar__zona {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent);
    background: var(--bg-hover);
    padding: 0.2rem 0.8rem;
    border-radius: 0.3rem;
}

.sg-navbar__center { flex: 1; display: flex; justify-content: center; }

.sg-scan-input {
    width: clamp(200px, 30vw, 400px);
    padding: 0.4rem 1rem;
    font-size: 1.1rem;
    border: 2px solid var(--border-strong);
    border-radius: 0.4rem;
    background: var(--bg-primary);
    color: var(--white);
    outline: none;
    text-align: center;
    font-weight: 600;
}
.sg-scan-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0.5rem rgba(96, 165, 250, 0.3); /* audit:keep — custom opacity */
}
.sg-scan-input::placeholder { color: var(--text-muted); }

.sg-navbar__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 12rem;
}
.sg-navbar__timestamp {
    font-size: 0.85rem;
    color: var(--gray-300);
    font-weight: 600;
}
.sg-navbar__update-label {
    font-size: 0.55rem;
    color: var(--text-tertiary);
}

/* ══════════ LANDING — INSTRUCCIONES DE SCAN ══════════ */
.sg-main--landing {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.sg-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem 3rem;
    max-width: 60rem;
    width: 100%;
}

/* Instrucción principal */
.sg-landing__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.sg-landing__icon-svg {
    width: 5rem;
    height: 6rem;
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.39)); /* audit:keep — custom opacity */
}

.sg-landing__title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 300;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

.sg-landing__highlight {
    font-weight: 900;
    color: var(--accent);
}

/* Instrucción secundaria */
.sg-landing__secondary {
    text-align: center;
}

.sg-landing__subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin: 0 0 0.4rem 0;
}

.sg-landing__subtitle strong {
    color: var(--accent);
}

.sg-landing__note {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* Preview de resultado */
.sg-landing__preview {
    width: 100%;
    max-width: 40rem;
}

.sg-landing__preview-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
    text-align: center;
}

.sg-landing__preview-box {
    background: var(--bg-hover);
    border-left: 0.375rem solid var(--accent);
    border-radius: 0.8rem;
    padding: 1.5rem 2rem;
    text-align: center;
}

.sg-landing__preview-cart {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--white);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
    opacity: 0.85;
}

.sg-landing__preview-pasillos {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--accent);
    line-height: 1.2;
}

.sg-landing__preview-bays {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--white);
    margin-top: 0.3rem;
}

/* Cuando el preview muestra el último scan real: verde sutil + countdown
   visible. Sin gritos ni emojis — el cambio de color y el contador
   bastan para distinguirlo del ejemplo. */
.sg-landing__preview[data-mode="last-scan"] .sg-landing__preview-box {
    border-left: 0.375rem solid #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, var(--bg-hover) 100%);
}
.sg-landing__preview[data-mode="last-scan"] .sg-landing__preview-label {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.sg-landing__preview[data-mode="last-scan"] .sg-landing__preview-cart {
    color: #fff;
    opacity: 1;
}
.sg-landing__preview[data-mode="last-scan"] .sg-landing__preview-pasillos {
    color: #4ade80;
}

/* Explicación pasillo y bay */
.sg-landing__help {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.6rem;
    padding: 1.5rem 2rem;
    max-width: 55rem;
    width: 100%;
    overflow: visible;
}

.sg-landing__help-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

.sg-landing__help-term {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sg-landing__help-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sg-landing__help-svg--pasillo {
    width: 22rem;
    height: 10rem;
    margin-top: 0.6rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.375rem rgba(96, 165, 250, 0.2)); /* audit:keep — custom opacity */
}

.sg-landing__help-svg--bay {
    width: 22rem;
    height: 10rem;
    margin-top: 0.6rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.375rem rgba(96, 165, 250, 0.2)); /* audit:keep — custom opacity */
}

.sg-landing__help-divider {
    width: 0.1875rem;
    height: 15rem;
    background: var(--border-strong);
    flex-shrink: 0;
}

/* ══════════ OVERLAY DETALLE CART ══════════ */
.sg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sg-fadeIn 0.3s ease-out;
}

@keyframes sg-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sg-overlay__content {
    width: 100%;
    height: 100%;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    box-sizing: border-box;
}

/* Header del detalle */
.sg-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.sg-detail__cart-id {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--white);
}
.sg-detail__units {
    font-size: 1.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Zona principal — bloque grande, protagonista */
.sg-detail__zona-box {
    background: var(--bg-hover);
    border-radius: 1rem;
    padding: 2.5rem 3rem;
    border-left: 0.5rem solid var(--accent);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Pasillos — texto hero principal */
.sg-detail__zona-pasillos-hero {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 900;
    color: var(--accent);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

/* Rango de Bays — segundo hero */
.sg-detail__zona-bays-hero {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 800;
    color: var(--white);
    margin-top: 0.5rem;
    line-height: 1.2;
}

.sg-detail__zona-piso {
    color: var(--accent);
    font-weight: 700;
}

.sg-detail__zona-stats {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Aviso de zona diferente */
.sg-detail__aviso {
    background: #92400e; /* audit:keep — single-use aviso warning background */
    color: #fbbf24; /* audit:keep — single-use aviso warning text */
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
}

/* Team Lift warning */
.sg-detail__tl-warning {
    background: #7f1d1d; /* audit:keep — single-use team-lift warning background */
    color: #fca5a5; /* audit:keep — single-use team-lift warning text */
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
}

/* Distribución de tipos */
.sg-detail__distrib {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.sg-detail__distrib-item {
    background: var(--bg-card-alt);
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    color: var(--text-on-card);
}
.sg-detail__distrib-item strong {
    color: var(--white);
}

/* Tiempo de espera */
.sg-detail__wait {
    font-size: 1.3rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Countdown para volver a tabla */
.sg-detail__countdown {
    font-size: 1rem;
    color: var(--text-muted);
    text-align: center;
}

/* Colores de borde por tipo dominante */
.sg-detail__zona-box--library-deep { border-left-color: #3b82f6; } /* audit:keep — shelf type color */
.sg-detail__zona-box--half-vertical { border-left-color: var(--success); }
.sg-detail__zona-box--barrel { border-left-color: var(--orange-500); }
.sg-detail__zona-box--batbin { border-left-color: var(--purple-500); }
.sg-detail__zona-box--floor-pallet { border-left-color: var(--danger); }
.sg-detail__zona-box--pallet-single { border-left-color: var(--warning); }

/* Scrollbar sutil */
.sg-main::-webkit-scrollbar { width: 0.375rem; }
.sg-main::-webkit-scrollbar-track { background: transparent; }
.sg-main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0.1875rem; }

/* ══════════ INDEX — Selección de zona ══════════ */
.sg-index-body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
}

.sg-index-nav {
    height: 5vh;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-primary);
    flex-shrink: 0;
}

.sg-index-nav__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
}
.sg-index-nav__logo:hover { color: var(--accent); }

.sg-index-nav__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.3rem;
}

.sg-index-nav__title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--white);
}
.sg-index-nav__title-stow { font-weight: 700; }

.sg-index-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 2rem;
}

.sg-index-main__heading {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
}

.sg-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 60rem;
}

.sg-zone-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border: 2px solid var(--border-primary);
    border-radius: 0.6rem;
    padding: 1.2rem 1rem;
    text-decoration: none;
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.sg-zone-card:hover {
    background: var(--border-primary);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.sg-zone-card__name {
    color: var(--accent);
    letter-spacing: 0.03em;
}

/* ══════════ CART NO ENCONTRADO ══════════ */
.sg-notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
}
.sg-notfound__icon {
    font-size: 6rem;
    color: var(--danger);
    line-height: 1;
}
.sg-notfound__cart {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--white);
}
.sg-notfound__msg {
    font-size: 1.8rem;
    color: var(--danger);
    font-weight: 700;
}

/* ══════════ ASIN DETAIL ══════════ */
.sg-detail__zona-box--asin {
    border-left-color: var(--success);
}