/*
Theme Name: The Glitch List
Theme URI: https://theglitchlist.com
Author: Jalvart Studio
Description: Tema propio de The Glitch List — tokens de diseno extraidos del sitio estatico original (2026-09-19). Terminal/dark theme, Space Grotesk + IBM Plex Sans/Mono, WooCommerce ready.
Version: 1.0.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: glitchlist
*/

:root{
  --void:#07080B;
  --panel:#0E1016;
  --panel-2:#12151D;
  --line:#1C2029;
  --line-soft:#15181F;
  --ink:#E8EAF0;
  --ink-2:#B4BCCC;
  --muted:#7C8598;
  --flux:#14F195;
  --pulse:#9945FF;
  --warn:#FFB627;
  --up:#00ff87;
  --down:#ff4d4d;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
  --gut:clamp(20px,5vw,64px);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%; opacity:.5;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut); position:relative; z-index:1}

h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(32px,5vw,52px)}
h2{font-size:clamp(24px,3.5vw,34px)}
p{margin:0 0 1em; color:var(--ink-2)}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(7,8,11,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.site-branding{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.02em}
.site-branding a{color:var(--ink)}
.site-branding .flux{color:var(--flux)}

.primary-nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0}
.primary-nav a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2);
}
.primary-nav a:hover{color:var(--flux)}

.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink); padding:8px 12px; border-radius:var(--r); font-family:var(--mono)}
@media(max-width:900px){
  .primary-nav{display:none}
  .nav-toggle{display:block}
  .primary-nav.is-open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    background:var(--panel); border-bottom:1px solid var(--line); padding:16px var(--gut);
  }
  .primary-nav.is-open ul{flex-direction:column; gap:16px}
}

/* ===== Hero / generic sections ===== */
.section{padding:64px 0}
.section-tight{padding:32px 0}
.hero{padding:96px 0 64px; text-align:left}
.hero p.lede{font-size:18px; max-width:60ch; color:var(--ink-2)}

.btn{
  display:inline-block; font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:12px 22px;
  border-radius:var(--r); border:1px solid var(--line); color:var(--ink);
  transition:border-color .15s, color .15s;
}
.btn:hover{border-color:var(--flux); color:var(--flux)}
.btn-primary{background:var(--flux); color:var(--void); border-color:var(--flux)}
.btn-primary:hover{filter:brightness(1.1); color:var(--void)}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:28px;
}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}

/* ===== Blog ===== */
.post-list{display:flex; flex-direction:column; gap:24px}
.post-card{border-bottom:1px solid var(--line); padding-bottom:24px}
.post-card h2{font-size:22px; margin-bottom:6px}
.post-card h2 a:hover{color:var(--flux)}
.post-meta{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:8px}

.single-post{max-width:72ch; margin:0 auto}
.single-post .post-meta{margin-bottom:32px}
.single-post h1{margin-bottom:8px}
.single-post img{border-radius:var(--r); margin:24px 0}

/* ===== WooCommerce overrides minimos ===== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin-bottom:20px;
}
.woocommerce ul.products li.product .price{font-family:var(--mono); color:var(--flux)}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--flux) !important; color:var(--void) !important;
  border-radius:var(--r) !important; font-family:var(--mono) !important;
  text-transform:uppercase; font-size:12.5px !important; letter-spacing:.04em;
  border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{filter:brightness(1.1)}
.woocommerce table.shop_table{border-color:var(--line) !important}
.woocommerce #content table.cart img{width:64px}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--line); padding:48px 0; margin-top:64px;
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}
.site-footer a:hover{color:var(--flux)}

/* ===== Ticker (heredado del sitio estatico, por si se reutiliza) ===== */
.ticker-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:clamp(.65rem,.8vw,.8rem)}
.ticker-table th{text-align:left; padding:.5rem .75rem; opacity:.4; font-weight:500; border-bottom:1px solid var(--line)}
.ticker-table td{padding:.6rem .75rem; border-bottom:1px solid var(--line-soft)}
.ticker-table .up{color:var(--up)}
.ticker-table .dn{color:var(--down)}

/* ===== TGL: Shop estilo software (lista compacta + indice lateral) ===== */
.woocommerce ul.products, .woocommerce-page ul.products{
  display:flex !important; flex-direction:column; gap:0 !important;
}
.woocommerce ul.products li.tgl-product-row,
.woocommerce-page ul.products li.tgl-product-row{
  display:flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 20px; margin:0 0 10px !important; width:100%; float:none;
}
.woocommerce ul.products li.tgl-product-row > a,
.woocommerce-page ul.products li.tgl-product-row > a{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:16px;
  flex:1;
  min-width:0;
  width:100%;
}
.tgl-product-thumb{flex:0 0 60px !important; width:60px !important;}
.tgl-product-thumb img{width:60px !important;height:60px !important;object-fit:cover;border-radius:8px;margin:0 !important;}
.tgl-product-info{flex:1;min-width:0}
.tgl-product-info h2{font-size:15px;margin:0 0 4px;font-family:var(--display);color:var(--ink);font-weight:600}
.tgl-product-info .tgl-excerpt{font-size:12.5px;color:var(--muted);margin:0 0 6px;line-height:1.4}
.tgl-product-meta{display:flex;align-items:center;gap:12px}
.tgl-product-meta .price{font-family:var(--mono);color:var(--flux);font-size:13px}
.tgl-product-meta .star-rating{display:none}
.tgl-product-action{flex:0 0 auto}
.tgl-product-action .button{white-space:nowrap; padding:8px 16px !important; font-size:11px !important}

.tgl-shop-layout{display:flex; gap:32px; align-items:flex-start; padding:40px 0}
.tgl-shop-sidebar{
  flex:0 0 220px; position:sticky; top:90px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px;
}
.tgl-shop-sidebar h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}
.tgl-shop-sidebar ul{list-style:none;margin:0 0 24px;padding:0}
.tgl-shop-sidebar li{margin-bottom:2px}
.tgl-shop-sidebar a{
  display:block; font-size:13px; color:var(--ink-2); padding:5px 8px; border-radius:4px;
}
.tgl-shop-sidebar a:hover, .tgl-shop-sidebar a.tgl-active{color:var(--flux); background:var(--panel-2)}
.tgl-shop-sidebar .tgl-cat-count{color:var(--muted); font-size:11px}
.tgl-shop-main{flex:1; min-width:0}
@media(max-width:900px){
  .tgl-shop-layout{flex-direction:column; padding:24px 0}
  .tgl-shop-sidebar{position:static; flex:1 1 auto; width:100%}
}

/* ===== TGL: ficha de producto individual, estilo software (imagen compacta) ===== */
.woocommerce div.product{
  display:flex !important; flex-wrap:wrap; gap:32px; align-items:flex-start;
}
.woocommerce div.product div.images{
  flex:0 0 340px !important; max-width:340px !important; margin:0 !important; width:340px !important;
}
.woocommerce div.product div.images img{
  border-radius:var(--r); border:1px solid var(--line);
}
.woocommerce div.product div.summary{
  flex:1 1 380px !important; min-width:280px; float:none !important; width:auto !important;
}

/* ===== TGL: My Account rediseño ===== */
.woocommerce-account .wrap{ padding:40px var(--gut); }
.woocommerce-account .woocommerce{
  display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap;
}
.woocommerce-MyAccount-navigation{
  flex:0 0 220px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:12px;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ margin:0 0 2px; }
.woocommerce-MyAccount-navigation a{
  display:block; padding:10px 14px; border-radius:6px;
  font-family:var(--mono); font-size:13px; color:var(--ink-2);
  transition:background .15s, color .15s;
}
.woocommerce-MyAccount-navigation a:hover{ background:var(--panel-2); color:var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--panel-2); color:var(--flux);
}
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--down) !important; }

.woocommerce-MyAccount-content{
  flex:1; min-width:280px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:28px 32px;
}
.woocommerce-MyAccount-content > p:first-child{
  font-size:15px; color:var(--ink-2); margin-bottom:20px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.woocommerce-MyAccount-content strong{ color:var(--flux); }
.woocommerce-MyAccount-content a{ color:var(--flux); text-decoration:underline; }
.woocommerce-MyAccount-content table.shop_table{
  border-collapse:collapse; width:100%; margin-top:12px;
}
.woocommerce-MyAccount-content table.shop_table th{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.woocommerce-MyAccount-content table.shop_table td{
  padding:12px; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status{
  font-family:var(--mono); font-size:12px; color:var(--flux);
}
.woocommerce-MyAccount-content form p.form-row{ margin-bottom:16px; }
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select{
  background:var(--void); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); padding:10px 12px; width:100%; font-family:var(--body);
}
.woocommerce-MyAccount-content input.input-text:focus{
  outline:none; border-color:var(--flux);
}
.woocommerce-MyAccount-content fieldset{
  border:1px solid var(--line); border-radius:8px; padding:16px; margin-top:16px;
}
.woocommerce-MyAccount-content legend{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:0 8px; }
@media(max-width:820px){
  .woocommerce-account .woocommerce{ flex-direction:column; }
  .woocommerce-MyAccount-navigation{ flex:1 1 auto; width:100%; }
}