:root {
  --croquis-azul: #050f53;
  --croquis-azul-hover: #274d73;
  --croquis-azul-oscuro: #203f60;

  --asiento-libre: #28c76f;
  --asiento-libre-hover: #1e9e58;

  --asiento-ocupado: #050f53;
  --asiento-ocupado-hover: #274d73;

  --asiento-embarcado: #183d61;
  --asiento-embarcado-hover: #102c48;

  --asiento-bloqueado: #005c00;
  --asiento-bloqueado-hover: #003f00;

  --croquis-naranja: #f28c28;

  --croquis-texto: #263b4b;
  --croquis-texto-secundario: #6c757d;

  --croquis-borde: #dfe5eb;
  --croquis-fondo: #f8f9fb;
  --croquis-blanco: #ffffff;

  /*
   * Tamaño incrementado aproximadamente 15 %.
   * Antes: 40 × 56 px.
   * Ahora: 46 × 64 px.
   */
  --ancho-asiento: 46px;
  --alto-asiento: 64px;

  --separacion-horizontal: 9px;
  --separacion-vertical: 10px;

  /*
   * El icono mantiene tamaño grande y proporción.
   */
  --tamano-icono: 30px;
  --margen-inferior-icono: 8px;
}

/* ========================================================================
   RESET LOCAL
   ======================================================================== */

#modalBodyVerCroquis,
#modalBodyVerCroquis *,
#croquisContainerIda,
#croquisContainerIda *,
#croquisContainerRegreso,
#croquisContainerRegreso * {
  box-sizing: border-box;
}

/* ========================================================================
   MODAL DEL CROQUIS
   ======================================================================== */

#modalBodyVerCroquis {
  width: 100%;
  max-width: 100%;

  padding: 12px;

  overflow-x: auto;
  overflow-y: visible;

  border-radius: 8px;

  background-color: var(--croquis-blanco);

  white-space: normal;

  scrollbar-width: thin;
  scrollbar-color:
    var(--croquis-azul) transparent;
}

#modalBodyVerCroquis::-webkit-scrollbar {
  width: 9px;
  height: 9px;

  background: transparent;
}

#modalBodyVerCroquis::-webkit-scrollbar-track {
  border-radius: 5px;

  background: transparent;
}

#modalBodyVerCroquis::-webkit-scrollbar-thumb {
  border: 2px solid var(--croquis-blanco);
  border-radius: 5px;

  background-color: var(--croquis-azul);
}

#modalBodyVerCroquis::-webkit-scrollbar-thumb:hover {
  background-color: var(--croquis-azul-hover);
}

/* ========================================================================
   CONTENEDORES DE IDA Y REGRESO
   ======================================================================== */

#croquisContainerIda,
#croquisContainerRegreso {
  display: flex;

  width: max-content;
  min-width: 100%;
  min-height: 195px;

  align-items: flex-start;
  justify-content: center;

  gap: 45px;

  margin: 0;
  padding: 14px;

  overflow: visible;

  border: 1px solid var(--croquis-borde);
  border-radius: 9px;

  background-color: var(--croquis-blanco);
}

/* ========================================================================
   PISO DE LA UNIDAD
   ======================================================================== */

.seat-floor {
  position: relative;

  display: flex;

  width: max-content;
  min-width: 330px;

  flex-direction: column;
  align-items: center;

  margin: 0;
  padding: 17px 16px 18px;

  border: 1px solid var(--croquis-borde);
  border-radius: 9px;

  background-color: var(--croquis-blanco);

  box-shadow: none !important;
}

.seat-floor:last-child {
  margin-bottom: 0;
}

/* ========================================================================
   TÍTULO DEL PISO
   ======================================================================== */

.seat-floor h5,
.seat-floor h6,
.seat-floor .seat-floor-title {
  display: inline-flex;

  min-height: 28px;

  align-items: center;
  justify-content: center;

  margin: 0 0 14px;
  padding: 5px 13px;

  border: 0;
  border-radius: 5px;

  color: var(--croquis-blanco);
  background-color: var(--croquis-naranja);

  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  white-space: nowrap;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* ========================================================================
   CUADRÍCULA DE ASIENTOS
   ======================================================================== */

.seat-grid {
  display: grid !important;

  width: max-content !important;

  grid-template-columns:
    repeat(5,
      var(--ancho-asiento)) !important;

  grid-auto-rows:
    var(--alto-asiento) !important;

  align-items: center !important;
  justify-content: center !important;

  column-gap:
    var(--separacion-horizontal) !important;

  row-gap:
    var(--separacion-vertical) !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

/* ========================================================================
   BOTÓN BASE DEL ASIENTO
   Sin borde
   Sin sombra
   Rectangular vertical
   ======================================================================== */

.seat-item,
.seat-item.btn,
button.seat-item {
  position: relative !important;

  display: inline-flex !important;

  width: var(--ancho-asiento) !important;
  min-width: var(--ancho-asiento) !important;
  max-width: var(--ancho-asiento) !important;

  height: var(--alto-asiento) !important;
  min-height: var(--alto-asiento) !important;
  max-height: var(--alto-asiento) !important;

  align-items: flex-start !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  border-radius: 7px !important;
  outline: 0;

  color: var(--croquis-blanco) !important;

  background-color: #8795a7 !important;

  /*
   * Icono elevado.
   * Mantiene 8 px libres debajo.
   */
  background-position:
    50% calc(100% - var(--margen-inferior-icono)) !important;

  background-repeat:
    no-repeat !important;

  /*
   * Solo se fija el ancho.
   * La altura se calcula automáticamente,
   * evitando deformar el PNG.
   */
  background-size:
    var(--tamano-icono) auto !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-align: center !important;

  cursor: not-allowed !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transform: none !important;

  transition:
    background-color 0.16s ease,
    transform 0.16s ease !important;
}

/* ========================================================================
   NÚMERO DEL ASIENTO
   Sin fondo
   Sin sombra
   Más cerca del icono
   Ligeramente hacia la izquierda
   ======================================================================== */

.seat-item .seat-number,
.seat-item>span {
  position: absolute !important;
  z-index: 3 !important;

  top: 11px !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  color: #ffffff !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0 !important;

  text-align: center !important;
  text-decoration: none !important;

  transform:
    translateX(-2px) !important;
}

/* ========================================================================
   ASIENTO LIBRE
   ======================================================================== */

.seat-item.libre {
  background-color:
    var(--asiento-libre) !important;

  background-image:
    url("/static/img/asientolibre.png") !important;

  cursor: pointer !important;
}

.seat-item.libre:hover {
  background-color:
    var(--asiento-libre-hover) !important;

  transform:
    translateY(-1px) !important;

  box-shadow: none !important;
}

/* ========================================================================
   ASIENTO SELECCIONADO
   Sin borde
   ======================================================================== */

.seat-item.libre.seleccionado,
.seat-item.libre.selected,
.seat-item.libre.active,
.seat-item.libre.activo,
.seat-item.libre.is-active {
  border: 0 !important;

  background-color:
    var(--croquis-azul) !important;

  background-image:
    url("/static/img/asientolibre.png") !important;

  background-position:
    50% calc(100% - var(--margen-inferior-icono)) !important;

  background-size:
    var(--tamano-icono) auto !important;

  box-shadow: none !important;

  transform:
    translateY(-1px) scale(1.04) !important;

  cursor: pointer !important;
}

.seat-item.seleccionado .seat-number,
.seat-item.selected .seat-number,
.seat-item.active .seat-number,
.seat-item.activo .seat-number,
.seat-item.is-active .seat-number,
.seat-item.seleccionado>span,
.seat-item.selected>span,
.seat-item.active>span,
.seat-item.activo>span,
.seat-item.is-active>span {
  color: #ffffff !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ========================================================================
   ASIENTO RESERVADO
   Azul sobrio
   ======================================================================== */

.seat-item.reservado {
  background-color:
    var(--asiento-ocupado) !important;

  background-image:
    url("/static/img/asientoreservado.png") !important;

  cursor: not-allowed !important;
}

.seat-item.reservado:hover {
  background-color:
    var(--asiento-ocupado) !important;

  transform: none !important;
}

/* ========================================================================
   ASIENTO OCUPADO POR HOMBRE
   ======================================================================== */

.seat-item.ocupado-hombre,
.seat-item.varon {
  background-color:
    var(--asiento-ocupado) !important;

  background-image:
    url("/static/img/asientovaron.png") !important;

  cursor: not-allowed !important;
}

/* ========================================================================
   ASIENTO OCUPADO POR MUJER
   ======================================================================== */

.seat-item.ocupado-mujer,
.seat-item.mujer {
  background-color:
    var(--asiento-ocupado) !important;

  background-image:
    url("/static/img/asientomujer.png") !important;

  cursor: not-allowed !important;
}

/* ========================================================================
   ASIENTO OCUPADO GENÉRICO
   ======================================================================== */

.seat-item.ocupado:not(.ocupado-hombre):not(.ocupado-mujer) {
  background-color:
    var(--asiento-ocupado) !important;

  background-image:
    url("/static/img/asientoreservado.png") !important;

  cursor: not-allowed !important;
}

/* ========================================================================
   PASAJERO EMBARCADO
   ======================================================================== */

.seat-item.embarcado-hombre {
  background-color:
    var(--asiento-embarcado) !important;

  background-image:
    url("/static/img/asientovaron.png") !important;

  cursor: not-allowed !important;
}

.seat-item.embarcado-mujer {
  background-color:
    var(--asiento-embarcado) !important;

  background-image:
    url("/static/img/asientomujer.png") !important;

  cursor: not-allowed !important;
}

.seat-item.embarcado:not(.embarcado-hombre):not(.embarcado-mujer) {
  background-color:
    var(--asiento-embarcado) !important;

  background-image:
    url("/static/img/asientoreservado.png") !important;

  cursor: not-allowed !important;
}

/* ========================================================================
   ASIENTO BLOQUEADO
   ======================================================================== */

.seat-item.bloqueado {
  background-color:
    var(--asiento-bloqueado) !important;

  background-image:
    url("/static/img/bloqueado.png") !important;

  background-position:
    50% calc(100% - 10px) !important;

  background-size:
    22px auto !important;

  cursor: not-allowed !important;
}

.seat-item.bloqueado:hover {
  background-color:
    var(--asiento-bloqueado-hover) !important;

  transform: none !important;
}

/* ========================================================================
   TELEVISOR
   Siempre conserva el icono
   Sin deformación
   Sin borde
   ======================================================================== */

.seat-item.tv,
.seat-item.especial.tv,
.seat-item.libre.tv,
.seat-item.activo.tv,
.seat-item.active.tv,
.seat-item.selected.tv,
.seat-item.seleccionado.tv,
.seat-item.is-active.tv {
  border: 0 !important;

  background-color:
    var(--croquis-blanco) !important;

  background-image:
    url("/static/img/tv.png") !important;

  background-position:
    50% calc(100% - 9px) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    34px auto !important;

  box-shadow: none !important;

  transform: none !important;

  cursor: default !important;
}

.seat-item.tv.activo,
.seat-item.tv.active,
.seat-item.tv.selected,
.seat-item.tv.seleccionado,
.seat-item.tv.is-active {
  border: 0 !important;

  background-color:
    #edf3f8 !important;

  background-image:
    url("/static/img/tv.png") !important;

  background-position:
    50% calc(100% - 9px) !important;

  background-size:
    34px auto !important;
}

.seat-item.tv .seat-number,
.seat-item.tv>span {
  display: none !important;
}

/* ========================================================================
   BAÑO
   Siempre conserva el icono
   Sin deformación
   Sin borde
   ======================================================================== */

.seat-item.bano,
.seat-item.wc,
.seat-item.especial.bano,
.seat-item.especial.wc,
.seat-item.libre.bano,
.seat-item.libre.wc,
.seat-item.activo.bano,
.seat-item.activo.wc,
.seat-item.active.bano,
.seat-item.active.wc,
.seat-item.selected.bano,
.seat-item.selected.wc,
.seat-item.seleccionado.bano,
.seat-item.seleccionado.wc,
.seat-item.is-active.bano,
.seat-item.is-active.wc {
  border: 0 !important;

  background-color:
    var(--croquis-blanco) !important;

  background-image:
    url("/static/img/bano.png") !important;

  background-position:
    50% calc(100% - 9px) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    31px auto !important;

  box-shadow: none !important;

  transform: none !important;

  cursor: default !important;
}

.seat-item.bano.activo,
.seat-item.bano.active,
.seat-item.bano.selected,
.seat-item.bano.seleccionado,
.seat-item.bano.is-active,
.seat-item.wc.activo,
.seat-item.wc.active,
.seat-item.wc.selected,
.seat-item.wc.seleccionado,
.seat-item.wc.is-active {
  background-color:
    #edf3f8 !important;

  background-image:
    url("/static/img/bano.png") !important;
}

.seat-item.bano .seat-number,
.seat-item.bano>span,
.seat-item.wc .seat-number,
.seat-item.wc>span {
  display: none !important;
}

/* ========================================================================
   ESCALERA
   Siempre conserva el icono
   Sin deformación
   Sin borde
   ======================================================================== */

.seat-item.escalera,
.seat-item.especial.escalera,
.seat-item.libre.escalera,
.seat-item.activo.escalera,
.seat-item.active.escalera,
.seat-item.selected.escalera,
.seat-item.seleccionado.escalera,
.seat-item.is-active.escalera {
  border: 0 !important;

  background-color:
    var(--croquis-blanco) !important;

  background-image:
    url("/static/img/escalera.png") !important;

  background-position:
    50% calc(100% - 9px) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    31px auto !important;

  box-shadow: none !important;

  transform: none !important;

  cursor: default !important;
}

.seat-item.escalera.activo,
.seat-item.escalera.active,
.seat-item.escalera.selected,
.seat-item.escalera.seleccionado,
.seat-item.escalera.is-active {
  background-color:
    #edf3f8 !important;

  background-image:
    url("/static/img/escalera.png") !important;
}

.seat-item.escalera .seat-number,
.seat-item.escalera>span {
  display: none !important;
}

/* ========================================================================
   PASADIZO
   Conserva la posición dentro de la cuadrícula
   ======================================================================== */

.seat-item.espacio,
.seat-item.pasadizo,
.seat-item.pasillo,
.seat-item.libre.espacio,
.seat-item.libre.pasadizo,
.seat-item.libre.pasillo,
.seat-item.activo.espacio,
.seat-item.activo.pasadizo,
.seat-item.activo.pasillo,
.seat-item.active.espacio,
.seat-item.active.pasadizo,
.seat-item.active.pasillo {
  visibility: hidden !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  pointer-events: none !important;
}

/* ========================================================================
   ELEMENTOS DESHABILITADOS
   ======================================================================== */

.seat-item:disabled {
  opacity: 0.92 !important;

  pointer-events: none !important;
}

.seat-item.tv:disabled,
.seat-item.bano:disabled,
.seat-item.wc:disabled,
.seat-item.escalera:disabled {
  opacity: 1 !important;
}

/* ========================================================================
   ACCESIBILIDAD
   ======================================================================== */

.seat-item:focus {
  outline: none !important;
}

.seat-item:focus-visible {
  outline:
    2px solid var(--croquis-azul) !important;

  outline-offset:
    2px !important;

  box-shadow: none !important;
}

/* ========================================================================
   LEYENDA
   ======================================================================== */

.seat-legend,
.croquis-legend {
  display: flex;

  width: 100%;

  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 9px 15px;

  margin: 14px 0 0;
  padding: 10px;

  border: 1px solid var(--croquis-borde);
  border-radius: 8px;

  background-color: var(--croquis-blanco);

  box-shadow: none !important;
}

.seat-legend-item,
.croquis-legend-item {
  display: inline-flex;

  align-items: center;
  gap: 6px;

  color: var(--croquis-texto-secundario);

  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
}

.seat-legend-color,
.croquis-legend-color {
  display: inline-block;

  width: 22px;
  height: 13px;

  border: 0;
  border-radius: 3px;

  box-shadow: none !important;
}

.seat-legend-color.libre,
.croquis-legend-color.libre {
  background-color:
    var(--asiento-libre);
}

.seat-legend-color.reservado,
.croquis-legend-color.reservado,
.seat-legend-color.ocupado,
.croquis-legend-color.ocupado {
  background-color:
    var(--asiento-ocupado);
}

.seat-legend-color.embarcado,
.croquis-legend-color.embarcado {
  background-color:
    var(--asiento-embarcado);
}

.seat-legend-color.bloqueado,
.croquis-legend-color.bloqueado {
  background-color:
    var(--asiento-bloqueado);
}

.seat-legend-color.seleccionado,
.croquis-legend-color.seleccionado {
  background-color:
    var(--croquis-azul);
}

/* ========================================================================
   ESTADOS DE CARGA Y VACÍO
   ======================================================================== */

.croquis-loading,
.seat-loading,
.croquis-empty,
.seat-empty {
  display: flex;

  min-height: 130px;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 20px;

  color:
    var(--croquis-texto-secundario);

  text-align: center;

  box-shadow: none !important;
}

.croquis-empty,
.seat-empty {
  border: 1px dashed #bfc8d2;
  border-radius: 8px;

  background-color:
    var(--croquis-fondo);
}

.croquis-loading i,
.seat-loading i,
.croquis-empty i,
.seat-empty i {
  color:
    var(--croquis-azul);

  font-size: 26px;
}

.croquis-empty strong,
.seat-empty strong {
  color:
    var(--croquis-texto);

  font-size: 14px;
}

/* ========================================================================
   TABLET
   ======================================================================== */

@media screen and (max-width: 991px) {
  :root {
    --ancho-asiento: 44px;
    --alto-asiento: 61px;

    --separacion-horizontal: 8px;
    --separacion-vertical: 9px;

    --tamano-icono: 29px;
    --margen-inferior-icono: 8px;
  }

  #croquisContainerIda,
  #croquisContainerRegreso {
    justify-content: flex-start;

    gap: 25px;

    padding: 10px;
  }

  .seat-floor {
    min-width: 310px;

    padding:
      15px 12px;
  }

  .seat-item .seat-number,
  .seat-item>span {
    top: 10px !important;

    font-size: 13px !important;

    transform:
      translateX(-2px) !important;
  }

  .seat-item.bloqueado {
    background-size:
      21px auto !important;
  }
}

/* ========================================================================
   MÓVIL
   ======================================================================== */

@media screen and (max-width: 767px) {
  :root {
    --ancho-asiento: 41px;
    --alto-asiento: 58px;

    --separacion-horizontal: 7px;
    --separacion-vertical: 8px;

    --tamano-icono: 27px;
    --margen-inferior-icono: 7px;
  }

  #modalBodyVerCroquis {
    padding: 5px;
  }

  #croquisContainerIda,
  #croquisContainerRegreso {
    display: flex;

    width: max-content;
    min-width: 100%;

    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    gap: 16px;

    padding:
      7px 2px;

    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .seat-floor {
    min-width: 275px;

    padding:
      12px 7px 14px;

    border-radius: 7px;
  }

  .seat-floor h5,
  .seat-floor h6,
  .seat-floor .seat-floor-title {
    min-height: 25px;

    margin-bottom: 10px;

    padding:
      4px 10px;

    font-size: 11px;
  }

  .seat-grid {
    grid-template-columns:
      repeat(5,
        var(--ancho-asiento)) !important;

    grid-auto-rows:
      var(--alto-asiento) !important;

    column-gap:
      var(--separacion-horizontal) !important;

    row-gap:
      var(--separacion-vertical) !important;
  }

  .seat-item,
  .seat-item.btn,
  button.seat-item {
    width:
      var(--ancho-asiento) !important;

    min-width:
      var(--ancho-asiento) !important;

    max-width:
      var(--ancho-asiento) !important;

    height:
      var(--alto-asiento) !important;

    min-height:
      var(--alto-asiento) !important;

    max-height:
      var(--alto-asiento) !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 6px !important;

    background-position:
      50% calc(100% - var(--margen-inferior-icono)) !important;

    background-size:
      var(--tamano-icono) auto !important;
  }

  .seat-item .seat-number,
  .seat-item>span {
    top: 9px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: #ffffff !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;

    font-family:
      "Segoe UI",
      Arial,
      Helvetica,
      sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-align: center !important;

    transform:
      translateX(-2px) !important;
  }

  .seat-item.bloqueado {
    background-position:
      50% calc(100% - 8px) !important;

    background-size:
      19px auto !important;
  }

  .seat-item.tv,
  .seat-item.especial.tv,
  .seat-item.libre.tv,
  .seat-item.activo.tv,
  .seat-item.active.tv,
  .seat-item.selected.tv,
  .seat-item.seleccionado.tv,
  .seat-item.is-active.tv {
    background-position:
      50% calc(100% - 8px) !important;

    background-size:
      31px auto !important;
  }

  .seat-item.bano,
  .seat-item.wc,
  .seat-item.especial.bano,
  .seat-item.especial.wc,
  .seat-item.escalera,
  .seat-item.especial.escalera {
    background-position:
      50% calc(100% - 8px) !important;

    background-size:
      28px auto !important;
  }

  .seat-legend,
  .croquis-legend {
    justify-content: flex-start;

    gap:
      7px 11px;

    padding: 8px;
  }

  .seat-legend-item,
  .croquis-legend-item {
    font-size: 10px;
  }
}

/* ========================================================================
   FILTROS
   ======================================================================== */

.filtro-activo {
  border-color:
    var(--croquis-azul) !important;

  box-shadow:
    0 0 0 0.2rem rgba(49, 95, 140, 0.18) !important;
}

.programacion-filtrada {
  animation:
    programacionFadeIn 0.3s ease-in;
}

@keyframes programacionFadeIn {
  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

/* ========================================================================
   CÓDIGO QR
   ======================================================================== */

#contenedor_qr img {
  transition:
    transform 0.3s ease;
}

#contenedor_qr img:hover {
  transform:
    scale(1.05);
}

/* ========================================================================
   ANIMACIÓN GENERAL
   ======================================================================== */

.animate__fadeIn {
  animation:
    contenidoFadeIn 0.5s ease;
}

@keyframes contenidoFadeIn {
  from {
    opacity: 0;

    transform:
      translateY(-10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

/* ========================================================================
   CARGA DE ARCHIVOS
   ======================================================================== */

.border-dashed {
  border-style: dashed !important;
}

.upload-zone {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.upload-zone:hover {
  border-color:
    var(--croquis-azul) !important;

  background-color:
    #edf3f8 !important;
}

.upload-zone i {
  transition:
    transform 0.3s ease;
}

.upload-zone:hover i {
  transform:
    scale(1.1);
}

/* ========================================================================
   BOTÓN PROCESAR PAGO
   ======================================================================== */

#btnProcesarPago {
  border-radius: 8px;

  transition:
    transform 0.3s ease;
}

#btnProcesarPago:hover {
  transform:
    translateY(-2px);

  box-shadow: none !important;
}

/* ========================================================================
   PROGRAMACIONES MÓVILES
   ======================================================================== */

.programaciones-mobile-list {
  display: none;
}

@media screen and (max-width: 768px) {
  .programaciones-mobile-list {
    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 4px;
  }

  .programacion-card-mobile {
    padding: 14px;

    border: 1px solid #e0e0e0;
    border-radius: 8px;

    background-color:
      var(--croquis-blanco);

    box-shadow: none !important;

    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .programacion-card-mobile:hover {
    transform:
      translateY(-1px);
  }

  .programacion-card-mobile.selected {
    border:
      2px solid var(--croquis-azul);

    background-color:
      #edf3f8;
  }

  .programacion-card-mobile.no-disponible {
    opacity: 0.7;

    background-color:
      #f8f9fa;

    pointer-events: none;
  }

  .programacion-card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
  }

  .programacion-card-ruta {
    min-width: 0;

    flex: 1;

    color:
      var(--croquis-texto);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .programacion-card-ruta small {
    display: block;

    margin-top: 2px;

    color:
      var(--croquis-texto-secundario);

    font-size: 12px;
    font-weight: 400;
  }

  .programacion-card-precio {
    flex:
      0 0 auto;
  }

  .programacion-card-precio .precio-valor {
    color:
      var(--croquis-azul);

    font-size: 18px;
    font-weight: 700;

    white-space: nowrap;
  }

  .programacion-card-body {
    margin-bottom: 14px;
  }

  .programacion-card-info {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap:
      10px 13px;
  }

  .info-item {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #495057;

    font-size: 13px;
  }

  .info-item i {
    color:
      var(--croquis-azul);

    font-size: 16px;
  }

  .programacion-card-footer {
    display: flex;

    justify-content: flex-end;
  }

  .btn-seleccionar-mobile {
    width: 100%;
    min-height: 44px;

    border-radius: 7px;

    font-size: 15px;
    font-weight: 600;
  }

  .programaciones-section .table-responsive,
  .programaciones-table-responsive,
  .programaciones-desktop-table {
    display: none !important;
  }
}

/* ========================================================================
   PROGRAMACIONES DE ESCRITORIO
   ======================================================================== */

@media screen and (min-width: 769px) {
  .programaciones-mobile-list {
    display: none !important;
  }

  .programaciones-section .table-responsive,
  .programaciones-table-responsive,
  .programaciones-desktop-table {
    display: block !important;
  }
}