/* ========= variables y base ========= */
:root{
  --bg:#0e1117; --panel:#111827; --ink:#e5e7eb; --muted:#9ca3af;
  --stroke:#1f2937; --fx:#0b1220;
  --focus:#60a5fa; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial}

/* ========= layout ========= */
.container{max-width:1000px;margin:32px auto;padding:0 20px}
.header h1{margin:0 0 4px;font-size:1.6rem}
.header .sub{margin:0 0 16px;color:var(--muted)}

.card{background:var(--panel);border:1px solid var(--stroke);border-radius:16px}
.form{padding:18px;display:grid;gap:18px}

.section{display:grid;gap:12px}
.section__title{font-size:1.02rem;margin:0;color:#c7d2fe}

/* ========= grid util ========= */
.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ========= campos ========= */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:.92rem;color:var(--muted)}
.field__control{
  background:#0f172a;border:1px solid #263248;color:var(--ink);
  border-radius:12px;padding:.65rem .8rem;font-size:.98rem
}
.field__control::placeholder{color:#65708a}
.field__control:focus{
  outline:2px solid transparent;box-shadow:0 0 0 3px #60a5fa55;border-color:var(--focus)
}
.field__hint{color:var(--muted);font-size:.82rem}

/* Campos compactos con addon */
.field--compact{display:flex;align-items:center;gap:8px}
.field--compact .field__control{width:120px;text-align:center}
.addon{font-size:.9rem;color:var(--muted)}

/* ========= toggles ========= */
.checkbox,.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
.checkbox input,.switch input{width:1.05rem;height:1.05rem;accent-color:var(--ok)}
.warn-danger input{accent-color:var(--danger)}

/* ========= chips ========= */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid #273249;background:#101826;
  color:var(--ink);padding:.45rem .7rem;border-radius:999px
}
.chip input[type="checkbox"]{accent-color:var(--ok)}
.chip--input input[type="text"]{
  background:transparent;border:0;border-bottom:1px dashed #334155;color:var(--ink);
  padding:.2rem .1rem;min-width:12ch
}

/* ========= review ========= */
.review{padding:14px}
.review__title{font-weight:700;margin-bottom:6px}
.review__list{color:#d1d5db}

/* ========= buttons ========= */
.actions{display:flex;gap:10px;justify-content:flex-end}
.btn{
  background:transparent;border:1px solid #334155;color:var(--ink);
  padding:.7rem 1rem;border-radius:12px;font-weight:700;cursor:pointer
}
.btn:hover{background:#131c2b}
.btn--primary{
  background:linear-gradient(135deg,#22c55e,#3b82f6);
  border:0;color:#0b1220
}
.btn--primary:hover{filter:brightness(1.05)}

/* ========= focus global accesible ========= */
:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}