/* importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@300;400;600&display=swap');

* { box-sizing: border-box; }

/* === Estilos globales === */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #ffdab9, #ffb6c1);
  padding: 20px;
  margin: 0;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* === Header === */
.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.logo-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}
.logo:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
/* Glow azul natural simple (suave) */
.logo-title-wrapper::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(30,144,255,0.18) 0%,
    rgba(30,144,255,0.10) 50%,
    rgba(0,0,0,0) 70%
  );
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: haloPulse 3.2s ease-in-out infinite;
}
@keyframes haloPulse {
  0%,100% { opacity: .75; transform: translateX(-50%) scale(0.98); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.02); }
}
.main-title {
  color: white;
  font-size: 2.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  margin-top: 10px;
  background-color: #1e90ff;
  border-radius: 8px;
  text-align: center;
  padding: 10px 18px;
  letter-spacing: .3px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* === Contenedor de tarjetas === */
/* Reducimos gap y hacemos que las tarjetas queden más próximas */
.cards-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 25px;           /* MÁS CERRADO para acercar columnas */
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: nowrap;
  width: fit-content;     /* ← centra el conjunto y reduce espacio muerto */
}

/* Contenedores */
.input-card,
.results-card {
  flex: 1 1 50%;
  max-width: 400px;
  margin-bottom: 6px;
}
.card {
  background: white;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.12);
  max-width: 400px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 28px rgba(0,0,0,0.16);
}

/* === Secciones === */
.input-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 600px;
}
.input-card .section {
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 14px 14px;
  transition: transform .16s ease, box-shadow .16s ease;
  max-width: 400px;
  margin: 0 auto 6px auto;
  overflow: visible;
}
.input-card .section:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-size: 1.14rem;
  letter-spacing: .2px;
  gap: 8px;
}
.day-care-title { color: #0066cc; }
.boarding-title { color: #9c27b0; }
.home-care-title { color: #ff6600; }
.section-title input[type="checkbox"] { margin-left: auto; }
.section-fields {
  border-top: 1px dashed #e0e0e0;
  padding-top: 10px;
}

/* Colores suaves por tipo */
.section:has(.day-care-title) { border-left: 6px solid #0066cc; }
.section:has(.boarding-title) { border-left: 6px solid #9c27b0; }
.section:has(.home-care-title) { border-left: 6px solid #ff6600; }

/* === Inputs y opciones === */
.option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
  width: 100%;           /* IMPORTANTE: fuerza que hijos no superen ancho de la tarjeta */
}
.option-label {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap:6px;
}
/* ocultar texto redundante (usa .show-label para mostrar) */
.option .option-label > span { display: none; }

/* entradas numéricas: ancho 33% (se mantienen) */
input[type="number"], select {
  width: 33%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #aaa;
  font-size: 0.95rem;
  font-family: 'Inter', Arial, sans-serif;
  transition: box-shadow 0.15s ease;
  box-sizing: border-box;
  margin: 0;
}
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 8px 18px rgba(156,39,176,0.12);
}

/* === Forzar tamaño correcto del icono dog.png (evita que crezca) === */
.dog-icon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}
/* icono ayuda junto al dog: mantener pequeño */
.dog-number-label .info-icon,
.dog-number-label img.info-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-block;
  margin: 0;
}

/* === Dog Icon y cantidad de perros (alineados) === */
.dog-number-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dog-count-input {
  width: 33%;
  margin: 0;
}

/* --- CASOS ESPECIALES: apilar contenido debajo del título ---- */
#dayCareOccasionalContainer,
#dayCareWeeklyContainer,
#dayCareWalkingOccasionalContainer,
#boardingWalkingOccasionalContainer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
#dayCareOccasionalContainer input,
#dayCareWeeklyContainer input,
#dayCareWalkingOccasionalContainer input,
#boardingWalkingOccasionalContainer input {
  width: 33%;
  margin: 0;
}

/* Arrival / Departure: apilados y CENTRADOS; inputs de fecha más grandes (50%) */
#boardingDates,
#homeCareDates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
#boardingDates label,
#homeCareDates label {
  display: block;
  margin: 0;
  width: 100%;
  text-align: center;
}
#boardingDates input[type="date"],
#homeCareDates input[type="date"],
.arrival-departure input[type="date"] {
  display: block;
  width: 50%;            /* ahora 50% para mostrar año completo */
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #aaa;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* Si en algún lugar usas la clase .arrival-departure, que también apile y centre */
.arrival-departure {
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  text-align:center;
}

/* === Select neighborhood más ancho === */
#homeCareNeighborhood {
  width: 80% !important;
  box-sizing: border-box;
}

/* === Tooltips === */
.info-icon {
  display: inline-block;
  width: 18px !important;
  height: 18px !important;
  background: url('question.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: transform .16s ease;
}
.info-icon:hover { transform: scale(1.08) rotate(-5deg); }
.info-icon.active {
  background: url('questionx.png') no-repeat center center;
  background-size: contain;
}
.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.18s ease;
  white-space: pre-line;
  box-shadow: 0 8px 26px rgba(0,0,0,0.32);
}
.tooltip.show { opacity: 1; transform: translateY(0); }

/* === Add-on Dog Walking === */
/* Ahora la walking-addon se expande a ambos lados (izq/dcha) visualmente */
.walking-addon {
  background-color: #ffcc99;
  padding: 10px;
  border-radius: 6px;
  margin-top: 10px;
  overflow: visible;
  position: relative;
  z-index: 40;
  /* se extenderá horizontalmente respecto al ancho de la .section */
  width: calc(100% + 28px);
  margin-left: -14px;       /* empuja a la izquierda para cubrir borde izquierdo */
  box-sizing: border-box;
  padding-left: 18px;
  padding-right: 18px;
}
.dog-walking-title { font-size: 1.2em; color: green; margin-bottom: 5px; font-weight: normal; }
.dog-walking-label { color: green; font-weight: bold; }
.dog-walking-price { color: black; }

/* === Hacer que cuando UNA walking-addon esté visible, TODAS las secciones se amplíen ===
   Usamos :has() sobre .input-card para detectar si alguna .section contiene walking-addon visible
   (tu JS muestra oculta con style="display:block"). */
.input-card:has(.section .walking-addon[style*="display: block"]) {
  max-width: 480px; /* espacio para que todas las secciones puedan crecer */
}
.input-card:has(.section .walking-addon[style*="display: block"]) .section {
  width: 440px;
  max-width: 440px;
}

/* Ajuste del tamaño interno de la walking-addon cuando está visible (asegura consistencia) */
.input-card .section .walking-addon {
  /* si el addon no está visible, estas reglas no lo modifican visualmente */
  transition: width .18s ease, margin-left .18s ease;
}

/* Ajustes para tooltips dentro de walking-addon: mantenerlos visibles y dentro del recuadro */
.input-card .section .walking-addon .freq-group .tooltip,
.input-card .section .walking-addon .tooltip {
  /* forzamos que aparezcan dentro del recuadro y no se salgan por la derecha */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 220px;
  z-index: 14000;
}

/* === Resultados === */
/* Volvemos a la posición anterior más pegada (sin subirla) */
.results-card {
  border: 2px solid #ddd;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  animation: fadeInUp .45s ease both;
  max-width: 400px;
  margin: -12px auto 0 auto; /* vuelto al valor más cercano al original */
  position: relative;
  top: 0; /* aseguramos que no esté desplazada hacia arriba */
}
.result-subbox {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: fadeInUp .55s ease both;
}
.result-subbox:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}
#dayCareTotals.result-subbox { background-color: #e0f7fa; }
#boardingTotals.result-subbox { background-color: #f3e5f5; }
#homeCareTotals.result-subbox { background-color: #ffe0b2; }
.total-day-care,
.total-boarding,
.total-home-care {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.35em;
  letter-spacing: .3px;
}
.total-day-care { color: #0066cc; }
.total-boarding { color: #9c27b0; }
.total-home-care { color: #ff6600; }

/* Nota final */
.results-note {
  font-size: 0.9em;
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  color: #666;
}

/* === Responsivo === */

@media (max-width: 768px) {

   body {
    display: flex;              /* ⭐ añadido */
    flex-direction: column;     /* ⭐ añadido */
    align-items: center;        /* ⭐ añadido */
    text-align: center;         /* ⭐ añadido */
  }

  .header-container, .logo-title-wrapper, .main-title {  /* ⭐ añadido */
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .cards-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .card, .input-card, .results-card {
    max-width: 90%;
    width: 100%;
      margin-left: auto;    /* ⭐ añadido */
    margin-right: auto;   /* ⭐ añadido */
    text-align: center;   /* ⭐ añadido */
  }
  input[type="number"], select {
    width: 90%;
  }
  /* fechas en móvil ocupan más espacio */
  #boardingDates input[type="date"],
  #homeCareDates input[type="date"],
  .arrival-departure input[type="date"] {
    width: 90%;
  }
}

/* --- Animaciones --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   PÍLDORAS / BOTONES VISUALES (unidad pill+tooltip, se ajustan)
   ========================= */

/* wrapper que agrupa cada pill + tooltip (evita separación tooltip/pill) */
.freq-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;    /* tooltip sigue pegado a su pill */
  white-space: nowrap;
  vertical-align: middle;
  min-width: 0;         /* important para que puedan encogerse */
}

/* contenedor general de pills (varios .freq-group dentro) permite wrap entre grupos */
.option .freq-group { margin-right: 6px; }

/* ocultar checkbox/radio visualmente pero mantener accesible */
.freq-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* pill flexible: puede encoger para caber en la tarjeta (ajustado) */
.freq-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* aquí cambié las cifras para que se encojan mejor y no salgan de la tarjeta */
  flex: 1 1 78px;    /* grow, shrink, base 78px */
  min-width: 48px;   /* se encogen hasta 48px si falta espacio */
  max-width: 160px;
  padding: 6px 8px;  /* menos padding para hacerlas más compactas */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.88rem; /* un pelín más pequeño para caber */
  color: #123;
  transition: transform .10s ease, box-shadow .10s ease, background .10s ease;
  box-shadow: 0 6px 12px rgba(8,20,40,0.04);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover / active */
.freq-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,20,40,0.06); }
.freq-input:checked + .freq-pill {
  background: linear-gradient(90deg, rgba(50,130,255,0.12), rgba(50,130,255,0.06));
  border-color: rgba(30,144,255,0.26);
  color: #0b3b3a;
  box-shadow: 0 10px 26px rgba(30,144,255,0.05);
}
.freq-pill.primary { border-color: rgba(30,144,255,0.12); }
.freq-pill.secondary { border-color: rgba(156,39,176,0.12); }

/* la imagen de ayuda queda siempre pegada al pill dentro de la misma .freq-group */
.freq-group > .info-icon {
  margin-left: 6px;
  margin-right: 0;
  align-self: center;
  width: 16px !important;
  height: 16px !important;
}

/* accesibilidad focus */
.freq-input:focus + .freq-pill {
  outline: 3px solid rgba(30,144,255,0.12);
  outline-offset: 3px;
}

/* mobile tweaks */
@media (max-width:560px) {
  .freq-group { flex-wrap: wrap; gap: 6px; }
  .freq-pill { padding: 7px 10px; font-size: 0.9rem; flex: 1 1 40%; min-width: 84px; }
}


/* ===========================
   MOBILE-ONLY: 2+1 layout for walking pills + prevent horizontal expansion
   (Add to the end of styles.css)
   =========================== */
@media (max-width: 560px) {

  /* evita scroll horizontal accidental causado por el addon */
  body {
    overflow-x: hidden;
  }

  /* No permitir la expansión de la card cuando walking-addon se muestra.
     (Se sobreescriben las reglas de escritorio que ensanchan la sección) */
  .input-card:has(.section .walking-addon[style*="display: block"]) {
    max-width: 100%;
  }
  .input-card:has(.section .walking-addon[style*="display: block"]) .section {
    width: 100%;
    max-width: 100%;
  }

  /* Hacer que el walking-addon quepa dentro de la tarjeta (sin salirse) */
  .input-card .section .walking-addon {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Forzar que el wrapper inline (tiene estilo inline en HTML) haga wrap */
  .walking-addon .option > div,
  .walking-addon .option > div[style] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }

  /* Cada freq-group ocupa ~48% en la primera fila */
  .walking-addon .freq-group {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* El tercer freq-group (el tercero en orden) baja a su propia fila y se centra */
  .walking-addon .option > div > .freq-group:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
    margin-top: 6px;
  }

  /* Asegurar que el icono de tooltip no provoque overflow */
  .walking-addon .freq-group > .info-icon {
    margin-left: 8px;
    flex: 0 0 auto;
  }

  /* Hacer las pills más cómodas para tocar en móvil */
  .walking-addon .freq-pill {
    padding: 8px 12px;
    font-size: 1rem;
    text-align: center;
  }

  /* Asegurar que inputs no rompan layout en móviles */
  input[type="number"], select, .dog-count-input {
    width: 90% !important;
    max-width: 100% !important;
  }
}