/* ========= PALETA CLUBOX (scopeada al módulo) ========= */
#trk-app {
  --cb-green:        #009944;   /* brand */
  --cb-green-hover:  #009b52;   /* brand hover */
  --cb-accent:       #ff1f8b;   /* acento */
  --cb-blue:         #0d6efd;   /* apoyo Bootstrap */
  --cb-ink:          #212529;   /* texto base */
  --cb-muted:        #6c757d;   /* texto secundario */
  --cb-bg:           #f7f9fb;   /* fondo suave */
}

/* ReCaptcha: fija la posición */
.grecaptcha-badge { bottom: 120px !important; }

/* ========= CONTENEDOR LOCAL ========= */
#trk-app {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

/* ========= LOOK & FEEL ========= */
#trk-app .trk-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  background: #fff;
}
#trk-app .trk-hero {
  margin: 5%;
  border-radius: 18px;
  background:
    radial-gradient(1200px 300px at 10% -10%, rgba(0,153,68,.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  padding: 2rem 1.25rem 1.5rem;
}
#trk-app .trk-hero h3 { margin: 0 0 .5rem 0; }
#trk-app .trk-hero .sub { color: var(--cb-muted); }

/* Botón principal (solo dentro del módulo) */
#trk-app .btn-primary{
  --bs-btn-bg: var(--cb-green);
  --bs-btn-border-color: var(--cb-green);
  --bs-btn-hover-bg: var(--cb-green-hover);
  --bs-btn-hover-border-color: var(--cb-green-hover);
  --bs-btn-focus-shadow-rgb: 0,153,68;
}

/* Controles */
#trk-app .form-control{
  height: 3.25rem;
  font-size: 1.05rem;
  border-radius: 14px;
  width: 100%;
}
#trk-app .btn-lg{
  height: 3.25rem;
  border-radius: 14px;
  font-weight: 600;
  padding-inline: 1rem;
}

/* Badges y meta */
#trk-app .trk-badge{ font-weight:700; letter-spacing:.2px; }
#trk-app .trk-meta small{ color: var(--cb-muted); }

/* Barra de progreso */
#trk-app .trk-progress{
  height: 12px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}
#trk-app .trk-progress > div{
  height: 100%;
  transition: width .6s ease;
  background: linear-gradient(90deg, var(--cb-green), var(--cb-green-hover));
}

/* Timeline */
#trk-app .trk-timeline{ position:relative; margin-left:.25rem; padding-left:1.25rem; }
#trk-app .trk-timeline::before{ content:""; position:absolute; left:6px; top:.5rem; bottom:.5rem; width:2px; background:#e5e7eb; }
#trk-app .trk-item{ position:relative; padding:.65rem 0; }
#trk-app .trk-dot{ position:absolute; left:-2px; top:.9rem; width:14px; height:14px; border-radius:50%; background:#adb5bd; outline:4px solid #fff; box-shadow:0 0 0 2px #e5e7eb; }
#trk-app .trk-item.done .trk-dot{ background: var(--cb-green); }
#trk-app .trk-item.current .trk-dot{ background: var(--cb-accent); box-shadow:0 0 0 4px rgba(255,31,139,.20); }
#trk-app .trk-item .title{ font-weight:600; color: var(--cb-ink); line-height:1.25; margin-bottom:.125rem; }
#trk-app .trk-item .sub{ color: var(--cb-muted); line-height:1.2; white-space: normal; }

/* AWB preview */
#trk-app .trk-awb{
  border: 1px dashed #ced4da;
  border-radius: 14px;
  padding: .85rem;
  background: #fafafa;
  display: block; /* evita saltos en móvil */
}
#trk-app .trk-awb img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Estados (map a utilidades Bootstrap) */
#trk-app .text-bg-secondary{ background-color:#6c757d !important; color:#fff !important; }
#trk-app .text-bg-success  { background-color:var(--cb-green) !important; color:#fff !important; }
#trk-app .text-bg-primary  { background-color:var(--cb-blue) !important; color:#fff !important; }
#trk-app .text-bg-info     { background-color:#0dcaf0 !important; color:#052c65 !important; }

/* Loader & error */
#trk-app .trk-loader{ display:none; color: var(--cb-muted); }
#trk-app .trk-loader.show{ display:flex; align-items:center; gap:.5rem; }
#trk-app .trk-error{ display:none; }
#trk-app .trk-error.show{ display:block; }

/* ===== Tipografía fluida / envoltura segura ===== */
#trk-app h3{ font-size: clamp(1.15rem, 1.5vw + 0.8rem, 1.6rem); }
#trk-app h4{ font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.35rem); }
#trk-app .form-label{ font-size: .95rem; }

/* Evitar desbordes en textos largos (ES/EN) */
#trk-app, #trk-app .trk-card, #trk-app .trk-meta, #trk-app .trk-timeline,
#trk-app .trk-awb, #trk-app .trk-hero, #trk-app .trk-badge, #trk-app .badge, #trk-app .btn{
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

/* Cabecera del resultado: envoltura */
#trk-app .card-body > .d-flex{ row-gap:.5rem; }
@media (max-width:576px){
  #trk-app .card-body > .d-flex{ flex-direction:column; align-items:flex-start !important; }
  #trk-app .text-end{ text-align:left !important; }
}

/* Badge: permite dos líneas */
#trk-app .trk-badge{
  line-height:1.2; white-space:normal; padding:.45rem .6rem; display:inline-block; max-width:100%;
}

/* Línea de meta: wrap elegante */
#trk-app .trk-meta{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; }
#trk-app .trk-meta small{ max-width:100%; white-space:normal; }

/* Etiquetas bajo progreso */
#trk-app .trk-progress + .d-flex.small{ flex-wrap:wrap; gap:.25rem .5rem; }
#trk-app .trk-progress + .d-flex.small > span{ flex:1 1 auto; text-align:center; min-width:90px; }

/* Espaciados responsivos */
@media (min-width:992px){
  #trk-app .trk-hero{ padding:2.25rem 2rem 1.75rem; }
}
@media (max-width:480px){
  #trk-app .trk-loader, #trk-app .trk-error{ font-size:.95rem; }
}
@media (max-width:420px){
  #trk-app .trk-hero{ padding:1.75rem 1rem 1.25rem; }
}

/* Idioma EN: microajustes */
html[lang="en"] #trk-app .trk-progress + .d-flex.small > span{ min-width:100px; }
html[lang="en"] #trk-app h3{ letter-spacing:.1px; }

/* ===================== AWB Lightbox (centrado + responsive) ===================== */
#awb-modal{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 1055;
  max-width: none;
}
#awb-modal[open]{ display:grid; place-items:center; }
#awb-modal::backdrop{ background: rgba(0,0,0,.72); }

.trk-awb-modal{ position:relative; background:transparent; border:0; padding:0; }

/* Imagen: parte prudente del viewport */
#awb-modal img{
  display:block;
  width:auto;
  max-width: min(96vw, 1200px);
  max-height: 92dvh;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* Botón cerrar (icon-only) */
.trk-awb-close{
  position:absolute;
  top:-12px; right:-12px;
  width:44px; height:44px;
  padding:0;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  background:#fff; color:#111;
  border:1px solid rgba(0,0,0,.1);
}
.trk-awb-close:hover{ filter:brightness(.98); }
.trk-awb-close i{ font-size:1.1rem; pointer-events:none; }

/* Miniatura: cursor de zoom */
#trk-awb.zoomable{ cursor: zoom-in; }

/* Botones de acción (icon-only) */
#trk-app .btn-icon{
  --size: 38px;
  width: var(--size); height: var(--size);
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
}
#trk-app .btn-icon i{ font-size:1rem; }
#trk-app .btn-icon.btn-outline-secondary{ border-color: rgba(0,0,0,.15); }
#trk-app .btn-icon:hover{ box-shadow:0 6px 16px rgba(0,0,0,.12); }

/* Modal: ajustes móvil */
@media (max-width:576px){
  #awb-modal img{ max-width:94vw; max-height:88dvh; border-radius:12px; }
  .trk-awb-close{ top:-10px; right:-10px; width:40px; height:40px; }
}

/* Accesibilidad: reducir animaciones */
@media (prefers-reduced-motion: reduce){
  #trk-app .trk-progress > div{ transition:none; }
}


/* Fila de advertencia + iconos */
#trk-app .trk-awb-actions .small{
  line-height: 1.2;
}

/* En pantallas estrechas, que el texto quede arriba y los íconos abajo */
@media (max-width: 576px){
  #trk-app .trk-awb-actions{
    gap: .35rem .5rem;
  }
}

/* ===== Colores base para íconos del tracking ===== */
#trk-app .btn-icon {                /* estado normal */
  color: var(--cb-ink);             /* color del ícono */
  border-color: rgba(0,0,0,.15);
  background: #fff;
}
#trk-app .btn-icon i { color: inherit; } /* asegura herencia del <i> */

#trk-app .btn-icon:hover,            /* hover / focus */
#trk-app .btn-icon:focus {
  color: var(--cb-green);            /* cambia el color del ícono */
  border-color: var(--cb-green);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

#trk-app .btn-icon:active {          /* active (click) */
  filter: brightness(.98);
}

#trk-app .btn-icon.disabled,
#trk-app .btn-icon:disabled {
  opacity: .55;
  pointer-events: none;
}

/* ===== Variantes rápidas (opcional) ===== */
/* Verde marca */
#trk-app .btn-icon--green { color: var(--cb-green); border-color: var(--cb-green); }
#trk-app .btn-icon--green:hover { background: var(--cb-green); color:#fff; }

/* Acento magenta */
#trk-app .btn-icon--accent { color: var(--cb-accent); border-color: var(--cb-accent); }
#trk-app .btn-icon--accent:hover { background: var(--cb-accent); color:#fff; }

/* Gris tenue */
#trk-app .btn-icon--muted { color: var(--cb-muted); }
#trk-app .btn-icon--muted:hover { color: var(--cb-green); border-color: var(--cb-green); }

/* ===== Botón de cerrar del modal (icon-only) ===== */
#awb-modal .trk-awb-close{
  background:#000000;
  color: var(--cb-ink);
  border: 1px solid rgba(0,0,0,.1);
}
#awb-modal .trk-awb-close:hover,
#awb-modal .trk-awb-close:focus{
  background: var(--cb-accent);
  color:#fff;
  border-color: var(--cb-accent);
}