/* ========== RESERVAS NO INFO /ERROR OVERRIDES ========== */

#api-data-table .banner {
  margin-top: 23px !important;
  min-height: 432px;
  border-radius: var(--border-radius-large);
  background-color: #f5f5f5 !important;
}

.ypfcom__panels-banner-image-with-background-l .yl-container .banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}
/* ========== END RESERVAS NO INFO /ERROR OVERRIDES ========== */

/* ========== DS PAGINATION OVERRIDES ========== */

.table-actions {
  padding: 8px 0 24px 0 !important;
}
.table-actions .action-right {
  display: flex;
  justify-content: flex-end;
}
.ypfcom__modules-tables .main-table__table .main-table__header {
  padding: 16px 0 16px 12px;
  word-break: auto-phrase;
}
.ypfcom__modules-tables .main-table__table .main-table__header.sortable {
  cursor: pointer;
  vertical-align: middle;
}

.ypfcom__modules-tables .main-table__table .main-table__header.sortable:hover {
  background-color: var(--Grey-Scale-100);
}

.ypfcom__modules-tables .main-table__table .main-table__column {
  padding: 17px 0 18px 14px;
}
.ypfcom__modules-tables .main-table__table .main-table__column:last-child {
  display: flex;
  justify-content: space-around;
  align-items: center;
  white-space: nowrap;
}

#turnosHtml
  .ypfcom__modules-tables
  .main-table__table
  .main-table__column:last-child {
  justify-content: start;
}

.ypfcom__modules-tables .main-table__table .main-table__header .sort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  padding-right: 4px;
  font: 14px / 22px var(--font-din-bold) !important;
  color: var(--Grey-Scale-900);
  gap: 20px;
}

.ypfcom__modules-tables .main-table__pagination {
  display: flex;
  justify-content: center !important;
  align-items: center;
  gap: 12px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  margin-top: 52px;
}

.ypfcom__modules-tables .main-table__page-button {
  margin: 0;
  background-color: var(--Grey-Scale-0);
  font: 14px var(--font-din-bold);
  cursor: pointer;
}
.ypfcom__modules-tables .main-table__page-button--active {
  background-color: var(--Primary-Brand-Colour-700);
  border-color: var(--Primary-Brand-Colour-700);
  color: var(--Grey-Scale-0);
  cursor: default;
}
.ypfcom__modules-tables .main-table__page-button,
.ypfcom__modules-tables .main-table__pagination .main-table__prev,
.ypfcom__modules-tables .main-table__pagination .main-table__next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.ypfcom__modules-tables .main-table__pagination .main-table__prev:disabled,
.ypfcom__modules-tables .main-table__pagination .main-table__next:disabled {
  cursor: default;
  opacity: 0.5;
}

.ypfcom__modules-tables
  .main-table__table
  .main-table__header
  .sort-header
  .sort-icon {
  position: relative;
  width: 23px;
  height: 26px;
  background-image: url(https://ypf.com/yl-cdn/images/icons/icon_sort-order.svg);
  background-repeat: no-repeat;
}

.ypfcom__modules-tables
  .main-table__table
  .main-table__header
  .sort-header
  .sort-icon.sort-asc {
  background-image: url(https://ypf.com/yl-cdn/images/icons/icon_sort-order-asc.svg);
}

.ypfcom__modules-tables
  .main-table__table
  .main-table__header
  .sort-header
  .sort-icon.sort-desc {
  background-image: url(https://ypf.com/yl-cdn/images/icons/icon_sort-order-desc.svg);
}

/* ========== END DS PAGINATION OVERRIDES ========== */

/* ========== TABLE RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Tabs en móvil */
  .yl-tabs.ypfcom__tabs-horizontal {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E0E0E0;
    margin-bottom: 16px;
    padding: 0;
    background-color: white;
  }

  .yl-tabs.ypfcom__tabs-horizontal button {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #757575;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    bottom: -2px;
    outline: none;
  }

  .yl-tabs.ypfcom__tabs-horizontal button:hover {
    color: #0451dd;
    background-color: rgba(4, 81, 221, 0.05);
  }

  .yl-tabs.ypfcom__tabs-horizontal button.active {
    color: #0451dd;
    border-bottom-color: #0451dd;
    font-weight: 600;
  }

  .yl-tabs.ypfcom__tabs-horizontal button:focus {
    outline: none;
  }

  /* Botón de reservar en móvil */
  .table-actions .btn-primary,
  .table-actions .primary-btn {
    background-color: #0451dd;
    color: white;
    border: none;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .table-actions .btn-primary:hover,
  .table-actions .primary-btn:hover {
    background-color: #033ba8;
  }

  .table-actions .btn-primary::before,
  .table-actions .primary-btn::before {
    content: "+";
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    margin-right: 4px;
  }

  #api-data-table {
    padding: 0 10px;
  }

  .ypfcom__modules-tables {
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--Grey-Scale-400) var(--Grey-Scale-100);
    padding-block-end: 72px !important;
  }

  .ypfcom__modules-tables .main-table__pagination {
    margin-top: 16px;
  }

  .ypfcom__modules-tables::-webkit-scrollbar {
    height: 4px;
    border-radius: 4px;
  }

  .ypfcom__modules-tables::-webkit-scrollbar-thumb {
    background-color: var(--Primary-Brand-Colour-700);
    border-radius: 4px;
  }

  .ypfcom__modules-tables .main-table__table {
    padding: 0;
  }

  /* Convertir tabla en cards */
  .vtl-table.yl-container {
    display: block;
    width: 100%;
  }

  .vtl-table.yl-container thead {
    display: none;
  }

  .vtl-table.yl-container tbody {
    display: block;
  }

  .vtl-table.yl-container .main-table__row {
    display: block;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--Grey-Scale-200, #e0e0e0);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .vtl-table.yl-container .main-table__column {
    display: block;
    padding: 12px 0 !important;
    border: none;
    text-align: left;
    position: relative;
  }

  .vtl-table.yl-container .main-table__column:not(:last-child) {
    border-bottom: none;
  }

  .vtl-table.yl-container .main-table__column:last-child {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px !important;
    border-top: 1px solid var(--Grey-Scale-200, #e0e0e0);
    margin-top: 12px;
  }

  /* Reordenar columnas con CSS Grid */
  #turnosHtml .vtl-table.yl-container .main-table__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 4px solid #0451dd;
  }

  /* Orden de las columnas: Fecha (1), Vehículo (4), Servicio (3), Boxes (2), Acciones (5) */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(1) {
    order: 1;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--Grey-Scale-200, #e0e0e0);
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(2) {
    order: 4;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) {
    order: 3;
    padding-top: 0 !important;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(4) {
    order: 2;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(5) {
    order: 5;
  }

  /* Badge del servicio en la esquina superior derecha */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) .service-badge-mobile {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 1;
  }

  /* Colores específicos para cada tipo de servicio */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) .service-badge-mobile.service-premium {
    color: #8E64EC;
    background-color: rgba(142, 100, 236, 0.1);
    border-radius: 50px;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) .service-badge-mobile.service-completo {
    color: #39CBDE;
    background-color: rgba(57, 203, 222, 0.1);
    border-radius: 50px;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) .service-badge-mobile.service-express {
    color: #34c26c;
    background-color: rgba(52, 194, 108, 0.1);
    border-radius: 50px;
  }

  /* Agregar el texto del servicio en la sección, tomado del atributo data */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3)::after {
    content: attr(data-service);
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: var(--Grey-Scale-800, #424242);
  }

  /* Agregar etiquetas antes de cada celda */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(1)::before {
    content: "FECHA Y HORA";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(2)::before {
    content: "BOXES SELECCIONADO";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3)::before {
    content: "SERVICIO";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(4)::before {
    content: "VEHÍCULOS";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Estilos de los valores */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(1) {
    font-size: 16px;
    font-weight: 700;
    color: #0451dd;
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(4) {
    font-size: 16px;
    font-weight: 600;
    color: var(--Grey-Scale-900, #212121);
  }

  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(2),
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) {
    font-size: 14px;
    font-weight: 900;
    color: var(--Grey-Scale-800, #424242);
  }

  /* La columna de servicio debe tener position static para que el badge se posicione respecto al row */
  #turnosHtml .vtl-table.yl-container .main-table__column:nth-child(3) {
    position: static;
  }

  /* Etiquetas para tabla de vehículos */
  #vehiculosHtml .vtl-table.yl-container .main-table__row {
    border-left: 4px solid #0451dd;
    padding: 20px;
  }

  /* Reordenar columnas con CSS Grid para vehículos */
  #vehiculosHtml .vtl-table.yl-container .main-table__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Orden de las columnas: Patente (1), Marca (2), Modelo (3), Año (4), Acciones (5) */
  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(1) {
    order: 1;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--Grey-Scale-200, #e0e0e0);
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(2) {
    order: 2;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(3) {
    order: 3;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(4) {
    order: 4;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) {
    order: 5;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(1)::before {
    content: "PATENTE";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(2)::before {
    content: "MARCA";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(3)::before {
    content: "MODELO";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(4)::before {
    content: "BOXES SELECCIONADO";
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: var(--Grey-Scale-600, #757575);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Estilos de los valores de vehículos */
  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(1) {
    font-size: 20px;
    font-weight: 700;
    color: #0451dd;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(2),
  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(3),
  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(4) {
    font-size: 16px;
    font-weight: 900;
    color: var(--Grey-Scale-900, #212121);
  }

  /* Estilos para los action buttons en cards */
  .vtl-table.yl-container .main-table__column .action-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
  }

  .vtl-table.yl-container .main-table__column .action-btn-c {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
  }

  /* Estilos específicos para botones de vehículos */
  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) {
    display: flex;
    gap: 12px;
    padding-top: 16px !important;
    border-top: 1px solid var(--Grey-Scale-200, #e0e0e0);
    margin-top: 12px;
    flex-direction: row;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) .action-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    background: none;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) .action-btn:not(.cancel) {
    color: #0451dd;
    background-color: transparent;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) .action-btn:not(.cancel):hover {
    background-color: rgba(4, 81, 221, 0.1);
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) .action-btn.cancel {
    color: #d32f2f;
    background-color: transparent;
  }

  #vehiculosHtml .vtl-table.yl-container .main-table__column:nth-child(5) .action-btn.cancel:hover {
    background-color: rgba(211, 47, 47, 0.1);
  }

  .gm-style .gm-style-iw-c {
    border-radius: 0 !important;
    max-height: 170px !important;
  }
}