/* manual-fixes.css — parche QA sobre manual.css.
   Cárgalo DESPUÉS de /manual/assets/manual.css:
   <link rel="stylesheet" href="/manual/assets/manual-fixes.css" />
   No sustituye ni regenera ningún otro archivo. */

/* 1. Botones: el selector .anvi-manual a ganaba por especificidad y dejaba el
   texto petróleo sobre fondo petróleo. Se iguala la especificidad (clase +
   clase dentro del ámbito) sin usar !important. */

.anvi-manual a.boton--petroleo,
.anvi-manual a.boton--petroleo:visited {
  color: var(--hueso);
  background: var(--petroleo);
  text-decoration: none;
}
.anvi-manual a.boton--petroleo:hover,
.anvi-manual a.boton--petroleo:focus-visible {
  color: var(--hueso);
  background: var(--terracota);
}

.anvi-manual a.boton--terracota,
.anvi-manual a.boton--terracota:visited {
  color: var(--hueso);
  background: var(--terracota);
  text-decoration: none;
}
.anvi-manual a.boton--terracota:hover,
.anvi-manual a.boton--terracota:focus-visible {
  color: var(--hueso);
  background: var(--petroleo);
}

.anvi-manual a.boton--fino,
.anvi-manual a.boton--fino:visited {
  color: var(--petroleo);
  background: transparent;
  text-decoration: none;
}
.anvi-manual a.boton--fino:hover,
.anvi-manual a.boton--fino:focus-visible {
  color: var(--terracota);
  border-color: var(--terracota);
}

/* 2. Tablas anchas. El renderer envuelve la tabla en
   <div class="tabla-desplazable" role="region" aria-label="…" tabindex="0">.
   El wrapper es enfocable, así que el desplazamiento funciona con teclado. */

.anvi-manual .tabla-desplazable {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.1em;
  position: relative;
  border-inline: 1px solid var(--linea);
  /* Sombras de borde: aparecen solo cuando queda contenido fuera de vista. */
  background:
    linear-gradient(to right, var(--hueso) 30%, rgba(251, 250, 247, 0)) left center,
    linear-gradient(to left, var(--hueso) 30%, rgba(251, 250, 247, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(18, 71, 76, 0.16), rgba(18, 71, 76, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(18, 71, 76, 0.16), rgba(18, 71, 76, 0)) right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.anvi-manual .tabla-desplazable:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 2px;
}

.anvi-manual .tabla-desplazable > table {
  margin: 0;
  min-width: 34rem;
  border-collapse: collapse;
}

.anvi-manual .tabla-desplazable th,
.anvi-manual .tabla-desplazable td {
  white-space: normal;
  hyphens: auto;
}

.anvi-manual .tabla-desplazable th:first-child,
.anvi-manual .tabla-desplazable td:first-child {
  padding-left: 0.8em;
}

/* Indicador discreto, solo donde el desplazamiento es probable. */
.anvi-manual .tabla-desplazable::after {
  content: "Desliza la tabla para ver todas las columnas";
  display: block;
  padding: 6px 0.8em 8px;
  font-size: 12.5px;
  color: var(--gris);
  position: sticky;
  left: 0;
  max-width: 100%;
}

@media (min-width: 900px) {
  .anvi-manual .tabla-desplazable::after { content: none; }
}

/* 3. Impresión: tabla normal, sin recorte ni indicador. */

@media print {
  .anvi-manual .tabla-desplazable {
    overflow: visible;
    border: 0;
    background: none;
    max-width: none;
  }
  .anvi-manual .tabla-desplazable > table { min-width: 0; width: 100%; }
  .anvi-manual .tabla-desplazable::after { content: none; }
  .anvi-manual .tabla-desplazable:focus-visible { outline: 0; }
}

/* 4. Paginación del PDF A4. */

@page {
  size: A4;
  margin: 18mm 16mm 22mm;
}

@media print {
  /* Cada capítulo principal abre página; el primer h2 del capítulo no fuerza
     una página en blanco al inicio. */
  .anvi-manual .contenido > h2 {
    break-before: page;
    page-break-before: always;
  }
  .anvi-manual .contenido > h2:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }

  /* Sin títulos huérfanos: el encabezado viaja con lo que sigue. */
  .anvi-manual h1,
  .anvi-manual h2,
  .anvi-manual h3,
  .anvi-manual h4,
  .anvi-manual .ejercicio__pregunta,
  .anvi-manual figcaption {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }

  .anvi-manual p,
  .anvi-manual li,
  .anvi-manual blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Tablas largas: pueden partirse entre páginas, pero nunca a media fila,
     y el encabezado se repite. */
  .anvi-manual table {
    break-inside: auto;
    page-break-inside: auto;
  }
  .anvi-manual thead { display: table-header-group; }
  .anvi-manual tfoot { display: table-footer-group; }
  .anvi-manual tr,
  .anvi-manual th,
  .anvi-manual td {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .anvi-manual caption {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* 5. Capturas de teléfono (430 × 900 u otra proporción vertical). */

.anvi-manual figure.captura {
  margin: 2em auto;
  max-width: 360px;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

.anvi-manual figure.captura img,
.anvi-manual figure.captura picture,
.anvi-manual figure.captura video {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid var(--linea);
  background: var(--hueso-tenue);
}

.anvi-manual figure.captura figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris);
  text-align: left;
}

@media (max-width: 420px) {
  .anvi-manual figure.captura { max-width: 100%; }
  .anvi-manual figure.captura img,
  .anvi-manual figure.captura picture,
  .anvi-manual figure.captura video { max-width: 100%; }
}

@media print {
  .anvi-manual figure.captura {
    max-width: 70mm;
    margin: 8mm auto;
  }
  .anvi-manual figure.captura img,
  .anvi-manual figure.captura picture,
  .anvi-manual figure.captura video {
    max-width: 70mm;
    max-height: 145mm;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .anvi-manual figure.captura figcaption { font-size: 9.5pt; color: #444; }
}