/* =====================================================================
   fe-captura — PEDIDO EN 1 PASO · estilos · 02/10/2026
   Dos temas: claro (papel, el del pase y las secciones claras) y oscuro
   (sobre el navy de la home). Todo con prefijo .fc- para no chocar con
   styles.css ni con .bv-.
   El campo y el botón son una sola pieza: un solo lugar donde mirar,
   un solo lugar donde tocar.
   ===================================================================== */
.fe-captura{
  --fc-tinta:#0B1320;
  --fc-tinta-2:#3B4B60;
  --fc-tinta-3:#6A7A8E;
  --fc-papel:#FFFFFF;
  --fc-linea:rgba(11,19,32,.16);
  --fc-cel:#1873B4;
  --fc-oro:#D4AF37;
  --fc-verde:#1FA855;
  --fc-sans:var(--sans,'Geist',system-ui,-apple-system,'Segoe UI',sans-serif);
  --fc-serif:var(--serif,'Instrument Serif',ui-serif,Georgia,serif);
  --fc-mono:var(--mono,'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace);
  font-family:var(--fc-sans); color:var(--fc-tinta); text-align:left;
}
.fe-captura.fc--oscuro{
  --fc-tinta:#EDF2F7; --fc-tinta-2:#B6C4D4; --fc-tinta-3:#8294A8;
  --fc-papel:rgba(255,255,255,.06); --fc-linea:rgba(255,255,255,.18); --fc-cel:#4FA8E8;
}
.fe-captura *{ box-sizing:border-box }

.fc-kicker{
  font-family:var(--fc-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fc-tinta-3); margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
.fc-kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--fc-oro) }
.fc-titulo{
  font-family:var(--fc-sans); font-weight:300; font-size:clamp(21px,2.4vw,27px); line-height:1.12;
  letter-spacing:-.025em; color:var(--fc-tinta); margin:0 0 8px; text-wrap:balance;
}
.fc-titulo em{ font-family:var(--fc-serif); font-style:italic; font-weight:400; color:var(--fc-cel) }
.fc-titulo:focus{ outline:none }
.fc-bajada{ font-size:14.5px; line-height:1.5; color:var(--fc-tinta-2); margin:0 0 16px; max-width:46ch }
.fc-bajada b{ color:var(--fc-tinta); font-weight:600 }

/* ---------- Campo + botón: una sola pieza ---------- */
.fc-form{ margin:0 }
.fc-campo{
  display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px;
  background:var(--fc-papel); border:1px solid var(--fc-linea); border-radius:999px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fc-campo:focus-within{ border-color:var(--fc-cel); box-shadow:0 0 0 4px color-mix(in srgb, var(--fc-cel) 18%, transparent) }
.fc-input{
  flex:1 1 auto; min-width:0; border:0; background:none; outline:none; padding:12px 0;
  font-family:var(--fc-sans); font-size:16px; color:var(--fc-tinta);   /* 16px: evita el zoom de iOS */
}
.fc-input::placeholder{ color:var(--fc-tinta-3) }
.fc-input:disabled{ opacity:.6 }
.fc-enviar{
  flex:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0;
  padding:13px 18px; border-radius:999px; background:#0B1320; color:#fff;
  font-family:var(--fc-mono); font-size:12px; font-weight:600; letter-spacing:.03em; white-space:nowrap;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fc--oscuro .fc-enviar{ background:#fff; color:#0B1320 }
.fc-enviar:hover{ background:var(--fc-cel); color:#fff; transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(24,115,180,.75) }
.fc-enviar:disabled{ opacity:.7; cursor:default; transform:none }
.fc-enviar.fc-cargando svg{ animation:fc-gira .7s linear infinite }
.fc-enviar-chico{ padding:11px 13px }
.fc-campo-chico{ padding:4px 4px 4px 14px }
.fc-campo-chico .fc-input{ padding:10px 0; font-size:15px }
.fc-miel{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

.fc-aviso{ margin:10px 2px 0; font-size:13px; line-height:1.4; color:#C0392B; min-height:0; display:none }
.fc--oscuro .fc-aviso{ color:#FF8A7A }
.fc-aviso-on{ display:block }
.fc-aviso-ok{ color:var(--fc-verde) }

/* ---------- Pie: WhatsApp y sello de confianza ---------- */
.fc-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px }
.fc-wa{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--fc-mono); font-size:12px; color:var(--fc-tinta-2);
  padding:7px 12px; border-radius:999px; border:1px solid var(--fc-linea); transition:.2s;
}
.fc-wa svg{ color:var(--fc-verde) }
.fc-wa:hover{ color:var(--fc-tinta); border-color:var(--fc-tinta-3) }
.fc-sello{ font-family:var(--fc-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fc-tinta-3) }
.fc-largo{
  font-family:var(--fc-mono); font-size:11.5px; color:var(--fc-tinta-3); text-decoration:none;
  border-bottom:1px solid var(--fc-linea); padding-bottom:2px; transition:.2s;
}
.fc-largo:hover{ color:var(--fc-tinta); border-color:var(--fc-tinta-3) }

/* ---------- Pantalla 2 ---------- */
.fc-ok{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:12px;
  background:color-mix(in srgb, var(--fc-verde) 16%, transparent); color:var(--fc-verde);
  animation:fc-entra .45s cubic-bezier(.2,1.4,.3,1) both;
}
.fc-ok svg{ width:21px; height:21px; stroke-dasharray:28; stroke-dashoffset:28; animation:fc-tilde .5s ease .18s forwards }
.fc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px }
.fc-chip{
  cursor:pointer; border:1px solid var(--fc-linea); background:var(--fc-papel); color:var(--fc-tinta-2);
  padding:9px 14px; border-radius:999px; font-family:var(--fc-sans); font-size:13.5px; transition:.18s;
}
.fc-chip:hover{ border-color:var(--fc-tinta-3); color:var(--fc-tinta) }
.fc-chip-on{ background:#0B1320; border-color:#0B1320; color:#fff }
.fc--oscuro .fc-chip-on{ background:#fff; border-color:#fff; color:#0B1320 }
.fc-pie-listo{ margin-top:16px }

.fc-enviar:focus-visible, .fc-chip:focus-visible, .fc-wa:focus-visible, .fc-largo:focus-visible, .fc-cerrar:focus-visible{
  outline:2px solid var(--fc-cel); outline-offset:3px;
}

/* ---------- Hoja propia ---------- */
.fc-fondo{
  position:fixed; inset:0; z-index:420; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,10,18,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s ease;
}
.fc-fondo.fc-abierta{ opacity:1 }
.fc-hoja{
  position:relative; width:100%; max-width:520px; background:#EDF2F7; border-radius:22px; padding:30px 30px 26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.2,.9,.2,1);
  max-height:calc(100dvh - 48px); overflow-y:auto;
}
.fc-abierta .fc-hoja{ transform:none }
.fc-hoja .fe-captura{ --fc-papel:#fff }
.fc-cerrar{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:rgba(11,19,32,.07); color:#3B4B60; transition:.2s;
}
.fc-cerrar:hover{ background:rgba(11,19,32,.14); color:#0B1320 }
body.fc-lock{ overflow:hidden }

@media (max-width:720px){
  .fc-fondo{ align-items:flex-end; padding:0 }
  .fc-hoja{
    max-width:none; border-radius:22px 22px 0 0; padding:26px 20px calc(20px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%); max-height:88dvh;
  }
  .fc-abierta .fc-hoja{ transform:none }
  /* En el celular el botón no comparte renglón con el campo: ahí el texto
     quedaba cortado y el área para tocar era chica. Campo arriba, botón
     ancho abajo — un solo lugar donde apuntar el pulgar. */
  .fc-campo{ flex-direction:column; align-items:stretch; gap:9px; padding:7px; border-radius:20px }
  .fc-input{ padding:12px 10px }
  .fc-enviar{ width:100%; justify-content:center; padding:15px; font-size:12.5px }
  .fc-campo-chico{ flex-direction:row; align-items:center; padding:4px 4px 4px 14px; border-radius:999px; gap:8px }
  .fc-campo-chico .fc-input{ padding:10px 0 }
  .fc-campo-chico .fc-enviar{ width:auto; padding:11px 13px }
  .fc-pie{ gap:8px }
  .fc-sello{ font-size:9px }
}

@keyframes fc-gira{ to{ transform:rotate(360deg) } }
@keyframes fc-entra{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes fc-tilde{ to{ stroke-dashoffset:0 } }

@media (prefers-reduced-motion: reduce){
  .fc-fondo, .fc-hoja{ transition:none !important }
  .fc-hoja{ transform:none !important }
  .fc-ok, .fc-ok svg{ animation:none !important; stroke-dashoffset:0 !important }
  .fc-enviar.fc-cargando svg{ animation:none !important }
}