/* ============================================================
   canal.css · TELÉFONO, TIEMPOS Y CANAL CERRADO (en el carrito)
   ------------------------------------------------------------
   telefono.js, canal.js y el estado del POS en pedido.html.
   ============================================================ */

/* El campo de WhatsApp: igual al del nombre; en delivery se marca. */
.telefono-campo em { font-style: normal; font-weight: 400; opacity: .55; text-transform: none; letter-spacing: 0; }
.telefono-campo.obligatorio em { opacity: .9; color: var(--brand-yellow, #F5C518); }

/* Chips de tiempo estimado, arriba del formulario. */
.canal-tiempos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  background: rgba(245, 197, 24, .07);
  border: 1px solid rgba(245, 197, 24, .25);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-off, #B8B8B8);
}
.canal-tiempos[hidden] { display: none !important; }
.canal-tiempos-etq {
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 11.5px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--brand-yellow, #F5C518);
}
.canal-tiempos b { color: #fff; }

/* El aviso de canal cerrado: claro, sin drama, con salida. */
.canal-aviso {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(245, 197, 24, .45);
  border-left: 4px solid var(--brand-yellow, #F5C518);
  border-radius: 12px;
}
.canal-aviso[hidden] { display: none !important; }
.canal-aviso strong {
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 17px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase;
  color: #fff;
}
.canal-aviso span { font-size: 13.5px; line-height: 1.4; color: var(--text-off, #B8B8B8); }

/* Estado del POS en el ticket (pedido.html). */
.pos-estado {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ink, #111);
  border: 1px solid rgba(255, 255, 255, .09);
}
.pos-estado strong { font-family: var(--f-cond, 'Barlow Condensed', sans-serif); font-size: 19px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.pos-estado span { font-size: 14px; color: var(--off, #B8B8B8); line-height: 1.4; }
.pos-estado.nuevo { border-color: rgba(245, 197, 24, .45); }
.pos-estado.nuevo strong { color: var(--y, #F5C518); }
.pos-estado.aceptado { border-color: rgba(37, 211, 102, .5); }
.pos-estado.aceptado strong { color: var(--verde, #25D366); }
.pos-estado.rechazado { border-color: rgba(230, 57, 70, .5); }
.pos-estado.rechazado strong { color: var(--red, #E63946); }
.pos-estado a.btn-seguir {
  display: inline-block; margin-top: 6px; padding: 12px 16px; border-radius: 12px;
  background: var(--verde, #25D366); color: #052e16; font-weight: 900; text-decoration: none;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif); letter-spacing: 1.2px; text-transform: uppercase;
}
.pos-estado .pos-punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
  background: var(--y, #F5C518); animation: pos-late 1.2s ease-in-out infinite;
}
@keyframes pos-late { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }


/* Aviso de cambio de estado en el ticket (pedido.html). */
.pos-estado .pos-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.btn-avisame {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: none;
  background: var(--y, #F5C518); color: #080808; font-weight: 900; cursor: pointer;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif); letter-spacing: 1.2px; text-transform: uppercase; font-size: 14px;
}
.pos-avisos-ok { font-size: 13px; color: var(--verde, #25D366); font-weight: 700; }
.pos-link { font-size: 13px; color: var(--off, #B8B8B8); }
.pos-demora { display: block; font-size: 13px; color: var(--y, #F5C518); font-style: normal; }
.pos-estado.estado-ready_for_pickup, .pos-estado.estado-out_for_delivery, .pos-estado.estado-ready_for_dispatch { border-color: rgba(37, 211, 102, .7); box-shadow: 0 0 0 4px rgba(37, 211, 102, .12); }
.pos-estado.estado-ready_for_pickup strong, .pos-estado.estado-out_for_delivery strong { font-size: 22px; }
.pos-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  max-width: 92vw; padding: 14px 18px; border-radius: 14px; z-index: 50;
  background: var(--y, #F5C518); color: #080808; font-weight: 800; font-size: 15px; line-height: 1.3;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); transition: opacity .3s ease, transform .3s ease;
}
.pos-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.pos-eta { display: block; font-size: 14px; color: var(--off, #B8B8B8); font-style: normal; }
.pos-eta b { color: #fff; }
.canal-cola { color: var(--y, #F5C518); font-weight: 700; }

/* El +56 9 fijo delante del WhatsApp. */
.telefono-caja { display: flex; align-items: stretch; }
.telefono-prefijo {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-right: none;
  border-radius: 12px 0 0 12px; font-weight: 800; font-size: 16px; color: #fff;
}
.telefono-caja .checkout-input { border-radius: 0 12px 12px 0 !important; letter-spacing: 2px; font-size: 18px !important; font-weight: 700; }
.telefono-campo.ok .telefono-prefijo { border-color: rgba(37, 211, 102, .5); }
.telefono-campo.ok .checkout-input { border-color: rgba(37, 211, 102, .5) !important; }


/* Comentario plegado: un enlace, no una caja vacía. */
.comentario-abrir {
  background: none; border: 1px dashed rgba(255, 255, 255, .22); color: var(--text-off, #B8B8B8);
  width: 100%; min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 14px;
}
.comentario-abrir:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.programar-comentario .checkout-label[hidden], .programar-comentario textarea[hidden], .comentario-abrir[hidden] { display: none !important; }

/* Rechazo del POS: claro, con la salida a mano. */
.pos-rechazo {
  display: grid; gap: 6px; margin: 0 0 12px; padding: 14px;
  background: rgba(230, 57, 70, .08); border: 1px solid rgba(230, 57, 70, .45); border-left: 4px solid #E63946; border-radius: 12px;
}
.pos-rechazo[hidden] { display: none !important; }
.pos-rechazo strong { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 17px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #fff; }
.pos-rechazo span { font-size: 14px; line-height: 1.4; color: var(--text-off, #B8B8B8); }
.pos-rechazo-acciones { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 6px; }
.pos-rechazo-wa { min-height: 46px; border: none; border-radius: 12px; background: var(--whatsapp, #25D366); color: #052e16; font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.pos-rechazo-cerrar { min-height: 46px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: transparent; color: #fff; font-weight: 700; cursor: pointer; }

/* Datos recordados. */
.recordado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .35); font-size: 13.5px; color: var(--text-off, #B8B8B8);
}
.recordado b { color: #fff; }
.recordado button { background: none; border: none; color: var(--brand-yellow, #F5C518); font-weight: 800; cursor: pointer; font-size: 13px; }
.recordado[hidden] { display: none !important; }


/* ============================================================
   EL ESTADO, JUNTO A "VER UBICACIÓN" (portada)
   Misma familia que el sello de ubicación: condensada, mayúsculas,
   borde fino. Un punto de color dice todo; el texto lo confirma.
   ============================================================ */
.manifiesto__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.manifiesto__fila > .manifiesto__sello { margin: 0 !important; }

.manifiesto__estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: clamp(12px, 3.3vw, 15px);
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-off, #B8B8B8);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease;
}
.manifiesto__estado.on    { color: #fff; border-color: rgba(37, 211, 102, .45); }
.manifiesto__estado.pausa { color: #fff; border-color: rgba(245, 197, 24, .5); }
a.manifiesto__estado:hover,
a.manifiesto__estado:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .5); }

.estado-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6a6a6a;
  flex: 0 0 auto;
}
.manifiesto__estado.on .estado-punto {
  background: var(--whatsapp, #25D366);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
  animation: estado-late 1.8s ease-in-out infinite;
}
.manifiesto__estado.pausa .estado-punto { background: var(--brand-yellow, #F5C518); }
@keyframes estado-late { 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, .05); } }
@media (prefers-reduced-motion: reduce) { .manifiesto__estado.on .estado-punto { animation: none; } }

/* En el celular la fila hereda el respiro que tenía el sello. */
@media (max-width: 767px) {
  .manifiesto__fila { margin-top: clamp(6px, 1.2dvh, 12px); }
  .manifiesto__estado { min-height: 38px; padding: 8px 14px; font-size: 12px; letter-spacing: 2px; }
}
/* En pantalla ancha, alineado a la izquierda como el resto del texto. */
@media (min-width: 900px) {
  .manifiesto__fila { justify-content: flex-start; }
}


/* ============================================================
   AVISO AL ENVIAR CON EL CANAL CERRADO (sin turno / pausa / horario)
   Chico, centrado, con el horario. No es un error: es una puerta.
   ============================================================ */
.canal-cerrado {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.canal-cerrado[hidden] { display: none !important; }
.canal-cerrado-caja {
  width: min(100%, 380px);
  background: #141414;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: canal-cerrado-entra .22s ease-out;
}
@keyframes canal-cerrado-entra { from { opacity: 0; transform: translateY(8px); } }
.canal-cerrado-caja strong {
  display: block;
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 20px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; line-height: 1.1; margin-bottom: 8px;
}
.canal-cerrado-caja p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--text-off, #B8B8B8); }
.canal-cerrado-prox { color: #fff !important; font-weight: 600; }
.canal-cerrado-horario {
  margin: 10px 0 0 !important; padding: 10px 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px;
  font-size: 13px !important;
}
.canal-cerrado-horario span {
  display: block; font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand-yellow, #F5C518); margin-bottom: 3px;
}
.canal-cerrado-acciones { display: grid; gap: 8px; margin-top: 16px; }
.canal-cerrado-wa, .canal-cerrado-cerrar, .canal-cerrado-sec {
  min-height: 46px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 15px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
}
.canal-cerrado-wa { background: var(--whatsapp, #25D366); color: #062b14; border: 0; }
.canal-cerrado-cerrar { background: transparent; color: var(--text-off, #B8B8B8); border: 1px solid rgba(255, 255, 255, .16); }

.canal-cerrado-sec { background: transparent; color: #fff; border: 1px solid rgba(245, 197, 24, .55); }
.canal-cerrado-sec:hover { border-color: var(--brand-yellow, #F5C518); }


/* ============================================================
   MODO "AGREGAR A MI PEDIDO" (agregar-carta.js)
   ============================================================ */
.agregar-banda {
  position: sticky; top: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--brand-yellow, #F5C518); color: #080808;
}
.agregar-banda-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agregar-banda-txt strong { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 16px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.agregar-banda-txt span { font-size: 12.5px; line-height: 1.3; opacity: .85; }
.agregar-banda button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 2px solid #080808; background: transparent; color: #080808; font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 13px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
/* En este modo el carrito no pide datos: vienen del pedido original. */
body.modo-agregar .checkout-panel { display: none !important; }
body.modo-agregar .canal-aviso, body.modo-agregar #pos-rechazo { display: none !important; }

/* Modo agregar: sin portada, sin cierre, foco en elegir. */
body.modo-agregar #hero, body.modo-agregar #cta-final, body.modo-agregar #preguntas, body.modo-agregar .checker-divider { display: none !important; }
body.modo-agregar #menu { padding-top: 8px; }
.agregar-cart-nota { margin: 12px 16px 4px; padding: 12px 14px; border-radius: 14px; background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.35); display: grid; gap: 3px; }
.agregar-cart-nota strong { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 16px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-yellow, #F5C518); }
.agregar-cart-nota span { font-size: 13.5px; color: var(--text-off, #B8B8B8); line-height: 1.4; }
.btn-checkout.btn-agregar { background: var(--brand-yellow, #F5C518) !important; color: #080808 !important; box-shadow: 0 6px 30px rgba(245,197,24,.35) !important; }
.btn-checkout.btn-agregar:disabled { opacity: .45 !important; box-shadow: none !important; }


/* ============================================================
   "PEDIDO C195 · VER ESTADO": la línea fija de abajo (pedido-activo.js)
   ============================================================ */
.pedido-activo {
  position: fixed; left: 12px; right: 92px; bottom: 16px; z-index: 95;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 14px;
  background: #141414; border: 1px solid rgba(245,197,24,.45); border-radius: 999px;
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: pedido-activo-entra .3s ease both;
}
@keyframes pedido-activo-entra { from { opacity: 0; transform: translateY(10px); } }
.pedido-activo-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-yellow, #F5C518); box-shadow: 0 0 0 4px rgba(245,197,24,.18); animation: franja-late 1.6s ease-in-out infinite; flex: 0 0 auto; }
.pedido-activo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.pedido-activo-txt strong { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 15px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.pedido-activo-txt small { font-size: 12px; color: var(--text-off, #B8B8B8); }
.pedido-activo-ver { margin-left: auto; font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-yellow, #F5C518); white-space: nowrap; }
/* Los botones flotantes suben para no taparla. */
body.con-pedido-activo .fab-wapp { bottom: 84px; }
body.con-pedido-activo .fab-cart { bottom: 150px; }
@media (min-width: 900px) { .pedido-activo { left: auto; right: 96px; width: 340px; } }