/* ==========================================================================
   CC-Shops · tema «tech»
   Se activa con data-theme="tech" en <html>. Tienda y backoffice tienen
   cada uno su propio ajuste (tema_tienda y tema_backoffice).
   Oscuro con acentos neón: cian y violeta; superficies azul marino.
   ========================================================================== */

:root[data-theme="tech"] {
  color-scheme: dark;
  --bg: #060b1a;
  --bg-deep: #0a1230;
  --paper: #0c1633;
  --paper-2: #101d40;
  --ink: #e8efff;
  --ink-2: #b4c2e6;
  --muted: #8393bd;
  --line: rgba(110, 150, 255, .16);
  --line-strong: rgba(110, 150, 255, .30);
  --brand: #22d3ee;
  --brand-dark: #0891b2;
  --brand-deep: #050a1c;
  --brand-2: #8b5cf6;
  --brand-soft: rgba(34, 211, 238, .14);
  --brand-mist: rgba(34, 211, 238, .07);
  --accent: #d946ef;
  --accent-dark: #a21caf;
  --accent-soft: rgba(217, 70, 239, .16);
  --gold: #fbbf24;
  --gold-soft: rgba(251, 191, 36, .15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .15);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .14);
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .14);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 0 0 1px rgba(34, 211, 238, .08), 0 8px 24px -12px rgba(34, 211, 238, .25);
  --shadow-md: 0 0 0 1px rgba(110, 150, 255, .12), 0 24px 48px -24px rgba(34, 211, 238, .28);
  --shadow-lg: 0 0 0 1px rgba(139, 92, 246, .22), 0 40px 80px -40px rgba(139, 92, 246, .45);
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --serif: var(--sans);
}

:root[data-theme="tech"] body {
  background:
    radial-gradient(1000px 520px at 85% -12%, rgba(139, 92, 246, .20), transparent 60%),
    radial-gradient(800px 460px at -8% 8%, rgba(34, 211, 238, .12), transparent 60%),
    var(--bg);
  color: var(--ink);
}

/* Botones */
:root[data-theme="tech"] .btn-primary {
  background: linear-gradient(90deg, #22d3ee, #8b5cf6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(34, 211, 238, .6);
}
:root[data-theme="tech"] .btn-primary:hover { filter: brightness(1.08); }
:root[data-theme="tech"] .btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Campos */
:root[data-theme="tech"] .input,
:root[data-theme="tech"] .textarea,
:root[data-theme="tech"] select.input {
  background: #0a1433;
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme="tech"] .input::placeholder,
:root[data-theme="tech"] .textarea::placeholder { color: var(--muted); }

/* Superficies */
:root[data-theme="tech"] .admin-card,
:root[data-theme="tech"] .product-card,
:root[data-theme="tech"] .admin-kpi,
:root[data-theme="tech"] .modal,
:root[data-theme="tech"] .cart-drawer {
  background: linear-gradient(180deg, rgba(20, 34, 72, .92), rgba(12, 22, 51, .92));
  border: 1px solid var(--line);
  color: var(--ink);
}
:root[data-theme="tech"] .product-card:hover { border-color: rgba(34, 211, 238, .4); box-shadow: var(--shadow-md); }
:root[data-theme="tech"] .table th { color: var(--muted); }
:root[data-theme="tech"] .table td,
:root[data-theme="tech"] .table th { border-color: var(--line); }

/* ---------- Tienda ---------- */
:root[data-theme="tech"] .announcement {
  background: #040818;
  color: #cbd5f5;
  border-bottom: 1px solid var(--line);
}
:root[data-theme="tech"] .announcement span { color: #67e8f9; }
:root[data-theme="tech"] .site-header {
  background: rgba(6, 11, 26, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="tech"] .logo-mark {
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 24px -4px rgba(34, 211, 238, .6);
}
:root[data-theme="tech"] .cart-count,
:root[data-theme="tech"] .quick-add,
:root[data-theme="tech"] .checkout-step,
:root[data-theme="tech"] .success-mark,
:root[data-theme="tech"] .page-btn.is-active,
:root[data-theme="tech"] .timeline-step.is-done .timeline-dot {
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  border-color: transparent;
  color: #fff;
}
:root[data-theme="tech"] .success-mark { box-shadow: 0 0 40px -8px rgba(34, 211, 238, .7); }
:root[data-theme="tech"] .hero::before { background: radial-gradient(circle, rgba(34, 211, 238, .25) 0%, rgba(34, 211, 238, 0) 68%); }
:root[data-theme="tech"] .hero::after { background: radial-gradient(circle, rgba(139, 92, 246, .28) 0%, rgba(139, 92, 246, 0) 68%); }
:root[data-theme="tech"] .hero-blob { background: linear-gradient(150deg, rgba(34, 211, 238, .30), rgba(139, 92, 246, .30) 65%, rgba(217, 70, 239, .25)); }
:root[data-theme="tech"] .hero-stamp { background: linear-gradient(135deg, #22d3ee, #8b5cf6); color: #fff; }
:root[data-theme="tech"] .kardex-band {
  background: linear-gradient(135deg, #0b1a44, #130d3a);
  color: var(--ink);
  border: 1px solid var(--line);
}
:root[data-theme="tech"] .kardex-copy .eyebrow { color: #67e8f9; }
:root[data-theme="tech"] .kardex-copy p,
:root[data-theme="tech"] .kardex-point { color: var(--ink-2); }
:root[data-theme="tech"] .kardex-point svg { color: #67e8f9; }
:root[data-theme="tech"] .kardex-window { background: #0c1633; color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="tech"] .kardex-window-head { background: #0a1433; border-bottom-color: var(--line); }
:root[data-theme="tech"] .kardex-summary div { background: #0a1433; color: var(--ink); }
:root[data-theme="tech"] .kardex-table td { border-bottom-color: var(--line); }
:root[data-theme="tech"] .newsletter {
  background: linear-gradient(135deg, #0c1a44, #1a0f3f 60%, #0c1633);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
:root[data-theme="tech"] .site-footer { background: #040818; color: var(--ink-2); border-top: 1px solid var(--line); }
:root[data-theme="tech"] .footer-brand .logo-text strong,
:root[data-theme="tech"] .footer-col h3,
:root[data-theme="tech"] .footer-contact strong { color: var(--ink); }
:root[data-theme="tech"] .footer-bottom { border-top-color: var(--line); }
:root[data-theme="tech"] .pay-pill { border-color: var(--line-strong); color: var(--ink-2); }

/* ---------- Backoffice ---------- */
:root[data-theme="tech"] .admin-body { background: var(--bg); }
:root[data-theme="tech"] .admin-login {
  background:
    radial-gradient(circle at 20% 10%, rgba(34, 211, 238, .20) 0%, transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(139, 92, 246, .22) 0%, transparent 45%),
    var(--bg);
}
:root[data-theme="tech"] .admin-login-mark,
:root[data-theme="tech"] .admin-brand-mark {
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 22px -4px rgba(34, 211, 238, .6);
}
:root[data-theme="tech"] .admin-sidebar {
  background: linear-gradient(180deg, #070d22, #050a1c);
  border-right: 1px solid var(--line);
  color: var(--ink-2);
}
:root[data-theme="tech"] .admin-brand-text strong { color: var(--ink); }
:root[data-theme="tech"] .admin-brand-text span,
:root[data-theme="tech"] .admin-nav-label { color: var(--muted); }
:root[data-theme="tech"] .admin-nav a { color: var(--ink-2); }
:root[data-theme="tech"] .admin-nav a:hover { background: rgba(34, 211, 238, .08); color: var(--ink); }
:root[data-theme="tech"] .admin-nav a.is-active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .18));
  color: #fff;
  box-shadow: inset 2px 0 0 #22d3ee;
}
:root[data-theme="tech"] .admin-sidebar-foot { border-top-color: var(--line); }
:root[data-theme="tech"] .admin-sidebar-foot a { color: var(--ink-2); }
:root[data-theme="tech"] .admin-sidebar-foot a:hover { background: rgba(34, 211, 238, .08); color: var(--ink); }
:root[data-theme="tech"] .admin-kpi.is-brand {
  background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .25));
  border-color: rgba(34, 211, 238, .4);
}
:root[data-theme="tech"] .status-chip.is-active,
:root[data-theme="tech"] .admin-pagination .page-btn.is-active,
:root[data-theme="tech"] .admin-user-chip .avatar {
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  border-color: transparent;
  color: #fff;
}