:root{
  --bg:#0b1020; --surface:rgba(255,255,255,.04); --text:#e6ecff; --muted:#8EA0C2;
  --border:rgba(255,255,255,.08); --primary:#7c5cff; --accent:#12d0a3; --outline:#7c5cff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f9ff; --surface:#ffffff; --text:#111827; --muted:#5b6b86; --border:#d9e1ee;
    --primary:#5b43e6; --accent:#10b896; --outline:#5b43e6;
  }
}
:root[data-theme="light"]{ --bg:#f7f9ff; --surface:#fff; --text:#111827; --muted:#5b6b86; --border:#d9e1ee; --primary:#5b43e6; --accent:#10b896; --outline:#5b43e6; }
:root[data-theme="dark"]{ --bg:#0b1020; --surface:rgba(255,255,255,.04); --text:#e6ecff; --muted:#8EA0C2; --border:rgba(255,255,255,.08); --primary:#7c5cff; --accent:#12d0a3; --outline:#7c5cff; }
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial;color:var(--text);background:var(--bg);
  background: radial-gradient(1200px 900px at 10% -10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%), radial-gradient(900px 900px at 110% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #0a0f22), var(--bg) 80%);}
a{color:#cfe0ff;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}.brand .logo{width:28px;height:28px}.brand .name{font-weight:800;letter-spacing:.3px;font-size:20px}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}
.grid{display:grid;gap:16px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero h1{font-size:40px;margin:0 0 10px 0}
.gradient{background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 50%, white), color-mix(in srgb, var(--accent) 50%, white));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 12px;border-radius:20px;cursor:pointer}
.chip.selected{background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent));border-color:transparent}
.footer{border-top:1px solid var(--border);margin-top:28px;padding:18px 0;color:#cfe0ff8c;font-size:13px}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.checks label{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:var(--surface)}
.row{display:grid;grid-template-columns:220px 1fr;gap:12px;align-items:center}
.param-name{font-weight:600;color:var(--text)}
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 12px;border-radius:10px;display:inline-block;cursor:pointer}
.btn.primary{background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent));border-color:transparent}
select, input, textarea {border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 10px;border-radius:10px}
select:focus, input:focus, .btn:focus{ outline:2px solid var(--outline); outline-offset:2px; }
@media (max-width:980px){.hero{grid-template-columns:1fr}}
@media (max-width:640px){.row{grid-template-columns:1fr}.param-name{margin-bottom:4px}}


/* -- HERO BACKGROUND (Agata) -- */
/* Hero background on home (index.html) */
.hero-agata {
  position: relative;
  min-height: clamp(320px, 48vh, 520px);
  display: grid;
  place-items: center;
  text-align: center;
  background-color: #0b1220; /* fallback */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767px) {
  .hero-agata { background-image: url('assets/img/hero/hero-mobile.webp'); }
  .no-webp .hero-agata { background-image: url('assets/img/hero/hero-mobile.jpg'); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-agata { background-image: url('assets/img/hero/hero-tablet.webp'); }
  .no-webp .hero-agata { background-image: url('assets/img/hero/hero-tablet.jpg'); }
}
@media (min-width: 1280px) and (max-width: 1919px) {
  .hero-agata { background-image: url('assets/img/hero/hero-desktop.webp'); }
  .no-webp .hero-agata { background-image: url('assets/img/hero/hero-desktop.jpg'); }
}
@media (min-width: 1920px) {
  .hero-agata { background-image: url('assets/img/hero/hero-xl.webp'); }
  .no-webp .hero-agata { background-image: url('assets/img/hero/hero-xl.jpg'); }
}
.hero-agata .hero-content {
  padding: 24px;
}
.hero-agata .hero-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.hero-agata .hero-sub {
  margin-top: 8px;
  font-size: clamp(.95rem, 2vw, 1.1rem);
  color: var(--muted);
}


/* -- PAGE BACKGROUND (Agata, fixed) -- */
/* Fondo fijo por CSS sin desplazar contenido (usa body.page-bg-agata::before) */
body.page-bg-agata::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-color:#0b1220; /* fallback */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;
}

/* Breakpoints con assets */
@media (max-width:767px){
  body.page-bg-agata::before{background-image:url('assets/img/hero/hero-mobile.webp');}
  .no-webp body.page-bg-agata::before{background-image:url('assets/img/hero/hero-mobile.jpg');}
}
@media (min-width:768px) and (max-width:1279px){
  body.page-bg-agata::before{background-image:url('assets/img/hero/hero-tablet.webp');}
  .no-webp body.page-bg-agata::before{background-image:url('assets/img/hero/hero-tablet.jpg');}
}
@media (min-width:1280px) and (max-width:1919px){
  body.page-bg-agata::before{background-image:url('assets/img/hero/hero-desktop.webp');}
  .no-webp body.page-bg-agata::before{background-image:url('assets/img/hero/hero-desktop.jpg');}
}
@media (min-width:1920px){
  body.page-bg-agata::before{background-image:url('assets/img/hero/hero-xl.webp');}
  .no-webp body.page-bg-agata::before{background-image:url('assets/img/hero/hero-xl.jpg');}
}

/* Opcional: leve overlay para legibilidad */
body.page-bg-agata::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%, rgba(2,6,23,.0) 0%, rgba(2,6,23,.25) 60%, rgba(2,6,23,.55) 100%);
}


/* -- RULES GRID STYLES -- */
.rules-section{max-width:1100px;margin:40px auto;padding:0 16px;}
.rules-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.rule-card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--elev);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-height:140px;}
.rule-card h3{font-size:1rem;font-weight:700;margin:0;}
.rule-meta{font-size:.85rem;color:var(--muted);}
.rule-actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;}
.rule-actions .btn{padding:8px 10px;border-radius:8px;}
@media (max-width: 480px){
  .rules-grid{grid-template-columns:1fr;gap:12px;}
  .rule-card{padding:12px;}
}


/* -- RULES BADGES STYLES -- */
.rule-title-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rule-badges{display:flex;gap:8px;}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:700;border:1px solid var(--border);background:var(--card);}
.status-active{color:#22c55e;border-color:#164e32;background:rgba(22,78,50,.15);}
.status-inactive{color:#ef4444;border-color:#7f1d1d;background:rgba(127,29,29,.15);}
.status-paused{color:#f59e0b;border-color:#7c2d12;background:rgba(124,45,18,.15);}
.rules-header small.rule-subtitle{color:var(--muted);}


/* -- MODULES SUITE GRID -- */
.modules-section{max-width:1100px;margin:40px auto;padding:0 16px;}
.modules-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.module-card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--elev);padding:16px;display:flex;flex-direction:column;gap:8px;min-height:120px;transition:transform .08s ease, box-shadow .2s ease;}
.module-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35);}
.module-card h3{font-size:1rem;margin:0;font-weight:800;}
.module-card p{margin:0;color:var(--muted);font-size:.9rem;}
.module-card a.stretched{text-decoration:none;color:inherit;display:block}
.module-card .go{margin-top:auto;align-self:flex-start} 
.module-card .go.btn{padding:8px 12px;border-radius:10px;}
@media (max-width: 480px){
  .modules-grid{grid-template-columns:1fr;gap:12px;}
  .module-card{padding:12px;}
}


/* -- CONNECT PAGE STYLES -- */
.connect-section{max-width:1100px;margin:0 auto 48px;padding:0 16px;}
.connect-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.connect-card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--elev);padding:16px;}
.connect-card h2{margin:0 0 6px 0;font-size:1.1rem;font-weight:800;}
.connect-card .muted{color:var(--muted);margin:0 0 12px 0;}
.connect-figure{margin:0;display:grid;gap:8px;}
.connect-figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);box-shadow:var(--elev);background:#0b1220;}
.connect-figure figcaption{color:var(--muted);font-size:.9rem;}


/* -- CONNECT ENDPOINTS STYLES -- */
.api-table{width:100%;border-collapse:collapse;background:var(--card);}
.api-table th,.api-table td{padding:10px 12px;border:1px solid var(--border);text-align:left;vertical-align:top;}
.api-table th{background:rgba(255,255,255,.02);font-weight:700;}
.api-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.95em;}
.cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cta-row .btn{padding:8px 12px;border-radius:10px;}


/* -- CONNECT TEXT COLOR OVERRIDE -- */
.connect-page .page-hero h1,
.connect-page .page-hero .sub,
.connect-page .connect-section,
.connect-page .connect-section h2,
.connect-page .connect-section p,
.connect-page .connect-section .muted,
.connect-page .connect-figure figcaption,
.connect-page .api-table th,
.connect-page .api-table td { color:#fff !important; }


/* -- LIFE TABLE STYLES -- */
.page-hero{max-width:1100px;margin:32px auto 16px;padding:0 16px;}
.page-hero h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:0;}
.page-hero .sub{color:var(--muted);margin-top:6px;}
.life-section{max-width:1100px;margin:0 auto 48px;padding:0 16px;}
.life-table{width:100%;border-collapse:collapse;background:var(--card);}
.life-table th,.life-table td{padding:10px 12px;border:1px solid var(--border);text-align:left;vertical-align:top;}
.life-table th{background:rgba(255,255,255,.02);font-weight:700;position:sticky;top:0;z-index:1;}
.life-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;box-shadow:var(--elev);}


/* -- LIFE UX ENHANCEMENTS -- */
.life-controls{max-width:1100px;margin:8px auto 16px;padding:0 16px;}
.life-controls .controls-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.life-controls label{display:flex;flex-direction:column;gap:6px;color:var(--muted);}
.life-controls select,.life-controls input[type=search]{background:var(--card);border:1px solid var(--border);color:inherit;border-radius:10px;padding:8px 10px;min-width:160px}
.life-controls .search{margin-left:auto}
.life-controls .exports{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
@media (max-width: 640px){
  .life-table-wrap{display:none}
  .life-cards{display:grid;grid-template-columns:1fr;gap:12px;max-width:1100px;margin:0 auto 48px;padding:0 16px;}
  .life-card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--elev);padding:12px;display:grid;gap:6px}
  .life-card .row{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:start}
  .life-card .k{color:var(--muted);font-size:.85rem}
}
@media (min-width: 641px){
  .life-cards{display:none}
}