[x-cloak] { display: none !important; }
.tarjeta { background: #fff; border-radius: 0.875rem; box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.04); border: 1px solid rgb(226 232 240); }
.chip { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.15rem 0.5rem; border-radius: 9999px; border: 1px solid transparent; white-space: nowrap; }
.etiqueta { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(100 116 139); margin-bottom: 0.25rem; }
.campo { border: 1px solid rgb(203 213 225); border-radius: 0.5rem; padding: 0.375rem 0.6rem; background: #fff; font-size: 0.875rem; }
.campo:focus { outline: none; box-shadow: 0 0 0 2px rgb(245 158 11 / 0.5); }
.kpi { background: rgb(248 250 252); border: 1px solid rgb(226 232 240); border-radius: 0.75rem; padding: 0.6rem 0.9rem; min-width: 7.5rem; }
.kpi-v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(15 23 42); }
.kpi-t { font-size: 0.7rem; color: rgb(100 116 139); }
.leaflet-popup-content a { color: #b45309; }
table th { font-weight: 600; }

/* Marca Gasolix */
.marca-texto { font-family: 'Archivo', 'Arial Narrow', Arial, sans-serif; font-weight: 900; font-stretch: 72%; line-height: 0.9; letter-spacing: 0.005em; }
.fondo-login { background: radial-gradient(900px 520px at 88% -8%, rgb(245 158 11 / 0.22), transparent 62%), linear-gradient(160deg, #0b1220 0%, #111827 55%, #1e293b 100%); }

/* Móvil: campos a 16 px (si no, el iPhone hace zoom al tocarlos) y chips más cómodos para el dedo */
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) {
  input, select, textarea, .campo { font-size: 16px; }
  .campo { padding: 0.5rem 0.65rem; }
  .chip { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
}

/* Rutas: marcas de origen (A), destino (B) y paradas en el mapa */
.pin-ruta { width: 26px; height: 26px; border-radius: 9999px; background: #475569; color: #fff; font: 700 12px/26px system-ui, sans-serif;
  text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgb(15 23 42 / 0.4); }
.pin-origen { background: #059669; }
.pin-destino { background: #dc2626; }