:root {
  --bg:        #0d0d0d;
  --bg2:       #1a1a1a;
  --bg3:       #222222;
  --card:      #1e1e1e;
  --border:    #2a2a2a;
  --green:     #39ff14;
  --green-dim: #2acc0f;
  --green-glow:rgba(57,255,20,0.15);
  --text:      #f0f0f0;
  --muted:     #888888;
  --danger:    #ff3333;
  --warning:   #ffaa00;
  --info:      #00aaff;
  --radius:    10px;
  --font-head: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --bg:        #f4f6f5;
  --bg2:       #ffffff;
  --bg3:       #eef1f0;
  --card:      #ffffff;
  --border:    #e1e5e3;
  --green:     #17a24a;
  --green-dim: #12873c;
  --green-glow:rgba(23,162,74,0.12);
  --text:      #1a1e1c;
  --muted:     #6b7370;
  --danger:    #e0342f;
  --warning:   #c9820a;
  --info:      #0e86c9;
}
[data-theme="light"] .ts-login-bg,
[data-theme="light"] body { box-shadow:none; }
[data-theme="light"] .ts-brand { color: var(--green-dim); }
[data-theme="light"] .ts-logo { border-color: var(--green-dim); }
[data-theme="light"] .ts-card-stat .ts-stat-val,
[data-theme="light"] .ts-cart-total,
[data-theme="light"] .ts-cart-header { color: var(--green-dim); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; display: flex; flex-direction: column; min-height: 100vh; transition: background-color .2s ease, color .2s ease; }
body, .ts-navbar, .ts-sidebar, .ts-card, .ts-input, .ts-btn, .ts-btn-nav, .ts-nav-link, .ts-prod-card, .ts-cart, .ts-cart-item, .ts-login-card, .ts-table th, .ts-table td {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* ── NAVBAR ── */
.ts-navbar { display:flex; align-items:center; justify-content:space-between; background:var(--bg2); border-bottom:1px solid var(--border); padding:0 1.5rem; height:60px; position:sticky; top:0; z-index:100; }
.ts-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--green); letter-spacing:1px; }
.ts-logo { height:38px; width:38px; object-fit:cover; border-radius:50%; border:2px solid var(--green); }
.ts-nav-right { display:flex; align-items:center; gap:.8rem; }
.ts-user { font-size:.85rem; color:var(--muted); }
.ts-btn-nav { width:34px; height:34px; border-radius:8px; background:var(--bg3); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:.2s; }
.ts-btn-nav:hover { border-color:var(--green); color:var(--green); }
.ts-btn-danger:hover { border-color:var(--danger); color:var(--danger); }

/* ── LAYOUT ── */
.ts-wrapper { display:flex; flex:1; }
.ts-content { flex:1; padding:1.5rem; overflow-x:hidden; }

/* ── SIDEBAR ── */
.ts-sidebar { width:220px; background:var(--bg2); border-right:1px solid var(--border); padding:1rem 0; position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto; flex-shrink:0; }
.ts-nav { list-style:none; }
.ts-nav-link { display:flex; align-items:center; gap:.7rem; padding:.6rem 1.2rem; color:var(--muted); text-decoration:none; font-size:.88rem; transition:.2s; border-left:3px solid transparent; }
.ts-nav-link:hover, .ts-nav-link.active { color:var(--text); background:var(--bg3); border-left-color:var(--green); }
.ts-nav-link.ts-nav-highlight { color:var(--green); }
.ts-nav-link.ts-nav-highlight:hover { background:var(--green-glow); }
.ts-nav-link i { font-size:1rem; width:18px; text-align:center; }
.ts-nav-sep { font-size:.65rem; letter-spacing:.1em; color:var(--muted); padding:.8rem 1.2rem .3rem; text-transform:uppercase; font-family:var(--font-head); }

/* ── CARDS ── */
.ts-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; }
.ts-card-stat { border-left:3px solid var(--green); }
.ts-card-stat .ts-stat-val { font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--green); line-height:1; }
.ts-card-stat .ts-stat-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.ts-card-stat .ts-stat-sub { font-size:.8rem; color:var(--muted); margin-top:.3rem; }

/* ── TABLA ── */
.ts-table { width:100%; border-collapse:collapse; }
.ts-table th { background:var(--bg3); color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.7rem 1rem; font-weight:500; border-bottom:1px solid var(--border); }
.ts-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border); color:var(--text); font-size:.88rem; vertical-align:middle; }
.ts-table tbody tr:hover { background:var(--bg3); }
.ts-table tbody tr:last-child td { border-bottom:none; }

/* ── BADGES ── */
.ts-badge { display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:20px; font-size:.72rem; font-weight:600; letter-spacing:.03em; }
.ts-badge-green  { background:rgba(57,255,20,.15);  color:var(--green); }
.ts-badge-red    { background:rgba(255,51,51,.15);   color:var(--danger); }
.ts-badge-yellow { background:rgba(255,170,0,.15);   color:var(--warning); }
.ts-badge-blue   { background:rgba(0,170,255,.15);   color:var(--info); }
.ts-badge-purple { background:rgba(168,85,247,.15);  color:#a855f7; }
.ts-badge-gray   { background:var(--bg3);             color:var(--muted); }

/* ── BOTONES ── */
.ts-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem 1rem; border-radius:8px; border:none; font-size:.85rem; font-weight:500; cursor:pointer; transition:.2s; text-decoration:none; }
.ts-btn-primary { background:var(--green); color:#000; font-weight:700; }
.ts-btn-primary:hover { background:var(--green-dim); color:#000; }
.ts-btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.ts-btn-outline:hover { border-color:var(--green); color:var(--green); }
.ts-btn-danger-o { background:transparent; border:1px solid var(--border); color:var(--muted); }
.ts-btn-danger-o:hover { border-color:var(--danger); color:var(--danger); }
.ts-btn-sm { padding:.3rem .7rem; font-size:.78rem; }
.ts-btn-lg { padding:.7rem 1.6rem; font-size:1rem; border-radius:10px; }
.ts-btn-icon { width:32px; height:32px; padding:0; justify-content:center; }

/* ── FORMULARIOS ── */
.ts-form-label { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; display:block; }
.ts-input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:.5rem .8rem; font-size:.88rem; transition:.2s; }
.ts-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.ts-input::placeholder { color:var(--muted); }
select.ts-input option { background:var(--bg2); }

/* ── PAGE HEADER ── */
.ts-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.ts-page-title { font-family:var(--font-head); font-size:1.6rem; font-weight:700; color:var(--text); letter-spacing:.03em; }
.ts-page-title span { color:var(--green); }

/* ── ALERTAS ── */
.ts-alert { padding:.8rem 1rem; border-radius:8px; font-size:.88rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.ts-alert-success { background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.3); color:var(--green); }
.ts-alert-danger  { background:rgba(255,51,51,.1);  border:1px solid rgba(255,51,51,.3);  color:var(--danger); }
.ts-alert-warning { background:rgba(255,170,0,.1);  border:1px solid rgba(255,170,0,.3);  color:var(--warning); }

/* ── GRID PRODUCTOS (VENTAS) ── */
.ts-prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:1rem; }
.ts-filtros-venta { position:sticky; top:0; z-index:5; background:var(--bg); padding:.9rem 0 1rem; margin:0 0 .2rem; border-bottom:1px solid var(--border); }
.ts-prod-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; cursor:pointer; transition:.2s; text-align:center; }
.ts-prod-card:hover { border-color:var(--green); box-shadow:0 0 12px var(--green-glow); transform:translateY(-2px); }
.ts-prod-card img { width:100%; height:100px; object-fit:cover; border-radius:6px; margin-bottom:.5rem; background:var(--bg2); }
.ts-prod-card .ts-prod-name { font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.25rem; line-height:1.2; }
.ts-prod-card .ts-prod-price { font-family:var(--font-head); font-size:1rem; color:var(--green); font-weight:700; }
.ts-prod-card .ts-prod-stock { font-size:.72rem; color:var(--muted); }
.ts-prod-card.sin-stock { opacity:.4; cursor:not-allowed; pointer-events:none; }
.ts-prod-img-wrap { position:relative; margin-bottom:.5rem; }
.ts-prod-img-wrap img { margin-bottom:0; }
.ts-prod-zoom {
  position:absolute; top:.35rem; right:.35rem;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; cursor:pointer; padding:0; z-index:2;
  transition:.15s;
}
.ts-prod-zoom:hover { background:var(--green); border-color:var(--green); color:#000; }

/* ── CARRITO ── */
.ts-cart { background:var(--bg2); border-left:1px solid var(--border); width:320px; display:flex; flex-direction:column; height:calc(100vh - 60px); position:sticky; top:60px; }
.ts-cart-header { padding:1rem 1.2rem; border-bottom:1px solid var(--border); font-family:var(--font-head); font-size:1.1rem; font-weight:700; color:var(--green); }
.ts-cart-items { flex:1; overflow-y:auto; padding:.8rem; }
.ts-cart-item { background:var(--bg3); border-radius:8px; padding:.6rem .8rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.ts-cart-item-name { flex:1; font-size:.82rem; font-weight:500; }
.ts-cart-item-price { font-size:.8rem; color:var(--green); font-family:var(--font-head); white-space:nowrap; }
.ts-cart-footer { padding:1rem 1.2rem; border-top:1px solid var(--border); }
.ts-cart-total { font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:var(--green); margin-bottom:.8rem; }

/* ── LOGIN ── */
.ts-login-bg { min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.ts-login-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:2.5rem; width:380px; box-shadow:0 0 40px rgba(57,255,20,.08); }
.ts-login-logo { text-align:center; margin-bottom:2rem; }
.ts-login-logo img { height:80px; border-radius:50%; border:3px solid var(--green); box-shadow:0 0 20px var(--green-glow); }

/* ── MISC ── */
.gap-1 { gap:.4rem; }
.gap-2 { gap:.8rem; }
.ts-divider { border:none; border-top:1px solid var(--border); margin:1rem 0; }
.text-green { color:var(--green); }
.text-muted-ts { color:var(--muted); }
.fw-head { font-family:var(--font-head); font-weight:700; }

/* ── SUBPESTAÑAS (ej: Inventario / Historial) ── */
.ts-subtabs { display:flex; gap:.4rem; border-bottom:1px solid var(--border); }
.ts-subtab { display:inline-flex; align-items:center; padding:.6rem 1.1rem; font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; transition:.2s; }
.ts-subtab:hover { color:var(--text); background:var(--bg3); }
.ts-subtab.active { color:var(--green); border-bottom-color:var(--green); background:var(--green-glow); }

/* ── BUSCADOR CON AUTOCOMPLETADO (ej: Compras) ── */
.ts-autocomplete-list { display:none; position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:20; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,.25); max-height:260px; overflow-y:auto; }
.ts-autocomplete-list.show { display:block; }
.ts-autocomplete-item { padding:.55rem .8rem; cursor:pointer; font-size:.85rem; border-bottom:1px solid var(--border); }
.ts-autocomplete-item:last-child { border-bottom:none; }
.ts-autocomplete-item:hover { background:var(--green-glow); }

/* ── INDICADOR DE PASOS (ej: Nueva Venta) ── */
.ts-steps { display:flex; align-items:center; gap:.75rem; }
.ts-step { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--muted); cursor:default; }
.ts-step-num { width:26px; height:26px; border-radius:50%; background:var(--bg3); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; transition:.2s; }
.ts-step.active { color:var(--text); }
.ts-step.active .ts-step-num { background:var(--green); border-color:var(--green); color:#fff; }
.ts-step.done { color:var(--green); cursor:pointer; }
.ts-step.done .ts-step-num { background:var(--green-glow); border-color:var(--green); color:var(--green); }
.ts-step.done:hover { text-decoration:underline; }
.ts-step-line { flex:1; max-width:60px; height:1.5px; background:var(--border); }

/* ── MODAL METODO DE PAGO ── */
.ts-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; align-items:center; justify-content:center; padding:1rem; }
.ts-modal-box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:400px; padding:1.4rem; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.ts-modal-header { display:flex; align-items:center; font-weight:700; font-size:1.05rem; margin-bottom:.3rem; }
.ts-modal-close { margin-left:auto; background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; }
.ts-modal-close:hover { color:var(--text); }
.ts-pago-total { color:var(--muted); font-size:.85rem; margin-bottom:1rem; }
.ts-pago-total span { color:var(--green); font-weight:700; font-family:var(--font-head); font-size:1.1rem; }
.ts-pago-opciones { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ts-pago-btn { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.1rem .5rem; background:var(--bg3); border:1.5px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer; transition:.15s; text-align:center; line-height:1.2; }
.ts-pago-btn i { font-size:1.5rem; color:var(--green); }
.ts-pago-btn:hover { border-color:var(--green); background:var(--green-glow); transform:translateY(-1px); }

/* ── TOQUES ESTÉTICOS ── */
.ts-card { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-theme="light"] .ts-card { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ts-btn:active { transform: translateY(1px); }
.ts-btn:disabled, .ts-input:disabled, .ts-input[readonly] { cursor:not-allowed; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }

/* ── SELECTOR DE TEMA (Configuración) ── */
.ts-theme-options { display:flex; gap:1rem; flex-wrap:wrap; }
.ts-theme-option { flex:1; min-width:140px; border:2px solid var(--border); border-radius:var(--radius); padding:1rem; cursor:pointer; background:var(--bg3); text-align:center; transition:.2s; }
.ts-theme-option:hover { border-color:var(--green); }
.ts-theme-option.active { border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.ts-theme-swatch { width:100%; height:44px; border-radius:8px; margin-bottom:.6rem; border:1px solid var(--border); }
.ts-theme-swatch.swatch-dark { background:linear-gradient(135deg,#0d0d0d 50%,#1e1e1e 50%); }
.ts-theme-swatch.swatch-light { background:linear-gradient(135deg,#f4f6f5 50%,#ffffff 50%); }
.ts-theme-option .ts-theme-label { font-size:.85rem; font-weight:600; }
.ts-theme-option .ts-theme-check { color:var(--green); font-size:.75rem; margin-top:.3rem; visibility:hidden; }
.ts-theme-option.active .ts-theme-check { visibility:visible; }

/* ══════════════════════════════════════════════
   RESPONSIVE — CELULAR / TABLET (≤ 768px)
   ══════════════════════════════════════════════ */
.ts-nav-left { display:flex; align-items:center; gap:.6rem; }
.ts-hamburger { display:none; }
.ts-sidebar-overlay { display:none; }

@media (max-width: 768px) {

  /* Navbar */
  .ts-navbar { padding:0 .8rem; }
  .ts-hamburger { display:flex; }
  .ts-brand span { display:none; } /* deja solo el logo, ahorra espacio */
  .ts-user { display:none; } /* el nombre ya se ve en Perfil */
  .ts-nav-right { gap:.5rem; }

  /* Sidebar off-canvas */
  .ts-sidebar {
    position:fixed; top:60px; left:-260px; width:240px;
    height:calc(100vh - 60px); z-index:150;
    transition:left .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.35);
  }
  .ts-sidebar.ts-sidebar-open { left:0; }
  .ts-sidebar-overlay.show {
    display:block; position:fixed; top:60px; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.5); z-index:140;
  }

  /* Contenido */
  .ts-wrapper { flex-direction:column; }
  .ts-content { padding:1rem; width:100%; }
  .ts-page-header { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .ts-page-title { font-size:1.3rem; }

  /* Tablas: si no caben, la tarjeta que las contiene scrollea en horizontal
     en vez de romper el layout de la página */
  .ts-card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ts-table { min-width:560px; }

  /* Tarjetas de estadísticas / stat cards apiladas */
  .ts-card-stat .ts-stat-val { font-size:1.6rem; }

  /* Grid de productos (punto de venta) más compacto */
  .ts-prod-grid { grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:.6rem; }
  .ts-prod-card img { height:70px; }

  /* Punto de venta: carrito pasa de panel lateral a bloque debajo del catálogo */
  .ts-cart {
    width:100%; height:auto; position:static; border-left:none;
    border-top:1px solid var(--border);
  }
  .ts-cart-items { max-height:260px; }

  /* Formularios: los botones de acción se apilan a lo ancho */
  .ts-btn-lg { width:100%; justify-content:center; }

  /* Modal de pago */
  .ts-modal-box { max-width:92vw; }
  .ts-pago-opciones { grid-template-columns:1fr 1fr; gap:.5rem; }

  /* Login */
  .ts-login-card { width:92vw; padding:1.8rem; }

  /* Pasos (ej: Nueva Venta) permiten scroll horizontal si no caben */
  .ts-steps { overflow-x:auto; padding-bottom:.3rem; }
}

@media (max-width: 420px) {
  .ts-prod-grid { grid-template-columns:repeat(auto-fill, minmax(95px,1fr)); }
  .ts-theme-option { min-width:100%; }
}