/* Correcciones visuales globales (auditoría 6-10-2026). Se carga la última para ganar a los estilos en línea de cada página. */

/* Fila de metadatos del artículo (lectura, autor, verificación): en móvil se apila en vez de apretarse en tres columnas */
.twl-meta{flex-wrap:wrap;row-gap:6px}
@media(max-width:640px){
  .twl-meta{flex-direction:column;align-items:center;gap:4px;font-size:14px;margin-top:14px}
}

/* Semáforo: en móvil el párrafo largo se lee mejor alineado a la izquierda */
@media(max-width:640px){
  .twl-semaforo{text-align:left;align-items:flex-start;padding:20px 18px;gap:14px}
  .twl-semaforo__luz{width:46px;height:46px;font-size:24px}
  .twl-semaforo__txt h2{font-size:21px !important;line-height:1.25 !important}
  .twl-semaforo__txt p{font-size:15px}
}

/* Tablas: en móvil celdas más compactas y etiquetas de estado que no se recortan */
@media(max-width:640px){
  .twl-tabla{font-size:.9rem}
  .twl-tabla th,.twl-tabla td{padding:.55rem .6rem}
  .twl-estado{white-space:normal;font-size:.75rem;padding:.15rem .5rem;line-height:1.3;text-align:center}
}

/* Texto pequeño de la llamada a la acción móvil: mínimo legible */
.twl-ctam__small{font-size:12px !important}

/* Migas de pan superiores: el main ya reserva la altura de la cabecera fija; no sumar otro hueco igual encima */
main > .twl-breadcrumb--top:first-child{padding-top:.85rem}

/* Tablas anchas: siempre dentro de su columna, con desplazamiento propio en vez de salirse de la página */
table.twl-tabla{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* URL o código largos dentro del texto: que corten línea en móvil */
main p code,main li code{overflow-wrap:anywhere}

/* Contraste mínimo legible (WCAG AA) en notas, IVA y fuentes de los módulos compartidos */
.twl-diag__nota,.twl-sw-precio__iva,.twl-pack__iva,.twl-sw-fuente{color:#5b6b76 !important}
.twl-sw-kicker,.twl-pack__kicker,.twl-oferta__k{color:#1460c9 !important}
/* Enlaces de complementos: el azul claro de marca no se lee sobre fondo celeste */
.twl-upsell ul li a{color:#176be0}
/* Tablas en móvil: cortar palabras largas con guion para que quepan sin desplazamiento; si aun así no caben, aviso de deslizar y primera columna fija (lo marca /js/twl-fix.v1.js) */
@media(max-width:640px){
  .twl-tabla th,.twl-tabla td{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}
/* En móvil la tabla aprovecha casi todo el ancho de pantalla (sale del margen del texto) y compacta letra y celdas */
@media(max-width:640px){
  main :not(.twl-tabla-scroll) > table.twl-tabla,main .twl-tabla-scroll{width:calc(100% + 32px);max-width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  main .twl-tabla{font-size:.84rem}
  main .twl-tabla th,main .twl-tabla td{padding:.5rem .45rem;line-height:1.35}
}
@media(max-width:640px){
  .twl-desliza::before{content:"Desliza la tabla para ver todas las columnas →";display:block;position:sticky;left:0;font-size:.78rem;font-weight:600;color:#176be0;padding:0 0 .4rem .2rem;white-space:nowrap}
  .twl-desliza-t tr > :first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:2px 0 4px -2px rgba(16,42,67,.25)}
  .twl-desliza-t tr > th:first-child{background:#eef6fb}
}
@media(max-width:640px){.twl-tabla-scroll.twl-desliza > .twl-tabla{margin-top:.2rem}}
/* Semáforos sin icono en el HTML: mostrar el mismo que el resto de su variante */
.twl-semaforo__luz:empty{color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.twl-semaforo--info .twl-semaforo__luz:empty::before{content:"i"}
.twl-semaforo--ok .twl-semaforo__luz:empty::before{content:"✓"}
.twl-semaforo--pend .twl-semaforo__luz:empty::before,.twl-semaforo--pendiente .twl-semaforo__luz:empty::before{content:"!"}
/* Variantes del semáforo: en algunas páginas la regla base (rojo) va después y las anulaba */
.twl-semaforo.twl-semaforo--info{background:#eaf7fc;border-color:#176be0}
.twl-semaforo.twl-semaforo--ok{background:#e8f5e9;border-color:#2e7d32}
.twl-semaforo.twl-semaforo--pendiente,.twl-semaforo.twl-semaforo--pend{background:#fff4e5;border-color:#c2410c}
.twl-pack__badge{font-size:12px !important}