:root {
  --bg: #09090b;
  --panel: #151518;
  --panel-2: #1c1c20;
  --text: #f6f6f7;
  --muted: #a7a7b0;
  --border: rgba(255,255,255,.10);
  --accent: #8d4dff;
  --accent-2: #b47cff;
  --success: #8ee6a8;
  --danger: #ff9d9d;
  --radius: 20px;
  --shadow: 0 20px 70px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #19131f 0%, var(--bg) 42%);
  color: var(--text);
}

.ts20-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 48px auto;
}

.ts20-calculator {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(14,14,17,.95);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ts20-heading {
  padding: 34px 34px 10px;
}

.ts20-kicker {
  display: inline-block;
  color: var(--accent-2);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ts20-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.ts20-heading p {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.65;
}

.ts20-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.4fr);
  gap: 22px;
  padding: 24px 34px 34px;
}

.ts20-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.ts20-label {
  display: block;
  margin: 17px 0 8px;
  font-size: .92rem;
  font-weight: 750;
}

.ts20-label:first-child { margin-top: 0; }

.autocomplete-host {
  min-height: 52px;
}

/* El nuevo widget de Google es un Web Component. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  color-scheme: dark;
}

.ts20-select {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0 13px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.ts20-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.ts20-button:disabled {
  cursor: wait;
  opacity: .65;
}

.ts20-status {
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .9rem;
}

.ts20-status.error { color: var(--danger); }

.ts20-result {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.result-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--panel-2);
}

.result-card span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 5px;
}

.result-card strong {
  font-size: 1.18rem;
}

.result-card-price {
  grid-column: 1 / -1;
  border-color: rgba(141,77,255,.45);
}

.result-card-price strong {
  font-size: 1.65rem;
}

.route-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--success);
  font-size: .85rem;
  line-height: 1.45;
}

.ts20-disclaimer {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
  margin: 18px 0 0;
}

.ts20-map-wrap {
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #202024;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 520px;
}

@media (max-width: 850px) {
  .ts20-shell {
    width: min(100% - 20px, 720px);
    margin: 18px auto;
  }

  .ts20-heading {
    padding: 24px 20px 4px;
  }

  .ts20-grid {
    grid-template-columns: 1fr;
    padding: 18px 20px 22px;
  }

  .ts20-map-wrap,
  #map {
    min-height: 360px;
  }
}

/* ========================================================================
   TS20 V4 — AUTOCOMPLETADO SEGURO MEDIANTE BACKEND PHP
   Estos estilos sirven en escritorio y móvil.
   ======================================================================== */
.ts20-custom-autocomplete-host,
.ts20-custom-autocomplete {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.ts20-custom-autocomplete-host { z-index: 2; }
.ts20-custom-autocomplete { z-index: 3; }

.ts20-custom-autocomplete-host.ts20-autocomplete-expanded {
  z-index: 2147483000;
}

.ts20-panel.ts20-autocomplete-panel-active {
  position: relative;
  z-index: 2147482000;
  overflow: visible;
}

.ts20-custom-autocomplete-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #1c1c20;
  color: #f6f6f7;
  font: inherit;
  font-size: 16px;
  line-height: 1.25;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ts20-custom-autocomplete-input::placeholder {
  color: #9b9ba5;
  opacity: 1;
}

.ts20-custom-autocomplete-input:focus {
  border-color: #975cff;
  box-shadow: 0 0 0 3px rgba(151,92,255,.14);
}

.ts20-custom-predictions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  max-height: min(270px, 40dvh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #16161a;
  box-shadow: 0 18px 40px rgba(0,0,0,.46);
  z-index: 2147483640;
  isolation: isolate;
  pointer-events: auto;
}

.ts20-custom-predictions[hidden] { display: none !important; }

.ts20-custom-prediction {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
  padding: 11px 13px;
  background: transparent;
  color: #f2f2f4;
  text-align: left;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.ts20-custom-prediction:hover,
.ts20-custom-prediction:focus-visible,
.ts20-custom-prediction:active {
  background: rgba(151,92,255,.16);
  outline: none;
}

.ts20-custom-prediction-main {
  display: block;
  color: #fff;
  font-weight: 720;
}

.ts20-custom-prediction-secondary {
  display: block;
  margin-top: 2px;
  color: #a9a9b2;
  font-size: 12px;
}

.ts20-google-attribution {
  padding: 7px 11px 8px;
  color: #9b9ba5;
  background: rgba(255,255,255,.025);
  border-top: 1px solid rgba(255,255,255,.075);
  text-align: right;
  font-size: 11px;
  line-height: 1;
  user-select: none;
}

.ts20-google-attribution strong {
  color: #d8d8de;
  font-weight: 650;
}

@media (max-width: 700px) {
  .ts20-custom-predictions {
    max-height: min(230px, 34dvh);
  }
}


/* ========================================================================
   TS20 V4.1 — FECHA/HORA PREVIA + TARIFA AUTOMÁTICA
   ======================================================================== */

.ts20-service-schedule,
.ts20-auto-tariff {
  width: 100%;
  min-width: 0;
  margin-top: 20px;
}

.ts20-section-label {
  margin: 0 0 9px;
  color: #f6f6f7;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.ts20-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.ts20-schedule-field {
  display: block;
  width: 100%;
  min-width: 0;
  color: #d8d8de;
  font-size: .82rem;
  font-weight: 700;
}

.ts20-schedule-field > span {
  display: block;
  margin-bottom: 7px;
}

.ts20-schedule-field .ts20-native-picker-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 49px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #141417;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.ts20-schedule-field .ts20-native-picker-shell:focus-within {
  border-color: #975cff;
  box-shadow: 0 0 0 3px rgba(151,92,255,.14);
  background: #17171b;
}

.ts20-schedule-field #ts20-service-date,
.ts20-schedule-field #ts20-service-time {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 49px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f6f6f7;
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

.ts20-tariff-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.ts20-tariff-heading .ts20-section-label {
  margin-bottom: 3px;
}

.ts20-tariff-heading p {
  margin: 0;
  color: #9f9fa9;
  font-size: .76rem;
  line-height: 1.4;
}

.ts20-auto-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(180,124,255,.28);
  border-radius: 999px;
  background: rgba(141,77,255,.10);
  color: #c59cff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.ts20-tariff-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  width: 100%;
  min-width: 0;
}

.ts20-tariff-card {
  position: relative;
  min-width: 0;
  padding: 15px 14px 13px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  opacity: .68;
  transition: border-color .22s ease, box-shadow .22s ease, opacity .22s ease, transform .22s ease, background .22s ease;
}

.ts20-tariff-card.is-checking {
  opacity: .46;
}

.ts20-tariff-card.is-active {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(180,124,255,.78);
  background:
    radial-gradient(circle at 90% 0%, rgba(141,77,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(141,77,255,.09), rgba(255,255,255,.02));
  box-shadow:
    0 0 0 2px rgba(141,77,255,.12),
    0 14px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.ts20-tariff-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ts20-tariff-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(141,77,255,.12);
  color: #b47cff;
  font-size: 1.15rem;
  line-height: 1;
}

.ts20-tariff-card.is-active .ts20-tariff-icon {
  background: linear-gradient(145deg, #9b5bff, #6f32d9);
  color: #fff;
  box-shadow: 0 8px 18px rgba(111,50,217,.28);
}

.ts20-tariff-card-head > div {
  min-width: 0;
}

.ts20-tariff-card-head strong {
  display: block;
  color: #f6f6f7;
  font-size: .85rem;
  line-height: 1.25;
}

.ts20-tariff-card-head span:not(.ts20-tariff-icon) {
  display: block;
  margin-top: 4px;
  color: #a6a6b0;
  font-size: .69rem;
  line-height: 1.35;
}

.ts20-tariff-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.075);
}

.ts20-tariff-values > div {
  min-width: 0;
}

.ts20-tariff-values span,
.ts20-tariff-values strong {
  display: block;
}

.ts20-tariff-values span {
  color: #8e8e99;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.ts20-tariff-values strong {
  margin-top: 2px;
  color: #ededf1;
  font-size: .79rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ts20-tariff-selected-label {
  display: none;
  margin-top: 10px;
  color: #c59cff;
  font-size: .66rem;
  font-weight: 800;
}

.ts20-tariff-card.is-active .ts20-tariff-selected-label {
  display: block;
}

.ts20-tariff-reason {
  min-height: 20px;
  margin: 10px 2px 0;
  color: #a7a7b0;
  font-size: .73rem;
  line-height: 1.45;
}

.ts20-tariff-reason.is-ready {
  color: #c9b4ed;
}

.ts20-tariff-reason.is-checking {
  color: #a7a7b0;
}

.ts20-tariff-reason.is-error {
  color: #ffaaaa;
}

@media (max-width: 520px) {
  .ts20-schedule-grid,
  .ts20-tariff-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ts20-tariff-card {
    padding: 12px 10px 11px;
    border-radius: 13px;
  }

  .ts20-tariff-card-head {
    gap: 7px;
  }

  .ts20-tariff-icon {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: .95rem;
  }

  .ts20-tariff-card-head strong {
    font-size: .76rem;
  }

  .ts20-tariff-card-head span:not(.ts20-tariff-icon) {
    font-size: .61rem;
  }

  .ts20-tariff-values {
    gap: 5px;
    margin-top: 10px;
    padding-top: 9px;
  }

  .ts20-tariff-values span {
    font-size: .56rem;
  }

  .ts20-tariff-values strong {
    font-size: .69rem;
  }

  .ts20-auto-badge {
    font-size: .59rem;
    padding: 4px 7px;
  }

  /* Mantiene el arreglo específico de Safari/iOS para date/time. */
  .ts20-schedule-field .ts20-native-picker-shell {
    height: 49px !important;
    min-height: 49px !important;
    overflow: hidden !important;
  }

  .ts20-schedule-field #ts20-service-date,
  .ts20-schedule-field #ts20-service-time {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    min-width: 0 !important;
    height: 47px !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
  }
}


/* ========================================================================
   TS20 V4.2 — CORRECCIÓN VISUAL CAMPO FECHA EN SAFARI / iOS
   Evita el rectángulo blanco interno del control nativo date.
   ======================================================================== */

/* El propio input debe heredar visualmente el fondo oscuro del contenedor. */
.ts20-schedule-field #ts20-service-date {
  background-color: #141417 !important;
  background-image: none !important;
  color: #f6f6f7 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
}

/* Safari/WebKit puede aplicar fondo y alineación propios a las partes internas. */
.ts20-schedule-field #ts20-service-date::-webkit-date-and-time-value {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f6f6f7 !important;
  background: transparent !important;
  text-align: left !important;
}

.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit,
.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-fields-wrapper {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f6f6f7 !important;
  background: transparent !important;
}

.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-day-field,
.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-month-field,
.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-year-field,
.ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-text {
  color: #f6f6f7 !important;
  background: transparent !important;
}

/* Conservamos el icono nativo de calendario, adaptado a fondo oscuro. */
.ts20-schedule-field #ts20-service-date::-webkit-calendar-picker-indicator {
  opacity: .82;
  cursor: pointer;
  filter: invert(1) brightness(1.15);
  background-color: transparent !important;
}

/* iPhone/iPad: asegura que no aparezca ninguna placa blanca interna. */
@supports (-webkit-touch-callout: none) {
  .ts20-schedule-field #ts20-service-date {
    background: #141417 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }

  .ts20-schedule-field #ts20-service-date::-webkit-date-and-time-value,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-fields-wrapper {
    background: transparent !important;
  }
}


/* ========================================================================
   TS20 V4.3 — CORRECCIÓN DEFINITIVA CAMPO FECHA EN ESCRITORIO
   Chrome / Edge / Safari / Firefox
   ======================================================================== */

@media (min-width: 521px) {

  /* El navegador de escritorio no puede dejar una "placa" blanca interna. */
  .ts20-schedule-field #ts20-service-date {
    display: block !important;
    width: 100% !important;
    height: 49px !important;
    margin: 0 !important;
    padding: 0 12px !important;

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

    color: #f6f6f7 !important;
    -webkit-text-fill-color: #f6f6f7 !important;

    background-color: #141417 !important;
    background-image: none !important;
    background-clip: padding-box !important;

    color-scheme: dark !important;
    accent-color: #975cff;

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

    /*
     * Algunos navegadores de escritorio conservan un fondo claro
     * dentro del control nativo. Este relleno interno lo neutraliza.
     */
    -webkit-box-shadow: inset 0 0 0 1000px #141417 !important;
    box-shadow: inset 0 0 0 1000px #141417 !important;
  }

  .ts20-schedule-field #ts20-service-date:hover {
    background-color: #141417 !important;
    -webkit-box-shadow: inset 0 0 0 1000px #141417 !important;
    box-shadow: inset 0 0 0 1000px #141417 !important;
  }

  .ts20-schedule-field #ts20-service-date:focus {
    background-color: #17171b !important;
    -webkit-box-shadow: inset 0 0 0 1000px #17171b !important;
    box-shadow: inset 0 0 0 1000px #17171b !important;
  }

  /* Chrome / Edge / Safari: pintar las piezas internas, no dejarlas transparentes. */
  .ts20-schedule-field #ts20-service-date::-webkit-date-and-time-value,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;

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

    color: #f6f6f7 !important;
    -webkit-text-fill-color: #f6f6f7 !important;

    background-color: #141417 !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .ts20-schedule-field #ts20-service-date:focus::-webkit-date-and-time-value,
  .ts20-schedule-field #ts20-service-date:focus::-webkit-datetime-edit,
  .ts20-schedule-field #ts20-service-date:focus::-webkit-datetime-edit-fields-wrapper {
    background-color: #17171b !important;
  }

  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-day-field,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-month-field,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-year-field,
  .ts20-schedule-field #ts20-service-date::-webkit-datetime-edit-text {
    color: #f6f6f7 !important;
    -webkit-text-fill-color: #f6f6f7 !important;
    background-color: #141417 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Neutraliza fondos de autocompletado/autorrelleno de Chromium. */
  .ts20-schedule-field #ts20-service-date:-webkit-autofill,
  .ts20-schedule-field #ts20-service-date:-webkit-autofill:hover,
  .ts20-schedule-field #ts20-service-date:-webkit-autofill:focus {
    -webkit-text-fill-color: #f6f6f7 !important;
    caret-color: #f6f6f7 !important;
    -webkit-box-shadow: inset 0 0 0 1000px #141417 !important;
    box-shadow: inset 0 0 0 1000px #141417 !important;
    transition: background-color 999999s ease-in-out 0s;
  }

  .ts20-schedule-field #ts20-service-date::-webkit-calendar-picker-indicator {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    padding: 3px !important;
    opacity: .88;
    cursor: pointer;
    background: transparent !important;
    filter: invert(1) brightness(1.2);
  }
}


/* ========================================================================
   TS20 V4.4 — FIX REAL DEL CAMPO FECHA EN ESCRITORIO
   Flatpickr crea un ALT INPUT visible para la fecha. Ese era el rectángulo
   blanco observado en macOS/Chrome/Safari.
   ======================================================================== */

@media (min-width: 701px) {

  /*
   * Flatpickr, al usar altInput:true, oculta #ts20-service-date y crea
   * un segundo <input> visible dentro del mismo shell.
   *
   * Este selector apunta al input auxiliar real que ve el usuario.
   */
  .ts20-schedule-field .ts20-native-picker-shell > input.form-control.input,
  .ts20-schedule-field .ts20-native-picker-shell > input.flatpickr-alt-input,
  .ts20-schedule-field .ts20-native-picker-shell > input[readonly]:not(#ts20-service-date):not(#ts20-service-time) {
    display: block !important;

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

    height: 47px !important;
    min-height: 47px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;

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

    background: #141417 !important;
    background-color: #141417 !important;
    background-image: none !important;

    color: #f6f6f7 !important;
    -webkit-text-fill-color: #f6f6f7 !important;

    box-shadow: none !important;
    -webkit-box-shadow: none !important;

    font: inherit !important;
    font-size: 16px !important;
    line-height: 47px !important;

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

    color-scheme: dark !important;
    caret-color: #f6f6f7 !important;
  }

  .ts20-schedule-field .ts20-native-picker-shell > input.form-control.input:hover,
  .ts20-schedule-field .ts20-native-picker-shell > input.form-control.input:focus,
  .ts20-schedule-field .ts20-native-picker-shell > input.flatpickr-alt-input:hover,
  .ts20-schedule-field .ts20-native-picker-shell > input.flatpickr-alt-input:focus,
  .ts20-schedule-field .ts20-native-picker-shell > input[readonly]:not(#ts20-service-date):not(#ts20-service-time):hover,
  .ts20-schedule-field .ts20-native-picker-shell > input[readonly]:not(#ts20-service-date):not(#ts20-service-time):focus {
    background: #17171b !important;
    background-color: #17171b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  /*
   * Neutraliza reglas genéricas que ciertos navegadores/hojas externas
   * aplican a .form-control.
   */
  .ts20-native-picker-shell .form-control {
    background-color: #141417 !important;
    color: #f6f6f7 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /*
   * El shell sigue siendo quien dibuja el borde redondeado real.
   */
  .ts20-schedule-field .ts20-native-picker-shell {
    background: #141417 !important;
    overflow: hidden !important;
  }

  .ts20-schedule-field .ts20-native-picker-shell:focus-within {
    background: #17171b !important;
  }
}

/* ========================================================================
   TS20 V4.5 — ICONOS EN ORIGEN Y DESTINO
   Integrados como SVG en CSS. Sin archivos de imagen adicionales.
   ======================================================================== */

/* Reservamos espacio para el icono dentro de ambos campos. */
#origin-autocomplete-host .ts20-custom-autocomplete-input,
#destination-autocomplete-host .ts20-custom-autocomplete-input {
  padding-left: 49px !important;
  background-repeat: no-repeat !important;
  background-position: 15px 50% !important;
  background-size: 23px 23px !important;
}

/* Origen / recogida: icono de navegación. */
#origin-autocomplete-host .ts20-custom-autocomplete-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23975cff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.7 13.3'/%3E%3Cpath d='m21 3-6.2 18-4.1-7.7L3 9.2 21 3Z'/%3E%3C/svg%3E") !important;
}

/* Destino: pin de ubicación. */
#destination-autocomplete-host .ts20-custom-autocomplete-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23975cff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5.6-8 11-8 11s-8-5.4-8-11a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.7'/%3E%3C/svg%3E") !important;
}

/*
 * Conservamos el icono al enfocar el campo. Las reglas existentes solo
 * modifican borde/sombra, pero se explicita para evitar que un navegador
 * reemplace el background-image.
 */
#origin-autocomplete-host .ts20-custom-autocomplete-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23975cff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.7 13.3'/%3E%3Cpath d='m21 3-6.2 18-4.1-7.7L3 9.2 21 3Z'/%3E%3C/svg%3E") !important;
}

#destination-autocomplete-host .ts20-custom-autocomplete-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23975cff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5.6-8 11-8 11s-8-5.4-8-11a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.7'/%3E%3C/svg%3E") !important;
}

/* Ajuste fino en pantallas pequeñas. */
@media (max-width: 520px) {
  #origin-autocomplete-host .ts20-custom-autocomplete-input,
  #destination-autocomplete-host .ts20-custom-autocomplete-input {
    padding-left: 47px !important;
    background-position: 14px 50% !important;
    background-size: 22px 22px !important;
  }
}


/* ========================================================================
   TS20 V4.9 — TARIFAS UNIFICADAS ES / EN / EU
   Misma estructura visual en los tres idiomas y en todos los dispositivos:
   - Tarifa 3 y Tarifa 4 siempre en paralelo.
   - Datos económicos en bloques verticales dentro de cada tarjeta.
   ======================================================================== */

/* DOS TARJETAS EN PARALELO SIEMPRE */
.ts20-auto-tariff .ts20-tariff-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Cada tarjeta crece en altura según el contenido. */
.ts20-auto-tariff .ts20-tariff-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px 11px 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* CABECERA DE CADA TARIFA */
.ts20-auto-tariff .ts20-tariff-card-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ts20-auto-tariff .ts20-tariff-icon {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
}

.ts20-auto-tariff .ts20-tariff-card-head > div {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.ts20-auto-tariff .ts20-tariff-card-head strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: .77rem !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.ts20-auto-tariff .ts20-tariff-card-head span:not(.ts20-tariff-icon) {
  display: block !important;
  width: 100% !important;
  margin-top: 3px !important;
  font-size: .60rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

/*
 * DATOS ECONÓMICOS
 * Una única columna dentro de cada tarjeta.
 * Cada concepto tiene su propia etiqueta y su valor justo debajo.
 */
.ts20-auto-tariff .ts20-tariff-values {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(255,255,255,.075) !important;
}

.ts20-auto-tariff .ts20-tariff-values > div {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 7px 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}

.ts20-auto-tariff .ts20-tariff-values > div:last-child {
  border-bottom: 0 !important;
}

.ts20-auto-tariff .ts20-tariff-values span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 2px !important;
  font-size: .57rem !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.ts20-auto-tariff .ts20-tariff-values strong {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: .74rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Indicador inferior de tarifa aplicada/seleccionada. */
.ts20-auto-tariff .ts20-tariff-selected-label {
  display: block !important;
  width: 100% !important;
  margin-top: 7px !important;
  font-size: .58rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
}

/* MÓVIL: mantenemos exactamente la misma estructura en los tres idiomas. */
@media (max-width: 520px) {
  .ts20-auto-tariff .ts20-tariff-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card {
    padding: 11px 9px 10px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card-head {
    gap: 6px !important;
  }

  .ts20-auto-tariff .ts20-tariff-icon {
    flex-basis: 27px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card-head strong {
    font-size: .70rem !important;
    line-height: 1.25 !important;
  }

  .ts20-auto-tariff .ts20-tariff-card-head span:not(.ts20-tariff-icon) {
    font-size: .55rem !important;
    line-height: 1.3 !important;
  }

  .ts20-auto-tariff .ts20-tariff-values span {
    font-size: .53rem !important;
  }

  .ts20-auto-tariff .ts20-tariff-values strong {
    font-size: .69rem !important;
  }
}

/* Pantallas muy estrechas: icono encima, pero las tarifas siguen en paralelo. */
@media (max-width: 360px) {
  .ts20-auto-tariff .ts20-tariff-cards {
    gap: 6px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card {
    padding: 10px 7px 9px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card-head {
    display: block !important;
  }

  .ts20-auto-tariff .ts20-tariff-icon {
    display: flex !important;
    margin-bottom: 6px !important;
  }

  .ts20-auto-tariff .ts20-tariff-card-head strong {
    font-size: .67rem !important;
  }

  .ts20-auto-tariff .ts20-tariff-values span {
    font-size: .50rem !important;
  }

  .ts20-auto-tariff .ts20-tariff-values strong {
    font-size: .66rem !important;
  }
}


/* ========================================================================
   TS20 V4.10 — LÍNEAS INTERIORES SIMÉTRICAS EN TARIFA 3 / TARIFA 4
   Mismo ritmo vertical en ES / EN / EU y en todos los dispositivos.
   ======================================================================== */

/*
 * Las dos tarjetas de una misma fila se estiran a la misma altura.
 */
.ts20-auto-tariff .ts20-tariff-cards {
  align-items: stretch !important;
}

.ts20-auto-tariff .ts20-tariff-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/*
 * CABECERA
 * Reservamos exactamente la misma altura antes de la primera línea
 * interior, aunque un título/subtítulo necesite una línea adicional.
 */
.ts20-auto-tariff .ts20-tariff-card-head {
  flex: 0 0 66px !important;
  min-height: 66px !important;
  height: 66px !important;
  box-sizing: border-box !important;
}

/*
 * ZONA DE PRECIOS
 * Las tres filas tienen exactamente la misma altura en ambas tarjetas.
 * De este modo todos los separadores quedan a la misma coordenada vertical.
 */
.ts20-auto-tariff .ts20-tariff-values {
  flex: 0 0 auto !important;
}

.ts20-auto-tariff .ts20-tariff-values > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 5px 0 !important;
  box-sizing: border-box !important;
}

/*
 * Evitamos que diferencias de márgenes tipográficos alteren la posición
 * de los separadores.
 */
.ts20-auto-tariff .ts20-tariff-values span {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

.ts20-auto-tariff .ts20-tariff-values strong {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * El indicador inferior queda después de una zona de precios idéntica
 * en las dos tarjetas.
 */
.ts20-auto-tariff .ts20-tariff-selected-label {
  margin-top: 7px !important;
}

/* Tablet y móvil: conservamos la simetría con alturas adaptadas. */
@media (max-width: 700px) {
  .ts20-auto-tariff .ts20-tariff-card-head {
    flex-basis: 70px !important;
    min-height: 70px !important;
    height: 70px !important;
  }

  .ts20-auto-tariff .ts20-tariff-values > div {
    min-height: 47px !important;
    height: 47px !important;
  }
}

/*
 * En pantallas muy estrechas V4.9 coloca el icono encima del título.
 * Igualamos también esa cabecera para conservar los separadores alineados.
 */
@media (max-width: 360px) {
  .ts20-auto-tariff .ts20-tariff-card-head {
    flex-basis: 91px !important;
    min-height: 91px !important;
    height: 91px !important;
  }

  .ts20-auto-tariff .ts20-tariff-values > div {
    min-height: 48px !important;
    height: 48px !important;
  }
}