/* FAQ Asistencia Digital · SQM
   Dirección: utilitaria y serena. Se llega por un QR, casi siempre desde el celular y con
   una duda concreta: buscar primero, leer cómodo, nada que distraiga. Navy SQM como
   estructura, verde SQM como único acento. Tokens de marca sin cambios. */

:root{
  --color-bg:            oklch(0.985 0.004 250);
  --color-surface:       oklch(1 0 0);
  --color-surface-2:     oklch(0.965 0.006 250);
  --color-border:        oklch(0.905 0.010 250);
  --color-border-strong: oklch(0.640 0.014 250);
  --color-text:          oklch(0.271 0.057 250);
  --color-text-muted:    oklch(0.513 0.002 106);
  --color-text-subtle:   oklch(0.530 0.014 250);
  --color-accent:        oklch(0.720 0.178 129);
  --color-accent-fg:     oklch(0.271 0.057 250);
  --color-accent-text:   oklch(0.500 0.140 129);
  --color-focus:         var(--color-accent-text);
  --navy-bg:        oklch(0.19 0.035 250);
  --navy:           oklch(0.271 0.057 250);
  --navy-text:      oklch(0.96 0.006 250);
  --navy-muted:     oklch(0.80 0.015 250);
  --navy-accent-tx: oklch(0.780 0.150 129);

  --font-display: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 20px;
  --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-1: 0 1px 2px oklch(0.27 0.057 250 / 0.06);
  --shadow-2: 0 1px 2px oklch(0.27 0.057 250 / 0.04), 0 4px 12px oklch(0.27 0.057 250 / 0.08);
  --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 200ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --contenedor: 800px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--space-8)}
body{margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-sans);
  font-size:var(--text-md); line-height:1.6; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
h1,h2{margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
img{display:block}
svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
a{color:var(--color-accent-text); font-weight:600; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.solo-lector{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.saltar{position:absolute; left:var(--space-4); top:-64px; z-index:30; padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text)}
.saltar:focus{top:var(--space-3)}

/* cabecera */
.cabecera{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  background:var(--color-surface); border-bottom:1px solid var(--color-border)}
.cabecera img{width:40px; height:40px}
.cabecera-texto{font-family:var(--font-display); font-weight:600; font-size:var(--text-md)}

/* hero: navy sólido, compacto; el buscador es lo principal */
.hero{background:var(--navy); color:var(--navy-text); --color-focus:var(--navy-accent-tx)}
.hero-in{max-width:var(--contenedor); margin:0 auto; padding:var(--space-7) var(--space-4) var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3)}
.sobretitulo{font-size:var(--text-sm); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy-accent-tx)}
.hero h1{font-family:var(--font-display); font-size:var(--text-2xl); line-height:1.1; font-weight:700; letter-spacing:-0.02em}
.bajada{color:var(--navy-muted); max-width:52ch}
.buscador{position:relative; margin-top:var(--space-3); display:flex; align-items:center}
.buscador svg{position:absolute; left:var(--space-4); color:var(--color-text-subtle); pointer-events:none}
.buscador input{width:100%; height:48px; padding:0 var(--space-4) 0 var(--space-7); border:0; border-radius:var(--radius-full);
  background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-md); box-shadow:var(--shadow-2)}
.buscador input::placeholder{color:var(--color-text-subtle)}
.buscador input:focus-visible{outline:2px solid var(--navy-accent-tx); outline-offset:2px}

/* contenido */
.contenido{max-width:var(--contenedor); margin:0 auto; padding:var(--space-5) var(--space-4) var(--space-7)}
.pestanas{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-1); padding:var(--space-1);
  border-radius:var(--radius-full); background:var(--color-surface-2); border:1px solid var(--color-border)}
.pestana{height:44px; border:0; border-radius:var(--radius-full); background:transparent; cursor:pointer;
  font:inherit; font-weight:600; color:var(--color-text-subtle); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}
.pestana[aria-selected="true"]{background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-1)}
.pestana:active{transform:scale(0.97)}
.cuenta{display:inline-flex; align-items:center; height:20px; padding:0 var(--space-2); border-radius:var(--radius-full);
  background:var(--color-surface-2); color:var(--color-text-subtle); font-size:var(--text-xs); font-weight:700; font-variant-numeric:tabular-nums}
.pestana[aria-selected="true"] .cuenta{background:var(--color-accent); color:var(--color-accent-fg)}
.resultado{min-height:var(--space-5); margin:var(--space-4) 0 0; font-size:var(--text-sm); color:var(--color-text-muted)}
.resultado:empty{min-height:0; margin:0}
.tema h2 .cuenta{margin-left:var(--space-2); vertical-align:middle}
/* Con búsqueda activa se muestran ambos públicos: cada bloque dice a quién corresponde */
.buscando .panel::before{content:attr(data-publico); display:block; margin-top:var(--space-6); font-size:var(--text-sm); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-accent-text)}
.buscando .pestana[aria-selected="true"]{background:transparent; box-shadow:none; color:var(--color-text-subtle)}
.buscando .pestana[aria-selected="true"] .cuenta{background:var(--color-surface-2); color:var(--color-text-subtle)}

.tema{margin-top:var(--space-6)}
.tema h2{margin-bottom:var(--space-3);
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; letter-spacing:-0.01em}
.preguntas{border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); overflow:hidden}
.pregunta + .pregunta{border-top:1px solid var(--color-border)}
.pregunta summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  min-height:48px; padding:var(--space-4); font-weight:600; transition:background-color var(--duration-instant) var(--ease-out)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:focus-visible{outline-offset:-2px}
.chevron{margin-top:var(--space-1); color:var(--color-text-subtle); transition:transform var(--duration-base) var(--ease-out)}
.pregunta[open] .chevron{transform:rotate(180deg)}
.pregunta[open] summary{color:var(--color-text)}
.respuesta{padding:0 var(--space-4) var(--space-4); color:var(--color-text); display:flex; flex-direction:column; gap:var(--space-3); max-width:68ch}
.respuesta ul{margin:0; padding-left:var(--space-5); display:flex; flex-direction:column; gap:var(--space-1)}
.pregunta[open] .respuesta{animation:abre var(--duration-base) var(--ease-out)}
@keyframes abre{from{opacity:0; transform:translateY(-4px)}}
mark{background:oklch(0.720 0.178 129 / 0.35); color:inherit; border-radius:2px}

.vacio{margin-top:var(--space-6); padding:var(--space-6) var(--space-4); text-align:center; color:var(--color-text-muted);
  border:1px dashed var(--color-border-strong); border-radius:var(--radius-lg)}

.ayuda{margin-top:var(--space-7); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-surface);
  border:1px solid var(--color-border); border-left:4px solid var(--color-accent); display:flex; flex-direction:column; gap:var(--space-2)}
.ayuda h2{font-family:var(--font-display); font-size:var(--text-lg)}
.ayuda a{overflow-wrap:anywhere}

.pie{display:flex; align-items:center; justify-content:center; gap:var(--space-3); padding:var(--space-5);
  background:var(--navy); color:var(--navy-muted); font-size:var(--text-sm)}
.pie img{width:28px; height:28px}

@media (hover:hover) and (pointer:fine){
  .pregunta summary:hover{background:var(--color-surface-2)}
  .pestana:not([aria-selected="true"]):hover{color:var(--color-text)}
}
@media (min-width:768px){
  .hero-in{padding:var(--space-8) var(--space-5) var(--space-7)}
  .hero h1{font-size:var(--text-3xl)}
  .contenido{padding:var(--space-6) var(--space-5) var(--space-8)}
  .pregunta summary{padding:var(--space-4) var(--space-5)}
  .respuesta{padding:0 var(--space-5) var(--space-5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important; transition-duration:0.01ms!important}
}

.nota-jefes{margin-top:var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg);
  background:var(--color-surface-2); color:var(--color-text-muted); font-size:var(--text-sm)}
.nota-jefes strong{color:var(--color-text)}
.contenido > .resultado + .panel .tema:first-child{margin-top:var(--space-5)}