.trimetra-delivery-badge{
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;              /* más bajo */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: center;            /* centra verticalmente izquierda vs derecha */
  justify-content: space-between;
  gap: 10px;                      /* menos aire */
  position: relative;
  overflow: hidden;
  /* Optimizaciones de rendering */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tbd-left{
  display:flex;
  align-items:center;             /* centra el “Llega …” */
  min-width: 0;
  flex-direction: column;
}

.tbd-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 1px;
}

.tbd-title{
  font-weight: 800;
  font-size: 13px;                /* un pelín más chico */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbd-subtitle{
  margin-top: 0px;
  font-size: 9px;
  font-weight: 500;
  opacity: .9;
  line-height: 1.05;
}

.tbd-countdown{
  font-weight: 900;
  font-size: 16px;                /* un poco más compacto */
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.05;
}

.tbd-caption{
  font-size: 10px;                /* “Tiempo restante” más chico */
  opacity: .95;
  line-height: 1.05;
}

/* Estados */
.tbd-state-green{ background:#16a34a; color:#fff; }
.tbd-state-yellow{ background:#facc15; color:#111827; }
.tbd-state-red{
  background:#ef4444;
  color:#fff;
}

/* Pulso sutil en rojo - usando box-shadow en lugar de scale para evitar borrosidad */
@keyframes tbdPulse {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 0 0 4px rgba(239, 68, 68, 0);
  }
}
.tbd-state-red{ animation: tbdPulse 1.5s ease-in-out infinite; }


/*  */
/* Firma visual: textura sutil y brillo lateral */
.trimetra-delivery-badge::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.18) 0 8px,
    rgba(255,255,255,.06) 8px 16px
  );
  opacity: .22;
  pointer-events:none;
}

.trimetra-delivery-badge::after{
  content:"";
  position:absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
  opacity: .35;
  pointer-events:none;
}

/* Asegura que el texto quede arriba del patrón */
.trimetra-delivery-badge > *{ position:relative; z-index:1; }