/* =============================================================
   Quibot Retails by Geintec — Design Tokens + Components
   ============================================================= */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ===== PRIMARY BRAND ===== */
  --teal:       #0EA5A4;  /* primario · nav activo · chart principal · trazo Spark Bot */
  --teal-light: #14C5C4;
  --teal-700:   #0A8483;
  --teal-100:   #B4E8E7;
  --teal-50:    #E6F8F8;

  /* ===== SPARK · CTA (uso limitado, ≤3% del lienzo) ===== */
  --coral:      #FF6B4D;  /* CTA principal · punto wordmark · "AI sugiere" · success tick */
  --coral-600:  #E85529;
  --coral-100:  #FFE8E5;
  --coral-50:   #FFF3EC;

  /* ===== BASE ===== */
  --ink:        #1F2937;
  --bone:       #F7F4EF;
  --canvas:     #FAF9F6;
  --surface:    #FFFFFF;
  --mist:       #F2F4F7;

  /* ===== GEINTEC (solo endoso) ===== */
  --geintec-blue: #0A4DB0;
  --geintec-cyan: #3EBDCF;

  /* ===== SEMÁNTICOS ===== */
  --mint: #22C58B; --mint-600: #14A06E; --mint-100: #D6F4E5;
  --amber: #F2B233; --amber-100: #FBE9C2;
  --crimson: #E5484D; --crimson-100: #FBD5D6;

  /* ===== SLATES (warm grays) ===== */
  --slate-50:#FAFAF8; --slate-100:#F2F1ED; --slate-200:#E5E7EB;
  --slate-300:#D1D5DB; --slate-400:#9CA3AF; --slate-500:#6B7280;
  --slate-600:#4B5563; --slate-700:#374151; --slate-800:#1F2937; --slate-900:#111827;

  /* ===== TYPE ===== */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ===== SPACE (4px base) ===== */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* ===== RADII ===== */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;

  /* ===== SHADOWS (siempre color ink, nunca de color de marca) ===== */
  --shadow-1: 0 1px 2px rgba(31,41,55,.06), 0 1px 1px rgba(31,41,55,.04);
  --shadow-2: 0 8px 24px -8px rgba(31,41,55,.12), 0 2px 4px rgba(31,41,55,.06);
  --shadow-3: 0 24px 64px -16px rgba(31,41,55,.24);

  /* ===== MOTION ===== */
  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --ease-spark: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-700); }

/* =============================================================
   WORDMARK — .qw (clase reusable; el ::after dibuja el punto coral)
   ============================================================= */
.qw {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  letter-spacing: -0.045em; line-height: 1;
  position: relative; display: inline-block;
}
.qw::after {
  content: ""; position: absolute; background: var(--coral); border-radius: 50%;
}
.qw-24 { font-size: 24px; } .qw-24::after { width: 4px;  height: 4px;  top: 4px;  left: 75.5%; }
.qw-32 { font-size: 32px; } .qw-32::after { width: 5px;  height: 5px;  top: 5px;  left: 75.5%; }
.qw-44 { font-size: 44px; } .qw-44::after { width: 7px;  height: 7px;  top: 7px;  left: 75.5%; }
.qw-56 { font-size: 56px; } .qw-56::after { width: 8px;  height: 8px;  top: 9px;  left: 75.5%; }
.qw-72 { font-size: 72px; } .qw-72::after { width: 10px; height: 10px; top: 12px; left: 75.5%; }
.qw-white { color: #fff; }
.qw-teal  { color: var(--teal); }

/* =============================================================
   LOCKUP completo (Spark Bot + Quibot + Retails + by Geintec)
   ============================================================= */
.lockup { display: flex; align-items: center; gap: 18px; }
.lockup-mark { flex-shrink: 0; }
.lockup-text { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.lockup-retails {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--teal); text-transform: uppercase; letter-spacing: 0.22em;
  margin-top: 6px;
}
.lockup-by {
  font-family: var(--font-mono); font-size: 10px; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.22em;
}
.lockup-by b { color: var(--geintec-blue); font-weight: 700; }

/* =============================================================
   LAYOUT — app shell (sidebar + topbar + content)
   ============================================================= */
.app { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }
.sidebar { background: var(--bone); border-right: 1px solid var(--slate-200);
           display: flex; flex-direction: column; padding: 20px 14px; gap: 24px; overflow-y: auto; }
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--slate-200);
          padding: 14px 32px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.content { flex: 1; overflow-y: auto; padding: 32px; background: var(--canvas); }

/* Sidebar nav */
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
               letter-spacing: 0.1em; color: var(--slate-700); padding: 0 12px 6px;
               font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
            border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
            color: var(--slate-500); text-decoration: none;
            transition: background var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out); }
.nav-item:hover { background: var(--slate-100); color: var(--ink); }
.nav-item.active { background: var(--teal); color: #fff;
                   font-weight: 600; border-radius: var(--radius-pill); }
.nav-item.active:hover { background: var(--teal); }
.nav-item.active .ic { color: #fff; }
.nav-item .ic { width: 18px; height: 18px; }
.nav-item .count { margin-left: auto; background: var(--slate-100); color: var(--slate-500);
                   padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px;
                   font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-item.active .count { background: #fff; color: var(--teal); }

.nav-divider { border: none; border-top: 1px solid var(--slate-200); margin: 0; width: 100%; }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 13px;
       padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
       cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       white-space: nowrap; text-decoration: none; line-height: 1; text-align: center;
       transition: transform var(--dur-fast) var(--ease-out),
                   background var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn-primary     { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2A3441; }
.btn-accent      { background: var(--coral); color: #fff; }
.btn-accent:hover { background: var(--coral-600); }
.btn-secondary   { background: #fff; color: var(--ink); border-color: var(--slate-300); }
.btn-secondary:hover { border-color: var(--slate-400); }
.btn-ghost       { background: transparent; color: var(--slate-600); }
.btn-ghost:hover { background: var(--slate-100); color: var(--ink); }
.btn-destructive { background: var(--crimson); color: #fff; }
.btn-mint        { background: var(--mint); color: #fff; }
.btn-mint:hover  { background: var(--mint-600); }
.btn-sm          { padding: 6px 8px !important; font-size: 12px !important; }

/* Action button groups in tables */
.action-buttons { display: flex; gap: 6px; }

/* =============================================================
   BADGES
   ============================================================= */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
         border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 1.4; }
.badge .b-dot { width: 6px; height: 6px; border-radius: 50%; }
.b-primary { background: var(--teal-50);     color: var(--teal-700); }
.b-accent  { background: var(--coral-50);    color: var(--coral-600); }
.b-success { background: var(--mint-100);    color: var(--mint-600); }
.b-warn    { background: var(--amber-100);   color: #8a5b00; }
.b-error   { background: var(--crimson-100); color: #a01c20; }
.b-info    { background: var(--slate-100);   color: var(--slate-700); }
.b-brand   { background: var(--teal-50);     color: var(--teal-700); }
.b-spark   { background: var(--coral-50);    color: var(--coral-600); }

/* =============================================================
   CARDS / PANELS
   ============================================================= */
.panel { background: var(--surface); border: 1px solid var(--slate-200);
         border-radius: var(--radius-md); overflow: hidden; }
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--slate-100);
              display: flex; align-items: center; justify-content: space-between; }
.panel-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px;
                 letter-spacing: -0.01em; margin: 0; }
.panel-body { padding: 20px; }
.panel-body.flush { padding: 0; }
.panel-body > table { margin: -20px; width: calc(100% + 40px); }
.panel-body .dataTables_wrapper { margin: -20px; width: calc(100% + 40px); padding: 20px !important; }
.panel-body.flush > table { margin: 0; width: 100%; }
.panel-body.flush .dataTables_wrapper { margin: 0; width: 100%; padding: 0 !important; }

/* =============================================================
   FORMS
   ============================================================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field .lbl { font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea {
  background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,164,.18);
}

/* =============================================================
   TABLE
   ============================================================= */
table.qb, table.dataTable {
  width: 100% !important; border-collapse: collapse !important;
  margin: 0 !important;
}
table.qb thead, table.dataTable thead { background: var(--slate-50); }
table.qb th, table.dataTable thead th {
  background: var(--slate-50) !important; text-align: left; padding: 12px 16px !important;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate-500) !important; font-weight: 600;
  border-bottom: 1px solid var(--slate-200) !important; vertical-align: middle !important;
}
table.qb td, table.dataTable tbody td {
  padding: 12px 16px !important; font-size: 13px; border-bottom: 1px solid var(--slate-100) !important;
  vertical-align: middle !important;
}
table.qb tbody tr, table.dataTable tbody tr {
  background-color: transparent !important; transition: background var(--dur-fast) var(--ease-out);
}
table.qb tbody tr:hover td, table.dataTable tbody tr:hover {
  background: var(--slate-50) !important; cursor: pointer;
}
table.qb tr:last-child td, table.dataTable tbody tr:last-child td {
  border-bottom: 1px solid var(--slate-200) !important;
}
table.qb .num, table.dataTable .num {
  font-variant-numeric: tabular-nums; text-align: right;
  font-family: var(--font-mono); font-weight: 500;
}
table.qb .id, table.dataTable .id {
  font-family: var(--font-mono); color: var(--slate-500); font-size: 12px;
}

/* DataTables compatibility with Quibot styling */
.dataTables_wrapper {
  padding: 0 !important; background-color: transparent !important;
  border-radius: 0 !important; box-shadow: none !important; margin-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_paginate {
  margin-top: 16px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 10px !important; margin: 0 2px !important; border: 1px solid var(--slate-300) !important;
  border-radius: var(--radius-sm) !important; background: var(--surface) !important;
  color: var(--ink) !important; cursor: pointer; font-size: 12px;
  transition: all var(--dur-fast) var(--ease-out);
  display: inline-block !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--slate-100) !important; border-color: var(--slate-400) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--teal) !important; color: #fff !important; border-color: var(--teal) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5 !important; cursor: not-allowed !important;
}

/* Override Bootstrap button styles for DataTables */
.dataTables_wrapper .paginate_button.btn,
.dataTables_wrapper .page-link {
  background-color: var(--surface) !important;
  border-color: var(--slate-300) !important;
  color: var(--ink) !important;
}
.dataTables_wrapper .paginate_button.btn:not(:disabled):not(.disabled):active,
.dataTables_wrapper .paginate_button.btn:not(:disabled):not(.disabled):hover,
.dataTables_wrapper .page-link:hover {
  background-color: var(--slate-100) !important;
  border-color: var(--slate-400) !important;
  color: var(--ink) !important;
}
.dataTables_wrapper .paginate_button.btn.current,
.dataTables_wrapper .page-link.active {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

/* =============================================================
   KPI CARD
   ============================================================= */
.kpi { background: var(--surface); border: 1px solid var(--slate-200);
       border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.kpi .eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
                letter-spacing: 0.1em; color: var(--slate-500); font-weight: 600; }
.kpi .value { font-family: var(--font-display); font-weight: 700; font-size: 32px;
              line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
              color: var(--ink); }
.kpi .value .unit { font-size: 18px; color: var(--slate-500); font-weight: 500; }
.kpi .delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.delta-up { color: var(--mint-600); }
.delta-down { color: var(--crimson); }
.delta-flat { color: var(--slate-500); }

/* =============================================================
   UTILITY
   ============================================================= */
.eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px;
           text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-500); }
.num-tabular { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--slate-500); }
.text-teal  { color: var(--teal); }
.text-coral { color: var(--coral); }

/* Icons (Lucide sprite consumption) */
.ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2;
      fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }

/* =============================================================
   BUTTON GROUP — tabs de acciones
   ============================================================= */
.btn-group { display: inline-flex; gap: 0; border-radius: 4px; overflow: hidden; }
.btn-group .btn {
  white-space: nowrap; font-size: 12px; padding: 5px 10px; border-radius: 0;
  margin: 0; border: 1px solid var(--slate-300); background: #fff; color: var(--ink);
  transition: all 200ms var(--ease-out);
}
.btn-group .btn:first-child { border-radius: 4px 0 0 4px; }
.btn-group .btn:last-child { border-radius: 0 4px 4px 0; }
.btn-group .btn:not(:last-child) { border-right: none; }
.btn-group .btn:hover { z-index: 10; position: relative; background: var(--slate-50); }
.btn-group .btn-warning { background: var(--amber); color: #000; border-color: var(--amber); }
.btn-group .btn-warning:hover { background: #e5a119; }
.btn-group .btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-group .btn-primary:hover { background: var(--teal-700); }
.btn-group .btn-success { background: var(--mint); color: #fff; border-color: var(--mint); }
.btn-group .btn-success:hover { background: var(--mint-600); }
.btn-group .btn-danger { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.btn-group .btn-danger:hover { background: #c43d42; }

/* Order status tabs */
.order-tabs { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.order-tabs .tab {
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--surface);
  border: 2px solid var(--slate-200); cursor: pointer; font-weight: 500; font-size: 14px;
  transition: all var(--dur-fast) var(--ease-out); color: var(--slate-600);
}
.order-tabs .tab:hover { border-color: var(--teal); color: var(--teal); }
.order-tabs .tab.active { background: var(--teal-50); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.order-tabs .tab .badge {
  margin-left: 8px; background: var(--slate-200); color: var(--slate-700);
  padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px;
}
.order-tabs .tab.active .badge { background: var(--teal); color: #fff; }

/* Modal styling */
.modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px !important;
  border-top: 1px solid var(--slate-200) !important;
  padding: 16px !important;
  background: var(--mist) !important;
  text-align: center;
}

/* Module layout */
.module-header { margin-bottom: 28px; }
.module-header h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700;
                    margin: 0 0 6px; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.module-header h2 svg { width: 28px; height: 28px; }
.module-header p { margin: 0; color: var(--slate-500); font-size: 14px; }

/* Filters */
.filters { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
.search-box {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
  padding: 8px 12px; flex: 1; min-width: 200px;
}
.search-box svg { width: 18px; height: 18px; color: var(--slate-500); }
.search-box input { border: none; outline: none; background: none; flex: 1;
                    font-family: var(--font-body); font-size: 14px; color: var(--ink); }
.filter-options { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-options select {
  padding: 8px 12px; border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 13px;
  cursor: pointer;
}

/* =============================================================
   IMAGE UPLOADER
   ============================================================= */
.image-upload {
  border: 3px dashed var(--slate-300); border-radius: var(--radius-md); padding: 20px;
  text-align: center; background: var(--slate-50); transition: all var(--dur) var(--ease-out);
  position: relative; cursor: pointer;
}
.image-upload:hover, .image-upload.has-image {
  border-color: var(--teal); background: var(--teal-50);
}
.image-upload.has-image { padding: 10px; }
.image-upload .preview-img {
  max-width: 100%; max-height: 150px; border-radius: var(--radius-sm); transition: transform var(--dur);
}
.image-upload .preview-img:hover { transform: scale(1.05); }
.image-upload .remove-btn {
  position: absolute; top: 5px; right: 5px; z-index: 10;
}
.image-upload .upload-icon { font-size: 3rem; color: var(--slate-400); }

/* =============================================================
   REPORT CARDS (Informes grid)
   ============================================================= */
.report-card {
  background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius-md);
  padding: 28px 20px; text-align: center; text-decoration: none; color: inherit;
  transition: all var(--dur) var(--ease-out);
}
.report-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--teal); }
.report-card .icon { width: 48px; height: 48px; margin: 0 auto 12px; }
.report-card h5 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 8px; }
.report-card p { font-size: 12px; color: var(--slate-500); margin: 0 0 12px; line-height: 1.4; }

/* =============================================================
   KNOWLEDGE BASE
   ============================================================= */
.knowledge-container { background: var(--surface); border-radius: var(--radius-md);
                       box-shadow: var(--shadow-2); padding: 30px; }
.knowledge-module-header { display: flex; justify-content: space-between; align-items: flex-start;
                           flex-wrap: wrap; gap: 15px; margin-bottom: 30px; padding-bottom: 24px;
                           border-bottom: 1px solid var(--slate-200); }
.btn-new-faq { background: var(--teal); color: #fff; border: none;
               padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600;
               cursor: pointer; transition: all var(--dur) var(--ease-out); }
.btn-new-faq:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-import { background: var(--mint); color: #fff; border: none;
              padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600;
              cursor: pointer; transition: all var(--dur) var(--ease-out); }
.btn-import:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.badge-custom { display: inline-block; padding: 5px 10px; border-radius: var(--radius-pill);
                font-size: 0.8rem; font-weight: 600; }
.badge-manual { background: var(--slate-100); color: var(--slate-700); }
.badge-importado { background: var(--mint-100); color: var(--mint-600); }

/* =============================================================
   LOGIN — patrón canónico (centered card)
   ============================================================= */
.login-b {
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: var(--bone);
  position: relative; overflow: hidden;
}
.login-b::before {
  content: ""; position: absolute; top: -200px; right: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, var(--teal-50) 0%, transparent 70%);
  pointer-events: none;
}
.login-b::after {
  content: ""; position: absolute; bottom: -200px; left: -160px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, var(--coral-50) 0%, transparent 70%);
  pointer-events: none;
}
.login-b-topbar {
  padding: 24px 48px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.login-b-mini-lockup { display: flex; align-items: baseline; gap: 12px; }
.login-b-by {
  font-family: var(--font-mono); font-size: 10px; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.22em;
}
.login-b-by b { color: var(--geintec-blue); font-weight: 700; }
.login-b-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; position: relative; z-index: 1; padding: 32px 16px;
}
.login-b-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 40px;
  width: 100%; max-width: 420px;
}
.login-b-head {
  text-align: center; margin-bottom: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.login-b-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em; margin: 12px 0 4px;
}
.login-b-head p { color: var(--slate-500); font-size: 14px; margin: 0; }
.login-b-foot { font-size: 13px; color: var(--slate-500); margin: 0; }
.login-b-foot a { color: var(--teal); font-weight: 600; text-decoration: none; }
.login-b-foot a:hover { text-decoration: underline; }
.login-b-footer {
  padding: 20px 48px; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--slate-500); letter-spacing: 0.08em;
  position: relative; z-index: 1;
}

/* Shared auth bits */
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; }
.login-link-mini {
  font-size: 12px; color: var(--teal); font-weight: 600; text-decoration: none;
}
.login-link-mini:hover { color: var(--teal-700); text-decoration: underline; }
.login-cta {
  width: 100%; justify-content: center; padding: 12px 16px;
  font-size: 14px; margin-top: 4px;
}
.login-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--slate-400);
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--slate-200);
}
.login-sso { width: 100%; justify-content: center; padding: 11px 16px; }
.login-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--slate-600); cursor: pointer; user-select: none;
  margin: -2px 0 4px;
}
.login-check input { accent-color: var(--teal); width: 14px; height: 14px; }
.login-error {
  background: var(--crimson-100); color: #a01c20;
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 13px; margin-bottom: 16px;
  border: 1px solid rgba(229,72,77,.3);
}
.login-success {
  background: var(--mint-100); color: var(--mint-600);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 13px; margin-bottom: 16px;
  border: 1px solid rgba(34,197,139,.3);
}

/* =============================================================
   COPILOTO MODAL — Spark Bot chat drawer
   ============================================================= */
.copiloto-modal {
  position: fixed; bottom: 0; right: 0; top: 0;
  width: 100%; max-width: 420px; background: #fff;
  border-left: 1px solid var(--slate-200); box-shadow: -8px 0 24px rgba(31,41,55,.16);
  z-index: 9999; display: flex; flex-direction: column;
  animation: copiloto-slide-in 280ms var(--ease-out);
}
@keyframes copiloto-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.copiloto-modal.hide {
  animation: copiloto-slide-out 280ms var(--ease-out);
}
@keyframes copiloto-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.copiloto-content { display: flex; flex-direction: column; height: 100%; }
.copiloto-head {
  padding: 16px 20px; border-bottom: 1px solid var(--slate-200);
  display: flex; justify-content: space-between; align-items: center;
}
.copiloto-head h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; margin: 0;
}
.copiloto-close {
  background: none; border: none; font-size: 24px; color: var(--slate-400);
  cursor: pointer; padding: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast);
}
.copiloto-close:hover { color: var(--ink); }
.copiloto-body {
  flex: 1; display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden;
}
.copiloto-mark {
  padding: 20px; text-align: center; background: var(--bone);
  border-bottom: 1px solid var(--slate-100);
}
.copiloto-messages {
  flex: 1; overflow-y: auto; padding: 20px; display: flex;
  flex-direction: column; gap: 12px;
}
.copiloto-msg-bot, .copiloto-msg-user {
  display: flex; gap: 8px; max-width: 85%;
}
.copiloto-msg-bot { align-self: flex-start; }
.copiloto-msg-user { align-self: flex-end; }
.copiloto-msg-bot p {
  background: var(--slate-100); color: var(--ink);
  padding: 10px 14px; border-radius: var(--radius-md);
  margin: 0; font-size: 13px; line-height: 1.4;
}
.copiloto-msg-user p {
  background: var(--teal); color: #fff;
  padding: 10px 14px; border-radius: var(--radius-md);
  margin: 0; font-size: 13px; line-height: 1.4;
}
.copiloto-input-wrap {
  padding: 16px 20px; border-top: 1px solid var(--slate-200);
  display: flex; gap: 8px; align-items: center;
  background: #fff;
}
.copiloto-input-wrap input {
  flex: 1; background: var(--mist); border: 1px solid var(--slate-200);
  border-radius: var(--radius-md); padding: 10px 12px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.copiloto-input-wrap input:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,164,.18);
}
.copiloto-input-wrap input::placeholder { color: var(--slate-400); }
.copiloto-send {
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); transition: background var(--dur-fast);
  padding: 0;
}
.copiloto-send:hover { background: var(--mist); }
.copiloto-send:active { transform: scale(0.95); }

/* =============================================================
   TOASTS — Notificaciones con animación de Spark Bot
   ============================================================= */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  display: flex; flex-direction: column; gap: 12px; max-width: 420px;
}
.toast {
  background: var(--surface); border: 1px solid var(--slate-200);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start;
  animation: toast-slide-in 300ms var(--ease-out);
  min-width: 300px;
}
.toast.toast-success { border-left: 4px solid var(--mint); }
.toast.toast-error { border-left: 4px solid var(--crimson); }
.toast.toast-info { border-left: 4px solid var(--teal); }
@keyframes toast-slide-in {
  from { transform: translateX(450px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast-icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
}
.toast-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.toast-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.toast-message { font-size: 13px; color: var(--slate-600); }
.toast-close {
  background: none; border: none; color: var(--slate-400); cursor: pointer;
  padding: 0; width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.toast-close:hover { color: var(--ink); }

/* Toast con Spark Bot animado (venta confirmada) */
.toast-spark { display: flex; gap: 12px; align-items: center; }
.toast-spark .spark-mark {
  width: 48px; height: 48px; flex-shrink: 0;
  animation: sparkbot-pop 400ms var(--ease-spark);
}
@keyframes sparkbot-pop {
  0% { transform: scale(0.6) rotateZ(-10deg); opacity: 0; }
  50% { transform: scale(1.1) rotateZ(5deg); }
  100% { transform: scale(1) rotateZ(0deg); opacity: 1; }
}
.toast-spark .spark-content { flex: 1; }
.toast-spark .spark-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--coral); margin: 0 0 4px;
}
.toast-spark .spark-message { font-size: 13px; color: var(--slate-600); margin: 0; }