/*
 * «Agenda tu visita» (citas). Prefijo ct-. Marca de Aybar: petróleo #03424E, naranja #FFA726 / #F6A42C.
 * Los selectores llevan .ct-* delante para ganarle a los overrides globales de template.css (h3 blanco, etc.).
 * El asistente de 5 pasos vive en el modal (resources/views/citas/boton.blade.php, public/js/citas/citas.js): a pantalla
 * completa en el celular (≤ 575 px, modal-fullscreen-sm-down) y ancho en la computadora, con el bus a la izquierda y las
 * tarjetas de cada asiento a la derecha en el paso 3. Las páginas de cancelar y de pago usan .ct-pagina / .ct-tarjeta.
 */
:root {
    --ct-petroleo: #03424E;
    --ct-petroleo-2: #054E5C;
    --ct-petroleo-claro: #E6F0F2;
    --ct-naranja: #FFA726;
    --ct-naranja-cta: #F6A42C;
    --ct-naranja-asiento: #F7A21B;
    --ct-texto: #1F2D30;
    --ct-texto-2: #37555C;
    --ct-claro: #F7F7F7;
    --ct-borde: #CFDDE0;
    --ct-error: #B42318;
    --ct-ok: #067647;
    --ct-ocupado: #4F5A5F;
    --ct-retenido: #95A0A5;
    --ct-radio: 12px;
}

/* ---------- Botón «Agenda tu visita» ---------- */
.ct-cta {
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 48px; padding: .75rem 1.6rem;
    border: 0; border-radius: 999px;
    background: var(--ct-naranja); color: #02232A;
    font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18); cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.ct-cta:hover { background: var(--ct-naranja-cta); transform: translateY(-1px); }
.ct-cta:focus-visible { outline: 3px solid var(--ct-petroleo); outline-offset: 3px; }
.ct-cta__icono svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ct-cta-envoltura { display: flex; justify-content: center; padding: 1.75rem 1rem .5rem; }

/* Variante secundaria del héroe del inicio (production/2): contorno blanco sobre petróleo translúcido, para no
   competir con el naranja de «Compra tu lote en línea» (.tg-carrusel-cta) y leerse sobre la foto. Mismo alto (52 px). */
.ct-cta.ct-cta--heroe {
    gap: 10px; min-height: 52px; padding: 6px 22px 6px 6px;
    background: rgba(3, 66, 78, .78); color: #fff;
    box-shadow: inset 0 0 0 2px #fff, 0 14px 30px -10px rgba(0, 0, 0, .55);
    font-size: 15px; letter-spacing: normal; text-transform: none; line-height: 1.2;
}
.ct-cta.ct-cta--heroe:hover { background: #03424E; color: #fff; }
.ct-cta.ct-cta--heroe:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ct-cta--heroe .ct-cta__icono { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ct-petroleo); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-cta--heroe .ct-cta__icono svg { width: 20px; height: 20px; }
/* El grupo de los dos CTA dentro de la diapositiva (lo arma citas.js). */
.ct-heroe-acciones { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.ct-heroe-acciones > .tg-carrusel-cta { margin-top: 0; }
/* Sin JS el botón queda aquí, bajo el carrusel; con JS se va al héroe y esto no ocupa lugar. */
.ct-heroe-respaldo { display: flex; justify-content: center; padding: 1rem; }
.ct-heroe-respaldo--vacio { display: contents; padding: 0; }
/* Franja bajo el carrusel cuando los CTA no entran en la diapositiva (citas.js, ajustarHeroe): ahí van los dos,
   «Compra tu lote en línea» y «Agenda tu visita», y los del carrusel se ocultan. */
.ct-heroe-franja { padding: 14px 16px; background: var(--ct-petroleo); }
.ct-heroe-franja[hidden], .ct-heroe--franja .ct-heroe-acciones { display: none; }
.ct-heroe-franja .ct-heroe-acciones { margin: 0; }
/* En el celular van lado a lado (dos columnas, sin íconos), para que la franja sea baja y no llegue al botón
   flotante «Comprar en línea» de abajo. */
@media (max-width: 479.98px) {
    .ct-heroe-franja { padding: 12px; }
    .ct-heroe-franja .ct-heroe-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ct-heroe-franja .tg-carrusel-cta, .ct-heroe-franja .ct-cta.ct-cta--heroe {
        justify-content: center; min-height: 52px; padding: 6px 10px; text-align: center; font-size: 14px; line-height: 1.15; width: auto; animation: none;
    }
    .ct-heroe-franja .tg-carrusel-cta__icono, .ct-heroe-franja .ct-cta__icono { display: none; }
}

/* ---------- El modal: cabecera con el progreso, cuerpo con un paso a la vez y barra inferior fija ---------- */
.ct-modal { --bs-modal-width: 680px; }
.ct-modal[data-ct-paso-actual=asientos] { --bs-modal-width: 1120px; }
.ct-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; font-family: Montserrat-Regular, Montserrat, Arial, sans-serif; color: var(--ct-texto); }
.ct-modal [hidden] { display: none !important; }

.ct-modal .ct-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .85rem; padding: 1rem 1.25rem 1.1rem; background: var(--ct-petroleo); color: #fff; border: 0; }
.ct-cabecera__arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ct-cabecera__titulos { min-width: 0; }
.ct-modal .ct-modal__titulo { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.3rem; line-height: 1.25; color: #fff; letter-spacing: .02em; }
.ct-modal .ct-modal__bajada { margin: .15rem 0 0; color: var(--ct-naranja); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .95rem; }
.ct-modal .ct-modal__bajada:empty { display: none; }
.ct-modal .ct-cabecera .btn-close { margin: 0; padding: .6rem; opacity: .9; flex-shrink: 0; }
.ct-modal .ct-cabecera .btn-close:focus-visible { box-shadow: none; outline: 3px solid var(--ct-naranja); outline-offset: 2px; opacity: 1; }

/* Progreso: «Paso 3 de 5 · Asientos» y una barra por paso (con su nombre en la computadora). */
.ct-progreso { display: grid; gap: .45rem; }
.ct-progreso[hidden] { display: none; }
.ct-modal .ct-progreso__texto { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .82rem; letter-spacing: .03em; color: rgba(255, 255, 255, .88); }
.ct-progreso__pasos { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ct-progreso__paso { display: grid; gap: .35rem; min-width: 0; font-size: .74rem; color: rgba(255, 255, 255, .7); }
.ct-progreso__paso::before { content: ''; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: background-color .25s ease; }
.ct-progreso__paso--hecho::before { background: rgba(255, 167, 38, .65); }
.ct-progreso__paso--actual::before { background: var(--ct-naranja); }
.ct-progreso__paso--actual { color: #fff; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; }
.ct-progreso__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct-modal .ct-cuerpo { padding: 1.35rem 1.35rem 1.5rem; background: #fff; }
.ct-paso { display: grid; gap: 1.1rem; }
.ct-modal .ct-paso__titulo { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.25rem; line-height: 1.3; color: var(--ct-petroleo); }
.ct-modal .ct-paso__titulo:focus { outline: none; }
.ct-modal .ct-paso__titulo:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 4px; border-radius: 4px; }
.ct-modal .ct-paso__bajada { margin: -.7rem 0 0; color: var(--ct-texto-2); font-size: .92rem; }

.ct-bloque { display: grid; gap: .6rem; }
.ct-modal .ct-bloque__titulo { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: 1rem; color: var(--ct-petroleo); }
.ct-modal .ct-bloque__subtitulo { margin: .2rem 0 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .92rem; color: var(--ct-petroleo); }
.ct-ayuda { font-size: .84rem; color: var(--ct-texto-2); margin: 0; }
.ct-ayuda:empty { display: none; }
.ct-error { font-size: .85rem; color: var(--ct-error); }
.ct-error:empty { display: none; }
.ct-opcional { font-family: Montserrat-Regular, Montserrat, Arial, sans-serif; color: var(--ct-texto-2); font-size: .85rem; }
.ct-enlace {
    justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .25rem; border: 0; background: none;
    color: var(--ct-petroleo); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ct-enlace:hover { color: #02323B; }
.ct-enlace:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 2px; border-radius: 4px; }

/* Avisos de error (arriba del paso) */
.ct-aviso { border-radius: 10px; padding: .75rem .95rem; margin-bottom: 1rem; font-size: .92rem; background: var(--ct-petroleo-claro); color: var(--ct-petroleo); }
.ct-aviso--error { background: #FEF3F2; color: var(--ct-error); box-shadow: inset 4px 0 0 var(--ct-error); }
.ct-modal .ct-aviso:empty { display: none; }

/* Campos */
.ct-campo { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.ct-campo label { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .92rem; color: var(--ct-petroleo); margin: 0; }
.ct-campo input[type=text], .ct-campo input[type=tel], .ct-campo input[type=email], .ct-campo input[type=date], .ct-campo input[type=number], .ct-campo select,
.ct-otra-fecha input {
    width: 100%; min-height: 46px; padding: .55rem .8rem;
    border: 1.5px solid var(--ct-borde); border-radius: 10px; background: #fff;
    font-size: 1rem; color: var(--ct-texto);
}
.ct-modal input:focus, .ct-modal select:focus { outline: none; border-color: var(--ct-petroleo); box-shadow: 0 0 0 3px rgba(3, 66, 78, .22); }
.ct-campo [aria-invalid=true] { border-color: var(--ct-error); }
.ct-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.ct-check { grid-template-columns: auto 1fr; align-items: start; column-gap: .65rem; padding: .85rem .95rem; border-radius: var(--ct-radio); background: var(--ct-claro); }
.ct-check input { width: 22px; height: 22px; margin-top: .1rem; accent-color: var(--ct-petroleo); }
.ct-check label { font-family: Montserrat-Regular, Montserrat, Arial, sans-serif; font-size: .9rem; color: var(--ct-texto); }
.ct-check label a { color: var(--ct-petroleo); font-weight: 600; text-decoration: underline; }
.ct-check .ct-error { grid-column: 1 / -1; }

.ct-oculto { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Solo para lectores de pantalla: ocupa 1 px recortado, sin afectar el diseño (regiones aria-live). */
.ct-solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Opciones (radio con tarjeta): proyectos, turnos, Sí/No, tramos y puntos. El radio queda encima, invisible, para el teclado. */
.ct-opciones { display: grid; gap: .55rem; }
.ct-opciones--proyectos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ct-opciones--turnos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ct-opciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-opciones--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-opcion { position: relative; display: block; margin: 0; }
.ct-opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ct-opcion__caja {
    display: grid; gap: .15rem; height: 100%; min-height: 58px; padding: .7rem .85rem;
    border: 1.5px solid var(--ct-borde); border-radius: var(--ct-radio); background: #fff;
    font-size: .88rem; color: var(--ct-texto); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ct-opcion__caja b { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-weight: normal; font-size: .98rem; color: var(--ct-petroleo); }
.ct-opcion__caja small { color: var(--ct-texto-2); font-size: .8rem; }
.ct-opcion:hover .ct-opcion__caja { border-color: #8FB0B7; }
.ct-opcion input:checked + .ct-opcion__caja { border-color: var(--ct-petroleo); background: var(--ct-petroleo-claro); box-shadow: inset 0 0 0 1.5px var(--ct-petroleo); }
.ct-opcion input:checked + .ct-opcion__caja::after {
    content: '✓'; position: absolute; top: .55rem; right: .65rem; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ct-petroleo); color: #fff; font-size: .7rem; line-height: 20px; text-align: center;
}
.ct-opcion input:focus-visible + .ct-opcion__caja { outline: 3px solid var(--ct-naranja); outline-offset: 2px; }
.ct-opcion input:disabled { cursor: not-allowed; }
.ct-opcion input:disabled + .ct-opcion__caja { background: var(--ct-claro); color: #6E7F84; border-style: dashed; }
.ct-opcion input:disabled + .ct-opcion__caja b { color: #6E7F84; }
.ct-opcion__cupo--pocos { color: #8A4B00 !important; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; }

/* Tira de días */
.ct-dias { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: .5rem; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ct-dia { position: relative; scroll-snap-align: start; }
.ct-dia input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ct-dia__caja {
    display: grid; justify-items: center; gap: 0; padding: .5rem .25rem .55rem; border: 1.5px solid var(--ct-borde); border-radius: var(--ct-radio);
    background: #fff; color: var(--ct-texto-2); font-size: .74rem; line-height: 1.25; text-align: center;
}
.ct-dia__caja b { font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-weight: normal; font-size: 1.35rem; line-height: 1.2; color: var(--ct-petroleo); }
.ct-dia__semana { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; text-transform: capitalize; }
.ct-dia:hover .ct-dia__caja { border-color: #8FB0B7; }
.ct-dia input:checked + .ct-dia__caja { background: var(--ct-petroleo); border-color: var(--ct-petroleo); color: rgba(255, 255, 255, .9); }
.ct-dia input:checked + .ct-dia__caja b { color: #fff; }
.ct-dia input:focus-visible + .ct-dia__caja { outline: 3px solid var(--ct-naranja); outline-offset: 2px; }
.ct-otra-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.ct-otra-fecha label { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .88rem; color: var(--ct-petroleo); }
.ct-otra-fecha input { width: auto; min-width: 11.5rem; min-height: 42px; padding: .4rem .7rem; }

/* Paso 2: movilidad */
.ct-movilidad { padding: 1rem; border-radius: 14px; background: var(--ct-claro); }
.ct-mov__sin-oferta { display: grid; gap: .6rem; padding: .8rem .9rem; border-radius: 10px; background: #FFF8EC; box-shadow: inset 4px 0 0 var(--ct-naranja); }
.ct-modal .ct-mov__sin-oferta-texto { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; color: var(--ct-petroleo); font-size: .92rem; }
.ct-mov__otros { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-mov__otros:empty { display: none; }
.ct-mov__detalle { display: grid; gap: .6rem; }
.ct-mov__puntos { display: grid; gap: .55rem; }
.ct-puntos { display: grid; gap: .55rem; }
/* El punto: la tarjeta del radio y, encima, «Ver en el mapa» abajo a la derecha (fuera del <label>). */
.ct-punto { position: relative; }
.ct-punto .ct-opcion__caja { padding-right: 2.4rem; padding-bottom: .7rem; }
.ct-punto__horas { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .2rem; }
.ct-punto__hora { color: var(--ct-petroleo) !important; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; }
.ct-punto__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-top: .25rem; }
.ct-punto__mapa {
    position: absolute; right: .6rem; bottom: .45rem; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: .1rem .25rem;
    font-size: .84rem; color: var(--ct-petroleo); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; text-decoration: underline;
}
.ct-punto__mapa:hover { color: #02323B; }
.ct-punto__mapa:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 2px; border-radius: 4px; }
.ct-mov__whatsapp a { color: var(--ct-petroleo); font-weight: 600; text-decoration: underline; }
.ct-chip {
    display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border: 1.5px solid var(--ct-petroleo); border-radius: 999px;
    background: #fff; color: var(--ct-petroleo); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .86rem; cursor: pointer;
}
.ct-chip:hover { background: var(--ct-petroleo-claro); }
.ct-chip:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 2px; }

/* Paso 3 con movilidad: el bus y las tarjetas */
.ct-asientos { display: grid; gap: 1.25rem; align-items: start; }
.ct-asientos__bus { display: grid; gap: .55rem; min-width: 0; }
.ct-modal .ct-asientos__tramo { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .9rem; color: var(--ct-petroleo); }
.ct-modal .ct-asientos__tramo:empty { display: none; }
.ct-asientos__vista { min-height: 280px; }
.ct-asientos__vista.ct-bus__vista--3d { min-height: 340px; }
.ct-asientos__vista .mov-bus3d__lienzo { height: 340px; cursor: default; }
.ct-asientos__vista:focus { outline: none; }
.ct-asientos__vista .ct-bus__error { display: grid; gap: .5rem; justify-items: center; padding: 2.5rem 1rem; text-align: center; font-size: .9rem; color: var(--ct-texto-2); }
.ct-asientos__personas { display: grid; gap: .75rem; min-width: 0; }
.ct-modal .ct-asientos__contador { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .9rem; color: var(--ct-petroleo); }
.ct-modal .ct-asientos__contador:empty { display: none; }
.ct-sentidos { display: inline-grid; grid-auto-flow: column; justify-self: start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ct-petroleo-claro); }
.ct-sentido {
    min-height: 38px; padding: .3rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ct-petroleo);
    font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .88rem; cursor: pointer;
}
.ct-sentido[aria-pressed=true] { background: var(--ct-petroleo); color: #fff; }
.ct-sentido:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 2px; }
.ct-vuelta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; padding: .7rem .9rem; border-radius: 10px; background: #FFF8EC; box-shadow: inset 4px 0 0 var(--ct-naranja); }
.ct-vuelta:focus { outline: none; }
.ct-modal .ct-vuelta__texto { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .9rem; color: var(--ct-petroleo); }
.ct-vacio { display: grid; justify-items: center; gap: .6rem; margin: 0; padding: 2rem 1.25rem; border: 2px dashed var(--ct-borde); border-radius: 14px; text-align: center; color: var(--ct-texto-2); font-size: .92rem; }
.ct-vacio__icono { width: 44px; height: 44px; border-radius: 12px 12px 6px 6px; background: var(--ct-naranja-asiento); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); }

/* Tarjeta de cada asiento (la primera es quien agenda) */
.ct-personas { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ct-persona { margin: 0; padding: .95rem 1rem 1rem; border: 1.5px solid var(--ct-borde); border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(3, 66, 78, .06); }
.ct-persona--titular { border-color: rgba(247, 162, 27, .7); box-shadow: inset 4px 0 0 var(--ct-naranja-asiento), 0 2px 10px rgba(3, 66, 78, .06); }
.ct-persona--sin-asiento { border-style: dashed; }
.ct-persona__grupo { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-persona__cabeza { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.ct-persona__asiento {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px 12px 6px 6px;
    background: var(--ct-naranja-asiento); color: #02232A; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.05rem;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
}
.ct-persona--sin-asiento .ct-persona__asiento { background: var(--ct-claro); color: var(--ct-texto-2); box-shadow: inset 0 0 0 1.5px #7A8A90; }
.ct-modal .ct-persona__titulo { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: .98rem; color: var(--ct-petroleo); }
.ct-modal .ct-persona__sub { margin: 0; font-size: .8rem; color: var(--ct-texto-2); }
.ct-persona__quitar {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: var(--ct-texto-2); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ct-persona__quitar:hover { background: var(--ct-claro); color: var(--ct-error); }
.ct-persona__quitar:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 1px; }
.ct-persona__menor { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; min-height: 32px; margin: 0; font-size: .9rem; color: var(--ct-texto); cursor: pointer; }
.ct-persona__menor input { width: 20px; height: 20px; margin: 0; accent-color: var(--ct-petroleo); }
.ct-persona__dni { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.ct-persona__dni .ct-boton { min-height: 46px; padding: .5rem 1.1rem; }
.ct-persona__estado { display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .88rem; color: var(--ct-texto-2); }
.ct-persona__estado:empty { display: none; }
.ct-persona__estado--ok { color: var(--ct-ok); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; }
.ct-persona__marca { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ct-ok); color: #fff; font-size: .7rem; }
.ct-persona__nota { margin: 0; padding: .6rem .75rem; border-radius: 10px; background: #FFF8EC; font-size: .86rem; color: #6B3D00; }
.ct-persona__nota:empty { display: none; }
.ct-persona__error { margin: 0; font-size: .86rem; color: var(--ct-error); }
.ct-persona__error:empty { display: none; }
.ct-persona__contacto { display: grid; gap: .5rem; }

/* «Personas» (sin movilidad): − 3 + */
.ct-numero { display: inline-grid; grid-template-columns: 46px 5rem 46px; justify-self: start; border: 1.5px solid var(--ct-borde); border-radius: 12px; overflow: hidden; }
.ct-numero__boton { border: 0; background: var(--ct-claro); color: var(--ct-petroleo); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ct-numero__boton:hover { background: var(--ct-petroleo-claro); }
.ct-numero__boton:disabled { color: #9AA8AC; cursor: not-allowed; }
.ct-numero__boton:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: -3px; }
.ct-modal .ct-numero input[type=number] { border: 0; border-radius: 0; text-align: center; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.15rem; -moz-appearance: textfield; }
.ct-numero input::-webkit-outer-spin-button, .ct-numero input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Paso 4: cuánto sale */
.ct-costo { display: grid; gap: 0; border: 1.5px solid var(--ct-borde); border-radius: 14px; overflow: hidden; }
.ct-modal .ct-costo__linea, .ct-costo__lineas li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .8rem 1rem; border-bottom: 1px solid #E3ECEE; font-size: .95rem; }
.ct-costo__lineas { margin: 0; padding: 0; list-style: none; }
.ct-costo__lineas li b, .ct-costo__linea b { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-weight: normal; color: var(--ct-petroleo); white-space: nowrap; }
.ct-costo__lineas li small { display: block; color: var(--ct-texto-2); font-size: .8rem; }
.ct-modal .ct-costo__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 1rem; background: var(--ct-petroleo-claro); color: var(--ct-petroleo); }
.ct-costo__total span { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; }
.ct-costo__total strong { font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.45rem; }
.ct-modal .ct-costo__nota { margin: 0; padding: .8rem .95rem; border-radius: 10px; background: var(--ct-claro); font-size: .9rem; color: var(--ct-texto-2); }
.ct-modal .ct-costo__nota--pago { background: #FFF8EC; color: #6B3D00; box-shadow: inset 4px 0 0 var(--ct-naranja); }

/* Resumen (paso 5 y éxito) */
.ct-resumen { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .5rem 0 1rem; padding: .9rem 1rem; background: var(--ct-claro); border-radius: 10px; text-align: left; }
.ct-resumen dt { color: var(--ct-texto-2); font-weight: normal; }
.ct-resumen dd { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; color: var(--ct-petroleo); }
.ct-modal .ct-resumen--pasos { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; background: none; border: 1.5px solid var(--ct-borde); border-radius: 14px; overflow: hidden; }
.ct-resumen__fila { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .1rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid #E3ECEE; }
.ct-resumen__fila:last-child { border-bottom: 0; }
.ct-resumen--pasos dt { grid-column: 1; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; }
.ct-resumen--pasos dd { grid-column: 1; font-size: .95rem; line-height: 1.45; }
.ct-resumen--pasos dd small { display: block; font-family: Montserrat-Regular, Montserrat, Arial, sans-serif; color: var(--ct-texto-2); font-size: .84rem; }
.ct-resumen__cambiar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ct-resumen__personas { margin: 0; padding: 0; list-style: none; }

/* Barra inferior fija: lo que falta, el tiempo de los asientos y los botones */
.ct-modal .ct-pie { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem; padding: .8rem 1.25rem; border-top: 1px solid #E3ECEE; background: #fff; box-shadow: 0 -6px 18px rgba(3, 66, 78, .06); }
.ct-modal .ct-pie > * { margin: 0; }
.ct-pie__info { display: grid; gap: .15rem; min-width: 0; }
.ct-modal .ct-pie__falta { margin: 0; font-size: .84rem; color: var(--ct-texto-2); }
.ct-modal .ct-pie__falta:empty { display: none; }
.ct-pie__botones { display: flex; gap: .6rem; justify-content: flex-end; }
.ct-pie__botones .ct-boton { min-width: 8.5rem; }
.ct-modal .ct-reloj { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; color: var(--ct-petroleo); }
.ct-reloj b { font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ct-reloj__icono { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex-shrink: 0; }
.ct-reloj__icono::after { content: ''; position: absolute; left: 5px; top: 2px; width: 2px; height: 5px; background: currentColor; box-shadow: 2px 3px 0 -0px currentColor; }
.ct-modal .ct-reloj--urgente { color: var(--ct-error); }

/* Botones */
.ct-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 999px;
    background: var(--ct-naranja); color: #02232A; text-decoration: none;
    font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1rem; cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.ct-boton:hover { background: var(--ct-naranja-cta); color: #02232A; }
.ct-boton:focus-visible { outline: 3px solid var(--ct-petroleo); outline-offset: 2px; }
.ct-boton[disabled] { opacity: .65; cursor: progress; }
/* «Continuar» con el paso incompleto: se ve apagado pero sigue tocable (dice qué falta y lleva al campo). */
.ct-boton[aria-disabled=true] { background: #E2E8EA; color: #51656A; }
.ct-boton[aria-disabled=true]:hover { background: #D8E0E2; color: #3E5156; }
.ct-boton--bloque { width: 100%; }
.ct-boton--peligro { background: var(--ct-petroleo); color: #fff; }
.ct-boton--peligro:hover { background: #02323B; color: #fff; }
.ct-boton--fantasma { background: transparent; color: var(--ct-petroleo); box-shadow: inset 0 0 0 2px var(--ct-petroleo); }
.ct-boton--fantasma:hover { background: var(--ct-petroleo-claro); color: var(--ct-petroleo); }
.ct-boton--chico { min-height: 40px; padding: .4rem 1rem; font-size: .9rem; }
.ct-girando { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ct-giro .8s linear infinite; }
@keyframes ct-giro { to { transform: rotate(360deg); } }

/* ---------- ¡Listo! ---------- */
.ct-exito { text-align: center; justify-items: stretch; gap: .7rem; }
.ct-exito__icono { width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; background: var(--ct-ok); color: #fff; font-size: 2rem; line-height: 68px; box-shadow: 0 0 0 8px rgba(6, 118, 71, .12); }
.ct-modal .ct-exito__titulo { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.35rem; color: var(--ct-petroleo); }
.ct-modal .ct-exito__titulo:focus { outline: none; }
.ct-exito__codigo { margin: 0; font-size: 1.05rem; }
.ct-exito__codigo strong { letter-spacing: .08em; color: var(--ct-petroleo); }
.ct-exito__mensaje { text-align: center; }
.ct-exito__movilidad { display: grid; gap: .6rem; text-align: left; margin: 0 0 .5rem; }
.ct-modal .ct-exito__sub { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.05rem; color: var(--ct-petroleo); }
.ct-pasajes { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ct-pasaje { display: grid; gap: .1rem; padding: .7rem .9rem; background: var(--ct-claro); border-radius: 10px; }
.ct-pasaje__titulo { font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-weight: normal; color: var(--ct-petroleo); }
.ct-pasaje small { color: var(--ct-texto-2); }
.ct-pasaje__codigo { white-space: nowrap; }
.ct-pago { display: grid; gap: .5rem; padding: .9rem 1rem; border: 2px solid var(--ct-naranja); border-radius: 12px; background: #FFF8EC; }
.ct-pago__texto { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; color: var(--ct-petroleo); }
/* «Ver mis visitas y viajes» (citas.js, mostrarMisVisitas): la página para volver a ver la visita y la movilidad. */
.ct-mis-visitas { display: grid; gap: .4rem; margin: .25rem 0 0; text-align: center; }

/* Compartir (sin datos personales) */
.ct-compartir { display: grid; gap: .55rem; margin-top: .4rem; padding: 1rem; border-radius: 14px; background: var(--ct-petroleo-claro); text-align: left; }
.ct-compartir__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-compartir__boton {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 999px;
    background: #fff; color: var(--ct-petroleo); text-decoration: none; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .9rem;
    box-shadow: inset 0 0 0 1.5px rgba(3, 66, 78, .25); cursor: pointer;
}
.ct-compartir__boton:hover { background: #F2F7F8; color: var(--ct-petroleo); }
.ct-compartir__boton:focus-visible { outline: 3px solid var(--ct-naranja); outline-offset: 2px; }
.ct-compartir__boton--whatsapp { background: #1F8F4E; color: #fff; box-shadow: none; }
.ct-compartir__boton--whatsapp:hover { background: #18773F; color: #fff; }
.ct-compartir__boton--facebook { background: #1667D9; color: #fff; box-shadow: none; }
.ct-compartir__boton--facebook:hover { background: #1158BC; color: #fff; }
.ct-icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- El bus: 3D (bus-3d.js) o plano 2D (plano-asientos.js) ----------
   Mirar (éxito): libre gris claro, ocupado petróleo al 60 % y tuyo naranja Aybar (#f7a21b) con su número.
   Elegir (paso 3, .mov-bus2d--elegir): libre claro, tuyo naranja, ocupado gris oscuro (#4F5A5F) y apartado por otra
   persona gris claro (#95A0A5), los mismos colores del 3D. */
.ct-bus { display: grid; gap: .45rem; margin-top: .55rem; }
.ct-bus__tuyos { margin: 0; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: 1rem; color: var(--ct-petroleo); }
.ct-bus__tuyos::before { content: ''; display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; border-radius: 3px; background: #F7A21B; vertical-align: -.05rem; }
.ct-bus__vista { position: relative; min-width: 0; border-radius: 14px; background: linear-gradient(180deg, #F4F8F9 0%, #E2EBED 100%); overflow: hidden; }
.ct-bus__vista[hidden], .ct-bus__leyenda[hidden], .ct-bus__ayuda[hidden] { display: none; }
.ct-bus__vista--3d { min-height: 230px; }
.ct-bus__vista--3d[aria-busy=true]::after { content: 'Cargando el bus…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--ct-texto-2); }
.ct-asientos__vista[aria-busy=true]:not(.ct-bus__vista--3d)::after { content: 'Cargando el bus…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--ct-texto-2); }
.mov-bus3d__lienzo { display: block; width: 100%; height: 230px; cursor: grab; }
.mov-bus3d__lienzo:active { cursor: grabbing; }
/* El ómnibus del GLB (bus-3d.js): el botón «Ver por fuera» / «Ver asientos», arriba a la derecha del bus, y el aviso
   mientras se arma la escena (el GLB se baja una vez por página). */
.mov-bus3d__vista { position: absolute; top: .6rem; right: .6rem; z-index: 1; min-height: 36px; padding: .4rem .9rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 5px rgba(3, 66, 78, .2); font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .8rem; line-height: 1.2; color: var(--ct-petroleo); cursor: pointer; }
.mov-bus3d__vista:hover { background: #fff; }
.mov-bus3d__vista:focus-visible { outline: 3px solid var(--ct-petroleo); outline-offset: 2px; }
.mov-bus3d--cargando::after { content: 'Cargando el bus…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--ct-texto-2); pointer-events: none; }
.ct-bus__leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--ct-texto-2); }
.ct-bus__clave::before { content: ''; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 3px; vertical-align: -.1rem; }
.ct-bus__clave--libre::before { background: #EEF1F2; box-shadow: inset 0 0 0 1.5px #7A8A90; }   /* borde 3,3:1 sobre el #F7F7F7 de la tarjeta del pasaje donde va la leyenda */
.ct-bus__clave--ocupado::before { background: rgba(3, 66, 78, .6); }
.ct-bus__clave--tuyo::before { background: #F7A21B; }
.ct-bus__clave--retenido::before { background: #95A0A5; }
.ct-asientos__leyenda .ct-bus__clave--libre::before { background: #F4F8F9; }
.ct-asientos__leyenda .ct-bus__clave--ocupado::before { background: #4F5A5F; }
.ct-bus__ayuda { margin: -.15rem 0 0; }
.mov-bus2d { display: grid; gap: 6px; width: 100%; max-width: 250px; margin: 12px auto; padding: 12px 12px 14px; background: #fff; border: 2px solid var(--ct-borde); border-radius: 22px 22px 10px 10px; box-sizing: border-box; }
.mov-bus2d__chofer { display: flex; align-items: center; justify-content: center; min-height: 28px; border-radius: 6px; background: #4A585E; color: #fff; font-size: .68rem; letter-spacing: .02em; }
.mov-bus2d__asiento { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 26px; border-radius: 8px 8px 4px 4px; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; font-size: .78rem; line-height: 1; }
.mov-bus2d__asiento--libre { background: #EEF1F2; color: #4A5C62; border: 1.5px solid #7A8A90; }   /* el mismo borde que la muestra de la leyenda: 3,6:1 sobre el blanco */
.mov-bus2d__asiento--ocupado { background: rgba(3, 66, 78, .6); color: #fff; }
.mov-bus2d__asiento--tuyo { background: #F7A21B; color: #02232A; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F7A21B; }
.mov-bus2d__asiento--retenido { background: #95A0A5; color: #fff; }
/* Elegir: cada asiento es un <button type="button" aria-pressed>, de 40 px o más (WCAG 2.5.8 pide 24). */
.mov-bus2d--elegir { gap: 8px; max-width: 330px; padding: 14px 14px 16px; }
.mov-bus2d--elegir .mov-bus2d__asiento { min-height: 40px; font-size: .9rem; }
button.mov-bus2d__asiento { margin: 0; padding: 0; font: inherit; font-family: Montserrat-SemiBold, Montserrat, Arial, sans-serif; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.mov-bus2d__asiento--libre { background: #F4F8F9; }
button.mov-bus2d__asiento--libre:hover { background: #FFF1D9; border-color: #C77700; }
button.mov-bus2d__asiento--tuyo { border: 0; }
.mov-bus2d--elegir .mov-bus2d__asiento--ocupado { background: #4F5A5F; color: #fff; }
button.mov-bus2d__asiento:disabled { cursor: not-allowed; }
button.mov-bus2d__asiento:focus-visible { outline: 3px solid var(--ct-petroleo); outline-offset: 2px; position: relative; z-index: 1; }
button.mov-bus2d__asiento:active:not(:disabled) { transform: scale(.94); }

/* ---------- Páginas de cancelar y de pago ---------- */
.ct-pagina { padding: 7rem 1rem 3rem; /* bajo la cabecera fija del sitio (80 px) */ background: var(--ct-claro); font-family: Montserrat-Regular, Montserrat, Arial, sans-serif; color: var(--ct-texto); }
.ct-tarjeta { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 2rem 1.5rem; box-shadow: 0 6px 24px rgba(3, 66, 78, .1); }
.ct-pagina .ct-tarjeta__titulo { margin: 0; font-family: Montserrat-Bold, Montserrat, Arial, sans-serif; font-size: 1.6rem; color: var(--ct-petroleo); }
.ct-subrayado { width: 60px; height: 5px; background: #F4A623; margin: .6rem 0 1.2rem; }
.ct-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------- Computadora: el bus a la izquierda y las tarjetas a la derecha ---------- */
@media (min-width: 900px) {
    .ct-asientos { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .ct-asientos__bus { position: sticky; top: 0; }
    .ct-asientos__vista.ct-bus__vista--3d { min-height: 420px; }
    .ct-asientos__vista .mov-bus3d__lienzo { height: 420px; }
}

/* ---------- Celular: a pantalla completa (modal-fullscreen-sm-down) ---------- */
@media (max-width: 575.98px) {
    .ct-fila { grid-template-columns: 1fr; }
    .ct-cta { width: 100%; justify-content: center; }
    .ct-cta.ct-cta--heroe { width: auto; }
    .ct-heroe-acciones { gap: 10px; margin-top: 14px; }
    .ct-modal .modal-content { border-radius: 0; }
    .ct-modal .ct-cabecera { gap: .6rem; padding: .8rem 1rem .9rem; }
    .ct-modal .ct-modal__titulo { font-size: 1.1rem; }
    .ct-modal .ct-modal__bajada { font-size: .85rem; }
    .ct-progreso__nombre { display: none; }
    .ct-progreso__pasos { gap: 4px; }
    .ct-modal .ct-cuerpo { padding: 1.1rem 1rem 1.4rem; }
    .ct-modal .ct-paso__titulo { font-size: 1.12rem; }
    .ct-opciones--turnos, .ct-opciones--dos { grid-template-columns: 1fr 1fr; }
    .ct-opciones--tres { grid-template-columns: 1fr; }
    .ct-dias { grid-auto-columns: 64px; margin: 0 -1rem; padding: 2px 1rem 6px; scroll-padding-left: 1rem; }
    .ct-movilidad { margin: 0 -.25rem; padding: .85rem; }
    .ct-asientos__vista.ct-bus__vista--3d { min-height: 300px; }
    .ct-asientos__vista .mov-bus3d__lienzo { height: 300px; }
    .ct-modal .ct-pie { grid-template-columns: 1fr; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px)); }
    .ct-pie__botones .ct-boton { flex: 1 1 0; min-width: 0; }
    .ct-pie__botones .ct-boton--fantasma { flex: 0 0 auto; padding-inline: 1.1rem; }
    .ct-compartir__boton { flex: 1 1 calc(50% - .5rem); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-cta, .ct-girando, .ct-boton, .ct-opcion__caja, .ct-progreso__paso::before, button.mov-bus2d__asiento { transition: none; animation: none; }
    .ct-modal.fade .modal-dialog { transition: none; }
    .ct-dias { scroll-behavior: auto; }
}