/* ===========================================================
   Cosmos · sistema visual compartido para las herramientas
   Paleta y tipografías de Agencia Cosmos · claro/oscuro auto
   =========================================================== */
:root{
  --paper:#F6F5FA; --surface:#FFFFFF; --ink:#171826; --muted:#6A688A;
  --line:#E3E1EE; --line-soft:#EFEDF6;
  --accent:#5B4BC4; --accent-ink:#FFFFFF; --accent-soft:#EDEAFB;
  --good:#1F8A5B; --good-soft:#E6F5EE;
  --alert:#B93E55; --alert-soft:#FBECEF;
  --shadow:0 1px 2px rgba(23,24,38,.05), 0 8px 24px -16px rgba(23,24,38,.25);
  --r:10px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101120; --surface:#191A2B; --ink:#EDEBF7; --muted:#9C9ABC;
    --line:#2A2B42; --line-soft:#222335;
    --accent:#A092F5; --accent-ink:#11121F; --accent-soft:#25234A;
    --good:#5FD0A0; --good-soft:#15332A;
    --alert:#F08099; --alert-soft:#3A2130;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#101120; --surface:#191A2B; --ink:#EDEBF7; --muted:#9C9ABC;
  --line:#2A2B42; --line-soft:#222335;
  --accent:#A092F5; --accent-ink:#11121F; --accent-soft:#25234A;
  --good:#5FD0A0; --good-soft:#15332A;
  --alert:#F08099; --alert-soft:#3A2130;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Open Sans','Segoe UI',system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px; margin:0 auto; padding:0 24px 96px}
.wrap.narrow{max-width:760px}
a{color:var(--accent)}
[hidden]{display:none!important}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}

/* ---------- encabezado ---------- */
header.top{padding:40px 0 26px; border-bottom:1px solid var(--line)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; width:max-content}
.brand svg{width:26px; height:26px; flex-shrink:0}
.brand b{font-family:'Jost',sans-serif; font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase}
.back{font-family:'Jost',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.04em;
  text-decoration:none; color:var(--muted); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.back:hover{color:var(--accent)}
.back svg{width:14px; height:14px}
.kicker{font-family:'Jost',sans-serif; font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px}
h1{font-family:'Jost','Helvetica Neue',sans-serif; font-weight:700;
  font-size:clamp(32px,5.5vw,50px); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 14px; text-wrap:balance}
h1 em{font-style:normal; color:var(--accent)}
.lede{max-width:58ch; margin:0 0 20px; color:var(--muted)}
.lede b{color:var(--ink); font-weight:600}
.engine-wrap{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:4px 12px}
.engine-wrap::before{content:""; width:7px; height:7px; border-radius:99px; background:var(--good); flex-shrink:0}

/* ---------- botones y chips ---------- */
button{font-family:'Jost',sans-serif; font-size:14px; font-weight:600; letter-spacing:.01em;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:9px 18px; cursor:pointer; transition:border-color .12s, color .12s, background .12s}
button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
button:disabled{opacity:.4; cursor:not-allowed}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); padding:11px 26px; font-size:15px}
.primary:hover:not(:disabled){background:var(--accent); border-color:var(--accent); color:var(--accent-ink); filter:brightness(1.08)}
.ghost{background:transparent}
.chip{padding:6px 13px; font-size:12.5px; border-radius:99px}
.chip.is-on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.btns{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- paneles y controles ---------- */
.panel{margin:26px 0 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px clamp(16px,3vw,24px)}
.legend{font-family:'Jost',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.presets{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:20px;
  margin-bottom:20px; border-bottom:1px solid var(--line-soft)}
.dials{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:22px 30px; align-items:start}
.dial{display:flex; flex-direction:column; gap:9px}
.dial.is-off{opacity:.42}
label.legend{display:block}
select,input[type="text"],input[type="tel"],input[type="email"],input[type="url"],input[type="number"],textarea{
  font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:9px 10px; width:100%}
textarea{font-family:'Open Sans',sans-serif; line-height:1.5; resize:vertical; min-height:74px}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
input[type="number"].short{width:84px}
input:disabled,select:disabled,textarea:disabled{opacity:.45}
.field{display:flex; flex-direction:column; gap:8px; margin:0 0 16px}
.slider{display:flex; align-items:center; gap:14px}
.slider input[type="range"]{flex:1; accent-color:var(--accent); min-width:80px}
.readout{font-family:'Jost',sans-serif; font-size:21px; font-weight:600; line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums; min-width:58px; text-align:right}
.row-inline{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.times{color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px}
.switch{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px}
.switch input{accent-color:var(--accent); width:15px; height:15px}
input[type="color"]{width:44px; height:34px; padding:2px; border:1px solid var(--line); border-radius:7px; background:var(--paper); cursor:pointer}
.hint{font-size:12.5px; color:var(--muted); margin:0}

/* ---------- zona de carga ---------- */
.drop{margin:34px 0 0; border:2px dashed var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(26px,4vw,40px) 22px; text-align:center; display:flex; flex-direction:column;
  gap:14px; align-items:center; transition:border-color .14s, background .14s}
.drop.is-over{border-color:var(--accent); background:var(--accent-soft)}
.drop__lead{font-family:'Jost',sans-serif; font-weight:600; font-size:clamp(17px,2.2vw,22px); margin:0}
.drop__sub{margin:0; color:var(--muted); font-size:13.5px; max-width:46ch}

/* ---------- acción / progreso / notas ---------- */
.action{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:24px 0 0}
.note{margin:14px 0 0; font-size:13px; color:var(--muted); border-left:3px solid var(--line); padding:2px 0 2px 12px}
.note--warn{color:var(--alert); border-left-color:var(--alert)}
.note--ok{color:var(--good); border-left-color:var(--good)}
#bar-track{height:4px; background:var(--line-soft); border-radius:99px; overflow:hidden}
#bar-fill{display:block; height:100%; background:var(--accent); width:0; transition:width .2s ease}
#bar-text{display:block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted)}

/* ---------- salida en código (snippets) ---------- */
.code{position:relative; margin:8px 0 0}
.code pre{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px; overflow:auto; font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.55; color:var(--ink)}
.code .copy{position:absolute; top:10px; right:10px; padding:5px 12px; font-size:12px}

/* ---------- pie ---------- */
.info{margin:52px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px 34px}
.info h2{font-family:'Jost',sans-serif; font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.info p{margin:0; font-size:13.5px; color:var(--muted)}
.info b{color:var(--ink); font-weight:600}
footer{margin:52px 0 0; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
footer a{font-weight:600; text-decoration:none}
footer a:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* logo de marca en el header (claro/oscuro) */
.brand img{height:34px;width:auto;display:block}
.brand .logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}