/* assets/css/qa.css - Correcciones de QA: zonas táctiles, apilado de desplegables y contraste. Se carga el último. */

/* Zonas táctiles: el elemento se queda igual de grande a la vista, pero el área pulsable llega a ~44px */
.hub-card-title a, .hub-inline-link, .dash-link, .fuel-more-types, .fuel-sim-btn, .dash-fuel-tag { position: relative; }
.hub-card-title a::after, .hub-inline-link::after, .dash-link::after, .fuel-more-types::after, .fuel-sim-btn::after, .dash-fuel-tag::after, .fuel-dot::after {
  content: ''; position: absolute; inset: 50% auto auto 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
.fuel-dot::after { width: 44px; }
@media (pointer: coarse), (max-width: 47.99rem) {
  .dash-head select, select[data-autosubmit] { min-height: 2.75rem; }
  [data-view] { min-height: 2.75rem; min-width: 2.75rem; }
}

/* Pestañas: el área pulsable incluye un margen lateral (la línea sigue exactamente el ancho del enlace) */
.section-tabs a, .calc-tabs a, .rutas-tabs a { padding: 0 0.55rem !important; }
.section-tabs, .calc-tabs, .rutas-tabs { gap: 0.15rem; margin-left: -0.55rem !important; width: calc(100% + 0.55rem); }

/* Desplegables siempre por encima de lo que tienen debajo */
.rf-pick[open] { z-index: 45; }
.gv-card:has(.gv-menu[open]) { z-index: 30; }
.gv-menu[open] { z-index: 31; }

/* Cabeceras antiguas en móvil: en columna se alinean a la izquierda a todo el ancho (antes quedaban pegadas a la derecha) */
@media (max-width: 39.99rem) { .page-header, .page-header.card { align-items: stretch; } }

/* Las hojas de la página viven dentro de <main> (z-index 10): con una abierta, la barra inferior pasa por debajo */
html.fuel-sheet-lock .bottom-nav, body:has(.fuel-sheet:not([hidden])) .bottom-nav { z-index: 5; }