/* THEME TOKENS */
:root{
  --bg: #ffffff;
  --card:#f6f6fb;
  --text:#12121a;
  --muted:#5a5a72;
  --line:#e7e7f2;

  --accent:#ff2db2;
  --accent2:#b600ff;
}

/* DARK MODE */
html[data-theme="dark"]{
  --bg:#0b0b10;
  --card:#12121a;
  --text:#f3f3f6;
  --muted:#b7b7c6;
  --line:#242435;

  --accent:#ff2db2;
  --accent2:#b600ff;
}

/* APLICA VARIABLES */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: var(--bg);
  color: var(--text);
}

.header{ background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--line); }
.card, .form{ background: var(--card); border:1px solid var(--line); }
input,select,textarea{ background: color-mix(in srgb, var(--bg) 88%, #000 12%); border:1px solid var(--line); color:var(--text); }
.nav a{ color: var(--muted); }
.card__text, label, .brand__tag{ color: var(--muted); }

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#08080d,#0b0b10);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:rgba(10,10,16,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:42px;height:42px;border-radius:14px;background:radial-gradient(circle at 30% 30%, var(--accent), var(--accent2));display:grid;place-items:center;font-weight:800}
.brand__name{font-weight:800;letter-spacing:.2px}
.brand__tag{font-size:12px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.nav a{padding:8px 10px;border-radius:12px;color:var(--muted)}
.nav a:hover{background:#151523;color:var(--text)}
.main{padding:26px 0 40px}

.hero{border:1px solid var(--line);background:linear-gradient(135deg, rgba(255,45,178,.15), rgba(182,0,255,.12));border-radius:22px;padding:22px;display:grid;gap:10px}
.hero h1{margin:0;font-size:28px}
.hero p{margin:0;color:var(--muted);max-width:70ch}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:#141421;color:var(--text);cursor:pointer}
.btn--primary{border:none;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.btn--ghost{background:transparent}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px}
.card{grid-column:span 4;border:1px solid var(--line);background:var(--card);border-radius:20px;overflow:hidden}
.card__img{width:100%;height:180px;object-fit:cover;background:#0f0f18}
.card__body{padding:14px}
.badge{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--line);padding:4px 8px;border-radius:999px}
.card__title{margin:10px 0 6px;font-weight:800}
.card__text{margin:0;color:var(--muted);font-size:14px}
.card__actions{padding:14px;display:flex;gap:10px;border-top:1px solid var(--line)}
@media (max-width:900px){.card{grid-column:span 6}}
@media (max-width:600px){.card{grid-column:span 12}.hero h1{font-size:24px}}

.form{max-width:720px;border:1px solid var(--line);background:var(--card);border-radius:22px;padding:16px}
.field{display:grid;gap:6px;margin-bottom:12px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{background:#0f0f18;border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--text);outline:none}
textarea{min-height:90px;resize:vertical}
.footer{border-top:1px solid var(--line);padding:18px 0;background:rgba(10,10,16,.6)}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__title{font-weight:900}
.footer__text{color:var(--muted);font-size:14px;margin-top:4px}
.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}
/* ===== THEME SWITCH (COMPATIBLE TOTAL) ===== */
.theme-switch{
  position:relative;
  width:48px;
  height:26px;
}

.theme-switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.theme-switch label{
  display:block;
  width:100%;
  height:100%;
  background:#dcdcec;
  border-radius:999px;
  cursor:pointer;
  transition:background .3s ease;
  position:relative;
}

.theme-switch label::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .3s ease;
}

/* CUANDO ESTÁ ACTIVADO */
.theme-switch input:checked + label{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.theme-switch input:checked + label::before{
  transform: translateX(22px);
}