/* =========================================================
SisPOS Multisistema · Temas Día / Noche
========================================================= */
/* --- TEMA OSCURO (default) --- */
:root, [data-theme="dark"] {
color-scheme: dark;
/* fondos */
--bg-app: #0b1020;
--bg-sidebar: #0f1530;
--bg-surface: #141b3a;
--bg-elevated: #1a2348;
--bg-input: #131a36;
--border: #232c54;
--border-soft: #1c2347;
/* texto */
--text: #e6e9f5;
--text-muted: #9aa3c7;
--text-dim: #6b7399;
/* acentos */
--primary: #6366f1;
--primary-2: #8b5cf6;
--primary-soft: rgba(99, 102, 241, 0.18);
--pink: #ec4899;
--gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
--gradient-side: linear-gradient(135deg, #6366f1, #8b5cf6);
/* estado */
--success: #10b981;
--info: #06b6d4;
--warning: #f59e0b;
--danger: #ef4444;
--slate: #64748b;
/* paleta soft para iconos en cards */
--c-purple-bg: rgba(139, 92, 246, 0.18);
--c-purple: #a78bfa;
--c-teal-bg: rgba(20, 184, 166, 0.18);
--c-teal: #2dd4bf;
--c-peach-bg: rgba(249, 115, 22, 0.18);
--c-peach: #fb923c;
--c-red-bg: rgba(244, 63, 94, 0.18);
--c-red: #fb7185;
--c-yellow-bg: rgba(234, 179, 8, 0.18);
--c-yellow: #fde047;
--c-blue-bg: rgba(59, 130, 246, 0.18);
--c-blue: #60a5fa;
--c-green-bg: rgba(16, 185, 129, 0.18);
--c-green: #34d399;
/* layout */
--sidebar-w: 260px;
--sidebar-w-mini: 76px;
--topbar-h: 84px;
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 8px;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
--transition: 200ms cubic-bezier(.4,0,.2,1);
}
/* --- TEMA CLARO --- */
[data-theme="light"] {
color-scheme: light;
--bg-app: #f1f4fb;
--bg-sidebar: #ffffff;
--bg-surface: #ffffff;
--bg-elevated: #f3f5fc;
--bg-input: #f8fafc;
--border: #d8def0;
--border-soft: #e6eaf5;
--text: #1e2240;
--text-muted: #5b6587;
--text-dim: #8891b3;
--primary-soft: rgba(99, 102, 241, 0.10);
--c-purple-bg: rgba(139, 92, 246, 0.13);
--c-purple: #7c3aed;
--c-teal-bg: rgba(20, 184, 166, 0.14);
--c-teal: #0d9488;
--c-peach-bg: rgba(249, 115, 22, 0.14);
--c-peach: #ea580c;
--c-red-bg: rgba(244, 63, 94, 0.14);
--c-red: #e11d48;
--c-yellow-bg: rgba(234, 179, 8, 0.18);
--c-yellow: #ca8a04;
--c-blue-bg: rgba(59, 130, 246, 0.13);
--c-blue: #2563eb;
--c-green-bg: rgba(16, 185, 129, 0.14);
--c-green: #059669;
--shadow: 0 4px 20px rgba(28, 36, 70, 0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Evita el parpadeo de bordes/colores al aplicar el tema en cada recarga:
mientras tenga .no-transition, ningún elemento anima sus cambios. */
html.no-transition, html.no-transition *,
html.no-transition *::before, html.no-transition *::after {
transition: none !important;
animation: none !important;
}
html, body { height: 100%; }
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg-app);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
/* =========================================================
SIDEBAR
========================================================= */
.sidebar {
width: var(--sidebar-w);
background: var(--bg-sidebar);
border-right: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
transition: width var(--transition);
z-index: 30;
}
.sidebar-header {
height: var(--topbar-h);
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
width: 40px; height: 40px;
border-radius: 12px;
display: grid; place-items: center;
background: var(--gradient-side);
color: white;
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.btn-collapse {
width: 32px; height: 32px;
border-radius: 8px;
display: grid; place-items: center;
color: var(--text-muted);
transition: background var(--transition), color var(--transition);
}
.btn-collapse:hover { background: var(--bg-elevated); color: var(--text); }
/* ---- tarjeta usuario ---- */
.sidebar-user {
margin: 16px 14px;
padding: 12px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 12px;
transition: background var(--transition);
}
.sidebar-user:hover { background: #202a55; }
.user-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--gradient-side);
display: grid; place-items: center;
color: white;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.user-name { font-weight: 600; font-size: 13.5px; }
.user-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* ---- navegación ---- */
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-weight: 500;
font-size: 13.5px;
transition: background var(--transition), color var(--transition);
position: relative;
white-space: nowrap;
}
.nav-link:hover { background: var(--bg-elevated); color: var(--text); }
.nav-link.active {
background: var(--gradient-side);
color: #fff;
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.nav-link.active .menu-icon { color: #fff; }
.nav-link .chevron {
margin-left: auto;
transition: transform var(--transition);
color: var(--text-dim);
}
.nav-link.has-sub.expanded .chevron { transform: rotate(90deg); }
.menu-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }
.nav-link:hover .menu-icon { color: var(--text); }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* submenu */
.nav-sub {
list-style: none;
margin: 2px 0 4px 36px;
padding-left: 10px;
border-left: 1px solid var(--border);
display: none;
flex-direction: column;
gap: 2px;
}
.nav-link.expanded + .nav-sub { display: flex; }
.nav-sub .nav-link { padding: 8px 12px; font-size: 13px; }
/* submenu activo: fondo al 60%, texto al 100% */
.nav-sub .nav-link.active {
background: linear-gradient(135deg, rgba(99, 102, 241, .6), rgba(139, 92, 246, .6));
box-shadow: 0 4px 12px rgba(99, 102, 241, .2);
color: #ffffff;
font-weight: 600;
}
.nav-sub .nav-link.active .nav-label,
.nav-sub .nav-link.active .menu-icon { opacity: 1; color: #ffffff; }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-soft); }
.nav-link.logout:hover { background: rgba(239,68,68,.14); color: var(--danger); }
.nav-link.logout:hover .menu-icon { color: var(--danger); }
/* ---- colapsado ---- */
.sidebar.collapsed { width: var(--sidebar-w-mini); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .chevron,
.sidebar.collapsed .nav-sub { display: none; }
.sidebar.collapsed .sidebar-header { padding: 0 18px; justify-content: center; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 10px; margin: 16px 10px; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 12px; }
.sidebar.collapsed .nav-link[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-elevated);
color: var(--text);
padding: 7px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid var(--border);
box-shadow: var(--shadow);
z-index: 100;
}
.sidebar-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.6);
z-index: 20;
}
/* =========================================================
MAIN
========================================================= */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
height: var(--topbar-h);
background: var(--bg-sidebar);
border-bottom: 1px solid var(--border-soft);
padding: 0 28px;
display: flex;
align-items: center;
gap: 16px;
position: sticky;
top: 0;
z-index: 10;
}
.topbar-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tb-title {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
.tb-crumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-muted);
}
.tb-crumb-item { color: var(--text-muted); }
.tb-crumb-item.current { color: var(--c-purple); font-weight: 500; }
.tb-crumb-item.current:hover { text-decoration: underline; }
.tb-crumb-sep { opacity: .55; }
.topbar-center { margin: 0 auto; }
.date-pill {
padding: 8px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 999px;
font-size: 13px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-icon {
width: 40px; height: 40px;
border-radius: 10px;
display: grid; place-items: center;
color: var(--text-muted);
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
transition: all var(--transition);
position: relative;
}
.btn-icon:hover { background: var(--bg-surface); color: var(--text); border-color: var(--border); }
.btn-icon .badge {
position: absolute;
top: -4px; right: -4px;
min-width: 18px; height: 18px;
padding: 0 5px;
background: var(--danger);
color: #fff;
font-size: 10.5px;
font-weight: 700;
border-radius: 999px;
display: grid; place-items: center;
border: 2px solid var(--bg-sidebar);
}
.content { padding: 24px 28px 40px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
/* ---- filtros de período ---- */
.period-bar {
display: flex;
align-items: center;
gap: 12px;
}
.period-tabs {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border-soft);
padding: 4px;
border-radius: 12px;
gap: 2px;
}
.period-tabs button {
padding: 7px 18px;
border-radius: 8px;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
transition: all var(--transition);
}
.period-tabs button:hover { color: var(--text); }
.period-tabs button.active {
background: var(--gradient-side);
color: #fff;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.period-meta { margin-left: auto; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
/* ---- banner bienvenida ---- */
.welcome {
background: var(--gradient);
border-radius: 18px;
padding: 26px 28px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3);
position: relative;
overflow: hidden;
}
.welcome::after {
content: "";
position: absolute;
right: -40px; top: -40px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
border-radius: 50%;
}
.welcome-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.welcome-text h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.welcome-text p { color: rgba(255,255,255,.88); font-size: 14px; }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.btn {
padding: 10px 18px;
border-radius: 10px;
font-weight: 600;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all var(--transition);
border: 1px solid transparent;
cursor: pointer;
}
.btn-light {
background: rgba(255,255,255,.95);
color: #4c1d95;
}
.btn-light:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost {
background: rgba(255,255,255,.15);
color: #fff;
border-color: rgba(255,255,255,.25);
backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.25); }
/* ---- stat cards ---- */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
transition: all var(--transition);
cursor: pointer;
}
.stat-card:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card.active {
background: var(--gradient-side);
border-color: transparent;
box-shadow: 0 10px 24px rgba(99, 102, 241, 0.4);
}
.stat-card.active .stat-label,
.stat-card.active .stat-sub { color: rgba(255,255,255,.85); }
.stat-card.active .stat-value { color: #fff; }
.stat-card.active .stat-icon { background: rgba(255,255,255,.22); color: #fff; }
.stat-icon {
width: 52px; height: 52px;
border-radius: 14px;
display: grid; place-items: center;
flex-shrink: 0;
}
.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.purple { background: var(--c-purple-bg); color: var(--c-purple); }
.stat-icon.teal { background: var(--c-teal-bg); color: var(--c-teal); }
.stat-icon.peach { background: var(--c-peach-bg); color: var(--c-peach); }
.stat-icon.red { background: var(--c-red-bg); color: var(--c-red); }
.stat-icon.yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }
.stat-body { min-width: 0; }
.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
.stat-value { font-size: 24px; font-weight: 700; line-height: 1; }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
/* ---- panels ---- */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
.panel {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 20px 22px;
}
.panel-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.panel-head .ph-icon {
width: 34px; height: 34px;
border-radius: 10px;
background: var(--primary-soft);
color: var(--c-purple);
display: grid; place-items: center;
}
.panel-title { font-weight: 600; font-size: 15px; }
.panel-meta { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.panel-meta strong { color: var(--c-purple); }
.panel-link { margin-left: auto; font-size: 13px; color: var(--c-purple); font-weight: 500; }
.panel-link:hover { text-decoration: underline; }
/* mini-tabs dentro de panel */
.mini-tabs {
display: inline-flex;
background: var(--bg-elevated);
padding: 3px;
border-radius: 8px;
gap: 2px;
margin-left: auto;
}
.mini-tabs button {
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.mini-tabs button.active { background: var(--gradient-side); color: #fff; }
/* ---- chart placeholder (barras) ---- */
.chart-bars {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
height: 220px;
align-items: end;
padding: 0 4px;
}
.chart-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
height: 100%;
}
.chart-bar {
width: 100%;
max-width: 38px;
border-radius: 6px 6px 0 0;
background: var(--bg-elevated);
flex: 1;
position: relative;
transition: opacity var(--transition);
}
.chart-bar.has-value {
background: linear-gradient(180deg, var(--c-purple) 0%, var(--primary) 100%);
box-shadow: 0 -4px 14px rgba(139, 92, 246, .35);
}
.chart-bar.today {
background: linear-gradient(180deg, var(--pink) 0%, #be185d 100%);
box-shadow: 0 -4px 14px rgba(236, 72, 153, .4);
}
.chart-label {
font-size: 11px;
color: var(--text-muted);
text-align: center;
line-height: 1.2;
}
.chart-label strong { display: block; font-size: 11px; color: var(--text); font-weight: 600; }
/* ---- estado de órdenes (progress bars) ---- */
.status-list { display: flex; flex-direction: column; gap: 14px; }
.status-row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 14px;
}
.status-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.status-name .dot {
width: 18px; height: 18px;
border-radius: 50%;
display: grid; place-items: center;
color: #fff;
}
.dot svg { width: 11px; height: 11px; }
.status-bar {
height: 22px;
background: var(--bg-elevated);
border-radius: 999px;
position: relative;
overflow: hidden;
}
.status-fill {
height: 100%;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
color: #fff;
font-size: 12px;
font-weight: 700;
}
.fill-info { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.fill-success { background: linear-gradient(90deg, #047857, #10b981); }
.fill-slate { background: linear-gradient(90deg, #475569, #64748b); }
.fill-danger { background: linear-gradient(90deg, #b91c1c, #ef4444); }
/* ---- lista de órdenes ---- */
.order-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--border-soft);
}
.order-row:last-child { border-bottom: none; }
.order-info .order-code { font-weight: 600; font-size: 14px; }
.order-info .order-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.order-right { text-align: right; }
.order-amount { font-weight: 700; font-size: 14px; }
.order-amount.positive { color: var(--success); }
.pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: capitalize;
}
.pill-success { background: rgba(16,185,129,.18); color: var(--success); }
.pill-info { background: rgba(6,182,212,.18); color: var(--info); }
.pill-warning { background: rgba(245,158,11,.18); color: var(--warning); }
.pill-danger { background: rgba(239,68,68,.18); color: var(--danger); }
.pill-slate { background: rgba(100,116,139,.2); color: #94a3b8; }
/* =========================================================
TOPBAR USER CHIP (dropdown)
========================================================= */
.topbar-user { position: relative; }
.tu-trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 999px;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
min-height: 40px;
}
.tu-trigger:hover { background: var(--bg-surface); border-color: var(--border); }
.tu-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--gradient-side);
display: grid; place-items: center;
color: #fff;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.tu-avatar.lg { width: 42px; height: 42px; font-size: 16px; }
.tu-info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.tu-name { font-size: 13px; font-weight: 600; color: var(--text); }
.tu-role { font-size: 11px; color: var(--text-muted); }
.tu-chev { color: var(--text-muted); transition: transform var(--transition); }
.topbar-user.open .tu-chev { transform: rotate(180deg); }
.tu-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
z-index: 50;
}
[data-theme="light"] .tu-menu { box-shadow: 0 12px 32px rgba(28, 36, 70, .12); }
.topbar-user.open .tu-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tu-menu-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px 12px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 6px;
}
.tu-menu-header .tu-name { font-size: 14px; }
.tu-menu-header .tu-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tu-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background var(--transition), color var(--transition);
}
.tu-menu-item svg { color: var(--text-muted); }
.tu-menu-item:hover { background: var(--bg-elevated); }
.tu-menu-item.danger { color: var(--danger); }
.tu-menu-item.danger svg { color: var(--danger); }
.tu-menu-item.danger:hover { background: rgba(239, 68, 68, .12); }
.tu-menu-sep { height: 1px; background: var(--border-soft); margin: 6px 0; }
/* En móvil ocultar info textual del trigger (solo avatar) */
@media (max-width: 720px) {
.tu-trigger .tu-info,
.tu-trigger .tu-chev { display: none; }
.tu-trigger { padding: 4px; }
}
/* =========================================================
PAGE HEADER + EMPTY STATE (módulos)
========================================================= */
.page-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 4px;
}
.page-head .ph-sub-only { font-size: 13.5px; color: var(--text-muted); }
.page-head .ph-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--c-purple); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--text); font-weight: 500; }
.btn-primary {
padding: 10px 18px;
border-radius: 10px;
background: var(--gradient-side);
color: #fff;
font-weight: 600;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.45); }
.btn-outline {
padding: 10px 18px;
border-radius: 10px;
background: transparent;
color: var(--text);
font-weight: 600;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
cursor: pointer;
transition: background var(--transition);
}
.btn-outline:hover { background: var(--bg-elevated); }
.btn-outline.danger { color: var(--danger); border-color: rgba(239,68,68,.35); }
.btn-outline.danger:hover { background: rgba(239,68,68,.10); }
.integration-card.connected { border-color: rgba(16,185,129,.35); }
/* Botones de toggle en tarjetas de integración */
.btn-outline.conn-off { color: var(--warning); border-color: rgba(245,158,11,.35); }
.btn-outline.conn-off:hover { background: rgba(245,158,11,.10); }
.btn-outline.conn-on { color: var(--success); border-color: rgba(16,185,129,.35); }
.btn-outline.conn-on:hover { background: rgba(16,185,129,.10); }
.ic-sub-meta { font-size: 11.5px; color: var(--text-dim); }
.empty-state {
background: var(--bg-surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 56px 24px;
text-align: center;
}
.empty-state .es-icon {
width: 72px; height: 72px;
margin: 0 auto 18px;
border-radius: 20px;
display: grid; place-items: center;
background: var(--primary-soft);
color: var(--c-purple);
}
.empty-state .es-icon svg { width: 36px; height: 36px; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); font-size: 13.5px; max-width: 480px; margin: 0 auto 18px; }
/* =========================================================
THEME TOGGLE
========================================================= */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: transform var(--transition), opacity var(--transition); position: absolute; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); color: var(--c-yellow); }
[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); color: var(--c-purple); }
/* ajustes específicos del tema claro */
[data-theme="light"] body { background: var(--bg-app); }
[data-theme="light"] .sidebar { box-shadow: 0 0 0 1px var(--border-soft); }
[data-theme="light"] .topbar { box-shadow: 0 1px 0 var(--border-soft); }
[data-theme="light"] .stat-card.active .stat-label,
[data-theme="light"] .stat-card.active .stat-sub { color: rgba(255,255,255,.9); }
[data-theme="light"] .btn-light { color: #4338ca; }
[data-theme="light"] .chart-bar { background: #e7eaf5; }
[data-theme="light"] .status-bar { background: #eef0f8; }
[data-theme="light"] .date-pill,
[data-theme="light"] .btn-icon { background: #f8fafc; }
[data-theme="light"] .btn-icon:hover { background: #eef1fa; }
[data-theme="light"] .sidebar-user { background: #f8fafc; }
[data-theme="light"] .sidebar-user:hover { background: #eef1fa; }
/* =========================================================
PAGINACIÓN
========================================================= */
.pager {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-top: 1px solid var(--border-soft);
background: var(--bg-elevated);
flex-wrap: wrap;
}
.pager-info {
font-size: 12.5px;
color: var(--text-muted);
}
.pager-controls {
display: flex;
gap: 4px;
align-items: center;
flex-wrap: wrap;
}
.pg-btn {
min-width: 32px;
height: 32px;
padding: 0 10px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--text);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pg-btn:hover:not(:disabled):not(.active) {
background: var(--bg-elevated);
border-color: var(--c-purple);
color: var(--c-purple);
}
.pg-btn.active {
background: var(--gradient-side);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(99, 102, 241, .35);
}
.pg-btn:disabled {
opacity: .35;
cursor: not-allowed;
}
.pg-dots {
color: var(--text-dim);
padding: 0 4px;
font-weight: 700;
user-select: none;
}
@media (max-width: 640px) {
.pager { flex-direction: column; gap: 10px; }
.pager-info { text-align: center; }
}
/* =========================================================
PRODUCT PICKER (lista de productos en modales)
========================================================= */
.prod-list {
--pl-row-h: 66px; /* alto de cada fila (incluye padding) */
--pl-gap: 8px; /* gap entre filas */
--pl-visible: 4; /* nº de items visibles antes de scrollear */
display: flex;
flex-direction: column;
gap: var(--pl-gap);
/* exactamente 4 filas visibles + un 'peek' de la 5ª para indicar scroll */
max-height: calc(var(--pl-row-h) * var(--pl-visible) + var(--pl-gap) * (var(--pl-visible) - 1) + 18px);
overflow-y: auto;
padding-right: 4px;
}
.prod-list::-webkit-scrollbar { width: 6px; }
.prod-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.prod-row {
display: grid;
grid-template-columns: 42px 1fr auto auto;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 10px;
transition: all var(--transition);
min-height: 66px;
box-sizing: border-box;
}
.prod-row::before {
content: "";
width: 42px; height: 42px;
border-radius: 10px;
background: var(--primary-soft);
background-image: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10));
grid-column: 1;
align-self: center;
background-repeat: no-repeat;
background-position: center;
background-size: 22px;
/* icono caja por defecto */
background-image:
linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10)),
url("data:image/svg+xml;utf8,");
background-blend-mode: normal;
}
.prod-row:hover {
border-color: var(--c-purple);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(99, 102, 241, .15);
}
.prod-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.prod-name {
font-weight: 600;
font-size: 13.5px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-meta {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.prod-meta code {
background: var(--bg-surface);
color: var(--c-purple);
padding: 1px 6px;
border-radius: 4px;
font-size: 10.5px;
}
.prod-meta b { color: var(--text); }
.prod-price {
font-weight: 700;
color: var(--c-purple);
font-size: 14.5px;
white-space: nowrap;
text-align: right;
}
.prod-row .btn-outline {
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
}
.prod-empty {
padding: 32px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
background: var(--bg-elevated);
border: 1px dashed var(--border);
border-radius: 10px;
}
/* Responsive: en móvil colapsa a 2 filas */
@media (max-width: 540px) {
.prod-row { grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 8px 12px; }
.prod-row::before { width: 38px; height: 38px; grid-row: span 2; }
.prod-price { grid-column: 2; }
.prod-row .btn-outline { grid-column: 2; justify-self: start; }
}
/* tabs reusables (comp-tabs/comp-tab) — refresco visual */
.comp-tabs {
display: flex;
gap: 4px;
padding: 12px 16px 0;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-soft);
}
.comp-tab {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
color: var(--text-muted);
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: 8px 8px 0 0;
position: relative;
transition: color var(--transition), background var(--transition);
}
.comp-tab:hover { color: var(--text); background: var(--bg-surface); }
.comp-tab.active {
color: var(--c-purple);
background: var(--bg-surface);
}
.comp-tab.active::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: -1px;
height: 2px;
background: var(--c-purple);
border-radius: 2px 2px 0 0;
}
.comp-pane { display: none; }
.comp-pane.active { display: block; }
/* =========================================================
CELL EDITABLE (Precio $ / Precio S/ en tabla)
========================================================= */
.cell-money {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--bg-elevated);
border: 1px solid transparent;
border-radius: 8px;
transition: all var(--transition);
min-width: 110px;
cursor: text;
}
.cell-money:hover { border-color: var(--border); }
.cell-money:focus-within {
border-color: var(--primary);
background: var(--bg-surface);
box-shadow: 0 0 0 2px var(--primary-soft);
}
.cell-money .cm-sym {
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
}
.cell-money.usd .cm-sym { color: var(--c-teal); }
.cell-money.pen .cm-sym { color: var(--c-purple); }
.cell-money .cell-input {
width: 100%;
border: none;
background: transparent;
outline: none;
color: var(--text);
font: inherit;
font-size: 13px;
font-weight: 700;
text-align: right;
padding: 2px 0;
-moz-appearance: textfield;
}
.cell-money.usd .cell-input { color: var(--c-teal); }
.cell-money.pen .cell-input { color: var(--c-purple); }
.cell-money .cell-input::-webkit-outer-spin-button,
.cell-money .cell-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* =========================================================
COMP TOOLBAR (búsqueda + filtros)
========================================================= */
.comp-toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 12px 14px;
margin-top: 16px;
}
/* Toolbar embebido dentro del tc-bar combo */
.tc-bar-combo {
display: flex;
flex-direction: column;
padding: 0;
}
.tc-bar-combo .tc-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 14px 18px;
align-items: center;
}
/* Twin: 2 TC boxes lado a lado */
.tc-twin {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 880px) { .tc-twin { grid-template-columns: 1fr; } }
.tc-bar-combo .tc-box {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 12px;
}
.tc-bar-combo .tc-box.tc-readonly { opacity: .92; }
.tc-bar-combo .tc-box.tc-editable {
border-color: rgba(99, 102, 241, .35);
background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04));
box-shadow: 0 0 0 1px rgba(99,102,241,.08);
}
.tc-bar-combo .tc-box .tc-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-muted);
}
.tc-bar-combo .tc-input { padding: 4px 8px; height: auto; }
.tc-bar-combo .tc-input input { font-size: 16px; }
/* Input bloqueado del TC referencia */
.tc-input.locked {
background: var(--bg-input);
cursor: not-allowed;
border: 1px solid var(--border);
border-radius: 8px;
}
.tc-input.locked input {
background: transparent;
cursor: not-allowed;
color: var(--text-muted);
pointer-events: none;
}
/* Badges en cada TC */
.tc-badge {
margin-left: auto;
font-size: 9.5px;
padding: 2px 7px;
border-radius: 999px;
font-weight: 700;
letter-spacing: .6px;
}
.tc-badge.ref { background: rgba(100,116,139,.22); color: #94a3b8; }
.tc-badge.edit { background: var(--primary-soft); color: var(--c-purple); }
/* Mini-btn para "usar referencia" */
.tc-input.locked .mini-btn {
width: 24px; height: 24px;
border-radius: 6px;
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--c-purple);
cursor: pointer;
display: grid; place-items: center;
transition: all var(--transition);
margin-left: 4px;
}
.tc-input.locked .mini-btn:hover {
background: var(--c-purple);
color: #fff;
border-color: var(--c-purple);
transform: translateX(2px);
}
.tc-bar-combo .tc-divider {
height: 1px;
background: var(--border-soft);
margin: 0;
}
.comp-toolbar.inside-tc {
background: transparent;
border: none;
border-radius: 0;
margin-top: 0;
padding: 12px 18px;
}
@media (max-width: 760px) {
.tc-bar-combo .tc-row { grid-template-columns: 1fr; }
}
.comp-toolbar .ct-search { flex: 1; min-width: 220px; }
.comp-toolbar .ct-search .field-input { margin: 0; }
.comp-toolbar .ct-filter .field-input { margin: 0; }
.comp-toolbar .field-input {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
height: 40px;
padding: 0 12px;
}
.comp-toolbar .field-input:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.comp-toolbar .ct-result {
margin-left: auto;
font-size: 12.5px;
color: var(--text-muted);
font-weight: 500;
padding: 0 6px;
}
@media (max-width: 720px) {
.comp-toolbar .ct-result { margin-left: 0; order: 99; width: 100%; text-align: center; }
}
/* =========================================================
COMPONENTES PC (catálogo USD ↔ S/)
========================================================= */
.tc-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
margin-bottom: 16px;
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 16px 18px;
}
@media (max-width: 760px) { .tc-bar { grid-template-columns: 1fr; } }
.tc-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tc-label {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
}
.tc-label svg { color: var(--c-teal); }
.tc-input {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 14px;
}
.tc-prefix { font-size: 12px; color: var(--text-dim); }
.tc-currency{ font-size: 13px; color: var(--text-muted); font-weight: 700; }
.tc-input input {
background: transparent;
border: none;
outline: none;
color: var(--text);
font: inherit;
font-size: 18px;
font-weight: 700;
width: 90px;
text-align: right;
}
.tc-meta { font-size: 11.5px; color: var(--text-dim); }
.tc-stats {
display: flex;
gap: 14px;
align-items: stretch;
}
.tc-stat {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 16px;
background: var(--bg-elevated);
border-radius: 10px;
border: 1px solid var(--border-soft);
min-width: 120px;
}
.tc-stat.highlight {
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10));
border-color: rgba(139,92,246,.3);
}
.tcs-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.tcs-value { font-size: 17px; font-weight: 700; margin-top: 3px; }
.tc-stat.highlight .tcs-value { color: var(--c-purple); }
/* tabs de categorías */
.cat-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.cat-tab {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
color: var(--text-muted);
padding: 7px 14px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.cat-tab:hover { color: var(--text); border-color: var(--border); }
.cat-tab.active {
background: var(--gradient-side);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
/* tabla componentes */
.comp-table { width: 100%; }
.comp-table thead { background: var(--bg-elevated); }
.comp-table th { padding: 12px 14px; }
.comp-table td { padding: 10px 14px; }
.comp-table tbody tr:hover { background: var(--bg-elevated); }
.cat-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
}
.cat-cpu { background: rgba(99,102,241,.18); color: var(--c-purple); }
.cat-ram { background: rgba(20,184,166,.18); color: var(--c-teal); }
.cat-gpu { background: rgba(249,115,22,.18); color: var(--c-peach); }
.cat-ssd { background: rgba(234,179,8,.18); color: var(--c-yellow); }
.cat-mb { background: rgba(244,63,94,.18); color: var(--c-red); }
.cat-psu { background: rgba(16,185,129,.18); color: var(--success); }
.cat-case { background: rgba(100,116,139,.2); color: #94a3b8; }
.cat-other{ background: rgba(99,102,241,.10); color: var(--text-muted); }
/* Columna ID — oculta para todos, visible solo si body.is-support */
.col-id { display: none; }
body.is-support .col-id { display: table-cell; }
.comp-empty {
text-align: center;
padding: 56px 24px;
}
.comp-empty .es-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--primary-soft); color: var(--c-purple); display: grid; place-items: center; }
.comp-empty .es-icon svg { width: 30px; height: 30px; }
.comp-empty h3 { font-size: 17px; margin-bottom: 6px; }
.comp-empty p { color: var(--text-muted); font-size: 13px; max-width: 420px; margin: 0 auto 16px; }
.hint-inline { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.hint-row {
margin-top: 4px;
padding: 10px 12px;
background: var(--bg-elevated);
border-radius: 8px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
/* =========================================================
COTIZACIONES (multi-pestañas)
========================================================= */
.quote-tabs-wrap {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 12px 12px 0 0;
padding: 6px 8px;
border-bottom: none;
overflow-x: auto;
scrollbar-width: thin;
}
.quote-tabs { display: flex; gap: 4px; }
.quote-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
transition: all var(--transition);
white-space: nowrap;
}
.quote-tab:hover { background: var(--bg-elevated); color: var(--text); }
.quote-tab.active {
background: var(--gradient-side);
color: #fff;
box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.qt-close {
background: transparent;
border: none;
color: inherit;
opacity: .65;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 2px;
border-radius: 4px;
}
.qt-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
.tab-add {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: transparent;
border: 1px dashed var(--border);
border-radius: 8px;
color: var(--text-muted);
font-size: 12.5px;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.tab-add:hover { border-color: var(--c-purple); color: var(--c-purple); background: var(--primary-soft); }
.quote-panel {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 0 0 12px 12px;
padding: 22px 22px 26px;
}
/* cabecera */
.quote-head {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-soft);
}
.qh-field { display: flex; flex-direction: column; gap: 5px; }
.qh-field label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.qh-field input,
.qh-field select {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
color: var(--text);
font: inherit;
font-size: 13.5px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.qh-field input:focus,
.qh-field select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
/* tabla de ítems */
.quote-items { margin-bottom: 22px; }
.quote-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.quote-table th {
text-align: left;
padding: 10px 12px;
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 1px solid var(--border-soft);
}
.quote-table td {
padding: 6px 6px;
border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
}
.quote-table td.row-num { text-align: center; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.quote-table td input {
width: 100%;
background: var(--bg-input);
border: 1px solid transparent;
border-radius: 6px;
padding: 8px 10px;
color: var(--text);
font: inherit;
font-size: 13px;
outline: none;
transition: border-color var(--transition), background var(--transition);
}
.quote-table td input:focus {
border-color: var(--primary);
background: var(--bg-elevated);
}
.cell-subtotal {
font-weight: 700;
color: var(--c-purple);
text-align: right;
padding-right: 12px !important;
font-size: 13.5px;
}
.row-del {
background: transparent;
border: 1px solid transparent;
color: var(--text-dim);
font-size: 18px;
line-height: 1;
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
transition: all var(--transition);
}
.row-del:hover { background: rgba(239,68,68,.14); color: var(--danger); border-color: rgba(239,68,68,.3); }
.btn-add-item {
margin-top: 8px;
font-size: 12.5px;
padding: 8px 14px;
}
/* pie con notas + totales */
.quote-foot {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
}
@media (max-width: 760px) { .quote-foot { grid-template-columns: 1fr; } }
.qf-notes { display: flex; flex-direction: column; gap: 6px; }
.qf-notes label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.qf-notes textarea {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font: inherit;
font-size: 13px;
resize: vertical;
min-height: 90px;
outline: none;
}
.qf-notes textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.qf-totals {
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.qt-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text-muted);
}
.qt-row.sub { font-size: 12.5px; color: var(--text-dim); }
.qt-row.total {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.qt-row.total span:last-child { color: var(--c-purple); }
.qt-row input {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 8px;
color: var(--text);
font: inherit;
font-size: 12.5px;
text-align: right;
outline: none;
}
.qt-row input:focus { border-color: var(--primary); }
.check.small { font-size: 12px; color: var(--text-muted); }
/* =========================================================
NOTIFICACIONES (App.notify)
========================================================= */
.notify-stack {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: 380px;
width: calc(100% - 40px);
}
.notification {
pointer-events: auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateX(20px) scale(.95);
transition: opacity .25s, transform .25s;
}
[data-theme="light"] .notification { box-shadow: 0 8px 24px rgba(28, 36, 70, .12); }
.notification.show { opacity: 1; transform: translateX(0) scale(1); }
.notification.leave { opacity: 0; transform: translateX(20px) scale(.95); }
.notif-icon {
width: 32px; height: 32px;
border-radius: 8px;
display: grid; place-items: center;
flex-shrink: 0;
}
.notif-content { min-width: 0; }
.notif-title { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.2; margin-bottom: 2px; }
.notif-msg { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.notif-close {
background: transparent;
border: none;
color: var(--text-dim);
width: 24px; height: 24px;
border-radius: 6px;
display: grid; place-items: center;
cursor: pointer;
transition: background var(--transition), color var(--transition);
align-self: start;
}
.notif-close:hover { background: var(--bg-elevated); color: var(--text); }
.notif-progress {
position: absolute;
left: 0; bottom: 0;
height: 3px;
width: 100%;
transform-origin: left center;
animation: notif-progress 4200ms linear forwards;
}
@keyframes notif-progress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* variantes por tipo */
.notif-success .notif-icon { background: rgba(16, 185, 129, .18); color: var(--success); }
.notif-success .notif-progress{ background: var(--success); }
.notif-success { border-left: 3px solid var(--success); }
.notif-error .notif-icon { background: rgba(239, 68, 68, .18); color: var(--danger); }
.notif-error .notif-progress{ background: var(--danger); }
.notif-error { border-left: 3px solid var(--danger); }
.notif-warning .notif-icon { background: rgba(245, 158, 11, .18); color: var(--warning); }
.notif-warning .notif-progress{ background: var(--warning); }
.notif-warning { border-left: 3px solid var(--warning); }
.notif-info .notif-icon { background: rgba(59, 130, 246, .18); color: var(--info); }
.notif-info .notif-progress{ background: var(--info); }
.notif-info { border-left: 3px solid var(--info); }
/* =========================================================
PAGE TRANSITIONS (sin parpadeos)
========================================================= */
.content { animation: fadeInUp .28s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.content.fade-out { opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.content.fade-in { animation: fadeInUp .28s ease-out; }
/* tarjeta de integración saliendo */
.integration-card.removing {
opacity: 0;
transform: scale(.95);
transition: opacity .22s, transform .22s;
}
/* impresión: solo el panel */
@media print {
.sidebar, .topbar, .page-head, .quote-tabs-wrap, .btn-add-item, .row-del, [data-out], textarea, button {
display: none !important;
}
.quote-panel { border: none; padding: 0; }
}
/* =========================================================
INTEGRACIONES (tarjetas de plataforma)
========================================================= */
.integrations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.integration-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 16px;
padding: 18px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 14px;
transition: border-color var(--transition), transform var(--transition);
}
.integration-card:hover { border-color: var(--border); }
.integration-card.soon { opacity: .65; }
.ic-logo {
width: 56px; height: 56px;
border-radius: 12px;
display: grid; place-items: center;
color: #fff;
grid-row: 1 / 3;
}
.ic-logo.woo { background: linear-gradient(135deg, #7f54b3, #9b6cd9); }
.ic-logo.wp { background: linear-gradient(135deg, #21759b, #00a0d2); }
.ic-logo.walmart { background: linear-gradient(135deg, #0071ce, #ffc220); color: #fff; }
.ic-logo.shopify { background: linear-gradient(135deg, #5e8e3e, #95bf47); }
.ic-logo.meli { background: linear-gradient(135deg, #fff159, #3483fa); color: #2d3277; }
.ic-body { min-width: 0; }
.ic-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ic-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.ic-meta { margin-top: 10px; }
.ic-status {
font-size: 12px;
font-weight: 600;
}
.ic-status.connected { color: var(--success); }
.ic-status.disconnected { color: var(--text-dim); }
.ic-status.error { color: var(--danger); }
.ic-badge {
font-size: 10px;
padding: 3px 8px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--c-purple);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
}
.ic-badge.soon { background: rgba(245, 158, 11, .18); color: var(--warning); }
.ic-actions {
grid-column: 2;
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.ic-actions .btn-primary,
.ic-actions .btn-outline { padding: 8px 14px; font-size: 12.5px; }
.ic-actions button[disabled] { cursor: not-allowed; opacity: .5; }
/* =========================================================
MODAL
========================================================= */
.modal {
position: fixed; inset: 0;
display: none;
z-index: 100;
padding: 20px;
overflow-y: auto;
}
.modal.open {
display: flex;
align-items: center;
justify-content: center;
}
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
}
.modal-card {
position: relative;
max-width: 520px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
margin: auto;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
animation: modalIn 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
margin: 4px 0;
}
.form-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px 16px;
margin: 4px 0;
}
@media (max-width: 540px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }
/* =========================================================
APP MODAL UNIVERSAL (App.confirm / prompt / alert)
========================================================= */
.modal-sm { max-width: 440px; }
.app-modal .modal-head { padding: 18px 20px 12px; border-bottom: none; }
.am-head-l { display: flex; align-items: center; gap: 12px; }
.am-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
flex-shrink: 0;
}
.am-icon.tone-purple { background: var(--primary-soft); color: var(--c-purple); }
.am-icon.tone-yellow { background: rgba(245,158,11,.18); color: var(--warning); }
.am-icon.tone-teal { background: rgba(20,184,166,.18); color: var(--c-teal); }
.am-icon.tone-red { background: rgba(239,68,68,.16); color: var(--danger); }
.app-modal .modal-body { padding: 4px 20px 6px; }
.am-msg {
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 4px;
}
.am-msg b { color: var(--text); }
.am-input-wrap { margin-top: 12px; }
.am-input {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font: inherit;
font-size: 14px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.am-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.app-modal .modal-foot {
padding: 14px 20px 18px;
margin-top: 8px;
}
/* botón peligro */
.btn-primary.btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 6px 18px rgba(239, 68, 68, .35);
}
.btn-primary.btn-danger:hover { box-shadow: 0 10px 24px rgba(239, 68, 68, .45); }
/* toast con tipo (ahora reusado) */
.flash-toast[data-type="error"] { border-color: var(--danger); color: var(--danger); }
.flash-toast[data-type="warning"] { border-color: var(--warning); color: var(--warning); }
.flash-toast[data-type="info"] { border-color: var(--info); color: var(--info); }
/* =========================================================
LOGIN / AUTH
========================================================= */
.auth-body {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background: var(--bg-app);
position: relative;
overflow: hidden;
}
.auth-body::before {
content: "";
position: absolute;
top: -200px; left: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(99, 102, 241, .25), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.auth-body::after {
content: "";
position: absolute;
bottom: -250px; right: -150px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(236, 72, 153, .2), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
[data-theme="light"] .auth-body::before { background: radial-gradient(circle, rgba(99,102,241,.18), transparent 70%); }
[data-theme="light"] .auth-body::after { background: radial-gradient(circle, rgba(236,72,153,.15), transparent 70%); }
.auth-theme {
position: absolute;
top: 24px; right: 24px;
z-index: 5;
}
.auth-wrap { width: 100%; max-width: 440px; position: relative; z-index: 1; }
.auth-card {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 18px;
padding: 36px 34px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
[data-theme="light"] .auth-card { box-shadow: 0 16px 50px rgba(28, 36, 70, .12); }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.auth-brand h1 { font-size: 20px; font-weight: 700; line-height: 1.1; }
.auth-brand h1 span { color: var(--text-muted); font-weight: 500; font-size: 14px; }
.auth-brand p { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.field-input {
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
height: 46px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.field-input:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft);
}
.field-input svg { color: var(--text-dim); flex-shrink: 0; }
.field-input input,
.field-input select,
.field-input textarea {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text);
font: inherit;
font-size: 14px;
width: 100%;
min-width: 0;
}
.field-input input::placeholder,
.field-input textarea::placeholder { color: var(--text-dim); }
/* SELECT — custom dropdown (cs-* clases) */
.cs-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.cs-wrap > select { display: none !important; }
.cs-trigger {
width: 100%;
background: transparent;
border: none;
outline: none;
color: var(--text);
font: inherit;
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
padding: 0 4px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cs-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chev {
color: var(--text-muted);
transition: transform var(--transition);
flex-shrink: 0;
}
.cs-wrap.open .cs-chev { transform: rotate(180deg); }
.cs-menu {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
padding: 6px;
max-height: 240px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(.98);
transform-origin: top center;
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
[data-theme="light"] .cs-menu { box-shadow: 0 12px 28px rgba(28, 36, 70, .15); }
/* Cuando el menú está portado al body */
.cs-menu.cs-menu-portal {
position: fixed;
z-index: 10000; /* por encima de modal (100) y notify (9999) */
}
.cs-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.cs-menu.drop-up {
transform-origin: bottom center;
transform: translateY(6px) scale(.98);
}
.cs-menu.drop-up.open { transform: translateY(0) scale(1); }
.cs-option {
padding: 9px 12px;
border-radius: 7px;
font-size: 13.5px;
color: var(--text);
cursor: pointer;
transition: background var(--transition), color var(--transition);
user-select: none;
}
.cs-option:hover { background: var(--bg-elevated); }
.cs-option.selected {
background: var(--gradient-side);
color: #fff;
font-weight: 600;
}
.cs-option.selected:hover { background: var(--gradient-side); }
.cs-option.disabled { color: var(--text-dim); cursor: not-allowed; }
/* scrollbar interno */
.cs-menu::-webkit-scrollbar { width: 6px; }
.cs-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* select grande / standalone (fuera de field-input) */
select.input-lg,
.qh-field select,
.am-input[type="select"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bg-input);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
[data-theme="light"] .field-input select,
[data-theme="light"] select.input-lg,
[data-theme="light"] .qh-field select {
background-image: url("data:image/svg+xml;utf8,");
}
.toggle-pass {
color: var(--text-dim);
padding: 4px;
border-radius: 6px;
transition: color var(--transition);
}
.toggle-pass:hover { color: var(--text); }
.auth-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
margin-top: 2px;
}
.check { display: flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer; }
.check input { accent-color: var(--primary); }
.link { color: var(--c-purple); font-weight: 500; }
.link:hover { text-decoration: underline; }
.auth-submit {
width: 100%;
justify-content: center;
padding: 13px;
margin-top: 6px;
font-size: 14px;
}
.auth-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(239, 68, 68, .12);
border: 1px solid rgba(239, 68, 68, .3);
color: var(--danger);
border-radius: 10px;
font-size: 13px;
margin-bottom: 18px;
}
/* =========================================================
WIZARD (Instalador / Actualizador)
========================================================= */
.wiz-body-bg {
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px 16px;
background: var(--bg-app);
position: relative;
overflow: hidden;
}
.wiz-body-bg::before {
content: "";
position: absolute;
top: -220px; left: -180px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(99,102,241,.22), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.wiz-body-bg::after {
content: "";
position: absolute;
bottom: -260px; right: -160px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(236,72,153,.18), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.wiz {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
overflow: hidden;
}
[data-theme="light"] .wiz { box-shadow: 0 20px 60px rgba(28, 36, 70, .12); }
/* ---- HEAD ---- */
.wiz-head {
padding: 28px 30px 22px;
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10) 50%, rgba(236,72,153,.12));
border-bottom: 1px solid var(--border-soft);
text-align: center;
}
.wiz-head h1 {
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
color: var(--text);
}
.wiz-head .sub {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 20px;
letter-spacing: .2px;
}
.wiz-steps {
display: flex;
justify-content: center;
gap: 10px;
}
.wiz-step {
width: 38px;
height: 6px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
transition: all var(--transition);
}
.wiz-step.done { background: var(--gradient-side); border-color: transparent; box-shadow: 0 0 12px rgba(99,102,241,.5); }
.wiz-step.current { width: 48px; }
/* ---- BODY ---- */
.wiz-body {
padding: 28px 32px 24px;
}
.wiz-body h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.wiz-body p.lead {
font-size: 13.5px;
color: var(--text-muted);
margin-bottom: 20px;
line-height: 1.55;
}
/* campo input estilo wizard */
.wiz .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.wiz .field label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.wiz .field input {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
color: var(--text);
font: inherit;
font-size: 14px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.wiz .field input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft);
}
/* tarjetas de modo */
.mode-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 18px 0;
}
.mode-card {
padding: 18px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 14px;
transition: all var(--transition);
position: relative;
}
.mode-card .ico { font-size: 28px; margin-bottom: 8px; line-height: 1; }
.mode-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.mode-card p { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.mode-card.active {
border-color: transparent;
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10));
box-shadow: 0 0 0 1px var(--c-purple), 0 8px 24px rgba(99,102,241,.18);
}
.mode-card.update.active {
background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(6,182,212,.10));
box-shadow: 0 0 0 1px var(--success), 0 8px 24px rgba(16,185,129,.18);
}
.mode-card.active::after {
content: "ACTIVO";
position: absolute;
top: 10px; right: 10px;
background: var(--gradient-side);
color: #fff;
padding: 3px 8px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .5px;
}
.mode-card.update.active::after {
background: linear-gradient(135deg, var(--success), var(--info));
}
@media (max-width: 540px) {
.mode-cards { grid-template-columns: 1fr; }
}
/* caja de pendientes */
.pending-box {
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 14px 16px;
margin: 14px 0 18px;
}
.pb-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.pb-head .badge {
background: var(--primary-soft);
color: var(--c-purple);
padding: 2px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.pending-box ul { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; }
.pending-box li { font-size: 12.5px; color: var(--text-muted); }
.pending-box li.sub-li { padding-left: 16px; font-size: 12px; }
.pending-box code { color: var(--c-purple); font-size: 11.5px; }
/* alertas wizard */
.wiz-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 10px;
font-size: 13px;
margin: 0 0 16px;
}
.wiz-alert.error { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .3); color: var(--danger); }
.wiz-alert.ok { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); color: var(--success); }
.wiz-warn {
padding: 11px 14px;
background: rgba(245, 158, 11, .10);
border: 1px solid rgba(245, 158, 11, .3);
color: var(--warning);
border-radius: 10px;
font-size: 12.5px;
margin: 6px 0 14px;
}
.wiz-warn code { color: var(--warning); font-weight: 700; }
/* actions row */
.actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 8px;
}
.actions .hint { font-size: 12px; color: var(--text-muted); }
.actions .hint b { font-size: 11px; padding: 3px 8px; border-radius: 999px; letter-spacing: .5px; }
.tag-install { background: var(--primary-soft); color: var(--c-purple); }
.tag-update { background: rgba(16,185,129,.18); color: var(--success); }
/* botón wizard */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 13.5px;
border: none;
cursor: pointer;
text-decoration: none;
transition: transform var(--transition), box-shadow var(--transition);
}
.btn.btn-primary {
background: var(--gradient-side);
color: #fff;
box-shadow: 0 6px 18px rgba(99,102,241,.35);
}
.btn.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(99,102,241,.45); }
/* footer */
.wiz .footer {
padding: 14px 24px;
text-align: center;
font-size: 11.5px;
color: var(--text-dim);
border-top: 1px solid var(--border-soft);
background: var(--bg-elevated);
}
.mode-tabs {
display: inline-flex;
padding: 4px;
background: var(--bg-elevated);
border: 1px solid var(--border-soft);
border-radius: 999px;
margin-bottom: 18px;
gap: 2px;
}
.mode-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
border-radius: 999px;
transition: all var(--transition);
}
.mode-tab.active {
background: var(--gradient-side);
color: #fff;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.install-list { list-style: none; padding: 0; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.install-list li { padding: 9px 12px; background: var(--bg-elevated); border-radius: 8px; font-size: 13px; }
.install-list code { color: var(--c-purple); font-size: 12px; }
.install-sublist { list-style: none; padding: 6px 0 0 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.instructions { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 4px; padding: 10px 12px; background: var(--bg-elevated); border-radius: 8px; }
.warn { padding: 10px 12px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); color: var(--warning); border-radius: 10px; font-size: 12.5px; margin-top: 10px; }
.warn code { color: var(--warning); font-weight: 600; }
.version-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 14px; }
.version-row > div { padding: 12px 14px; background: var(--bg-elevated); border-radius: 10px; border: 1px solid var(--border-soft); }
.vr-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; margin-bottom: 4px; }
.vr-value { font-size: 20px; font-weight: 700; }
.vr-value.ok { color: var(--success); }
.vr-value.warn-text { color: var(--warning); }
.auth-footer {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
text-align: center;
color: var(--text-dim);
font-size: 12px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.sidebar {
position: fixed;
left: 0; top: 0;
transform: translateX(-100%);
}
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop.show { display: block; }
.btn-collapse { display: none; }
.topbar-center { display: none; }
.content { padding: 18px; }
.welcome { flex-direction: column; align-items: flex-start; }
.status-row { grid-template-columns: 110px 1fr; }
}