/* =====================================================================
   DHRU · Tema "Circuit"  (default7 / store_default7)
   - Un solo diseño para TODO el servidor (home, login, registro, cuenta, tienda)
   - Modo claro / oscuro con variables CSS  ->  html[data-theme="light|dark"]
   - Líneas de circuito animadas (canvas #circuit-bg + franjas CSS)
   - NO modifica ni reemplaza las plantillas originales (default, default2..6)
   ===================================================================== */

/* ---------- 1. Variables de color ---------- */
:root,
html[data-theme="light"]{
  --bg:#eef3fb; --bg-2:#e3ebf7; --surface:rgba(255,255,255,.86); --surface-solid:#ffffff;
  --text:#0f1a2e; --muted:#5b6b86; --link:#0369a1; --border:rgba(15,40,90,.13);
  --accent:#0ea5e9; --accent-2:#6366f1; --accent-text:#ffffff;
  --grad:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);
  --ring:0 0 0 3px rgba(14,165,233,.28);
  --shadow:0 8px 28px rgba(15,40,90,.08); --shadow-hover:0 12px 34px rgba(14,165,233,.22);
  --header-bg:rgba(255,255,255,.80); --input-bg:#ffffff; --stripe:rgba(15,40,90,.04); --hover:rgba(14,165,233,.09);
  --grid:rgba(14,116,200,.06);
  --glow-a:rgba(14,165,233,.16); --glow-b:rgba(99,102,241,.14);
  --circuit-line:rgba(14,116,200,.17); --circuit-node:rgba(14,116,200,.42);
  --circuit-pulse:#0ea5e9; --circuit-pulse-2:#6366f1;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#070b16; --bg-2:#0b1224; --surface:rgba(15,23,42,.84); --surface-solid:#101a30;
  --text:#e6edf9; --muted:#93a3c0; --link:#67e8f9; --border:rgba(120,160,255,.17);
  --accent:#22d3ee; --accent-2:#8b5cf6; --accent-text:#04111f;
  --grad:linear-gradient(135deg,#22d3ee 0%,#8b5cf6 100%);
  --ring:0 0 0 3px rgba(34,211,238,.28);
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-hover:0 0 26px rgba(34,211,238,.25);
  --header-bg:rgba(8,13,26,.82); --input-bg:#0b1326; --stripe:rgba(255,255,255,.035); --hover:rgba(34,211,238,.10);
  --grid:rgba(90,150,255,.07);
  --glow-a:rgba(34,211,238,.13); --glow-b:rgba(139,92,246,.16);
  --circuit-line:rgba(90,150,255,.15); --circuit-node:rgba(34,211,238,.5);
  --circuit-pulse:#22d3ee; --circuit-pulse-2:#a78bfa;
  color-scheme:dark;
}

/* ---------- 2. Fondo global ---------- */
html{
  background-color:var(--bg) !important;
  background-image:
    radial-gradient(900px 500px at 12% -10%,var(--glow-a),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,var(--glow-b),transparent 60%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) !important;
  background-size:auto,auto,44px 44px,44px 44px !important;
  background-attachment:fixed !important;
}
html body{ background:transparent !important; color:var(--text);
  font-family:'myriad-pro',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
#circuit-bg{ position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
html body .bg-gray{ background:transparent !important; position:relative; z-index:1; }
html body footer, html body .footer-top{ position:relative; z-index:1; }

/* ---------- 3. Cabecera y menú ---------- */
html body header{ position:relative; z-index:50; background:var(--header-bg) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--border) !important; }
html body header .header-top,
html body header .header-middle,
html body header .header-bottom,
html body .header-bottom{ background:transparent !important; border-color:var(--border) !important; }
/* franja de luz que recorre la cabecera */
html body header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--accent) 18%,var(--accent-2) 50%,transparent 82%);
  background-size:220% 100%; animation:circuit-flow 7s linear infinite; }
@keyframes circuit-flow{ from{background-position:0% 0} to{background-position:220% 0} }

html body .navbar-brand{ color:var(--text) !important; font-weight:700; letter-spacing:.2px; }
html body header .nav-link,
html body header .navbar-expand-lg .navbar-nav .nav-link,
html body header .nav.navbar-light .nav-link,
html body header .nav.navbar-dark .nav-link,
html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-link,
html body header .text-muted{ color:var(--text) !important; }
html body header .navbar-expand-lg .navbar-nav .nav-item:hover .nav-link:not(.bg-secondary),
html body header .nav-link:hover{ color:var(--accent) !important; background:var(--hover) !important; border-radius:8px; }
html body header .navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before{ background:var(--grad) !important; height:2px; }
html body header .header-top .nav-item:hover{ background:transparent; }
html body .navbar-toggler{ color:var(--text); }

html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-link.bg-secondary,
html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-item:hover .nav-link.bg-secondary,
html body header .navbar-expand-lg .navbar-nav .nav-link.bg-secondary,
html body header a.btn.bg-secondary{ color:var(--accent-text) !important; background:var(--grad) !important; }

/* menús desplegables */
html body .dropdown-menu, html body header .dropdown-menu, html body .navbar-products .nav-item:hover,
html body .menu-column, html body .submenu-column, html body .serchcontent{
  background:var(--surface-solid) !important; color:var(--text) !important; border:1px solid var(--border) !important;
  border-radius:12px; box-shadow:var(--shadow) !important; }
html body .dropdown-item, html body .menu-column a, html body .submenu-column a{ color:var(--text) !important; }
html body .dropdown-item:hover, html body .dropdown-item:focus, html body .bg-hover:hover{
  background:var(--hover) !important; color:var(--accent) !important; border-radius:8px; }
html body .dropdown-header, html body .dropdown-divider{ color:var(--muted) !important; border-color:var(--border) !important; }

/* ---------- 4. Tipografía y enlaces ---------- */
html body a{ color:var(--link); }
html body a:hover{ color:var(--accent); }
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .h1,html body .h2,html body .h3,html body .h4,html body .h5,html body .h6,
html body h3.title,html body .double-border h5,html body .modal-title{ color:var(--text); }
html body .text-muted, html body small, html body .small{ color:var(--muted) !important; opacity:1; }
html body .breadcrumb, html body .breadcrumb a{ color:var(--muted); background:transparent; }
html body .breadcrumb a:hover{ color:var(--accent); }
html body .page-title{ position:relative; color:var(--text); padding-bottom:.6rem; }
html body h2.page-title::after{ content:""; position:absolute; left:0; bottom:0; width:120px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent)); background-size:200% 100%;
  animation:circuit-flow 4s linear infinite; }
html body hr{ border-color:var(--border); }

/* ---------- 5. Tarjetas ---------- */
html body .card, html body .card-product, html body .card-product .product-info, html body .list-group-item{
  background:var(--surface) !important; color:var(--text); border:1px solid var(--border) !important;
  border-radius:14px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html body .card .card, html body .modal .card{ box-shadow:none; }
html body .card-header, html body .card-footer{ background:transparent !important; border-color:var(--border) !important; color:var(--text); }
html body .card-product:hover, html body .card.card-hover:hover{ border-color:var(--accent) !important; box-shadow:var(--shadow-hover); transform:translateY(-2px); transition:all .25s ease; }
html body .bg-white, html body .bg-light{ background:var(--surface-solid) !important; color:var(--text); }
html body .border, html body .border-top, html body .border-bottom, html body .border-left, html body .border-right,
html body .border-gray{ border-color:var(--border) !important; }

/* ---------- 6. Botones ---------- */
html body .btn-primary, html body button.btn.btn-primary, html body .btn-success, html body button.btn.btn-success,
html body .bg-primary, html body .bg-secondary, html body a.btn.bg-secondary,
html body .btn-addtocart, html body .wizard .actions li a, html body .steps ul li.first a, html body .steps ul li.checked a{
  background:var(--grad) !important; color:var(--accent-text) !important; border:none !important; border-radius:10px;
  font-weight:600; position:relative; overflow:hidden; transition:box-shadow .25s,transform .15s,filter .25s; }
html body .btn-primary:hover, html body button.btn.btn-primary:hover, html body .btn-success:hover,
html body .bg-secondary:hover, html body .btn-addtocart:hover{ box-shadow:var(--shadow-hover); filter:brightness(1.06); transform:translateY(-1px); color:var(--accent-text) !important; }
html body .btn-primary::after, html body .btn-success::after, html body a.btn.bg-secondary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:btn-shine 4.5s ease-in-out infinite; }
@keyframes btn-shine{ 0%,60%{left:-60%} 100%{left:130%} }
html body .btn-secondary, html body button.btn.btn-secondary, html body .btn-light, html body .btn-default{
  background:var(--surface-solid) !important; color:var(--text) !important; border:1px solid var(--border) !important; border-radius:10px; }
html body .btn-outline-primary, html body .btn-outline-secondary{ color:var(--accent) !important; border:1px solid var(--accent) !important; background:transparent !important; border-radius:10px; }
html body .btn-outline-primary:hover, html body .btn-outline-secondary:hover{ background:var(--hover) !important; }
html body .text-primary{ color:var(--accent) !important; }
html body .navbar-mastermenu a.btn{ padding:.5rem 1rem; }

/* ---------- 7. Formularios ---------- */
html body .form-control, html body .input-group-text, html body select, html body textarea,
html body input[type=text], html body input[type=password], html body input[type=email], html body input[type=number],
html body .chosen-container-single .chosen-single, html body .chosen-container-multi .chosen-choices, html body .chosen-container .chosen-drop{
  background:var(--input-bg) !important; color:var(--text) !important; border:1px solid var(--border) !important; border-radius:10px; }
html body .form-control::placeholder, html body input::placeholder, html body textarea::placeholder{ color:var(--muted); opacity:.8; }
html body .form-control:focus, html body input:focus, html body select:focus, html body textarea:focus{
  border-color:var(--accent) !important; box-shadow:var(--ring) !important; outline:none; }
html body .form-control:disabled, html body .form-control[readonly]{ opacity:.7; }
html body label, html body .form-label{ color:var(--text); }
html body .chosen-container .chosen-results li{ color:var(--text); }
html body .chosen-container .chosen-results li.highlighted{ background:var(--grad) !important; color:var(--accent-text) !important; }
html body .custom-control-input:checked~.custom-control-label::before,
html body .custom-checkbox .custom-control-input:checked~.custom-control-label::before{ background:var(--accent) !important; border-color:var(--accent) !important; }
html body .checkbox .helper::before, html body .checkbox .helper::after{ border-color:var(--accent); }

/* ---------- 8. Tablas ---------- */
html body .table, html body .table td, html body .table th{ color:var(--text); border-color:var(--border) !important; background:transparent; }
html body .table thead th{ background:var(--hover) !important; color:var(--text); border-bottom:2px solid var(--accent) !important; }
html body .table-striped tbody tr:nth-of-type(odd){ background:var(--stripe) !important; }
html body .table-hover tbody tr:hover, html body .table tr.href:hover{ background:var(--hover) !important; }
html body .table-bordered, html body .table-bordered td, html body .table-bordered th{ border-color:var(--border) !important; }

/* ---------- 9. Modales ---------- */
html body .modal-content{ background:var(--surface-solid) !important; color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
html body .modal-header{ background:var(--surface-solid) !important; color:var(--text) !important; border-bottom:1px solid var(--border) !important; position:relative; }
html body .modal-header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); background-size:200% 100%; animation:circuit-flow 5s linear infinite; }
html body .modal-header .close, html body .close{ color:var(--text) !important; opacity:.8; text-shadow:none; }
html body .modal-footer{ border-top:1px solid var(--border); background:transparent; }
html body .modal-backdrop.show{ opacity:.6; }

/* ---------- 10. Pestañas, paginación, badges, alertas ---------- */
html body .nav-pills .nav-link.active, html body .nav-pills .show>.nav-link, html body ul.nav-pills.flex-nowrap .nav-link.active{
  background:var(--grad) !important; color:var(--accent-text) !important; border-color:var(--accent); }
html body .nav-tabs{ border-color:var(--border); }
html body .nav-tabs .nav-link.active{ background:var(--surface-solid); color:var(--accent); border-color:var(--border) var(--border) var(--surface-solid); }
html body .page-link{ background:var(--surface-solid); color:var(--link); border-color:var(--border); }
html body .page-item.active .page-link{ background:var(--grad); border-color:transparent; color:var(--accent-text); }
html body .alert{ border-radius:12px; border:1px solid var(--border); }
html body .progress{ background:var(--stripe); }
html body .progress-bar{ background:var(--grad); }
html body .badge-success{ background:#16a34a; } html body .badge-danger{ background:#dc2626; }
html body .badge-warning{ background:#f59e0b; color:#111; } html body .badge-info{ background:var(--accent); color:var(--accent-text); }

/* ---------- 11. Pie de página ---------- */
html body .footer-top{ background:var(--surface-solid) !important; border-top:1px solid var(--border) !important; color:var(--text); }
html body .footer-top a, html body .footer-top .nav-link{ color:var(--muted) !important; }
html body .footer-top a:hover{ color:var(--accent) !important; }
html body .footer-top .link-heading{ color:var(--text); }
html body .footer-top .link-heading:after{ background:var(--grad) !important; }
html body .footer-bottom{ background:var(--bg-2) !important; color:var(--muted); border-top:1px solid var(--border); }
html body .social-icons a{ color:var(--text) !important; }

/* ---------- 12. Botón flotante claro/oscuro ---------- */
html body button.theme-toggle, html body button[type="button"].theme-toggle{
  position:fixed; right:18px; bottom:18px; z-index:1040; width:46px; height:46px; min-width:46px; padding:0 !important;
  border-radius:50% !important; display:flex; align-items:center; justify-content:center; cursor:pointer; line-height:1;
  background:var(--surface-solid) !important; color:var(--accent) !important; border:1px solid var(--border) !important;
  box-shadow:var(--shadow-hover); transition:transform .2s,box-shadow .2s; }
html body button.theme-toggle:hover{ transform:scale(1.08) rotate(-8deg); }
html body button.theme-toggle:focus{ outline:none; box-shadow:var(--ring); }
.theme-toggle svg{ width:22px; height:22px; flex:0 0 22px; }
.theme-toggle .tt-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .tt-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .tt-moon{ display:none; }

/* ---------- 13. Login / registro (mismo diseño, sin variantes) ---------- */
html body .modal-body-login, html body .page-login .card, html body .page-register .card{ background:transparent; }

/* ---------- 14. Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  html body header::after, html body h2.page-title::after, html body .modal-header::after,
  html body .btn-primary::after, html body .btn-success::after, html body a.btn.bg-secondary::after{ animation:none !important; }
}
@media (max-width:991px){ html body button.theme-toggle{ right:12px; bottom:12px; } }