/* ==========================================================================
   CSS no crítico — se carga diferido. Aquí va todo lo que no está en el primer
   viewport: acciones de ficha, autocompletado, definiciones, citas, preguntas
   frecuentes, paginador, pie y hoja de impresión.

   Sacar de aquí el criterio: el CSS crítico viaja EN LÍNEA y sin comprimir en
   cada una de los 2,3 millones de páginas vistas del año, así que todo lo que
   pueda esperar, espera.

   La versión anterior tenía una llave suelta a mitad de fichero. En CSS eso no
   da error: el navegador descarta hasta la siguiente regla válida y sigue como
   si nada. Es el mismo modo de fallo silencioso que persigue todo el proyecto
   —nada se rompe, solo deja de aplicarse—.
   ========================================================================== */

/* ------------------------------------------------- acciones de ficha --- */
/* Copiar, escuchar, imprimir. Las tres son nativas del navegador y las tres
   las usa el público de estas webs: estudiantes y profesores.

   La CAJA (.acts) y su altura mínima están en critical.css, no aquí: la pinta
   el servidor y tiene que estar dimensionada en el primer render. Aquí queda
   solo el aspecto de los botones, que no existen hasta que corre app.js y que
   caben de sobra en la altura ya reservada. */

.acts{margin:0 0 var(--s5)}
.acts button{
  display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);
  padding:.42rem 1.05rem;font:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--fg);cursor:pointer;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  box-shadow:var(--sh-1);
  transition:transform var(--ease),border-color var(--ease),color var(--ease)
}
.acts button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
/* Los iconos heredan el color del botón y escalan con su tipografía, que es
   lo que un juego de iconos por imagen no puede hacer. */
.acts svg,.theme svg{
  flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.acts svg{width:1.05em;height:1.05em}
.theme svg{width:1.1rem;height:1.1rem}

/* ------------------------------------------------------ autocompletado --- */

.ac{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 48px -16px rgb(16 22 34/.28);
  overflow:hidden;margin:0;padding:.35rem;list-style:none
}
.ac li a{
  display:block;padding:.5rem .7rem;border-radius:11px;
  text-decoration:none;color:var(--fg);font-size:.95rem
}
.ac li a:hover,.ac li[aria-selected=true] a{background:var(--ink-soft);color:var(--ink)}
.ac:empty{display:none}

/* --------------------------------------------- definiciones y ejemplos --- */

.defs{margin:0;padding-left:1.25rem}
.defs li{margin:0 0 .55rem}
.defs li::marker{color:var(--ink);font-size:.85em;font-weight:700}

.quote{
  position:relative;margin:0 0 var(--s4);padding:.3rem 0 .3rem 1.1rem;
  border-left:3px solid var(--ink-line);color:var(--muted);font-style:italic
}
.quote cite{
  display:block;font-style:normal;font-size:var(--t-xs);
  margin-top:.35rem;color:var(--muted);font-weight:600
}
.quote cite::before{content:"— "}

/* --------------------------------------------------------- preguntas --- */

.faq{border-top:1px solid var(--line);margin-top:var(--s6);padding-top:var(--s4)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;font-weight:650;list-style:none;
  padding:.9rem 2.2rem .9rem 0;position:relative;letter-spacing:-.01em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--ink-soft);color:var(--ink);
  font-weight:600;font-size:1.05rem;line-height:1
}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 1.1rem;color:var(--muted)}

/* --------------------------------------------------------- paginador --- */

.pager{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:var(--s5) 0}
.pager a,.pager span{
  display:grid;place-items:center;min-width:var(--tap);height:var(--tap);
  padding:0 .65rem;border-radius:var(--r-sm);text-decoration:none;
  color:var(--fg);font-size:var(--t-sm);font-weight:600
}
.pager a{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--ease),border-color var(--ease),color var(--ease)
}
.pager a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.pager span{color:var(--muted)}
.pager a[aria-current]{
  color:#fff;border-color:transparent;
  background:linear-gradient(150deg,var(--ink),var(--ink-deep));box-shadow:var(--glow)
}

/* --------------------------------------------------------------- pie --- */
/* El pie nunca está en el primer viewport. Además de los enlaces legales lleva
   el directorio de la red: los 21 dominios comparten corpus y hasta ahora no
   tenían un solo enlace de sitio a sitio entre ellos. */

.ft{
  position:relative;border-top:1px solid var(--line);margin-top:var(--s6);
  padding:var(--s6) 0;background:var(--surface);
  color:var(--muted);font-size:var(--t-sm)
}
.ft::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 20%,transparent))
}
.ft h2{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink);margin:0 0 var(--s3);padding-left:0;font-weight:700
}
.ft h2::before{display:none}
.ft a{color:var(--muted)}
.ft a:hover{color:var(--ink)}
.ft-sec+.ft-sec{margin-top:var(--s5)}
.ft-net{
  display:grid;gap:.15rem .9rem;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));
  list-style:none;margin:0;padding:0
}
.ft-net a{display:block;padding:.28rem 0;text-decoration:none}
.ft-net a:hover{text-decoration:underline}
.ft-legal{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--t-xs)
}

/* ------------------------------------------------ 404 y desarrollo --- */

.btn{
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding:.6rem 1.3rem;border-radius:var(--r-full);color:#fff;
  background:linear-gradient(150deg,var(--ink),var(--ink-deep));
  box-shadow:var(--glow);text-decoration:none;font-weight:650
}
.notfound{padding:var(--s6) 0;text-align:center}
/* Marcador local: misma caja y misma altura reservada que el anuncio real,
   sin llamar a Google. Cargar anuncios de verdad desde localhost es tráfico
   no válido y se paga con la cuenta, no con un aviso. */
.ad--dev{
  display:grid;place-items:center;align-content:center;
  border:2px dashed var(--line-strong);border-radius:var(--r-md);color:var(--muted)
}
.ad-dev{font-size:var(--t-sm);font-family:var(--mono)}

/* ========================================================== IMPRESIÓN ====
   El público principal son estudiantes y profesores, y imprimen. Fuera
   cabecera, buscador, anuncios, acciones y navegación; queda la respuesta y
   las listas, en negro sobre blanco y sin gastar tinta en fondos. */

@media print{
  .hd,.ft,.ad,.srch,.acts,.net,.skip,.crumb,.pager,.theme{display:none!important}
  :root{
    --bg:#fff;--surface:#fff;--raised:#fff;--fg:#000;--muted:#333;
    --line:#999;--line-strong:#666;--ink:#000;--ink-deep:#000;
    --ink-soft:#fff;--ink-line:#999;--wash:transparent;
    --sh-1:none;--sh-2:none;--glow:none;
    --ok:#000;--bad:#000;--ok-bg:#fff;--bad-bg:#fff
  }
  body{font-size:11pt;line-height:1.4;background:#fff}
  .wrap{max-width:none;padding:0}
  .answer{border:1.5pt solid #000;page-break-inside:avoid;background:#fff}
  .answer::before{display:none}
  .answer .big{color:#000}
  .syl span.tonic{background:#fff;color:#000;border:1pt solid #000}
  .card,.quote,.vs>section,.faq details{page-break-inside:avoid}
  .grid-words{grid-template-columns:repeat(4,1fr);font-size:9pt;gap:0}
  .chips a,.chips span{border:.5pt solid #666}
  a{text-decoration:none;color:#000}
  /* Al imprimir no hay quien despliegue un <details>: se abren todos. */
  .faq details:not([open]) p{display:block}
  .faq summary::after{display:none}
}