/* assets/css/34-services-tours.css
   UI específica del panel Tours y visitas privadas dentro de services.
   Alcance:
   - services-tours-panel
   - catálogo de tours
   - bloque único de configuración
   - estados vacío/seleccionado
   NO incluir:
   - core compartido de services
   - aeropuerto
*/

/* -------------------------------------------------
   TOURS PANEL — shell
   ------------------------------------------------- */

.services-tours-panel{
  margin-top:22px;
  display:grid;
  gap:18px;
}

.services-expand__panel[data-service-panel="tours"] .services-expand__text{
  max-width:none;
}

.services-tours-panel__catalog,
.services-tours-panel__config{
  min-width:0;
}

.services-tours-panel__config[hidden]{
  display:none !important;
}

/* -------------------------------------------------
   TOURS PANEL — catálogo
   ------------------------------------------------- */

.services-tours-panel__catalog{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
}

.services-tours-panel__tour{
  grid-column:span 2;
}

.services-tours-panel__tour--bottom-row{
  grid-column:span 3;
}

.services-tours-panel__tour{
  display:grid;
  gap:12px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.services-tours-panel__tour--with-media{
  gap:14px;
}

.services-tours-panel__tour:hover{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  transform:translateY(-1px);
}

.services-tours-panel__tour:focus-visible{
  outline:2px solid rgba(31,122,109,.95);
  outline-offset:3px;
}

.services-tours-panel__tour.is-selected,
.services-tours-panel__tour[aria-pressed="true"]{
  border-color:rgba(31,122,109,.58);
  background:rgba(31,122,109,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.16);
}

.services-tours-panel__tour-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.services-tours-panel__tour-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--fg);
}

.services-tours-panel__tour-duration{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  line-height:1.2;
  color:rgba(244,242,238,.70);
  white-space:nowrap;
}

.services-tours-panel__tour-duration::before{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  opacity:.82;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='rgba(244,242,238,0.72)' stroke-width='1.8'/%3E%3Cpath d='M12 7.8v4.4l2.9 1.7' stroke='rgba(244,242,238,0.72)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.services-tours-panel__tour-text{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
  text-align:left;
  max-width:none;
}

.services-tours-panel__tour-footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.services-tours-panel__tour-price{
  display:grid;
  gap:5px;
}

.services-tours-panel__tour-price-label{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(244,242,238,.62);
}

.services-tours-panel__tour-price-value{
  font-size:20px;
  line-height:1.15;
  color:var(--fg);
}

.services-tours-panel__tour-check{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(244,242,238,.78);
  background:rgba(255,255,255,.03);
}

.services-tours-panel__tour.is-selected .services-tours-panel__tour-check,
.services-tours-panel__tour[aria-pressed="true"] .services-tours-panel__tour-check{
  border-color:rgba(31,122,109,.60);
  background:rgba(31,122,109,.18);
  color:var(--fg);
}

.services-tours-panel__tour-media{
  position:relative;
  width:100%;
  aspect-ratio:16 / 8.6;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

.services-tours-panel__tour-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.services-tours-panel__tour--with-media .services-tours-panel__tour-head{
  gap:10px;
}

/* -------------------------------------------------
   TOURS PANEL — bloque de configuración
   ------------------------------------------------- */

.services-tours-panel__config{
  grid-column:1 / -1;
  display:grid;
  gap:16px;
  padding:20px 18px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}

.services-tours-panel__config-head{
  display:grid;
  gap:10px;
}

.services-tours-panel__selected-tour{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.services-tours-panel__selected-tour-title{
  margin:0;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--fg);
}

.services-tours-panel__selected-tour-meta{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:rgba(244,242,238,.72);
}

.services-tours-panel__config-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.services-tours-panel__field{
  display:grid;
  gap:8px;
  min-width:0;
}

.services-tours-panel__field--full{
  grid-column:1 / -1;
}

.services-tours-panel__label{
  display:block;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,247,230,.98);
}

.services-tours-panel__control{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(236,220,189,.30);
  background:rgba(22,18,17,.62);
  color:rgba(255,249,238,.98);
  box-shadow:inset 0 1px 0 rgba(255,248,236,.08);
}

.services-tours-panel__control--select{
  position:relative;
  padding-right:48px;
}

.services-tours-panel__control--select::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:10px;
  height:10px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:translateY(-60%) rotate(45deg);
  opacity:.82;
  pointer-events:none;
}

.services-tours-panel__help{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:rgba(244,242,238,.62);
}

.services-tours-panel__field--date,
.services-tours-panel__field--time{
  position:relative;
  overflow:visible;
}

.services-tours-panel__field--date{
  margin-right:34px;
}

.services-tours-panel__field--date .services-tours-panel__control,
.services-tours-panel__field--time .services-tours-panel__control{
  min-height:48px;
  height:48px;
  padding-right:16px;
  width:auto;
  min-width:0;
}

.services-tours-panel__field--date .services-tours-panel__control{
  width:15ch;
}

.services-tours-panel__field--time .services-tours-panel__control{
  width:9ch;
}

.services-tours-panel__field--date::after,
.services-tours-panel__field--time::after{
  content:"";
  position:absolute;
  top:36px;
  width:18px;
  height:18px;
  opacity:.92;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}

.services-tours-panel__field--date::after{
  right:-24px;
}

.services-tours-panel__field--time::after{
  right:-28px;
}

.services-tours-panel__field--date::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.75' y='5.75' width='16.5' height='14.5' rx='2.25' stroke='rgba(255,249,238,0.96)' stroke-width='1.5'/%3E%3Cpath d='M7 3.75v4M17 3.75v4M3.75 9.25h16.5' stroke='rgba(255,249,238,0.96)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.services-tours-panel__field--time::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.25' stroke='rgba(255,249,238,0.96)' stroke-width='1.5'/%3E%3Cpath d='M12 7.75v4.6l3 1.8' stroke='rgba(255,249,238,0.96)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.services-tours-panel__field--date input::-webkit-calendar-picker-indicator,
.services-tours-panel__field--time input::-webkit-calendar-picker-indicator{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.services-tours-panel__field--date input::-webkit-calendar-picker-indicator{
  right:-28px;
  width:34px;
  height:34px;
}

.services-tours-panel__field--time input::-webkit-calendar-picker-indicator{
  right:-30px;
}

.services-tours-panel__field--date input::-webkit-datetime-edit,
.services-tours-panel__field--time input::-webkit-datetime-edit{
  color:rgba(255,249,238,.98);
}

.services-tours-panel__field--date input::-webkit-datetime-edit-fields-wrapper,
.services-tours-panel__field--time input::-webkit-datetime-edit-fields-wrapper{
  padding:0;
}

/* -------------------------------------------------
   TOURS PANEL — chips / toggles
   ------------------------------------------------- */

.services-tours-panel__chips{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
}

.services-tours-panel__chip{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:88px;
  padding:0 12px;
  border:1px solid rgba(236,220,189,.28);
  border-radius:13px;
  background:rgba(22,18,17,.56);
  color:rgba(255,249,238,.90);
  box-shadow:inset 0 1px 0 rgba(255,248,236,.06);
  cursor:pointer;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.services-tours-panel__chip:hover{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);
  color:var(--fg);
}

.services-tours-panel__chip:focus-visible{
  outline:2px solid rgba(31,122,109,.95);
  outline-offset:2px;
}

.services-tours-panel__chip.is-active,
.services-tours-panel__chip[aria-pressed="true"]{
  border-color:rgba(31,122,109,.66);
  background:rgba(31,122,109,.14);
  color:var(--fg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(31,122,109,.16);
}

/* -------------------------------------------------
   TOURS PANEL — nuevo layout de configuración
   ------------------------------------------------- */

.services-tours-panel__layout{
  display:grid;
  gap:16px;
}

.services-tours-panel__row{
  display:grid;
  gap:14px;
  min-width:0;
}

.services-tours-panel__row--top{
  display:flex;
  align-items:flex-end;
  gap:20px;
  min-width:0;
}

.services-tours-panel__row--top:not(:has(.services-tours-panel__field--guide-language)){
  display:flex;
}

.services-tours-panel__row--pickup{
  grid-template-columns:minmax(0, 1fr);
}

.services-tours-panel__row--bottom{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .9fr);
  align-items:end;
}

.services-tours-panel__row--bottom:has(.services-tours-panel__field--guide):not(:has(.services-tours-panel__field--guide-language)){
  grid-template-columns:minmax(0, 1fr) minmax(320px, .95fr);
}

.services-tours-panel__row--bottom:not(:has(.services-tours-panel__field--guide)){
  grid-template-columns:minmax(320px, .95fr);
  justify-content:end;
}

.services-tours-panel__row--cta{
  grid-template-columns:minmax(0, 1fr);
}

.services-tours-panel__field--passengers,
.services-tours-panel__field--guide,
.services-tours-panel__field--guide-language,
.services-tours-panel__field--pickup,
.services-tours-panel__field--date,
.services-tours-panel__field--time{
  min-width:0;
  flex:0 0 auto;
}

.services-tours-panel__field--passengers{
  width:auto;
}

.services-tours-panel__field--guide{
  width:auto;
}

.services-tours-panel__field--guide-language{
  width:220px;
}

.services-tours-panel__field--guide-language .services-tours-panel__control{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:44px;
  height:44px;
  padding:0 14px;
  border-radius:12px;
}

.services-tours-panel__field--guide-language .services-tours-panel__control--select{
  padding-right:38px;
}

.services-tours-panel__field--guide-language .services-tours-panel__control--select::after{
  right:14px;
}

.services-tours-panel__guide-language{
  position:relative;
  min-width:0;
}

.services-tours-panel__guide-language-trigger{
  justify-content:space-between;
  width:100%;
  text-align:left;
  cursor:pointer;
}

.services-tours-panel__guide-language-trigger-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.services-tours-panel__guide-language-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:30;
  min-width:100%;
}

.services-tours-panel__guide-language-listbox{
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid rgba(236,220,189,.24);
  border-radius:12px;
  background:rgba(20,17,16,.98);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.services-tours-panel__guide-language-option{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:rgba(255,249,238,.92);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease;
}

.services-tours-panel__guide-language-option:hover{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--fg);
}

.services-tours-panel__guide-language-option:focus-visible{
  outline:2px solid rgba(31,122,109,.95);
  outline-offset:2px;
}

.services-tours-panel__guide-language-option.is-selected,
.services-tours-panel__guide-language-option[aria-selected="true"]{
  border-color:rgba(31,122,109,.48);
  background:rgba(31,122,109,.14);
  color:var(--fg);
}

.services-tours-panel__price--inline{
  min-height:100%;
  flex:0 0 266px;
  margin-left:auto;
}

.services-tours-panel__cta--full{
  width:100%;
  justify-content:center;
}

/* -------------------------------------------------
   TOURS PANEL — footer precio + CTA
   ------------------------------------------------- */

.services-tours-panel__footer{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:16px;
}

.services-tours-panel__price{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(247,226,170,.52);
  background:linear-gradient(180deg, rgba(255,242,214,.18) 0%, rgba(255,226,178,.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,248,236,.16),
    0 10px 22px rgba(0,0,0,.12);
}

.services-tours-panel__price-label{
  margin:0;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,245,228,.72);
}

.services-tours-panel__price-value{
  margin:0;
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:rgba(255,224,140,.98);
}

.services-tours-panel__cta{
  min-height:48px;
  padding:0 22px;
  border:1px solid rgba(48,118,109,.72);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(27,92,86,.96) 0%, rgba(18,71,67,.96) 100%);
  color:rgba(255,248,236,.98);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.services-tours-panel__cta:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.services-tours-panel__cta[disabled],
.services-tours-panel__cta[aria-disabled="true"]{
  cursor:not-allowed;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(244,242,238,.58);
  box-shadow:none;
  transform:none;
  opacity:1;
}

.services-tours-panel__cta[disabled]:hover,
.services-tours-panel__cta[aria-disabled="true"]:hover{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(244,242,238,.58);
  box-shadow:none;
  transform:none;
}

/* -------------------------------------------------
   TOURS PANEL — empty state
   ------------------------------------------------- */

.services-tours-panel__empty{
  display:grid;
  gap:8px;
  padding:18px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}

.services-tours-panel__empty-title{
  margin:0;
  font-size:17px;
  line-height:1.25;
  color:var(--fg);
}

.services-tours-panel__empty-text{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}

/* -------------------------------------------------
   TOURS PANEL — responsive
   ------------------------------------------------- */

@media (max-width: 1024px){
  .services-tours-panel__catalog{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .services-tours-panel__tour,
  .services-tours-panel__tour:nth-child(4),
  .services-tours-panel__tour:nth-child(5){
    grid-column:auto;
  }
}

@media (min-width: 721px){
  .services-tours-panel__guide-language-panel[hidden]{
    display:none !important;
  }
}

@media (max-width: 720px){
  .services-tours-panel{
    margin-top:18px;
    gap:14px;
  }

  .services-tours-panel__catalog{
    grid-template-columns:1fr;
  }

  .services-tours-panel__tour,
  .services-tours-panel__tour:nth-child(4),
  .services-tours-panel__tour:nth-child(5){
    grid-column:auto;
  }

  .services-tours-panel__tour{
    padding:16px 16px 14px;
    border-radius:14px;
  }

  .services-tours-panel__tour-media{
    aspect-ratio:16 / 9;
    border-radius:10px;
  }
  
    .services-tours-panel__tour[data-services-tour-option="teotihuacan_basilica"] .services-tours-panel__tour-image{
    object-position:center 74%;
  }

  .services-tours-panel__tour[data-services-tour-option="xochimilco_coyoacan"] .services-tours-panel__tour-image{
    object-position:center 52%;
  }

  .services-tours-panel__tour[data-services-tour-option="cholula_puebla"] .services-tours-panel__tour-image{
    object-position:center 54%;
  }

  .services-tours-panel__tour[data-services-tour-option="san_miguel_allende"] .services-tours-panel__tour-image{
    object-position:center 40%;
  }

  .services-tours-panel__tour-head{
    flex-direction:column;
    gap:6px;
  }

  .services-tours-panel__tour-title{
    font-size:17px;
  }

  .services-tours-panel__tour-duration{
    white-space:nowrap;
  }

  .services-tours-panel__tour-text{
    font-size:13px;
    line-height:1.5;
  }

  .services-tours-panel__tour-footer{
    align-items:flex-start;
  }

  .services-tours-panel__tour-price-value{
    font-size:18px;
  }

  .services-tours-panel__config{
    gap:14px;
    padding:16px;
    border-radius:14px;
  }

  .services-tours-panel__selected-tour{
    flex-direction:column;
    gap:6px;
  }

  .services-tours-panel__selected-tour-title{
    font-size:18px;
  }

  .services-tours-panel__layout{
    gap:14px;
  }
  
    .services-tours-panel__field--date::after,
  .services-tours-panel__field--time::after{
    right:16px;
    top:39px;
    width:16px;
    height:16px;
    background-size:16px 16px;
  }

  .services-tours-panel__field--date input::-webkit-calendar-picker-indicator,
  .services-tours-panel__field--time input::-webkit-calendar-picker-indicator{
    right:12px;
    width:20px;
    height:20px;
  }

  .services-tours-panel__field--date .services-tours-panel__control,
  .services-tours-panel__field--time .services-tours-panel__control{
    min-height:50px;
    height:50px;
    padding-right:44px;
  }

  .services-tours-panel__row,
  .services-tours-panel__row--top,
  .services-tours-panel__row--pickup,
  .services-tours-panel__row--bottom,
  .services-tours-panel__row--cta{
    grid-template-columns:1fr;
    gap:12px;
  }

  .services-tours-panel__chips{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  .services-tours-panel__chip{
    min-width:0;
    width:100%;
    min-height:50px;
    padding:0 10px;
    border-radius:12px;
    font-size:13px;
  }

  .services-tours-panel__price{
    padding:12px 14px;
    border-radius:14px;
  }

  .services-tours-panel__price-value{
    font-size:26px;
  }

  .services-tours-panel__cta{
    width:100%;
    min-height:54px;
    justify-content:center;
  }

  .services-tours-panel__empty{
    padding:16px;
    border-radius:14px;
  }
}