/* Identidad DTF: solo encabezados y navegación. No altera estados ni stock. */
:root {
    --dtf-ink: #202431;
    --dtf-muted: #596174;
    --dtf-blue: #0645f5;
    --dtf-pink: #d00078;
    --dtf-purple: #9700cf;
    --dtf-red: #d71920;
    --dtf-yellow: #ffe600;
    --dtf-rainbow: linear-gradient(90deg, #f20a14 0% 20%, #0645f5 20% 40%, #ffe600 40% 60%, #bd00ef 60% 80%, #ff0090 80% 100%);
}

.dtf-app-logo {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 58px;
    object-fit: contain;
}
.app-header, .topbar {
    background-color: #fff;
    background-image: var(--dtf-rainbow);
    background-size: 100% 3px;
    background-position: bottom;
    background-repeat: no-repeat;
}
.app-header__identity { gap: 14px; }
.app-header__identity .dtf-app-logo { width: 30px; height: 49px; }
.app-header__title, .topbar h1 { color: var(--dtf-ink); }
.app-header__subtitle, .topbar p { color: var(--dtf-muted); }
.app-header__brand img { object-fit: contain; }

/* Fondo blanco tanto en el menú de OS como en los de los módulos. */
.sidebar, .app-sidebar, .tabs {
    background: #fff;
    color: var(--dtf-ink);
    border-color: #e2e5ed;
}
.sidebar { border-right: 1px solid #e2e5ed; }
.brand { border-bottom-color: #e2e5ed; }
.brand strong { color: var(--dtf-ink); }
.brand span, .sidebar-footer { color: var(--dtf-muted); }
.sidebar-footer { border-top-color: #e2e5ed; }

/* El amarillo puro se reserva para adornos; el texto conserva contraste. */
.nav-item, .nav-item-external, .nav-subitem, .module-nav__item, .tab, .module-card {
    --dtf-accent: var(--dtf-blue);
    --dtf-tint: #edf2ff;
}
[data-app-link="gestion"], [data-toggle-sections="gestion"],
.module-nav__item[data-view="pedidos"], .module-nav__item[data-view="productos"],
.tab[data-tab="productos"], .tab[data-tab="publicar"] {
    --dtf-accent: var(--dtf-pink); --dtf-tint: #fff0f8;
}
.nav-item-external[href*="/dtf/"], .module-card[href*="/dtf/"],
.module-nav__item[data-view="produccion"], .module-nav__item[data-view="tienda"],
.tab[data-tab="apariencia"], .tab[data-tab="talles"] {
    --dtf-accent: var(--dtf-purple); --dtf-tint: #f7edff;
}
.nav-item-external[href*="editartienda."], .module-card[href*="editartienda."],
.module-nav__item[data-view="mercado-libre"], .module-nav__item[data-view="envios"],
.tab[data-tab="codigos"] {
    --dtf-accent: #806200; --dtf-tint: #fff9cc;
}
.module-nav__item[data-view="clientes"], .module-nav__item[data-view="mantenimiento"],
.tab[data-tab="ajustes"] {
    --dtf-accent: var(--dtf-red); --dtf-tint: #fff0f1;
}
.nav-item, .nav-item-external, .nav-subitem, .module-nav__item, .tab {
    color: var(--dtf-ink);
    background: #fff;
}
.nav-icon, .module-nav__icon, .module-card-icon {
    color: var(--dtf-accent);
    background: var(--dtf-tint);
    border-radius: 7px;
}
.nav-icon { min-width: 28px; height: 28px; font-size: 16px; }
.nav-item:hover, .nav-item-external:hover, .nav-subitem:hover,
.module-nav__item:hover, .tab:hover {
    color: var(--dtf-accent);
    background: var(--dtf-tint);
}
.nav-item.active, .nav-subitem.active, .module-nav__item.is-active, .tab.is-active {
    color: var(--dtf-accent);
    background: var(--dtf-tint);
    box-shadow: inset 4px 0 0 var(--dtf-accent);
    font-weight: 750;
}
.tab.is-active { box-shadow: inset 0 -3px 0 var(--dtf-accent); }
.nav-subitem { font-size: 13px; }
.nav-subitem-indicator { background: var(--dtf-blue); }
.nav-item:focus-visible, .nav-item-external:focus-visible, .nav-subitem:focus-visible,
.module-nav__item:focus-visible, .tab:focus-visible, .module-card:focus-visible {
    outline: 3px solid var(--dtf-blue);
    outline-offset: 2px;
}

/* La bienvenida de OS acompaña los menús claros. */
.welcome {
    color: var(--dtf-ink);
    background: #fff;
    border: 1px solid #e2e5ed;
    border-top: 4px solid var(--dtf-blue);
}
.welcome .eyebrow { color: var(--dtf-blue); opacity: 1; }
.welcome p { color: var(--dtf-muted); opacity: 1; }
.welcome-mark { background: #fff9cc; color: var(--dtf-ink); border-color: #f0df64; }
.module-card { border-top: 3px solid var(--dtf-accent); }
.module-card:hover { border-color: var(--dtf-accent); }
.user-avatar { color: var(--dtf-blue); background: #edf2ff; }

@media (max-width: 480px) {
    .dtf-app-logo { width: 30px; height: 49px; }
    .app-header__identity { gap: 10px; }
}