/* Comparativas y páginas de importación.
 *
 * Va APARTE de `guias.css` a propósito: ese fichero lo escribe
 * `../Novastra/tools/generar-guias.py`, que es otro alcance, y lo pisa entero cada vez que se
 * lanza. Lo que se añadiera allí duraría hasta la siguiente guía. Aquí solo está lo que las
 * guías no tienen —la tabla y cuatro remates—; el resto de la página (cabecera, tipos, pie)
 * sigue saliendo de `guias.css`, que se carga antes.
 */

/* La caja que hace scroll es la que envuelve la tabla, NO la página: en un móvil de 360 px una
 * tabla de tres columnas se sale sí o sí, y lo que no puede pasar es que se vaya de lado el
 * documento entero. `tabindex="0"` en el HTML para que también se pueda desplazar con teclado. */
.tabla-caja {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 16, 43, 0.92), rgba(10, 8, 32, 0.86));
  margin: 18px 0 8px;
}
.tabla-caja:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.comparativa {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.95rem;
}
.comparativa th,
.comparativa td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.comparativa tr:last-child th,
.comparativa tr:last-child td { border-bottom: 0; }
.comparativa thead th {
  font-family: "Orbitron", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  white-space: nowrap;
}
.comparativa thead th.nuestra { color: var(--cian); }
/* La primera columna es el nombre de la fila: cabecera de fila, no dato. */
.comparativa tbody th {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  color: var(--claro);
}
.comparativa td.nuestra { color: var(--claro); }

/* El pie de la tabla: cuándo se comprobó cada dato. Sin esto la tabla es una opinión. */
.verificado { color: var(--tenue); font-size: 0.82rem; margin: 0 0 10px; }

/* El bloque honesto de "cuándo la otra app es mejor".
 *
 * En tono APAGADO a propósito (decisión del dueño, 10/09/2026): empezó en ámbar y ámbar es el
 * color de aviso de este sitio, así que lo que hacía era ponerle un foco encima a lo que gana la
 * competencia. Tiene que estar y tiene que leerse —sin él la página es un anuncio—, pero no tiene
 * que ser lo que más brilla de la página. Gris de línea, fondo casi igual que el papel y el
 * rótulo en el color tenue. */
.honesto {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 20px 0 0;
  background: rgba(255, 255, 255, 0.025);
  color: var(--tenue);
}
.honesto b {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--tenue);
  margin-bottom: 6px;
}
/* Dentro del recuadro, ni las negritas destacan: son el mismo gris, solo un poco más claro. */
.honesto li b { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; color: var(--texto); }
.honesto ul { margin: 8px 0 0; padding-left: 20px; }
.honesto li { margin-bottom: 6px; }

/* Los pasos de las páginas de importación. */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 18px 0 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 16px 20px 16px 62px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(18, 16, 43, 0.92), rgba(10, 8, 32, 0.86));
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 208, 0.5);
  background: rgba(0, 229, 208, 0.1);
  color: var(--cian);
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
}
.pasos h3 {
  margin: 0 0 4px;
  color: var(--claro);
  font-size: 1.05rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
}
.pasos p { margin: 0; font-size: 0.96rem; }