/* =========================================================
   PTY Cargo Express — Encuesta de satisfacción en tracking
   Prefijo pce- para no colisionar con el tema del sitio.
   ========================================================= */

.pce-encuesta{
  --pce-navy:#0C1A46;
  --pce-navy-2:#17376B;
  --pce-celeste:#3FA9E1;
  --pce-tinta:#1B2436;
  --pce-suave:#5B6880;
  --pce-linea:#DFE4EC;
  --pce-fondo:#FFFFFF;
  --pce-lienzo:#F1F3F6;

  --pce-ok:#158F52;
  --pce-bien:#B58900;
  --pce-regular:#D9762B;
  --pce-mala:#C93A3A;

  --pce-sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  box-sizing:border-box;
  max-width:760px;
  margin:1.75rem auto 0;
  padding:1.6rem 1.5rem 1.4rem;
  background:var(--pce-fondo);
  border:1px solid var(--pce-linea);
  border-radius:10px;
  font-family:var(--pce-sans);
  color:var(--pce-tinta);
  text-align:center;
}
.pce-encuesta *,
.pce-modal *{box-sizing:border-box}

.pce-encuesta__head h3{
  margin:0 0 .35rem;
  font-size:1.12rem;
  font-weight:700;
  color:var(--pce-navy);
  letter-spacing:-.01em;
}
.pce-encuesta__head p{
  margin:0 0 1.25rem;
  font-size:.92rem;
  color:var(--pce-suave);
  line-height:1.5;
}

/* ---------- caritas ---------- */
.pce-caritas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
}
.pce-carita{
  flex:1 1 116px;
  max-width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  padding:.9rem .5rem .75rem;
  background:transparent;
  border:1px solid var(--pce-linea);
  border-radius:9px;
  cursor:pointer;
  font-family:inherit;
  color:var(--pce-suave);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.pce-carita svg{width:44px;height:44px;display:block}
.pce-carita span{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
}
.pce-carita:hover,
.pce-carita:focus-visible{
  transform:translateY(-3px);
  background:var(--pce-lienzo);
  border-color:currentColor;
}
.pce-carita:focus-visible{outline:2px solid var(--pce-navy-2);outline-offset:2px}
.pce-carita[data-valor="4"]{color:var(--pce-ok)}
.pce-carita[data-valor="3"]{color:var(--pce-bien)}
.pce-carita[data-valor="2"]{color:var(--pce-regular)}
.pce-carita[data-valor="1"]{color:var(--pce-mala)}
.pce-carita[aria-pressed="true"]{
  border-color:currentColor;
  background:var(--pce-lienzo);
  box-shadow:inset 0 0 0 1px currentColor;
}
.pce-carita[disabled]{cursor:default;opacity:.45}
.pce-carita[disabled][aria-pressed="true"]{opacity:1}

/* ---------- panel de agradecimiento / Google ---------- */
.pce-panel{
  margin-top:1.25rem;
  padding:1.15rem 1.1rem;
  border:1px solid var(--pce-linea);
  border-radius:9px;
  background:var(--pce-lienzo);
}
.pce-panel h4{
  margin:0 0 .3rem;
  font-size:1rem;
  color:var(--pce-navy);
}
.pce-panel p{
  margin:0 0 .95rem;
  font-size:.89rem;
  color:var(--pce-suave);
  line-height:1.5;
}
.pce-panel--ok{border-left:4px solid var(--pce-ok)}

.pce-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.68rem 1.35rem;
  border:none;
  border-radius:6px;
  background:var(--pce-navy-2);
  color:#fff;
  font-family:inherit;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease;
}
.pce-btn:hover{background:var(--pce-navy)}
.pce-btn:focus-visible{outline:2px solid var(--pce-celeste);outline-offset:2px}
.pce-btn--ghost{
  background:transparent;
  color:var(--pce-suave);
  border:1px solid var(--pce-linea);
}
.pce-btn--ghost:hover{background:#fff;color:var(--pce-navy)}
.pce-btn[disabled]{opacity:.6;cursor:progress}
.pce-btn svg{width:18px;height:18px}

.pce-acciones{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

.pce-nota{
  margin:1.1rem 0 0;
  font-size:.74rem;
  color:var(--pce-suave);
  line-height:1.5;
}
.pce-nota a{color:var(--pce-navy-2)}

/* ---------- modal ---------- */
.pce-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(12,26,70,.55);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.pce-modal[hidden]{display:none}
.pce-modal__caja{
  width:100%;
  max-width:480px;
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border-radius:10px;
  box-shadow:0 18px 48px rgba(12,26,70,.28);
  animation:pce-sube .18s ease-out;
}
@keyframes pce-sube{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pce-modal__caja{animation:none}
  .pce-carita{transition:none}
}
.pce-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1.1rem .65rem;
  border-bottom:1px solid #DFE4EC;
}
.pce-modal__head h4{margin:0 0 .2rem;font-size:1rem;color:#0C1A46}
.pce-modal__head p{margin:0;font-size:.8rem;color:#5B6880;line-height:1.4}
.pce-cerrar{
  flex:0 0 auto;
  width:30px;height:30px;
  border:none;background:transparent;
  font-size:1.4rem;line-height:1;color:#5B6880;cursor:pointer;border-radius:5px;
}
.pce-cerrar:hover{background:#F1F3F6;color:#0C1A46}
.pce-modal__cuerpo{padding:.85rem 1.1rem 1rem}

.pce-campo{margin-bottom:.6rem;text-align:left}
.pce-campo label{
  display:block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#5B6880;
  margin-bottom:.32rem;
}
.pce-campo input,
.pce-campo select,
.pce-campo textarea{
  width:100%;
  padding:.5rem .7rem;
  border:1px solid #C9D1DE;
  border-radius:6px;
  font-family:inherit;
  font-size:.92rem;
  color:#1B2436;
  background:#fff;
}
.pce-campo textarea{resize:vertical;min-height:60px}
.pce-campo input:focus,
.pce-campo select:focus,
.pce-campo textarea:focus{outline:2px solid #3FA9E1;outline-offset:0;border-color:#3FA9E1}
.pce-campo small{display:block;margin-top:.28rem;font-size:.74rem;color:#8B95A7}
.pce-campo--error input,
.pce-campo--error select,
.pce-campo--error textarea{border-color:#C93A3A}
.pce-error{
  display:none;
  margin-top:.28rem;
  font-size:.76rem;
  color:#C93A3A;
}
.pce-campo--error .pce-error{display:block}

/* honeypot: invisible para personas, visible para bots */
.pce-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pce-aviso{
  margin:0 0 1rem;
  padding:.7rem .85rem;
  border-radius:6px;
  font-size:.83rem;
  line-height:1.45;
  display:none;
}
.pce-aviso--error{display:block;background:#FBECEC;color:#8E2B2B;border-left:3px solid #C93A3A}
.pce-aviso--ok{display:block;background:#E8F4EE;color:#12643C;border-left:3px solid #158F52}

.pce-legal{
  margin:.9rem 0 0;
  font-size:.72rem;
  color:#8B95A7;
  line-height:1.5;
}

@media (max-width:520px){
  .pce-encuesta{padding:1.3rem 1rem 1.2rem;border-radius:0;border-left:none;border-right:none}
  .pce-carita{flex:1 1 44%;max-width:none;padding:.75rem .4rem .6rem}
  .pce-carita svg{width:38px;height:38px}
}


/* =========================================================
   Bloque de resultado del rastreo (estados)
   ========================================================= */
.pce-resultado{
  max-width:760px;margin:1.5rem auto 0;padding:1.4rem 1.5rem;
  background:#fff;border:1px solid #DFE4EC;border-radius:10px;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1B2436;
}
.pce-resultado__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:.9rem;
}
.pce-resultado__guia{font-size:.78rem;color:#5B6880;letter-spacing:.03em}
.pce-resultado__guia b{display:block;font-size:1.02rem;color:#0C1A46;font-family:ui-monospace,Menlo,monospace}
.pce-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .8rem;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
}
.pce-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pce-chip--en_proceso  {background:#EAF1FA;color:#1D5FA8}
.pce-chip--en_bodega   {background:#EDF3E9;color:#4A7A28}
.pce-chip--en_transito {background:#FDF2E3;color:#9A6212}
.pce-chip--entregado   {background:#E8F4EE;color:#12643C}
.pce-chip--no_encontrado{background:#FBECEC;color:#992F2F}
.pce-resultado__desc{margin:0 0 1rem;font-size:.92rem;color:#5B6880;line-height:1.55}
.pce-origen{
  display:inline-block;margin-left:.5rem;padding:.12rem .5rem;border-radius:4px;
  background:#F1F3F6;color:#5B6880;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
}
.pce-linea-tiempo{list-style:none;margin:0;padding:0;border-top:1px solid #EDF0F5}
.pce-linea-tiempo li{
  display:grid;grid-template-columns:132px 1fr;gap:.9rem;
  padding:.7rem 0;border-bottom:1px solid #EDF0F5;font-size:.87rem;
}
.pce-linea-tiempo time{color:#8B95A7;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.pce-linea-tiempo b{display:block;color:#0C1A46;font-weight:600}
.pce-linea-tiempo span{color:#5B6880}
.pce-sinregistro{
  margin-top:.4rem;padding:.9rem 1rem;border-left:3px solid #C93A3A;
  background:#FBECEC;border-radius:6px;font-size:.87rem;line-height:1.55;color:#7E2A2A;
}
@media (max-width:520px){
  .pce-resultado{border-radius:0;border-left:none;border-right:none;padding:1.1rem 1rem}
  .pce-linea-tiempo li{grid-template-columns:1fr;gap:.2rem}
}

/* Compactación para escritorio: el widget se inyecta bajo el resultado del
   tracking dentro de un iframe de altura fija (800px) embebido en
   /tracking/ — en pantallas grandes se reduce su espacio vertical para
   que todo el resultado quepa sin scroll interno. */
@media (min-width:768px){
  .pce-encuesta{margin:1rem auto 0;padding:1rem 1.25rem .9rem}
  .pce-encuesta__head h3{font-size:1rem;margin-bottom:.2rem}
  .pce-encuesta__head p{font-size:.82rem;margin-bottom:.75rem}
  .pce-carita{padding:.6rem .5rem .5rem}
  .pce-carita svg{width:34px;height:34px}
  .pce-panel{margin-top:.85rem;padding:.85rem .9rem}
  .pce-nota{margin-top:.7rem;font-size:.7rem}
}

/* Refuerzo del botón de envío del modal: se fija explícitamente visible,
   a ancho completo y separado del resto del formulario, por si algo lo
   está empujando fuera de vista o colapsando su tamaño. */
#pceForm button[type="submit"].pce-btn{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  margin-top:.75rem !important;
  min-height:44px !important;
}

/* ---------- "Avísame cuando llegue a bodega" (modal) ---------- */
.pce-alerta-bodega__cerrado{
  padding:.9rem 1rem;
  border-radius:6px;
  background:#E8F4EE;
  color:#12643C;
  font-size:.9rem;
  border-left:3px solid #158F52;
}
/* .pce-btn usa var(--pce-navy-2), definida dentro de .pce-encuesta; el
   modal de alerta de bodega (#pceAlertaModal) vive fuera de ese ámbito
   (se inyecta directo en <body>), así que el botón quedaba sin fondo.
   Se fija el color explícito solo aquí, igual que ya se hizo antes con
   la versión inline de este mismo bloque. */
#pceAlertaModal .pce-btn{
  background:#17376B;
  color:#fff;
  width:100%;
  margin-top:.5rem;
}
#pceAlertaModal .pce-btn:hover{background:#0C1A46}

.pce-ayuda-canal{
  margin:0 0 .6rem;
  font-size:.8rem;
  color:#5A6478;
}
.pce-whatsapp{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.pce-whatsapp__mas{
  font-weight:700;
  color:#5A6478;
}
.pce-campo .pce-whatsapp__codigo{
  flex:0 0 4.2rem;
  width:4.2rem;
  text-align:center;
}
.pce-campo .pce-whatsapp__numero{
  flex:1 1 auto;
  min-width:0;
}

.pce-tabs{
  display:flex;
  gap:.4rem;
  margin-bottom:.75rem;
}
.pce-tab{
  flex:1 1 0%;
  padding:.5rem .6rem;
  font-size:.82rem;
  font-weight:600;
  color:#5A6478;
  background:#EEF1F6;
  border:1px solid #DDE3EC;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.pce-tab--activo{
  background:#17376B;
  color:#fff;
  border-color:#17376B;
}

/* Mismo fix de scope de variables CSS que #pceAlertaModal: este modal
   también se inyecta directo en <body>, fuera de .pce-encuesta. */
#pceReclamoModal .pce-btn{
  background:#17376B;
  color:#fff;
  width:100%;
  margin-top:.5rem;
}
#pceReclamoModal .pce-btn:hover{background:#0C1A46}

/* Modal de reclamo / certificación: mismo fix de scope que los otros modales. */
#pceSolicitudModal .pce-btn{
  background:#17376B;
  color:#fff;
  width:100%;
  margin-top:.5rem;
}
#pceSolicitudModal .pce-btn:hover{background:#0C1A46}
.pce-obligatorio{color:#B3261E;font-weight:600;text-transform:none;letter-spacing:0}
.pce-opcional{color:#8B95A7;font-weight:500;text-transform:none;letter-spacing:0}