/* decypher - documentation centre.
   Same tokens as the site. Documentation that looks like a different product reads like it was
   written for a different product. Authorship and ownership: @Tori, @Decypher_oficial */

:root{
  --ink:#08090f; --ink-2:#0c0e18; --surface:#101322; --raised:#171b2d;
  --hair:#252a42; --hair-soft:#191d30;
  --gold:#f5a524; --gold-deep:#d18700; --gold-soft:#ffc86b; --acc:#f5a524;
  --text:#f7f5f2; --text-2:#bcc2d4; --muted:#8b93aa; --thread:#8b8fff;
  --ok:#4ade80; --stop:#f87171;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Yu Gothic UI","Hiragino Sans","Noto Sans JP","Microsoft YaHei","PingFang SC","Noto Sans SC","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Segoe UI Historic","Noto Naskh Arabic","Geeza Pro","Tahoma","Nirmala UI","Noto Sans Devanagari","Kohinoor Devanagari",sans-serif;
  --mono:"Cascadia Code",ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --fast:140ms; --eo:cubic-bezier(.22,1,.36,1);
  --edge:clamp(1.1rem,4vw,3rem);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#f6f6f9; --ink-2:#edeef4; --surface:#ffffff; --raised:#fafbfd;
  --hair:#dcdfe9; --hair-soft:#e9ebf2;
  --gold:#c97f00; --gold-deep:#9a5f00; --gold-soft:#e09a1f; --acc:#8a5400;
  --text:#111220; --text-2:#454a5e; --muted:#656b81; --thread:#4a4fd4;
  --ok:#15803d; --stop:#b91c1c;
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5rem}
body{font-family:var(--sans); background:var(--ink); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.65}
a{color:var(--acc); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem var(--edge); border-bottom:1px solid var(--hair-soft);
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ink) 90%, transparent); backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; color:var(--text)}
.brand .mono{font-family:var(--mono); color:var(--acc)}
.tabs{display:flex; gap:.5rem; align-items:center}
.seg{display:flex; border:1px solid var(--hair); border-radius:999px; overflow:hidden}
.segbtn{font:inherit; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--muted); border:0; padding:.35rem .7rem; cursor:pointer}
.segbtn.is-on{background:var(--gold); color:#0b0b12; font-weight:700}

.shell{display:grid; grid-template-columns:16rem 1fr; gap:2.4rem; max-width:80rem; margin:0 auto; padding:0 var(--edge)}
@media (max-width:920px){ .shell{grid-template-columns:1fr; gap:1rem} }

/* index: a list of what is here, not a decorated menu */
.aside{position:sticky; top:5rem; align-self:start; padding:2rem 0; max-height:calc(100vh - 6rem); overflow:auto}
@media (max-width:920px){ .aside{position:static; max-height:none; padding:1.2rem 0 0} }
.buscar{width:100%; font:inherit; font-size:.88rem; color:var(--text); background:var(--ink-2);
  border:1px solid var(--hair); border-radius:8px; padding:.55rem .7rem; margin-bottom:1.1rem}
.buscar::placeholder{color:var(--muted)}
.aside h2{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:1.2rem 0 .5rem}
.aside h2:first-of-type{margin-top:0}
.aside a{display:block; font-size:.88rem; color:var(--text-2); text-decoration:none; padding:.3rem 0}
.aside a:hover{color:var(--text)}
.aside a.is-on{color:var(--acc); font-weight:650}

main{padding:2rem 0 4rem; min-width:0}
.hero{padding-bottom:1.6rem; border-bottom:1px solid var(--hair-soft); margin-bottom:2rem}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--acc)}
h1{font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; letter-spacing:-.025em; margin-top:.5rem; text-wrap:balance}
.lede{color:var(--text-2); max-width:60ch; margin-top:.8rem}

section{margin-bottom:3rem; scroll-margin-top:5rem}
section h2{font-size:clamp(1.25rem,2.4vw,1.6rem); letter-spacing:-.02em; margin-bottom:.5rem; text-wrap:balance}
section h3{font-size:1.02rem; margin:1.6rem 0 .4rem}
section p{color:var(--text-2); max-width:66ch; margin-bottom:.7rem}
section ul,section ol{color:var(--text-2); max-width:66ch; margin:0 0 .9rem 1.1rem; display:flex; flex-direction:column; gap:.35rem}
code{font-family:var(--mono); font-size:.86em; background:var(--ink-2); border:1px solid var(--hair-soft);
  border-radius:4px; padding:.08em .38em}

/* numbered walkthrough: a real sequence, so it is numbered */
.pasos{list-style:none; margin-left:0; counter-reset:paso}
.pasos li{
  counter-increment:paso; position:relative; padding-left:2.6rem;
  background:var(--surface); border:1px solid var(--hair); border-radius:12px;
  padding-top:1rem; padding-bottom:1rem; padding-right:1rem; margin-bottom:.7rem;
}
.pasos li::before{
  content:counter(paso,decimal-leading-zero); position:absolute; left:1rem; top:1rem;
  font-family:var(--mono); font-size:.75rem; color:var(--acc); font-weight:700;
}
.pasos strong{display:block; color:var(--text); margin-bottom:.2rem}
.pasos span{font-size:.92rem}

.aviso{border-left:2px solid var(--gold); background:var(--raised); padding:.85rem 1rem;
  border-radius:0 10px 10px 0; margin:1rem 0; font-size:.92rem; color:var(--text-2); max-width:66ch}
.aviso strong{color:var(--text)}
.aviso.alto{border-left-color:var(--stop)}

/* glossary: a definition list is what this is, so it is one */
dl.glosario{display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:.7rem 1.4rem; max-width:70ch}
@media (max-width:640px){ dl.glosario{grid-template-columns:1fr; gap:.2rem 0} dl.glosario dd{margin-bottom:.9rem} }
dl.glosario dt{font-weight:650; font-size:.94rem}
dl.glosario dd{color:var(--text-2); font-size:.94rem}

details{background:var(--surface); border:1px solid var(--hair); border-radius:10px;
  padding:.85rem 1rem; margin-bottom:.6rem; max-width:70ch}
details summary{cursor:pointer; font-weight:650; list-style:none; display:flex; justify-content:space-between; gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--acc); font-family:var(--mono)}
details[open] summary::after{content:"-"}
details p{margin:.6rem 0 0}

/* problems: symptom, cause, what to do. Three columns because it is three questions */
.tabla{overflow-x:auto; border:1px solid var(--hair); border-radius:12px; background:var(--surface); max-width:100%}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:44rem}
th{text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:.7rem 1rem; border-bottom:1px solid var(--hair)}
td{padding:.7rem 1rem; border-bottom:1px solid var(--hair-soft); vertical-align:top; color:var(--text-2)}
tr:last-child td{border-bottom:none}
td.sintoma{color:var(--text); font-weight:600}

.btn-doc{
  font:inherit; font-size:.9rem; font-weight:650; cursor:pointer;
  background:var(--gold); color:#0b0b12; border:0; border-radius:999px; padding:.6rem 1.1rem;
}

.oculto{display:none !important}
.sin-resultados{color:var(--muted); font-size:.9rem}

footer{border-top:1px solid var(--hair-soft); padding:1.4rem var(--edge); font-size:.78rem; color:var(--muted)}

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

/* Narrow screen: the header goes to two rows rather than to smaller pieces. This sheet redefines
   .top, so the rule lives here -- each surface declares its own. */
@media (max-width: 30rem){
  .top{flex-wrap:wrap; row-gap:.55rem}
  .top .tabs{flex-wrap:wrap; gap:.5rem; justify-content:flex-end; width:100%}
}