/* Centro de ayuda — estilos con ámbito .ayuda (no tocan el shell del sitio) */
.ayuda{--mint:#34D399;--mint-bright:#5EEAB8;--ink:#08231A;--tx:#F4F4F3;--mut:#A1A1A6;--mut2:#6B6B72;--bg:#08080A;--bg2:#101014;--bg3:#16161A;--line:rgba(255,255,255,.1);--amber:#F5B544;--rose:#F47A8E;--head:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mint-ink:#08231A;--bg-elev:#1B1B20;--line-2:rgba(255,255,255,.12);--radius-sm:14px;--maxw:1160px;--sh-lg:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px rgba(0,0,0,.85);--ease:cubic-bezier(.2,.7,.2,1);--mono:"JetBrains Mono",monospace}
.ayuda{color:var(--tx);font-family:var(--body);line-height:1.65;font-size:17px}
.ayuda a{color:var(--mint-bright);text-decoration:none}
.ayuda a:hover{text-decoration:underline}
.ayuda strong,.ayuda b{color:var(--tx);font-weight:600}
.ayuda code,.ayuda kbd{font-family:var(--mono);font-size:.82em;background:var(--bg3);padding:2px 6px;border-radius:6px;color:var(--tx)}
.ayuda kbd{border:1px solid var(--line)}

/* Título del artículo */
.ayuda .d-title{max-width:var(--maxw);margin:0 auto;padding:30px 22px 34px;border-bottom:1px solid var(--line)}
.ayuda .d-title .inner{max-width:700px}
.ayuda .eb{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.ayuda .eb a{color:var(--mint)}
.ayuda h1{font-family:var(--head);font-weight:700;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.ayuda .lede{color:var(--mut);font-size:1.18rem;line-height:1.55;margin:0}
.ayuda .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:.74rem;color:var(--mut2)}
.ayuda .meta span b{color:var(--mut);font-weight:500}

/* Cuerpo: columna de lectura + margen para notas, índice pegado a la izquierda */
.ayuda .d-body{max-width:var(--maxw);margin:0 auto;padding:40px 22px 20px;display:grid;grid-template-columns:200px minmax(0,700px) 1fr;column-gap:44px}
.ayuda .d-toc{grid-column:1;position:sticky;top:92px;align-self:start;font-size:.84rem}
.ayuda .d-toc .h{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:10px}
.ayuda .d-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.ayuda .d-toc li{margin:0}
.ayuda .d-toc a{display:block;padding:5px 0 5px 14px;color:var(--mut2);margin-left:-1px;border-left:2px solid transparent;line-height:1.35}
.ayuda .d-toc a:hover{color:var(--tx);text-decoration:none}
.ayuda .d-toc a.on{color:var(--tx);border-left-color:var(--mint)}
.ayuda article{grid-column:2;min-width:0}
.ayuda article>*{position:relative}
.ayuda article h2{font-family:var(--head);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;margin:48px 0 14px;scroll-margin-top:88px}
.ayuda article h2:first-child{margin-top:0}
.ayuda article h3{font-family:var(--head);font-weight:600;font-size:1.12rem;margin:30px 0 8px}
.ayuda article p,.ayuda article li{color:#C9C9CC}
.ayuda article p{margin:0 0 16px}
.ayuda article ul,.ayuda article ol{margin:0 0 18px;padding-left:22px}
.ayuda article li{margin-bottom:8px}

/* Nota al margen: en pantallas anchas flota en la columna derecha */
.ayuda .side{position:absolute;left:calc(100% + 44px);width:230px;margin-top:4px;font-size:.8rem;line-height:1.5;color:var(--mut2);border-top:1px solid var(--line);padding-top:8px}
.ayuda .side b{color:var(--mut)}

/* En corto */
.ayuda .tldr{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 34px}
.ayuda .tldr .h{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.ayuda .tldr ul{margin:0;padding-left:18px}.ayuda .tldr li{color:var(--tx);margin-bottom:6px}

.ayuda .callout{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:12px;padding:14px 16px;margin:0 0 18px;color:var(--mut)}
.ayuda .callout.warn{border-left-color:var(--amber)}
.ayuda .callout b{color:var(--tx)}

/* Pasos numerados */
.ayuda .steps{counter-reset:s;list-style:none;padding:0!important}
.ayuda .steps>li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:16px}
.ayuda .steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--mint);font-family:var(--mono);font-size:.8rem;display:grid;place-items:center;border:1px solid rgba(52,211,153,.35)}

/* Ruta de menú: Ajustes » Privacidad */
.ayuda .path{font-family:var(--mono);font-size:.82em;color:var(--tx);background:var(--bg3);padding:2px 7px;border-radius:6px;white-space:nowrap}

/* Figuras */
.ayuda figure{margin:30px 0 34px;padding:0}
.ayuda .fig{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px}
.ayuda figcaption{font-size:.84rem;color:var(--mut2);margin-top:10px;line-height:1.5}
.ayuda figcaption b{color:var(--mut);font-family:var(--mono);font-weight:500;font-size:.78rem;margin-right:6px}
.ayuda figure.wide{margin-right:calc(-1 * min(274px, 26vw))}

/* Tubería (artículo 1) */
.ayuda .pipe{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.ayuda .pipe .st{flex:1 1 110px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.15s;text-align:left;color:var(--tx);font:inherit}
.ayuda .pipe .st:hover,.ayuda .pipe .st.on{border-color:var(--mint);background:rgba(52,211,153,.07)}
.ayuda .pipe .st .n{font-family:var(--mono);font-size:.66rem;color:var(--mint)}
.ayuda .pipe .st .t{font-family:var(--head);font-weight:600;font-size:.95rem;margin-top:2px}
.ayuda .pipe .ar{align-self:center;color:var(--mut2);padding:0 6px;font-family:var(--mono)}
.ayuda .pipe-detail{margin-top:14px;min-height:72px;color:var(--mut);font-size:.92rem;border-top:1px dashed var(--line);padding-top:12px}
.ayuda .pipe .st.fallback{border-style:dashed}

/* Diagrama de flujo de datos (artículo 9) */
.ayuda .flow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ayuda .flow .box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg3)}
.ayuda .flow .box .h{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ayuda .flow .box ul{margin:0;padding-left:16px;font-size:.88rem}
.ayuda .flow .box li{margin-bottom:4px;color:var(--mut)}
.ayuda .flow .stay .h{color:var(--mint)}.ayuda .flow .on .h{color:var(--mut)}.ayuda .flow .opt .h{color:var(--amber)}.ayuda .flow .never .h{color:var(--rose)}
.ayuda .flow .stay{border-color:rgba(52,211,153,.4)}

/* Gráfica del ritmo (artículo 6) */
.ayuda .ritmo svg{width:100%;height:auto;display:block}
.ayuda .ritmo .ctl{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;font-size:.88rem;color:var(--mut)}
.ayuda .ritmo input[type=range]{flex:1;min-width:180px;accent-color:var(--mint)}
.ayuda .ritmo .readout{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ayuda .ritmo .readout div{background:var(--bg3);border-radius:10px;padding:10px 12px}
.ayuda .ritmo .readout .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.ayuda .ritmo .readout .v{font-family:var(--head);font-weight:600;font-size:1.08rem;margin-top:2px}
.ayuda .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--mut2);margin-top:8px}
.ayuda .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* Conteo doble (artículo 7) */
.ayuda .double{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.ayuda .double .acct{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.88rem}
.ayuda .double .acct .h{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.ayuda .double .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--mut)}
.ayuda .double .row.hl{color:var(--amber)}
.ayuda .double .mid{font-family:var(--mono);color:var(--mut2);text-align:center;font-size:.8rem}
.ayuda .toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:16px}
.ayuda .toggle button{background:none;border:0;color:var(--mut);font:inherit;font-size:.84rem;padding:6px 14px;border-radius:999px;cursor:pointer}
.ayuda .toggle button.on{background:var(--mint);color:var(--ink);font-weight:600}
.ayuda .total{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:12px}
.ayuda .total .v{font-family:var(--head);font-weight:700;font-size:1.4rem}

/* Prioridad de capas (artículo 5) */
.ayuda .layers{display:flex;flex-direction:column;gap:6px}
.ayuda .layers .ly{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ayuda .layers .ly .n{font-family:var(--mono);color:var(--mint);font-size:.8rem}
.ayuda .layers .ly .t{font-weight:600;font-size:.95rem}
.ayuda .layers .ly .d{color:var(--mut);font-size:.85rem}

/* Tarjetas de bancos (artículo 3) */
.ayuda .banks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ayuda .banks .bk{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px}
.ayuda .banks .bk .t{font-family:var(--head);font-weight:600}
.ayuda .banks .bk .d{color:var(--mut);font-size:.86rem;margin-top:4px}

/* Navegación del final */
.ayuda .next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:50px 0 10px}
.ayuda .next a{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--tx)}
.ayuda .next a:hover{border-color:var(--mint);text-decoration:none}
.ayuda .next .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.ayuda .next .t{font-family:var(--head);font-weight:600;margin-top:4px}
.ayuda .next a.r{text-align:right}
.ayuda .help-foot{margin-top:28px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--mut);font-size:.92rem}


/* Portada del centro de ayuda */
.ayuda .hub{max-width:1000px;margin:0 auto;padding:30px 22px 10px}
.ayuda .hub h1{max-width:760px}
.ayuda .search{margin:28px 0 8px;position:relative}
.ayuda .search input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px 16px 46px;color:var(--tx);font:inherit;font-size:1.02rem}
.ayuda .search input:focus{outline:none;border-color:var(--mint)}
.ayuda .search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut2)}
.ayuda .group{margin-top:40px}
.ayuda .group>.h{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.ayuda .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ayuda .card{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--tx);transition:.15s}
.ayuda .card:hover{border-color:var(--mint);text-decoration:none;transform:translateY(-1px)}
.ayuda .card .t,.ayuda .card .d,.ayuda .card .m,.ayuda .next .k,.ayuda .next .t{display:block}
.ayuda .card .t{font-family:var(--head);font-weight:600;font-size:1.06rem;line-height:1.3}
.ayuda .card .d{color:var(--mut);font-size:.88rem;margin-top:6px}
.ayuda .card .m{font-family:var(--mono);font-size:.68rem;color:var(--mut2);margin-top:10px}
.ayuda .empty{display:none;color:var(--mut);margin-top:30px}

/* Pantallas medianas: notas al margen pasan a línea */
@media (max-width:1180px){
  .ayuda .d-body{grid-template-columns:180px minmax(0,1fr);column-gap:36px}
  .ayuda .side{position:static;width:auto;margin:-6px 0 16px;border-top:0;border-left:2px solid var(--line);padding:2px 0 2px 12px}
  .ayuda figure.wide{margin-right:0}
}
@media (max-width:860px){
  .ayuda{font-size:16px}
  .ayuda .d-body{display:block;padding-top:26px}
  .ayuda .d-toc{position:static;margin-bottom:26px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px}
  .ayuda .next{grid-template-columns:1fr}
  .ayuda .next a.r{text-align:left}
  .ayuda .flow{grid-template-columns:1fr}
  .ayuda .double{grid-template-columns:1fr}
  .ayuda .double .mid{transform:rotate(90deg)}
  .ayuda .ritmo .readout{grid-template-columns:1fr 1fr}
  .ayuda .pipe .ar{display:none}
  .ayuda .pipe{gap:8px}
}
