:root { --bg:#0b1220; --card:#121a2b; --text:#dbe8ff; --muted:#9bb1d4; --accent:#6aa1ff; --line:#24324d; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:32px auto;padding:0 16px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{font-weight:800;letter-spacing:.5px}
.search{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.9rem}
.badge{display:inline-block;border:1px solid var(--line);padding:2px 8px;border-radius:999px;font-size:.75rem;color:var(--muted);margin-right:6px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.button{appearance:none;border:1px solid var(--line);background:#0f1626;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.button:hover{border-color:var(--accent)}
.link{color:var(--text);text-decoration:none}
.auth{max-width:420px;margin:80px auto;background:var(--card);border:1px solid var(--line);padding:22px;border-radius:14px}
.input{width:100%;margin:8px 0 12px;background:#0f1626;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text)}
.small{font-size:.85rem;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
/* Tema claro */
:root[data-theme="light"]{
  --bg:#f7f9fc; --card:#ffffff; --text:#0b1f2a; --muted:#3f5872; --accent:#1b6bff; --line:#dfe6ef;
}

/* Modo exterior (más contraste y tamaño) */
:root[data-outdoor="1"]{
  --bg:#ffffff; --card:#ffffff; --text:#0a1721; --line:#c9d3e0;
}
:root[data-outdoor="1"] body{ font-size:18px; }
:root[data-outdoor="1"] .input, 
:root[data-outdoor="1"] .search, 
:root[data-outdoor="1"] .button{ border-width:2px; }
/* ===== THEME TOKENS ===== */
:root{
  --bg:#0d2150; --card:#121a2b; --text:#dbe8ff; --muted:#9bb1d4; --accent:#6aa1ff; --line:#24324d;
  --btn-bg:#0d2150; --btn-fg:#ffffff;
  --field-bg:#0d2150; --field-fg:#dbe8ff;
}

/* Light theme overrides */
:root[data-theme="light"]{
  --bg:#f7f9fc; --card:#ffffff; --text:#0b1f2a; --muted:#3f5872; --accent:#1b6bff; --line:#dfe6ef;
  --btn-bg:#1b6bff; --btn-fg:#ffffff;            /* botones azules con texto blanco */
  --field-bg:#ffffff; --field-fg:#0b1f2a;        /* inputs claros */
}

/* Outdoor (opcional, si ya lo tienes) */
:root[data-outdoor="1"]{ --bg:#ffffff; --card:#ffffff; --text:#0a1721; --line:#c9d3e0; }

/* ===== COMPONENTS use tokens ===== */
.button{
  border:1px solid var(--line);
  background:var(--btn-bg);
  color:var(--btn-fg);
}
.button:hover{ border-color:var(--accent); }

/* MUY IMPORTANTE: los botones que también llevan .link conservan el color del botón */
.button.link{ color:var(--btn-fg) !important; text-decoration:none; }

/* Campos en ambos temas */
.input, .search{
  background:var(--field-bg);
  color:var(--field-fg);
  border:1px solid var(--line);
}

/* En tema claro, badges y textos siguen bien */