/* =====================================================================
   ExtremePaq — Centro de ayuda (WEB-AYUDA-UX-01). Solo lo carga ayuda.html.
   Clases propias (.ayu-*): nada de aquí alcanza otras páginas. Usa los tokens de styles.css (--navy, --orange,
   --line…). El color de cada categoría (vocabulario del backend) llega como --ayu-c / --ayu-t y solo tiñe su ícono.
   Encabezado y contenido comparten un ancho de lectura (900 px) para que sus bordes izquierdos coincidan.
   ===================================================================== */

/* ---------- Encabezado con el buscador dentro ---------- */
.ayu-head{padding-block:clamp(30px,5vw,56px) clamp(34px,5vw,60px)}
.ayu-head .container, .ayu-cuerpo{max-width:900px}
.ayu-head h1{font-size:clamp(1.8rem,4.2vw,2.75rem)}
.ayu-head .ayu-head__sub{margin-top:10px; color:#C3CEDB; font-size:1.05rem}

.ayu-buscador{position:relative; margin-top:clamp(18px,3vw,26px)}
/* Toda la caja es la etiqueta del campo: tocar en cualquier punto lo activa. */
.ayu-buscador__caja{display:flex; align-items:center; gap:12px; min-height:60px; padding:0 62px 0 20px; background:#fff; border:2px solid #fff;
  border-radius:var(--radius-pill); box-shadow:0 12px 32px rgba(0,0,0,.28); cursor:text; transition:border-color .2s, box-shadow .2s}
.ayu-buscador__caja:focus-within{border-color:var(--orange); box-shadow:0 0 0 4px rgba(245,158,11,.38), 0 12px 32px rgba(0,0,0,.28)}
.ayu-buscador__caja > svg{flex:none; width:22px; height:22px; color:var(--muted)}
.ayu-buscador input{flex:1; min-width:0; min-height:56px; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:1.06rem}
.ayu-buscador input::placeholder{color:#677281; opacity:1}
.ayu-buscador input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.ayu-buscador input:disabled{cursor:progress}
.ayu-limpiar{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-cool); color:var(--navy); cursor:pointer; transition:background .2s}
.ayu-limpiar:hover{background:var(--orange-soft)}
.ayu-limpiar:focus-visible{outline:3px solid var(--navy); outline-offset:-3px}
.ayu-limpiar svg{width:16px; height:16px}
.ayu-limpiar[hidden]{display:none}
.ayu-head .ayu-total{margin:14px 0 0 4px; color:#C3CEDB; font-size:.92rem}
.ayu-head .ayu-total b{color:#fff; font-weight:700}
.ayu-head .ayu-total[hidden]{display:none}

/* ---------- Cuerpo ---------- */
.ayu-pagina{background:var(--bg-cool)}
.ayu-cuerpo{padding-block:clamp(22px,3.4vw,34px) clamp(48px,7vw,84px)}
/* El foco de teclado en navy (sobre blanco el naranja del sitio no llega a 3:1). */
.ayu-pagina a:focus-visible, .ayu-pagina button:focus-visible{outline:3px solid var(--navy); outline-offset:2px}

.ayu-migas ol{display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin:0 0 10px; padding:0; list-style:none; font-size:.92rem; color:var(--muted)}
.ayu-migas li{display:flex; align-items:center; gap:8px; min-width:0}
.ayu-migas li + li::before{content:"›"; color:var(--faint); font-weight:700}
.ayu-migas a{display:inline-flex; align-items:center; min-height:44px; color:var(--navy); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}
.ayu-migas a:hover{text-decoration-thickness:2px}
.ayu-migas [aria-current]{padding-block:11px; overflow-wrap:anywhere}
.ayu-migas[hidden]{display:none}

.ayu-h2{margin:0 0 16px; font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:800; color:var(--navy); scroll-margin-top:96px; overflow-wrap:anywhere}
.ayu-h2:focus{outline:none}   /* foco por programa (tabindex=-1) tras navegar: no es un control */
.ayu-sub{margin:16px 0 12px; color:var(--muted); font-size:.92rem; font-weight:600}

/* ---------- Categorías: tarjetas horizontales ---------- */
.ayu-temas{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:14px; margin:0; padding:0; list-style:none}
.ayu-temas > li{display:flex; min-width:0}
.ayu-tema{display:flex; align-items:center; gap:16px; flex:1; min-width:0; min-height:96px; padding:16px 16px 16px 18px; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
a.ayu-tema:hover{border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-2px)}
a.ayu-tema:focus-visible{border-radius:16px}
.ayu-tema__ic, .ayu-tema-cab__ic{flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--ayu-t); color:var(--ayu-c)}
.ayu-tema__ic svg{width:26px; height:26px}
.ayu-tema__txt{display:grid; gap:3px; flex:1; min-width:0}
.ayu-tema__nombre{font:700 1.06rem/1.3 var(--font-display); color:var(--navy); overflow-wrap:anywhere}
.ayu-tema__desc{color:var(--muted); font-size:.94rem; line-height:1.45; overflow-wrap:anywhere}
.ayu-tema__n{margin-top:3px; color:var(--navy); font-size:.84rem; font-weight:600}
.ayu-tema__ir{flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--bg-cool); color:var(--navy);
  transition:background .2s ease, transform .2s ease}
.ayu-tema__ir svg{width:18px; height:18px}
a.ayu-tema:hover .ayu-tema__ir{background:var(--orange); transform:translateX(2px)}
/* Sin artículos: visible y legible, pero no es un enlace. */
.ayu-tema--vacia{background:#FBFCFE; border-style:dashed; border-color:var(--line-strong); box-shadow:none}
.ayu-tema--vacia .ayu-tema__ic{background:var(--bg-cool); color:var(--faint)}
.ayu-tema--vacia .ayu-tema__n{color:var(--muted)}
/* Esqueleto con la forma de la tarjeta real. */
.ayu-tema--esqueleto{box-shadow:none}
.ayu-esq-ic{flex:none; width:52px; height:52px; border-radius:14px}
.ayu-esq-l1{display:block; height:16px; width:55%}
.ayu-esq-l2{display:block; height:12px; width:85%; margin-top:6px}
.ayu-esq-h2{display:block; height:26px; width:min(260px,70%); margin-bottom:16px}

/* ---------- Tema abierto ---------- */
.ayu-tema-cab{display:flex; align-items:center; gap:16px}
.ayu-tema-cab__ic{width:58px; height:58px; border-radius:16px}
.ayu-tema-cab__ic svg{width:28px; height:28px}
.ayu-tema-cab__txt{min-width:0}
.ayu-tema-cab .ayu-h2{margin:0}
.ayu-tema-cab__desc{margin:4px 0 0; color:var(--muted); overflow-wrap:anywhere}

/* ---------- Acordeones ---------- */
.ayu-acordeon{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.ayu-item{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); scroll-margin-top:92px;
  transition:border-color .2s ease, box-shadow .2s ease}
.ayu-item:hover{border-color:var(--line-strong)}
.ayu-item--abierto{border-color:var(--orange); box-shadow:var(--shadow-md)}
.ayu-item__h{margin:0; font-size:inherit; letter-spacing:0}
.ayu-item__btn{display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:16px 16px 16px 20px; border:0; border-radius:16px;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.ayu-item__txt{display:grid; gap:4px; flex:1; min-width:0}
.ayu-item__tema{justify-self:start; padding:3px 10px; border-radius:var(--radius-pill); background:var(--bg-cool); color:var(--muted); font-size:.76rem; font-weight:700}
.ayu-item__t{font:700 1.06rem/1.35 var(--font-display); color:var(--navy); overflow-wrap:anywhere}
/* Dentro del <h3>: el resumen recupera la letra y el peso del texto normal. */
.ayu-item__r{color:var(--muted); font-family:var(--font-body); font-size:.94rem; font-weight:400; line-height:1.5; overflow-wrap:anywhere}
.ayu-item__ind{flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--bg-cool); color:var(--navy);
  transition:transform .22s ease, background .2s ease}
.ayu-item__ind svg{width:18px; height:18px}
.ayu-item__btn:hover .ayu-item__ind{background:var(--orange-soft)}
.ayu-item__btn[aria-expanded="true"] .ayu-item__ind{transform:rotate(180deg); background:var(--orange)}
.ayu-item__panel{padding:0 20px 22px}
.ayu-item__panel:not([hidden]){animation:ayu-abrir .22s ease}
@keyframes ayu-abrir{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------- Respuesta (HTML del backend: solo presentación, el contenido no se toca) ---------- */
.ayu-art{padding-top:18px; border-top:1px solid var(--line)}
.ayu-art--cargando{display:grid; gap:10px}
.ayu-art--cargando .skeleton{display:block; height:14px}
.ayu-art--cargando .skeleton:nth-child(2){width:92%}
.ayu-art--cargando .skeleton:nth-child(3){width:68%}
.ayu-art__vacio{margin:0; color:var(--muted)}
.ayu-art__cuerpo{max-width:none; color:var(--ink); font-size:1.02rem; line-height:1.72; overflow-wrap:break-word}
.ayu-art__cuerpo > :first-child{margin-top:0}
.ayu-art__cuerpo > :last-child{margin-bottom:0}
.ayu-art__cuerpo p{margin:0 0 14px}
/* El editor del backend guarda párrafos justificados (style="text-align:justify"); aquí se leen alineados a la izquierda
   (decisión 4 del readonly). Solo el justificado y solo dentro de Ayuda: un centrado intencional se respeta. */
.ayu-art__cuerpo [style*="justify"], .ayu-art__cuerpo [align="justify"]{text-align:left !important}
.ayu-art__cuerpo h1, .ayu-art__cuerpo h2, .ayu-art__cuerpo h3, .ayu-art__cuerpo h4{margin:24px 0 10px; color:var(--navy); line-height:1.3}
.ayu-art__cuerpo h1{font-size:1.3rem}
.ayu-art__cuerpo h2{font-size:1.2rem}
.ayu-art__cuerpo h3{font-size:1.1rem}
.ayu-art__cuerpo h4{font-size:1rem}
.ayu-art__cuerpo ul, .ayu-art__cuerpo ol{margin:0 0 16px; padding-left:1.4em}
.ayu-art__cuerpo li{margin:6px 0; padding-left:2px}
.ayu-art__cuerpo strong, .ayu-art__cuerpo b{font-weight:700}
.ayu-art__cuerpo a{color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere}
.ayu-art__cuerpo a:hover{text-decoration-thickness:2px}
.ayu-art__cuerpo img, .ayu-art__cuerpo video, .ayu-art__cuerpo iframe{max-width:100%; height:auto; border-radius:10px}
.ayu-art__cuerpo table{display:block; max-width:100%; overflow-x:auto; margin:0 0 16px; border-collapse:collapse}
.ayu-art__cuerpo th, .ayu-art__cuerpo td{padding:8px 10px; border:1px solid var(--line); text-align:left; vertical-align:top}
.ayu-art__cuerpo pre{max-width:100%; overflow-x:auto; white-space:pre-wrap}
.ayu-art__cuerpo blockquote{margin:18px 0; padding:12px 16px; border-left:4px solid var(--orange); border-radius:0 10px 10px 0; background:var(--orange-soft); color:var(--navy)}
.ayu-art__cuerpo hr{margin:20px 0; border:0; border-top:1px solid var(--line)}

/* ---------- Avisos: vacío, error, no encontrado ---------- */
.ayu-aviso{display:grid; justify-items:center; gap:12px; padding:30px 22px; background:#fff; border:1px dashed var(--line-strong); border-radius:18px;
  color:var(--muted); text-align:center}
.ayu-aviso__txt{display:grid; gap:4px}
.ayu-aviso b{color:var(--navy); font-family:var(--font-display); font-size:1.05rem}
.ayu-aviso--error{grid-template-columns:auto 1fr auto; justify-items:start; align-items:center; text-align:left; border-style:solid; border-color:#FECACA; background:#FEF2F2}
.ayu-aviso--error > svg{width:30px; height:30px; color:#B91C1C}
.ayu-aviso--info{justify-items:start; margin-bottom:18px; text-align:left; border-style:solid; border-color:#F7D9A6; background:var(--orange-soft)}
.ayu-art .ayu-aviso{padding:18px}

/* ---------- Botones de la página ---------- */
.ayu-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:.6em 1.25em; border:1.5px solid transparent;
  border-radius:12px; font:700 .95rem/1.2 var(--font-display); text-align:center; text-decoration:none; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease}
/* El amarillo de la marca (--orange, el de .btn-primary); al pasar el cursor --orange-deep con el texto en navy (5,45:1). */
.ayu-btn--pri{background:var(--orange); color:var(--navy)}
.ayu-btn--pri:hover{background:var(--orange-deep); color:var(--navy)}
.ayu-btn--sec{background:#fff; border-color:var(--line-strong); color:var(--navy)}
.ayu-btn--sec:hover{border-color:var(--navy)}

/* ---------- Soporte: un solo bloque, ligero ---------- */
.ayu-soporte{display:flex; align-items:center; gap:18px; margin-top:clamp(28px,4vw,40px); padding:20px 22px; background:#fff;
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm)}
.ayu-soporte[hidden]{display:none}
.ayu-soporte__ic{flex:none; display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--navy); color:var(--orange)}
.ayu-soporte__ic svg{width:24px; height:24px}
.ayu-soporte__txt{flex:1; min-width:0}
.ayu-soporte__t{margin:0; font-size:1.08rem; font-weight:700; color:var(--navy)}
.ayu-soporte__txt p{margin:3px 0 0; color:var(--muted)}
.ayu-soporte .ayu-btn{flex:none}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .ayu-head{padding-block:22px 26px}
  .ayu-head .ayu-head__sub{font-size:.98rem}
  .ayu-buscador__caja{min-height:56px; padding-left:16px; gap:10px}
  .ayu-buscador input{min-height:52px; font-size:1rem}
  .ayu-cuerpo{padding-top:18px}
  .ayu-temas{gap:10px}
  .ayu-tema{min-height:84px; gap:14px; padding:14px 12px 14px 14px}
  .ayu-tema__ic{width:44px; height:44px; border-radius:12px}
  .ayu-tema__ic svg{width:22px; height:22px}
  .ayu-tema__ir{width:32px; height:32px}
  .ayu-tema-cab__ic{width:48px; height:48px; border-radius:14px}
  .ayu-item__btn{gap:10px; padding:14px 12px 14px 16px; min-height:60px}
  .ayu-item__ind{width:34px; height:34px}
  .ayu-item__panel{padding:0 16px 18px}
  .ayu-art__cuerpo{font-size:1rem; line-height:1.68}
  .ayu-aviso--error{grid-template-columns:auto 1fr}
  .ayu-aviso--error .ayu-btn{grid-column:1 / -1; width:100%}
  .ayu-soporte{flex-wrap:wrap; padding:18px}
  .ayu-soporte .ayu-btn{width:100%}
}
/* Teléfono en horizontal y ventanas bajas: el encabezado no se come la pantalla. */
@media (max-height:520px) and (orientation:landscape){
  .ayu-head{padding-block:16px 18px}
  .ayu-head .ayu-head__sub{display:none}
  .ayu-buscador{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .ayu-tema, .ayu-tema__ir, .ayu-item, .ayu-item__ind, .ayu-buscador__caja{transition:none}
  a.ayu-tema:hover, a.ayu-tema:hover .ayu-tema__ir{transform:none}
  .ayu-item__panel:not([hidden]){animation:none}
}