/* ===========================================================
   ATLAS - Estilos del sistema
   =========================================================== */
:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-soft: #eef2ff;
    --success: #16a34a;
    --success-soft: #dcfce7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --info: #0284c7;
    --info-soft: #e0f2fe;
    --c-green: #10b981;
    --c-purple: #8b5cf6;
    --c-pink: #ec4899;
    --c-teal: #14b8a6;
    --c-orange: #f97316;

    --topbar-bg: rgba(255, 255, 255, .92);
    --row-hover: #fafbff;
    --muted-soft: #eceef4;
    --input-bg: #f8fafc;
    --text-dim: #8891b3;
    --gradient-side: linear-gradient(135deg, #6366f1, #8b5cf6);

    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface-2: #f8f9fc;
    --border: #e4e7ef;
    --text: #1e2235;
    --muted: #6b7189;

    --sidebar-bg: #111827;
    --sidebar-bg-2: #1a2233;
    --sidebar-text: #aab2c8;
    --sidebar-active: #ffffff;
    --sidebar-w: 260px;
    --sidebar-w-mini: 72px;
    --topbar-h: 62px;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tema oscuro (el atributo lo pone el layout antes de pintar) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #6366f1;
    --primary-dark: #818cf8;
    --primary-soft: rgba(99, 102, 241, .16);
    --success-soft: rgba(22, 163, 74, .18);
    --danger-soft: rgba(220, 38, 38, .18);
    --warning-soft: rgba(217, 119, 6, .18);
    --info-soft: rgba(2, 132, 199, .18);

    --bg: #0d111c;
    --surface: #151a28;
    --surface-2: #1b2133;
    --border: #262d42;
    --text: #e4e7f0;
    --muted: #8e96ad;
    --sidebar-bg: #0a0e18;
    --sidebar-bg-2: #111626;

    --topbar-bg: rgba(21, 26, 40, .92);
    --row-hover: #1a2031;
    --muted-soft: #232a3d;
    --input-bg: #10141f;
    --text-dim: #6b7399;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .alert { color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .badge-success { color: #4ade80; }
:root[data-theme="dark"] .badge-danger { color: #f87171; }
:root[data-theme="dark"] .badge-warning { color: #fbbf24; }
:root[data-theme="dark"] .badge-info { color: #38bdf8; }
:root[data-theme="dark"] .badge-primary { color: #a5b4fc; }
:root[data-theme="dark"] .switch input { background: #3a4259; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.fw-bold { font-weight: 700; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.d-flex { display: flex; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .align-center { align-items: center; } .justify-between { justify-content: space-between; }
.w-100 { width: 100%; }
.nowrap { white-space: nowrap; }

/* ---------- Estructura ---------- */
.atl-app { display: flex; min-height: 100vh; }
.atl-main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left .2s ease; display: flex; flex-direction: column; }
.atl-content { padding: 24px; flex: 1; }

/* ---------- Sidebar ---------- */
.atl-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
    color: var(--sidebar-text); display: flex; flex-direction: column;
    transition: width .2s ease, transform .2s ease;
}
.atl-brand { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; flex-shrink: 0; }
.atl-brand:hover { color: #fff; }
.atl-brand-logo { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,.06); }
.atl-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.atl-brand-text { display: flex; flex-direction: column; min-width: 0; }
.atl-brand-text strong { letter-spacing: 3px; font-size: 16px; }
.atl-brand-text small { color: var(--sidebar-text); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.atl-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.atl-nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #6b7590; padding: 16px 12px 6px; white-space: nowrap; }
.atl-nav-link {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin: 2px 0;
    border-radius: var(--radius-sm); color: var(--sidebar-text); background: none; border: 0;
    font: inherit; text-align: left; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.atl-nav-link > i:first-child { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.atl-nav-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.atl-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.atl-nav-link.active { background: var(--primary); color: var(--sidebar-active); box-shadow: 0 4px 12px rgba(79,70,229,.35); }
.atl-caret { font-size: 10px; transition: transform .2s; }
.atl-nav-group.open > .atl-nav-link { color: #fff; }
.atl-nav-group.open .atl-caret { transform: rotate(90deg); }
.atl-submenu { display: none; padding: 2px 0 6px 32px; }
.atl-nav-group.open .atl-submenu { display: block; }
.atl-submenu a { display: block; padding: 7px 12px; border-radius: 6px; color: var(--sidebar-text); font-size: 13.5px; position: relative; white-space: nowrap; }
.atl-submenu a::before { content: ""; position: absolute; left: -10px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #4b5570; }
.atl-submenu a:hover { color: #fff; background: rgba(255,255,255,.05); }
.atl-submenu a.active { color: #fff; font-weight: 600; }
.atl-submenu a.active::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.3); }
.atl-sidebar-footer { padding: 12px 18px; font-size: 11.5px; color: #6b7590; border-top: 1px solid rgba(255,255,255,.06); white-space: nowrap; }

/* Sidebar colapsado (escritorio) */
.sidebar-collapsed .atl-sidebar { width: var(--sidebar-w-mini); }
.sidebar-collapsed .atl-main { margin-left: var(--sidebar-w-mini); }
.sidebar-collapsed .atl-brand-text,
.sidebar-collapsed .atl-nav-link span,
.sidebar-collapsed .atl-caret,
.sidebar-collapsed .atl-sidebar-footer { display: none; }
.sidebar-collapsed .atl-nav-section { font-size: 0; padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; }
.sidebar-collapsed .atl-nav-link { justify-content: center; padding: 11px 0; }
.sidebar-collapsed .atl-brand { justify-content: center; padding: 0; }
.sidebar-collapsed .atl-nav-group .atl-submenu { display: none; }
.sidebar-collapsed .atl-nav-group:hover .atl-submenu {
    display: block; position: fixed; left: var(--sidebar-w-mini); margin-top: -44px; padding: 8px;
    background: var(--sidebar-bg-2); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-lg); min-width: 200px; z-index: 50;
}
.sidebar-collapsed .atl-nav-group:hover .atl-submenu a::before { display: none; }

.atl-backdrop { display: none; }

/* ---------- Topbar ---------- */
.atl-topbar {
    position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
    padding: 0 24px; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.atl-topbar-title { font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-topbar-actions { display: flex; align-items: center; gap: 8px; }
.atl-icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.atl-icon-btn:hover { background: var(--surface-2); }
.atl-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 40px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.atl-user i { font-size: 10px; color: var(--muted); }
.atl-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0; }
.atl-user-info { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.atl-user-info small { color: var(--muted); font-size: 11.5px; }

.atl-dropdown { position: relative; }
.atl-dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; }
.atl-dropdown.open .atl-dropdown-menu { display: block; }
.atl-dropdown-menu a, .atl-dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 6px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.atl-dropdown-menu a:hover, .atl-dropdown-menu button:hover { background: var(--surface-2); }
.atl-dropdown-menu i { width: 16px; color: var(--muted); }
.atl-dropdown-menu .danger, .atl-dropdown-menu .danger i { color: var(--danger); }

/* ---------- Barra superior: título, accesos, notificaciones ---------- */
.tb-title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.tb-crumb { display: flex; flex-wrap: nowrap; gap: 6px; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.tb-crumb-item { color: var(--muted); }
.tb-crumb-item + .tb-crumb-item::before { content: "/"; margin-right: 6px; opacity: .5; }
a.tb-crumb-item:hover { color: var(--primary); }
.tb-crumb-item.current { color: var(--text); font-weight: 500; }

/* Chip de icono con el color del acceso (--c) */
.tb-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; color: var(--c, var(--primary)); background: var(--primary-soft); background: color-mix(in srgb, var(--c, var(--primary)) 16%, transparent); }
.tb-ico.sm { width: 30px; height: 30px; font-size: 13px; }

.tb-shortcuts { display: flex; gap: 4px; margin-right: 4px; }
.tb-shortcut { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 9px; color: var(--muted); }
.tb-shortcut:hover { background: var(--surface-2); color: var(--text); }
.tb-shortcut .tb-ico { width: 28px; height: 28px; font-size: 13px; }
.tb-sc-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; }
.tb-sc-x { position: absolute; top: -3px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 16px; text-align: center; display: none; cursor: pointer; }
.tb-shortcut:hover .tb-sc-x { display: block; }

.tb-panel { width: 340px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.tb-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-weight: 650; border-bottom: 1px solid var(--border); }
.tb-panel-hint { padding: 8px 14px 0; font-size: 12px; color: var(--muted); }
.tb-link { background: none; border: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.tb-count { background: var(--danger); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 8px; }

.tb-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.atl-dropdown-menu .tb-quick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 10px; border: 1px solid transparent; text-align: center; }
.atl-dropdown-menu .tb-quick-item:hover { background: var(--surface-2); }
.tb-quick-label { font-size: 12px; line-height: 1.2; color: var(--text); }
.tb-quick-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; background: var(--primary); }
.atl-dropdown-menu .tb-quick-check i { width: auto; color: #fff; font-size: 9px; }
.tb-quick-grid.editing .tb-quick-item { border-color: var(--border); border-style: dashed; }
.tb-quick-grid.editing .tb-quick-item.pinned { border-color: var(--primary); border-style: solid; background: var(--primary-soft); }
.tb-quick-grid.editing .tb-quick-item.pinned .tb-quick-check { display: grid; }

.tb-noti-btn { position: relative; }
.tb-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--surface); }
.atl-dropdown-menu .tb-noti-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 0; border-bottom: 1px solid var(--border); color: var(--text); }
.atl-dropdown-menu .tb-noti-item:last-child { border-bottom: 0; }
.atl-dropdown-menu .tb-noti-item:hover { background: var(--surface-2); color: var(--text); }
.atl-dropdown-menu .tb-ico i { width: auto; color: inherit; }
.tb-noti-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tb-noti-title { font-weight: 600; font-size: 13px; }
.tb-noti-meta { font-size: 12px; color: var(--muted); }
.atl-dropdown-menu .tb-noti-arrow { width: auto; font-size: 11px; }
.tb-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.tb-empty i { display: block; font-size: 24px; margin: 0 auto 8px; opacity: .5; }

.tb-user-menu { min-width: 240px; }
.tb-user-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.tb-user-head strong { display: block; }
.tb-user-head small { color: var(--muted); font-size: 12px; }
.atl-avatar.lg { width: 42px; height: 42px; font-size: 15px; }

.tb-moon, :root[data-theme="dark"] .tb-sun { display: inline-block; }
:root[data-theme="dark"] .tb-sun { color: #fbbf24; }
.tb-sun, :root[data-theme="dark"] .tb-moon { display: none; }

/* ---------- Componentes ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; font-weight: 700; }
.page-head p { margin: 2px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-header h3 { font-size: 15px; font-weight: 650; }
.card-body { padding: 18px; }
.card-footer { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: flex-end; gap: 8px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-side-main { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }

/* KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow); }
.kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.kpi-icon.primary { background: var(--primary-soft); color: var(--primary); }
.kpi-icon.success { background: var(--success-soft); color: var(--success); }
.kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.danger { background: var(--danger-soft); color: var(--danger); }
.kpi-icon.info { background: var(--info-soft); color: var(--info); }
.kpi-label { color: var(--muted); font-size: 12.5px; }
.kpi-value { font-size: 21px; font-weight: 750; letter-spacing: -.3px; }
.kpi-sub { font-size: 12px; color: var(--muted); }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm);
    border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2;
    transition: background .15s, border-color .15s, box-shadow .15s; text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-light { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-light:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 7px; }
.btn-icon.btn-sm { width: 28px; height: 28px; }

/* Formularios */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.form-grid[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.form-grid[style*="--cols"] > .field { grid-column: span 1; }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 13px; }
.field small { color: var(--muted); font-size: 12px; }
.req::after { content: " *"; color: var(--danger); }
.input, .select, .textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

/* Select global */
select, .select, .np-i select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7189' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 32px !important;
}
:root[data-theme="dark"] select,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .np-i select {
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e96ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ===== Select personalizado (global) ===== */
.atl-sel { position: relative; display: block; width: 100%; }
.atl-sel > select { display: none; }
.atl-sel__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100% !important; text-align: left; cursor: pointer; font: inherit; line-height: 1.4;
    background-image: none !important; padding-right: 12px !important;
}
.atl-sel__btn:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.atl-sel__btn:disabled { cursor: default; opacity: .6; }
.atl-sel__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-sel__val.placeholder { color: var(--muted); }
.atl-sel__chev { font-size: 11px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.atl-sel.open .atl-sel__chev { transform: rotate(180deg); }

.atl-sel__menu {
    position: absolute; top: calc(100% + 6px); left: 0; width: 100%; min-width: 200px; z-index: 1200;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 6px; display: none;
    max-height: 320px; overflow: hidden; flex-direction: column;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.atl-sel.open .atl-sel__menu { display: flex; }
.atl-sel__menu.float { position: fixed; z-index: 3000; }

.atl-sel__search { position: relative; padding: 4px 4px 8px; }
.atl-sel__search i { position: absolute; left: 14px; top: calc(50% - 1px); transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.atl-sel__search input {
    width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: 0;
}
.atl-sel__search input:focus { border-color: var(--primary); }

.atl-sel__list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; padding-right: 6px; }
.atl-sel__list::-webkit-scrollbar { width: 6px; }
.atl-sel__list::-webkit-scrollbar-track { background: transparent; }
.atl-sel__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.atl-sel__list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.atl-sel__opt {
    padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .12s; line-height: 1.5;
    min-height: 40px; display: flex; align-items: center; flex-shrink: 0;
}
.atl-sel__opt:hover, .atl-sel__opt.active { background: var(--surface-2); color: var(--text); }
.atl-sel__opt.sel { background: var(--primary); color: #fff; font-weight: 600; }
.atl-sel__opt.sel:hover, .atl-sel__opt.sel.active { background: var(--primary-dark); color: #fff; }
.atl-sel__opt.dis { color: var(--muted); cursor: default; opacity: .5; }

/* Contextos de tamaño */
.toolbar .atl-sel { width: auto; min-width: 160px; }
.np-i .atl-sel { flex: 1; min-width: 0; width: auto; }
.np-i .atl-sel__btn { background: transparent; border: none; padding: 10px 12px; color: var(--text); box-shadow: none; }
.np-i .atl-sel__btn:focus { box-shadow: none; }
.np-sel-add .atl-sel__btn { padding-right: 40px !important; }

.textarea { min-height: 90px; resize: vertical; }
.input-sm { padding: 6px 9px; font-size: 13px; }
.input-group { display: flex; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon .input { padding-left: 36px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.switch input { width: 38px; height: 22px; appearance: none; -webkit-appearance: none; background: #cbd0dd; border-radius: 22px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { left: 19px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.checkbox-grid label { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.checkbox-grid label:hover { background: var(--surface-2); }

/* Toolbar de filtros */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: 160px; }
.toolbar .grow { flex: 1; min-width: 200px; }

/* Tablas */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--surface-2); font-weight: 650; white-space: nowrap; }
.table tbody tr:hover { background: var(--row-hover); }
.table tfoot td { font-weight: 700; background: var(--surface-2); }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions form { display: inline; }
.table-empty { text-align: center; padding: 40px 16px !important; color: var(--muted); }
.table-empty i { display: block; font-size: 30px; margin-bottom: 8px; opacity: .5; }
.thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.cell-main { display: flex; align-items: center; gap: 12px; }
.cell-main small { display: block; color: var(--muted); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.badge-success { background: var(--success-soft); color: #15803d; }
.badge-danger { background: var(--danger-soft); color: #b91c1c; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-info { background: var(--info-soft); color: #0369a1; }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-muted { background: var(--muted-soft); color: var(--muted); }

/* Alertas */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; }
.alert i { margin-top: 3px; }
.alert-success { background: var(--success-soft); color: #14532d; border-color: #bbf7d0; }
.alert-error { background: var(--danger-soft); color: #7f1d1d; border-color: #fecaca; }
.alert-warning { background: var(--warning-soft); color: #78350f; border-color: #fde68a; }
.alert-info { background: var(--info-soft); color: #0c4a6e; border-color: #bae6fd; }

/* Paginación */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.pagination-info { color: var(--muted); font-size: 13px; padding: 14px 18px; }
.pagination .pagination-info { padding: 0; }
.pagination-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pagination-per select { height: 32px; padding: 0 28px 0 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.pagination-links { display: flex; gap: 4px; }
.pagination-links a { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); color: var(--text); background: var(--surface); text-decoration: none; transition: all .15s; }
.pagination-links a:hover { border-color: var(--primary); color: var(--primary); }
.pagination-links a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination-links a.active:hover { color: #fff; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 18px; overflow-x: auto; }
.tabs button { padding: 13px 14px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15, 18, 30, .55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal.open { display: flex; }
.modal-box { background: var(--surface); border-radius: 14px; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.modal-box.sm { max-width: 400px; }
.modal-box.lg { max-width: 780px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 16px; }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Toasts */
/* Notificaciones */
.notify-stack { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 5000; pointer-events: none; }
.notification {
    min-width: 320px; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18); display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
    position: relative; overflow: hidden; pointer-events: auto;
    transform: translateX(110%); opacity: 0; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
}
.notification.show { transform: translateX(0); opacity: 1; }
.notification.hide { transform: translateX(110%); opacity: 0; }
.notif-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notif-success .notif-icon { background: var(--success-soft); color: var(--success); }
.notif-error .notif-icon { background: var(--danger-soft); color: var(--danger); }
.notif-warning .notif-icon { background: var(--warning-soft); color: var(--warning); }
.notif-info .notif-icon { background: var(--info-soft); color: var(--info); }
.notif-content { flex: 1; min-width: 0; padding-top: 2px; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.notif-msg { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.notif-close {
    background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px;
    transition: background .15s, color .15s; flex-shrink: 0; margin-top: -2px;
}
.notif-close:hover { background: var(--surface-2); color: var(--text); }
.notif-progress {
    position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px; width: 100%;
    transform-origin: left; animation: notifProgress linear forwards;
}
.notif-success .notif-progress { background: var(--success); }
.notif-error .notif-progress { background: var(--danger); }
.notif-warning .notif-progress { background: var(--warning); }
.notif-info .notif-progress { background: var(--info); }
@keyframes notifProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.notification:hover .notif-progress { animation-play-state: paused; }

@media (max-width: 640px) {
    .notify-stack { right: 10px; left: 10px; top: 10px; }
    .notification { min-width: 0; max-width: 100%; }
}

/* Listas simples */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.detail-grid div small { display: block; color: var(--muted); font-size: 12px; }
.detail-grid div strong { font-size: 14.5px; }
.chart-box { position: relative; height: 300px; }
.img-preview { width: 120px; height: 120px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }

/* ---------- Login e instalador (fondo con brillos) ---------- */
.auth-body, .wiz-body-bg { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); position: relative; overflow: hidden; }
.auth-body::before, .wiz-body-bg::before { content: ""; position: absolute; top: -200px; left: -200px; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(99,102,241,.25), transparent 70%); }
.auth-body::after, .wiz-body-bg::after { content: ""; position: absolute; bottom: -250px; right: -150px; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(236,72,153,.2), transparent 70%); }
:root[data-theme="light"] .auth-body::before, :root[data-theme="light"] .wiz-body-bg::before { background: radial-gradient(circle, rgba(99,102,241,.18), transparent 70%); }
:root[data-theme="light"] .auth-body::after, :root[data-theme="light"] .wiz-body-bg::after { background: radial-gradient(circle, rgba(236,72,153,.15), transparent 70%); }
.auth-theme { position: absolute; top: 24px; right: 24px; z-index: 5; }

.btn-gradient { background: var(--gradient-side); color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,.35); transition: transform .2s, box-shadow .2s; }
.btn-gradient:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(99,102,241,.45); }

.auth-wrap { width: 100%; max-width: 440px; position: relative; z-index: 1; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 36px 34px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
:root[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-mark { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 6px 18px rgba(99,102,241,.4); flex-shrink: 0; }
.auth-brand h1 { font-size: 20px; font-weight: 700; line-height: 1.15; }
.auth-brand h1 span { color: var(--muted); font-weight: 500; font-size: 14px; }
.auth-brand p { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.auth-input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.auth-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.auth-input > i { color: var(--text-dim); width: 16px; text-align: center; flex-shrink: 0; }
.auth-input input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; }
.auth-input input::placeholder { color: var(--text-dim); }
.auth-toggle-pass { background: none; border: 0; padding: 4px; border-radius: 6px; color: var(--text-dim); cursor: pointer; }
.auth-toggle-pass:hover { color: var(--text); }
.auth-row { font-size: 13px; margin-top: 2px; font-weight: 500; color: #8b5cf6; opacity: .75; }
:root[data-theme="dark"] .auth-row { color: #a78bfa; }
.auth-submit { width: 100%; padding: 13px; margin-top: 6px; font-size: 14px; border-radius: 10px; }
.auth-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 18px; }
.auth-alert.error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
.auth-alert.ok { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #10b981; }
.auth-alert.warn { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); color: #f59e0b; }
.auth-alert code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.auth-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; color: var(--text-dim); font-size: 12px; }

/* Asistente de instalación */
.wiz { position: relative; z-index: 1; width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
:root[data-theme="light"] .wiz { box-shadow: 0 20px 60px rgba(28,36,70,.12); }
.wiz-head { position: relative; padding: 28px 30px 22px; text-align: center; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10) 50%, rgba(236,72,153,.12)); }
.wiz-head .auth-mark { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 10px; }
.wiz-head h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.wiz-head .sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.wiz-head .auth-theme { top: 16px; right: 16px; }
.wiz-restart { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.wiz-steps { display: flex; justify-content: center; gap: 10px; }
.wiz-step { width: 38px; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: all .2s; }
.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; border-color: var(--primary); }
.wiz-body { padding: 28px 32px 24px; }
.wiz-body h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.wiz-body p.lead { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; }
.wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 18px; }
.wiz-grid .full { grid-column: 1 / -1; }
.wiz-grid small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.wiz-grid small code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.wiz-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 6px 0 -4px; }
.wiz .auth-input select { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.wiz .auth-input select option { background: var(--surface); color: var(--text); }

.wiz-input { width: 100%; height: 48px; padding: 0 14px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.wiz-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.wiz-input::placeholder { color: var(--text-dim); }
select.wiz-input option { background: var(--surface); color: var(--text); }
.wiz-serial { text-transform: uppercase; letter-spacing: .06em; font-family: Consolas, "Courier New", monospace; }
.wiz-body .auth-field { margin-bottom: 4px; }

.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.mode-card { position: relative; padding: 18px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
.mode-card .ico { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.mode-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.mode-card p { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.mode-card.disabled { opacity: .55; }
@media (max-width: 540px) { .mode-cards { grid-template-columns: 1fr; } }

.wiz-req { margin: 0 0 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.wiz-req summary { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.wiz-req summary::-webkit-details-marker { display: none; }
.wiz-req summary::after { content: "▾"; margin-left: 10px; color: var(--muted); transition: transform .2s; }
.wiz-req[open] summary::after { transform: rotate(180deg); }
.wiz-req summary span:first-child { flex: 1; }
.wiz-req summary .ok { color: #10b981; }
.wiz-req summary .fail { color: #ef4444; }
.wiz-req .wiz-checks { padding: 0 10px 10px; margin: 0; }
.wiz-req .wiz-checks li { background: var(--surface); }

.wiz-tag.install { background: var(--primary-soft); color: #a78bfa; }
.wiz-tag.update { background: rgba(16,185,129,.18); color: #10b981; }
.wiz-box-head { display: flex; justify-content: space-between; align-items: center; }
.wiz-count { background: var(--primary-soft); color: #a78bfa; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.wiz-box li.sub { padding-left: 22px; font-size: 12px; }
.wiz-box code { color: #a78bfa; font-size: 11.5px; }
.wiz-warn { padding: 11px 14px; margin: 6px 0 14px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); color: #f59e0b; border-radius: 10px; font-size: 12.5px; }
.wiz-warn code { color: #f59e0b; font-weight: 700; }
.wiz-actions .btn svg, .auth-alert svg { flex-shrink: 0; }

.wiz-checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 560px) { .wiz-checks { grid-template-columns: 1fr; } }
.wiz-checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.wiz-checks .ok, .wiz-checks .fail, .wiz-checks .opt { font-weight: 600; white-space: nowrap; }
.wiz-checks .ok { color: #10b981; }
.wiz-checks .fail { color: #ef4444; }
.wiz-checks .opt { color: #f59e0b; }
.wiz-checks small { display: block; color: var(--muted); font-size: 11.5px; }

.wiz-summary { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13.5px; }
.wiz-summary td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.wiz-summary td:first-child { color: var(--muted); width: 42%; }
.wiz-summary td:last-child { font-weight: 600; }
.wiz-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .5px; background: var(--primary-soft); color: #8b5cf6; }
.wiz-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 14px 0 18px; }
.wiz-box-head { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.wiz-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wiz-box li { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.wiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.wiz-actions .hint { font-size: 12px; color: var(--muted); }
.wiz-actions .btn { padding: 11px 22px; border-radius: 10px; }
.wiz-footer { padding: 14px 24px; text-align: center; font-size: 11.5px; color: var(--text-dim); border-top: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 560px) {
    .wiz-grid { grid-template-columns: 1fr; }
    .wiz-body { padding: 22px 18px; }
    .auth-card { padding: 28px 22px; }
}

/* ---------- POS ---------- */
.pos-page .atl-content { padding: 16px; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; height: calc(100vh - var(--topbar-h) - 32px); }
.pos-catalog, .pos-cart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow); }
.pos-search { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pos-search .input { font-size: 15px; padding: 11px 14px 11px 40px; }
.pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pos-cats button { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; color: var(--text); }
.pos-cats button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-grid { flex: 1; overflow-y: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.pos-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: transform .1s, box-shadow .15s, border-color .15s; text-align: left; font: inherit; color: inherit; padding: 0; }
.pos-item:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(79,70,229,.15); transform: translateY(-1px); }
.pos-item.out { opacity: .5; }
.pos-item img { width: 100%; height: 100px; object-fit: cover; background: var(--surface-2); }
.pos-item-body { padding: 9px 10px 11px; }
.pos-item-name { font-weight: 600; font-size: 13px; line-height: 1.3; height: 34px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pos-item-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.pos-item-price { font-weight: 750; color: var(--primary); }
.pos-item-stock { font-size: 11px; color: var(--muted); }

.pos-cart-head { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pos-customer { display: flex; gap: 6px; }
.pos-customer .select { flex: 1; }
.pos-lines { flex: 1; overflow-y: auto; }
.pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.pos-line-name { font-weight: 600; font-size: 13px; }
.pos-line-price { font-size: 12px; color: var(--muted); }
.pos-line-total { font-weight: 700; text-align: right; }
.pos-qty { display: flex; align-items: center; gap: 4px; }
.pos-qty button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); }
.pos-qty input { width: 54px; text-align: center; padding: 4px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.pos-line-remove { background: none; border: 0; color: var(--danger); cursor: pointer; padding: 4px; }
.pos-empty { text-align: center; color: var(--muted); padding: 50px 20px; }
.pos-empty i { font-size: 38px; opacity: .35; display: block; margin-bottom: 10px; }
.pos-totals { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.pos-totals .row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.pos-totals .row.total { font-size: 22px; font-weight: 800; padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--border); }
.pos-totals .input { width: 110px; text-align: right; padding: 5px 8px; }
.pos-pay { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.pos-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-methods label { border: 1px solid var(--border); border-radius: 8px; padding: 7px 4px; text-align: center; font-size: 12px; cursor: pointer; font-weight: 600; }
.pos-methods input { display: none; }
.pos-methods input:checked + span { color: var(--primary); }
.pos-methods label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.pos-change { display: flex; justify-content: space-between; font-weight: 700; }

/* Compras: buscador de productos */
.autocomplete { position: relative; }
.autocomplete-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; z-index: 20; display: none; }
.autocomplete-list.open { display: block; }
.autocomplete-list button { display: flex; justify-content: space-between; width: 100%; padding: 10px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); }
.autocomplete-list button:hover, .autocomplete-list button.focus { background: var(--primary-soft); }

/* ---------- Ticket ---------- */
.ticket-body { background: #e5e7eb; font-family: "Courier New", monospace; }
.ticket { width: 80mm; margin: 20px auto; background: #fff; padding: 14px 12px; font-size: 12px; color: #000; }
.ticket h2 { text-align: center; font-size: 15px; }
.ticket .center { text-align: center; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket td { padding: 2px 0; vertical-align: top; }
.ticket .sep { border-top: 1px dashed #000; margin: 8px 0; }
.ticket-actions { text-align: center; margin: 16px; font-family: var(--font); }
@media print {
    .ticket-body { background: #fff; }
    .ticket { margin: 0; width: 100%; padding: 0; }
    .ticket-actions { display: none; }
    @page { margin: 4mm; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 992px) {
    .atl-main, .sidebar-collapsed .atl-main { margin-left: 0; }
    .atl-sidebar, .sidebar-collapsed .atl-sidebar { width: var(--sidebar-w); transform: translateX(-100%); }
    .sidebar-collapsed .atl-brand-text, .sidebar-collapsed .atl-nav-link span, .sidebar-collapsed .atl-caret, .sidebar-collapsed .atl-sidebar-footer { display: initial; }
    .sidebar-collapsed .atl-nav-link { justify-content: flex-start; padding: 10px 12px; }
    .sidebar-open .atl-sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar-open .atl-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
    .grid-2, .grid-3, .grid-main-side, .grid-side-main { grid-template-columns: minmax(0, 1fr); }
    .pos { grid-template-columns: minmax(0, 1fr); height: auto; }
    .pos-grid { max-height: 55vh; }
    .pos-lines { max-height: 40vh; }
}
@media (max-width: 640px) {
    .atl-content { padding: 16px; }
    .atl-topbar { padding: 0 12px; gap: 8px; }
    .tb-crumb { display: none; }
    .atl-topbar-actions { gap: 4px; }
    .kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .col-8, .col-6, .col-4, .col-3 { grid-column: span 12; }
    .form-grid[style*="--cols"] { grid-template-columns: 1fr !important; }
    .hide-sm { display: none !important; }
    .toolbar .input, .toolbar .select { width: 100%; }
    .pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}