/* ============================================================
   LATINO EXPRESS · widget.css — «LA BARRA» (O3 · DIRECCION-V2 §4)
   Referencia CarePlus: card blanca limpia solapando el hero,
   segmentos en fila con dropdowns blancos minimal.
   La consola oscura murió; la LÓGICA vive intacta (ley 0704-m).
   ============================================================ */

.solicitar {
  position: relative; z-index: 20;
  background: var(--surface);
  /* V3-T5: bottom recortado — la brecha nota→«Quiénes somos» baja a 96-140px */
  padding: 0 clamp(14px, 3vw, 40px) clamp(36px, 3.5vw, 44px);
}

/* ---------- EL CONTENEDOR: card blanca ENCIMADA sobre la foto (V3-T3) ---------- */
.barra {
  position: relative;
  max-width: min(1720px, 94vw); margin: -49px auto 0;
  background: var(--card);
  border: 1px solid rgba(12, 7, 8, .06);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(10, 12, 16, .14), 0 2px 6px rgba(10, 12, 16, .06);
}

/* ---------- LOS SEGMENTOS (fila desktop, 96px) ---------- */
.barra-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.2fr .95fr .95fr auto;
  align-items: stretch;
  min-height: 96px;
}
.seg { position: relative; display: grid; align-content: center; }
/* separadores hairline verticales: alto 56%, centrado */
.seg + .seg::before {
  content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px;
  background: rgba(12, 7, 8, .08);
}
.seg-btn {
  display: grid; gap: 5px; text-align: left; width: 100%;
  padding: 16px 38px 16px 22px; min-height: 96px; align-content: center;
  border-radius: 14px;
  transition: background-color .2s ease;
}
.seg-btn:hover { background: rgba(12, 7, 8, .025); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.seg-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22, 24, 28, .55);
}
/* progreso minimal: check rojo pequeño junto al label del segmento completo */
.seg-check { display: none; font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); }
.seg.done .seg-check { display: inline; }
.seg-value {
  font-size: 15px; font-weight: 700; color: rgba(22, 24, 28, .40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-value.has { color: var(--tx); }
.seg-chev {
  position: absolute; right: 16px; top: 50%; margin-top: -4px;
  width: 12px; height: 8px; fill: none; stroke: rgba(22, 24, 28, .45);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.seg-btn[aria-expanded="true"] .seg-chev { transform: rotate(180deg); }
.seg-btn[aria-expanded="true"] { background: rgba(12, 7, 8, .025); }

/* segmentos de input reales (Nombre / Teléfono) */
.seg-in { padding: 16px 22px; gap: 5px; }
.seg-in input {
  border: 0; background: transparent; padding: 0;
  font-size: 15px; font-weight: 700; color: var(--tx);
  /* target táctil >=44px sin mover el layout: caja 44 con márgenes negativos simétricos */
  min-height: 44px; margin-top: -8px; margin-bottom: -8px;
}
.seg-in input::placeholder { color: rgba(22, 24, 28, .40); font-weight: 700; }
.seg-in input:focus-visible { outline: none; }
.seg-in:focus-within { border-radius: 14px; box-shadow: inset 0 0 0 2px var(--accent); }

/* botón Solicitar */
.seg-go { display: grid; place-items: center; padding: 16px 18px 16px 14px; }
.seg.seg-go::before { display: none; }
.sol-submit { min-height: 60px; padding: 18px 34px; font-size: 15.5px; }
.sol-submit:disabled { opacity: .6; cursor: default; }

/* ---------- POPOVERS (dropdowns blancos minimal) ---------- */
.pop {
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0;
  background: var(--card);
  border: 1px solid var(--hair-ink);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(10, 12, 16, .18);
  padding: 14px;
}
.pop[hidden] { display: none; }
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 380px; max-width: calc(100vw - 40px); }
.pop-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 48px; padding: 8px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--tx);
  transition: background-color .2s ease, color .2s ease;
}
.pop-item svg { width: 20px; height: 20px; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pop-item:hover { background: rgba(183, 6, 3, .05); }
.pop-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-item[aria-pressed="true"] { color: var(--accent); }
.pop-item[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }
.pop-list { width: 320px; max-width: calc(100vw - 40px); max-height: 380px; overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; }
.pop-list .pop-item { min-height: 44px; }
.pop-group {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(22, 24, 28, .5);
  padding: 12px 12px 6px; border-bottom: 1px solid rgba(12, 7, 8, .06); margin-bottom: 4px;
}
.pop-group:first-child { padding-top: 4px; }
/* el select nativo queda como almacén de datos (lógica intacta), jamás visible */
.sr-select { display: none; }

/* ---------- FECHA Y HORA: calendario 2 meses + bandas ---------- */
.pop-fecha { width: 660px; max-width: calc(100vw - 28px); }
.cal-mnav { display: none; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-mnav b { font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tx); }
.cal-mnav button {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(12, 7, 8, .12);
  color: var(--accent); font-size: 17px; font-weight: 800;
}
.cal-mnav button:disabled { opacity: .3; cursor: default; }
.cal-mnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-panes { display: flex; gap: 22px; }
.cal-pane { width: 280px; flex: none; }
.cal-pane .cal-mes {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx); text-align: center; margin-bottom: 10px;
}
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: rgba(22, 24, 28, .45); text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 40px; gap: 2px; }
.cal-day {
  border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--tx);
  border: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.cal-day:not(:disabled):hover { border-color: rgba(183, 6, 3, .4); }
.cal-day:disabled { color: rgba(22, 24, 28, .3); cursor: default; }
/* hoy = aro hairline · seleccionado = disco rojo */
.cal-day.today { border-color: rgba(12, 7, 8, .25); }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FDFDFE; }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* día lleno: tachado diagonal rojo claro */
.cal-day.full {
  color: rgba(22, 24, 28, .3);
  background-image: linear-gradient(135deg, transparent 46%, rgba(183, 6, 3, .35) 46% 54%, transparent 54%);
}

/* bandas de horas bajo el calendario */
.horas2 { margin-top: 14px; border-top: 1px solid rgba(12, 7, 8, .06); padding-top: 12px; display: grid; gap: 10px; }
.horas-hint { font-size: 13px; color: var(--tx-muted); }
.horas-hint b { color: var(--tx); }
.hband b {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(22, 24, 28, .5); margin-bottom: 6px;
}
.hband-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.h-chip {
  min-height: 44px; border-radius: 10px;
  border: 1px solid rgba(12, 7, 8, .12);
  font-size: 12.5px; font-weight: 700; color: var(--tx);
  transition: border-color .2s ease, background-color .2s ease;
}
.h-chip:not(:disabled):hover { border-color: rgba(183, 6, 3, .5); }
.h-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FDFDFE; }
.h-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* turno ocupado: tachado gris-rojo claro */
.h-chip.busy {
  color: rgba(22, 24, 28, .35); cursor: default;
  background-image: linear-gradient(135deg, transparent 45%, rgba(183, 6, 3, .40) 45% 55%, transparent 55%);
  border-color: rgba(12, 7, 8, .07);
}
.h-chip.past { color: rgba(22, 24, 28, .25); cursor: default; border-color: rgba(12, 7, 8, .05); }

/* honeypot: display:none (ley n1) — el JS lo VACÍA, jamás bloquea */
.sol-hp { display: none; }

/* ============================================================
   R2-T1 · DESKTOP (≥901px): LA BARRA FLOTA DENTRO DEL HERO.
   Orden del dueño: «que esté como encimada de la imagen de fondo,
   no debajo de la imagen, que esté como arriba de la imagen».
   Causa raíz del look anterior: .barra con margin -49px solo
   solapaba el BORDE. Ahora la card ENTERA vive sobre la calle:
   absoluta dentro de .solicitar, cuyo top sube -4vh (compensado
   con padding ⇒ el flujo NO cambia y la sección siguiente arranca
   exactamente en el borde del hero, sin hueco). El -4vh además
   deja el trigger 'top 98%' de la entrada (widget.js, intocable)
   ya cruzado al cargar ⇒ la barra aparece sin scroll.
   ============================================================ */
@media (min-width: 901px) {
  .solicitar {
    margin-top: -4vh;
    padding: 4vh 0 0;
    background: transparent;
    pointer-events: none; /* la franja transparente jamás roba clics al hero */
  }
  .barra {
    position: absolute; left: 0; right: 0;
    bottom: calc(1.5vh + 34px); /* ≈5% del hero: flota completa sobre la foto */
    margin: 0 auto;
    pointer-events: auto;
    /* sombra que la DESPEGA de la foto nocturna */
    box-shadow: 0 30px 80px rgba(6, 8, 12, .42), 0 6px 18px rgba(6, 8, 12, .24);
  }
  /* R2-T11 (orden del dueño: «el texto Te escribimos o llamamos… en blanco»).
     CAUSA RAÍZ del texto oscuro sobre la foto: estas reglas perdían la cascada
     contra el `.sol-note` base declarado MÁS ABAJO (misma especificidad, orden
     posterior) ⇒ se blindan con el padre `.solicitar` (especificidad mayor).
     Blanco limpio #F5F6F8 + sombra por glifo (0808-a, jamás caja). */
  .solicitar .sol-note {
    position: absolute; left: 0; right: 0; bottom: 1.2vh;
    margin: 0 auto;
    pointer-events: auto;
    color: rgba(245, 246, 248, .88);
    text-shadow: 0 1px 3px rgba(6, 10, 16, .65);
  }
  .solicitar .sol-note b { color: #F5F6F8; }
  /* sin JS (noscript): la alternativa WhatsApp flota sobre la barra;
     el enlace wa.me va en oro claro distinguible sobre la noche */
  .solicitar .sol-wa-alt {
    position: absolute; left: 0; right: 0; bottom: calc(1.5vh + 148px);
    margin: 0 auto; pointer-events: auto;
    color: #F5F6F8; text-shadow: 0 1px 3px rgba(6, 10, 16, .65);
  }
  .solicitar .sol-wa-alt a { color: var(--gold); }
  /* abajo ya no hay página: los popovers abren HACIA ARRIBA, sobre la foto */
  .pop { top: auto; bottom: calc(100% + 12px); }
}

/* nota + errores sobre superficie blanca */
.sol-note { max-width: min(1720px, 94vw); margin: 16px auto 0; text-align: center; font-size: 13.5px; color: var(--tx-muted); }
.sol-note b { color: var(--tx); }
.sol-wa-alt { max-width: min(1720px, 94vw); margin: 14px auto 0; text-align: center; font-size: 13.5px; color: var(--tx-muted); }
.sol-wa-alt a { color: var(--accent); font-weight: 800; }
.barra .err-note {
  margin: 0 18px 16px;
  background: rgba(183, 6, 3, .06); border-color: rgba(183, 6, 3, .3);
  color: #8E0502;
}
.barra .err-note a { color: var(--accent); }
.barra .sent-card { margin: 18px 18px 0; }

/* ---------- MÓVIL (≤900px): card apilada limpia, acordeón inline ---------- */
@media (max-width: 900px) {
  .solicitar { padding-left: 14px; padding-right: 14px; }
  .barra { margin-top: -24px; border-radius: 18px; }
  .barra-row { grid-template-columns: 1fr; min-height: 0; }
  .seg + .seg::before { left: 18px; right: 18px; top: 0; width: auto; height: 1px; }
  .seg-btn { min-height: 56px; padding: 10px 40px 10px 18px; }
  .seg-in { padding: 10px 18px; min-height: 56px; }
  .seg-chev { right: 18px; }
  /* popover → panel inline expandible (acordeón dentro de la card, sin sheets) */
  .pop {
    position: static; box-shadow: none; border: 0;
    border-top: 1px dashed rgba(12, 7, 8, .12); border-radius: 0;
    margin: 0 10px; padding: 12px 8px 16px;
  }
  .pop-grid, .pop-list, .pop-fecha { width: 100%; max-width: none; }
  .pop-list { max-height: 320px; }
  /* calendario a 1 mes con paginación ‹ › */
  .cal-mnav { display: flex; }
  .cal-panes { display: block; }
  .cal-pane { width: 100%; }
  .cal-pane .cal-mes { display: none; }
  .cal2[data-view="0"] .cal-pane[data-pane="1"] { display: none; }
  .cal2[data-view="1"] .cal-pane[data-pane="0"] { display: none; }
  .cal-grid { grid-auto-rows: 44px; }
  .hband-grid { grid-template-columns: repeat(3, 1fr); }
  /* botón al final, SIEMPRE visible */
  .seg-go { position: sticky; bottom: 10px; z-index: 5; padding: 12px 14px 14px; }
  .sol-submit { width: 100%; box-shadow: 0 12px 34px rgba(183, 6, 3, .4), inset 0 1px 0 rgba(255, 255, 255, .22); }
}
@media (max-width: 380px) {
  .pop-grid { grid-template-columns: 1fr; }
  .hband-grid { grid-template-columns: repeat(2, 1fr); }
}