/* =========================================================
   ESTILOS  — SALIDA DE VEHÍCULOS
   Color de marca: #009FE3
   ========================================================= */

:root {
    --brand: #009FE3;
    --brand-dark: #0080BB;
    --brand-soft: #E8F6FD;
    --ink: #1B2733;
    --muted: #6c757d;
    --surface: #ffffff;
    --bg: #eef3f8;

    /* Elevaciones tipo Material (sombras en capas) */
    --elev-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 3px rgba(16, 42, 67, .10);
    --elev-2: 0 4px 10px rgba(16, 42, 67, .06), 0 2px 4px rgba(16, 42, 67, .08);
    --elev-3: 0 12px 28px rgba(16, 42, 67, .10), 0 4px 8px rgba(16, 42, 67, .06);
    --radius: 22px;
    --radius-sm: 14px;
}

body {
    background: #dfe7ef;
}

/* ---------- Contenedor tipo app móvil ---------- */
.app-shell {
    position: relative;
    max-width: 440px;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    box-shadow: 0 0 60px rgba(16, 42, 67, .12);
}

/* ---------- Barra superior (app bar) ---------- */
.app-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(18px + env(safe-area-inset-top)) 22px 22px;
    color: #fff;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 0 0 26px 26px;
    box-shadow: 0 10px 24px rgba(0, 128, 187, .28);
}

.brand {
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

/* ---------- Zona principal donde flotan las pantallas ---------- */
.app-main {
    position: relative;
    flex: 1 1 auto;
    background: var(--bg);
}

/* eyebrow (paso actual) */
.eyebrow {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
    font-weight: 700;
}

/* ---------- Pantallas (transición entre pasos) ---------- */
.screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    overflow-y: auto;
}

.screen.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* envoltura interna: centra la tarjeta verticalmente */
.screen-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    gap: 16px;
}

/* ---------- Tarjeta (cardview) ---------- */
.surface-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid rgba(16, 42, 67, .04);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--elev-3);
}

.surface-card .h3 {
    color: var(--ink);
}

/* acciones (botones) dentro de la tarjeta */
.screen-actions {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centra los botones (ahora más estrechos) */
    gap: 10px;
}

/* Botones de acción de las pantallas (Continuar / Ingresar / Regresar /
   Iniciar viaje): más estrechos y todos con el mismo ancho entre sí.
   El max-width acota el w-100 de Bootstrap sin necesidad de tocar el HTML. */
.screen-actions .btn-accion {
    width: 100%;
    max-width: 240px;
}

/* ---------- Campos ---------- */
.form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 6px;
}

.form-control {
    border-radius: var(--radius-sm);
    border: 1.5px solid #dde3ea;
    background: #fbfcfe;
}

.form-control:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 .22rem rgba(0, 159, 227, .18);
}

/* ---------- Select nativo (lista desplegable tipo Android) ---------- */
.form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid #dde3ea;
    background-color: #fbfcfe;
    color: var(--ink);
    /* chevron en color de marca */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23009FE3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-select:focus {
    border-color: var(--brand);
    background-color: #fff;
    box-shadow: 0 0 0 .22rem rgba(0, 159, 227, .18);
}

/* color atenuado mientras está la opción "Selecciona…" */
.form-select:has(option[value=""]:checked) {
    color: var(--muted);
}

/* ---------- Desplegable propio (reemplaza la UI del select nativo) ---------- */
.dd {
    position: relative;
}

select.dd-native {
    display: none;
}

.dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    background: #fbfcfe;
    border: 1.5px solid #dde3ea;
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: .5rem 1rem;
    min-height: calc(1.5em + 1rem + 3px);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dd-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-trigger.dd-vacio .dd-label {
    color: var(--muted);
}

.dd-chevron {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--brand);
    transition: transform .2s ease;
}

.dd.abierto .dd-chevron {
    transform: rotate(180deg);
}

.dd-trigger:focus,
.dd.abierto .dd-trigger {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 .22rem rgba(0, 159, 227, .18);
}

.dd-trigger.is-invalid {
    border-color: #dc3545;
}

#alerta-origen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#alerta-origen .ico-aviso {
    width: 18px;
    height: 18px;
    flex: none;
}

#alerta-origen .alerta-origen__texto {
    text-align: center;
}

/* el panel sale desde la caja */
.dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    box-shadow: var(--elev-3);
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-6px) scaleY(.96);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.dd.abierto .dd-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dd-option {
    width: 100%;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 1.05rem;
    color: var(--ink);
    cursor: pointer;
}

.dd-option:hover,
.dd-option:focus {
    outline: none;
    background: var(--brand-soft);
}

.dd-option.sel {
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
}

/* mostrar el mensaje de error (el select va anidado dentro de .dd) */
.dd:has(.dd-native.is-invalid)+.invalid-feedback {
    display: block;
}

/* número de bus tipo placa (caja blanca, borde de marca) */
.input-placa {
    text-align: left;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .12em;
    background: #fff;
    color: var(--brand-dark);
    border: 2.5px solid var(--brand);
    box-shadow: var(--elev-1);
}

.input-placa::placeholder {
    color: rgba(0, 159, 227, .45);
}

.input-placa:focus {
    background: #fff;
    color: var(--brand-dark);
    border-color: var(--brand);
    box-shadow: 0 0 0 .22rem rgba(0, 159, 227, .18);
}

/* ---------- Botón de confirmación dentro de la caja del bus ---------- */
.bus-wrap {
    position: relative;
}

.bus-wrap .input-placa {
    /* número pegado a la izquierda; sitio a la derecha para el botón */
    padding-left: 16px;
    padding-right: 122px;
}

/* en estado de error: ocultar el icono de validación de Bootstrap (lo tapa el
   botón) y conservar el padding para que el número no choque con el botón */
.bus-wrap .input-placa.is-invalid,
.bus-wrap .input-placa.is-invalid:focus {
    background-image: none;
    padding-right: 122px;
}

/* el mensaje de error va fuera de .bus-wrap; se muestra cuando el input es inválido */
#campo-bus .bus-wrap:has(.input-placa.is-invalid)+.invalid-feedback {
    display: block;
}

.btn-confirmar-bus {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 159, 227, .35);
    transition: transform .15s ease, background-color .25s ease, opacity .2s ease;
}

.btn-confirmar-bus:hover {
    background: var(--brand-dark);
}

.btn-confirmar-bus:active {
    transform: translateY(-50%) scale(.9);
}

.btn-confirmar-bus:disabled {
    opacity: .55;
    cursor: default;
}

/* confirmado */
.btn-confirmar-bus.cambiar {
    background: #22B45C;
    box-shadow: 0 4px 10px rgba(34, 180, 92, .35);
}

.btn-confirmar-bus.cambiar:hover {
    background: #1d9c4f;
}

/* cargando: oculta el check y muestra un spinner */
.btn-confirmar-bus.cargando {
    color: transparent;
}

.btn-confirmar-bus.cargando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar-bus .6s linear infinite;
}

@keyframes girar-bus {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Iconos SVG (escalan por tamaño, no por tipografía) ---------- */
.ico {
    display: block;
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

.btn-confirmar-bus .ico {
    width: 16px;
    height: 16px;
}

/* Sin lupa. "Confirmar": solo texto · "Cambiar": flecha circular. */
.btn-confirmar-bus .ico-buscar,
.btn-confirmar-bus .ico-cambiar {
    display: none;
}

.btn-confirmar-bus.cambiar .ico-cambiar {
    display: block;
}

.btn-confirmar-bus.cargando .ico {
    opacity: 0;
}

.icono-circulo .ico {
    width: 15px;
    height: 15px;
}

/* ---------- Mostrar/ocultar contraseña ---------- */
.pass-wrap {
    position: relative;
}

.pass-wrap .form-control {
    padding-right: 50px;
}

/* el ojo y el icono de error comparten ubicación:
   - el ojo aparece cuando el campo (o el propio botón) tiene foco;
   - al enfocar se oculta el icono de error para que no se solapen;
   - sin foco y con error, se ve el icono de error. */
.pass-wrap:focus-within .btn-ver-pass {
    display: grid;
}

.pass-wrap:focus-within .form-control.is-invalid {
    background-image: none;
}

.btn-ver-pass {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    display: none;
    place-items: center;
    cursor: pointer;
    border-radius: 10px;
    transition: color .2s ease;
}

.btn-ver-pass:hover {
    color: var(--brand-dark);
}

.btn-ver-pass.mostrando {
    color: var(--brand);
}

.btn-ver-pass .ico {
    width: 22px;
    height: 22px;
}

/* alterna ojo / ojo-tachado según el estado */
.btn-ver-pass .ico-eye-off {
    display: none;
}

.btn-ver-pass.mostrando .ico-eye {
    display: none;
}

.btn-ver-pass.mostrando .ico-eye-off {
    display: block;
}

/* ocultar el "ojo" nativo del navegador para no duplicarlo */
#in-pass::-ms-reveal,
#in-pass::-ms-clear {
    display: none;
}

.overlay-carga {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.overlay-carga.d-none {
    display: none;
}

.overlay-carga__box {
    background: #fff;
    border-radius: 14px;
    padding: 1.3rem 1.7rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #d8d8d8;
    border-top-color: #009FE3;
    /* azul de marca */
    border-radius: 50%;
    animation: girar .8s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* el error vive fuera de .pass-wrap; se muestra cuando el input es inválido */
.pass-wrap:has(.form-control.is-invalid)+.invalid-feedback {
    display: block;
}

/* píldora con el NIT de la empresa */
.badge-empresa {
    align-self: flex-start;
    background: var(--brand-soft);
    border: 1px solid rgba(0, 159, 227, .25);
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--brand-dark);
}

.badge-empresa b {
    color: var(--ink);
}

/* confirmación */
.check-ok {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ADE80, #22B45C);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 48px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(34, 180, 92, .35), 0 0 0 8px rgba(74, 222, 128, .14);
}

.check-ok .ico {
    width: 46px;
    height: 46px;
}

.btn-accion {
    transition: transform .18s ease, box-shadow .25s ease, background-color .3s ease;
    padding: 15px 32px !important;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

/* Azul sólido — acción principal */
.btn-custom-blue {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    border: none;
    box-shadow: 0 8px 18px rgba(0, 159, 227, .30);
}

.btn-custom-blue:hover,
.btn-custom-blue:focus {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark));
    color: #fff;
}

/* Outline azul */
.btn-outline-custom-blue {
    color: var(--brand);
    border: 2px solid var(--brand);
    background-color: transparent;
    transition: all .3s ease;
}

.btn-outline-custom-blue:hover {
    color: #fff;
    background-color: var(--brand);
}

/* Cerrar sesión: botón flotante en una esquina del marco */
.btn-cerrar-sesion {
    position: absolute;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0, 159, 227, .30);
    cursor: pointer;
    transition: background-color .3s ease, box-shadow .25s ease, transform .15s ease;
}

.btn-cerrar-sesion .ico {
    width: 16px;
    height: 16px;
}

.btn-cerrar-sesion:hover,
.btn-cerrar-sesion:focus {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark));
    color: #fff;
}

.btn-cerrar-sesion:active {
    transform: scale(.97);
}

/* Botón "volver" con círculo */
.btn-volver-moderno {
    background-color: #fff;
    color: var(--brand-dark);
    border: 1.5px solid #dde3ea;
    border-radius: 50px;
    padding: 8px 20px 8px 10px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    align-self: center;
    box-shadow: var(--elev-1);
}

.btn-volver-moderno .icono-circulo {
    background-color: var(--brand);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all .3s ease;
}

/* --- Hover SOLO en dispositivos con mouse --- */
@media (hover: hover) {
    .btn-accion:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 159, 227, .42) !important;
    }

    .btn-outline-custom-blue:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 159, 227, .35) !important;
    }

    .btn-volver-moderno:hover {
        border-color: var(--brand);
        color: var(--brand-dark);
        transform: translateY(-2px);
        box-shadow: var(--elev-2);
    }
}

/* --- Feedback al toque (móvil) --- */
.btn-accion:active,
.btn-outline-custom-blue:active,
.btn-volver-moderno:active {
    transform: scale(.97);
}

.dd-search {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .85rem;
    border: none;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1rem;
    outline: none;
}

.dd-results {
    max-height: 260px;
    /* la lista hace scroll, no crece infinito */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dd-nota {
    padding: .8rem .85rem;
    color: #8a8a8a;
    font-size: .9rem;
    text-align: center;
}

/* --- Accesibilidad: respeta "reducir movimiento" --- */
@media (prefers-reduced-motion: reduce) {

    .screen,
    .btn-accion,
    .btn-outline-custom-blue,
    .btn-volver-moderno {
        transition: none;
    }
}

/* ===== Card de información del conductor / bus ===== */
.info-card {
    border: 1px solid rgba(0, 159, 227, .35);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 1rem;
    background: rgba(0, 159, 227, .05);
}

.info-conductor__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 159, 227, .25);
}

.info-conductor__fila:last-child {
    border-bottom: 0;
}

.info-conductor__etiqueta {
    font-size: .85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.info-conductor__valor {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.info-conductor__editar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 159, 227, .25);
}

/* =========================================================
   MODAL GENÉRICO (confirmaciones y avisos)
   ========================================================= */
.modal-cr {
    position: fixed;
    inset: 0;
    z-index: 10000;
    /* por encima del overlay de carga */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(16, 42, 67, .45);
    opacity: 0;
    transition: opacity .18s ease;
}

.modal-cr.visible {
    opacity: 1;
}

.modal-cr.d-none {
    display: none;
}

.modal-cr__box {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--elev-3);
    transform: translateY(12px) scale(.98);
    transition: transform .18s ease;
}

.modal-cr.visible .modal-cr__box {
    transform: none;
}

.modal-cr__titulo {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.modal-cr__mensaje {
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

.modal-cr__acciones {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {

    .modal-cr,
    .modal-cr__box {
        transition: none;
    }
}

/* =========================================================
   PANTALLA 3 (Datos del viaje) — COMPACTACIÓN GENERAL
   Aplica SIEMPRE (todos los celulares). Es la que evita que
   la pantalla se desordene en equipos medianos, sin tocar el
   HTML ni la lógica.
   ========================================================= */

/* La tarjeta arranca arriba en vez de centrarse: con un
   formulario largo evita que el contenido se corte por arriba
   y mantiene todo ordenado a medida que aparecen los campos. */
#screen-viaje .screen-inner {
    justify-content: flex-start;
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
}

#screen-viaje .surface-card {
    padding: 20px 20px;
}

#screen-viaje .h3 {
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

/* Menos separación entre campos (mb-3 de Bootstrap = 1rem) */
#screen-viaje .mb-3 {
    margin-bottom: .75rem !important;
}

#screen-viaje .form-label {
    margin-bottom: 4px;
}

/* Tarjeta del conductor: más pequeña y con menos aire */
#screen-viaje .info-card {
    padding: 9px 12px;
    margin-bottom: .65rem;
    border-radius: 12px;
}

#screen-viaje .info-conductor__fila {
    padding: 3px 0;
    gap: 10px;
    border-bottom: 0;
}

#screen-viaje .info-conductor__etiqueta {
    font-size: .72rem;
}

#screen-viaje .info-conductor__valor {
    font-size: .9rem;
}

/* Botón "Cambiar conductor" más compacto que un botón de acción normal */
#screen-viaje #btn-cambiar-conductor {
    width: fit-content !important;
    /* anula el w-100 de Bootstrap */
    margin: .55rem auto 0 !important;
    /* lo centra dentro de la card */
    padding: 8px 18px !important;
    font-size: .85rem;
}

/* Botones de acción más juntos */
#screen-viaje .screen-actions {
    margin-top: 16px;
    gap: 9px;
}

/* =========================================================
   PANTALLA 3 — COMPACTACIÓN EXTRA (celulares pequeños)
   Se suma a lo anterior solo cuando hay poca altura.
   Sube el max-height si quieres que aplique a más equipos.
   ========================================================= */
@media (max-height: 760px) {

    #screen-viaje .screen-inner {
        padding-top: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 9px;
    }

    #screen-viaje .surface-card {
        padding: 16px 16px;
    }

    #screen-viaje .h3 {
        font-size: 1.2rem;
        margin-bottom: .35rem;
    }

    #screen-viaje .mb-3 {
        margin-bottom: .55rem !important;
    }

    #screen-viaje .form-label {
        margin-bottom: 3px;
        font-size: 13px;
    }

    /* Inputs/selects nativos más bajos que el tamaño -lg */
    #screen-viaje .form-control-lg,
    #screen-viaje .form-select-lg {
        padding-top: .45rem;
        padding-bottom: .45rem;
        font-size: 1rem;
    }

    /* Placa del bus más compacta */
    #screen-viaje .input-placa {
        font-size: 22px;
    }

    /* Desplegable propio (lo que realmente se ve en origen/destino) */
    #screen-viaje .dd-trigger {
        font-size: 1.05rem;
        padding: .4rem .85rem;
        min-height: calc(1.4em + .8rem + 3px);
    }

    #screen-viaje .info-card {
        padding: 8px 11px;
        margin-bottom: .5rem;
    }

    #screen-viaje .info-conductor__fila {
        padding: 2px 0;
    }

    #screen-viaje .info-conductor__etiqueta {
        font-size: .7rem;
    }

    #screen-viaje .info-conductor__valor {
        font-size: .88rem;
    }

    #screen-viaje .screen-actions {
        margin-top: 13px;
        gap: 8px;
    }

    #screen-viaje .btn-accion {
        padding: 11px 28px !important;
    }
}