/* Sanity Pack Cloud · by Software Ágil — hoja de estilos única (panel, ingreso e instalador).
   Tema claro por defecto; oscuro según el sistema o elegido con el botón (data-theme en <html>). */

:root{
  --bg:#f3f6fb;--bg-2:#e9eff8;--surface:#fff;--surface-2:#f6f8fc;--line:#dde3ec;--line-2:#c9d2df;
  --text:#152033;--text-2:#4a5870;--text-3:#6f7d93;
  --accent:#1b6fc2;--accent-2:#14569a;--accent-bg:rgba(27,111,194,.10);--accent-ink:#fff;
  --mint:#14a37f;
  --ok:#0f8a5f;--ok-bg:rgba(15,157,107,.11);--warn:#9a5c00;--warn-bg:rgba(234,160,20,.15);
  --crit:#c62828;--crit-bg:rgba(217,54,54,.10);--info-bg:rgba(27,111,194,.09);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 24px rgba(16,24,40,.06);
  --hero:radial-gradient(1200px 500px at 15% -10%,rgba(27,111,194,.13),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(20,163,127,.10),transparent 55%);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b1120;--bg-2:#0e1628;--surface:#111a2e;--surface-2:#16213a;--line:#26334f;--line-2:#33425f;
  --text:#e6ecf5;--text-2:#a9b4c8;--text-3:#8693ab;
  --accent:#4db0f5;--accent-2:#7cc6f8;--accent-bg:rgba(77,176,245,.14);--accent-ink:#06121f;
  --mint:#5eead4;
  --ok:#34d399;--ok-bg:rgba(52,211,153,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);
  --crit:#f87171;--crit-bg:rgba(248,113,113,.13);--info-bg:rgba(77,176,245,.12);
  --shadow:0 1px 0 rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.25);
  --hero:radial-gradient(1200px 500px at 15% -10%,rgba(77,176,245,.14),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(94,234,212,.08),transparent 55%);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1120;--bg-2:#0e1628;--surface:#111a2e;--surface-2:#16213a;--line:#26334f;--line-2:#33425f;
    --text:#e6ecf5;--text-2:#a9b4c8;--text-3:#8693ab;
    --accent:#4db0f5;--accent-2:#7cc6f8;--accent-bg:rgba(77,176,245,.14);--accent-ink:#06121f;
    --mint:#5eead4;
    --ok:#34d399;--ok-bg:rgba(52,211,153,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);
    --crit:#f87171;--crit-bg:rgba(248,113,113,.13);--info-bg:rgba(77,176,245,.12);
    --shadow:0 1px 0 rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.25);
    --hero:radial-gradient(1200px 500px at 15% -10%,rgba(77,176,245,.14),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(94,234,212,.08),transparent 55%);
    color-scheme:dark;
  }
}

/* Logos: se pintan los dos y se muestra el del tema activo */
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}:root[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--sans)}
a{color:var(--accent)}code{font:13px var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 4px;word-break:break-all}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Barra superior */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{height:38px;width:auto}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-bg)}
.top-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:7px 11px;border-radius:9px;text-decoration:none;color:var(--text-2);font-weight:500}
nav a:hover{background:var(--surface-2);color:var(--text)}nav a.on{background:var(--accent-bg);color:var(--accent)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:17px;cursor:pointer}
.theme-btn:hover{color:var(--accent);border-color:var(--accent)}
.theme-float{position:fixed;top:14px;right:14px;z-index:10}

main{max-width:1180px;margin:0 auto;padding:22px 16px 60px}
h1{font-size:24px;margin:8px 0 16px;letter-spacing:-.01em}h2{font-size:17px;margin:0 0 12px}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 16px;box-shadow:var(--shadow)}
.narrow{max-width:520px;margin:30px auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.kpis div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.kpis b{display:block;font-size:26px}.kpis span{color:var(--text-3);font-size:13px}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}tbody tr:hover td{background:var(--surface-2)}
.faint{color:var(--text-3);font-size:13px}.muted{color:var(--text-2)}

/* Formularios */
label{display:block;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--text-2)}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-weight:400}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
textarea{font:12.5px/1.45 var(--mono)}
.hint{display:block;margin-top:4px;font-weight:400;font-size:12.5px;color:var(--text-3)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row label{flex:1;min-width:150px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}@media(max-width:620px){.g2{grid-template-columns:1fr}}
.pw{position:relative}.pw input{padding-right:64px}
.pw-btn{position:absolute;right:6px;bottom:6px;padding:4px 9px;border:0;border-radius:7px;background:var(--surface-2);color:var(--text-2);font:600 12px var(--sans);cursor:pointer}
.pw-btn:hover{color:var(--accent)}
.match{font-weight:400;font-size:12.5px;margin-top:4px;display:block;min-height:1em}.match.ok{color:var(--ok)}.match.bad{color:var(--crit)}

/* Botones */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;margin:0 0 12px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{color:var(--crit);border-color:var(--crit)}.btn.warn{color:var(--warn);border-color:var(--warn)}
.btn.block{display:block;width:100%;text-align:center;padding:12px 16px;font-size:16px}
.btn:disabled{opacity:.55;cursor:progress}.btn.sm{padding:5px 10px;font-size:13px;margin:0}
.btns{display:flex;flex-wrap:wrap;gap:8px}form.inline{display:inline}

/* Avisos y estados */
.note{padding:12px 14px;border-radius:10px;margin:0 0 16px;background:var(--info-bg);border-left:4px solid var(--accent)}
.note.ok{background:var(--ok-bg);border-left-color:var(--ok)}.note.crit{background:var(--crit-bg);border-left-color:var(--crit)}.note.warn{background:var(--warn-bg);border-left-color:var(--warn)}
.code{font:600 22px var(--mono);letter-spacing:.06em;padding:12px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:10px;word-break:break-all;margin:12px 0}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--info-bg);color:var(--text-2)}
.pill.done{background:var(--ok-bg);color:var(--ok)}.pill.failed,.pill.rejected,.pill.expired{background:var(--crit-bg);color:var(--crit)}.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.running,.pill.sent,.pill.queued{background:var(--info-bg);color:var(--accent)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}.kv dt{color:var(--text-3);font-size:13px}.kv dd{margin:0;word-break:break-word}
.find{padding-left:18px;margin:0 0 12px}.find li{margin:0 0 6px}

/* Páginas sueltas: ingreso e instalador */
body.solo{min-height:100vh;background:var(--hero),var(--bg)}
.solo-wrap{max-width:560px;margin:0 auto;padding:40px 16px 48px}
.solo-wrap.wide{max-width:760px}
.solo-logo{display:flex;justify-content:center;margin:6px 0 22px}
.solo-logo img{width:150px;height:auto}
.solo-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.solo-card h1{margin:0 0 6px;font-size:23px}
.solo-card .lead{margin:0 0 20px;color:var(--text-2)}
.solo-foot{text-align:center;color:var(--text-3);font-size:12.5px;margin-top:18px}

/* Pasos del instalador */
.steps{display:flex;gap:6px;margin:0 0 22px;padding:0;list-style:none;counter-reset:s}
.steps li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-3);counter-increment:s}
.steps li::before{content:"";height:4px;border-radius:4px;background:var(--line)}
.steps li.done::before{background:var(--ok)}.steps li.on::before{background:var(--accent)}.steps li.on{color:var(--text);font-weight:600}
.sec{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.sec h2{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 6px}
.sec h2 .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-size:13px;font-weight:700}
.sec > p.muted{margin:0 0 14px;font-size:14px}
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
@media(max-width:620px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.checks li b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px}
.checks li.ok b{background:var(--ok-bg);color:var(--ok)}.checks li.bad b{background:var(--crit-bg);color:var(--crit)}
.checks li small{display:block;color:var(--text-3)}
details.more{margin:6px 0 0}details.more summary{cursor:pointer;color:var(--accent);font-size:14px;font-weight:600;margin:0 0 12px}

/* Bloques para copiar */
.copy{position:relative;margin:8px 0 14px}
.copy pre{margin:0;white-space:pre-wrap;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);padding:12px 84px 12px 12px;border-radius:10px;font:13px/1.5 var(--mono)}
.copy button{position:absolute;top:8px;right:8px}
.done-hero{text-align:center;margin:0 0 18px}
.done-hero .tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-size:28px;margin-bottom:8px}
ol.next{padding-left:20px;margin:0 0 16px}ol.next li{margin:0 0 10px}