/* =========================================================
   Mega Outlet - Sistema de Garantías y Traslados
   Estilos Hoja de Libreta "TRASLADOS" y Recibo Térmico
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@600;700;800;900&family=Permanent+Marker&family=Special+Elite&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f1f5f9;
  color: #0f172a;
}

/* =========================================================
   DISEÑO HOJA DE LIBRETA FÍSICA "TRASLADOS"
   ========================================================= */

/* Barra superior azul cielo idéntica al encabezado de la libreta */
.libreta-banner-title {
  background-color: #bae6fd; /* Azul cielo exacto de la libreta */
  border: 1.5px solid #1e293b;
  border-bottom: none;
  color: #0f172a;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  text-align: center;
  padding: 8px 16px;
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* Cuadrícula estilo libreta */
.tabla-libreta {
  border-collapse: collapse;
  width: 100%;
  border: 1.5px solid #1e293b;
  background-color: #ffffff;
}

.tabla-libreta th {
  border: 1px solid #475569;
  background-color: #f8fafc;
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 6px;
  text-align: center;
}

.tabla-libreta td {
  border: 1px solid #94a3b8;
  padding: 6px 6px;
  font-size: 0.8rem;
  vertical-align: middle;
}

.tabla-libreta tbody tr:hover {
  background-color: #f0f9ff;
}

.tabla-libreta tr.row-pendiente {
  background-color: #fffbeb;
}
.tabla-libreta tr.row-pendiente:hover {
  background-color: #fef3c7;
}

/* Celdas especiales */
.cell-c {
  width: 36px;
  text-align: center;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #0284c7;
}

.cell-mdm {
  width: 50px;
  text-align: center;
  font-weight: 700;
  font-family: monospace;
}

.cell-fecha {
  width: 78px;
  text-align: center;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.cell-operador {
  width: 75px;
  text-align: center;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.cell-tienda {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.cell-ticket {
  width: 80px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.ticket-pill {
  font-family: monospace;
  font-weight: 900;
  font-size: 0.9rem;
  color: #0369a1;
  background-color: #e0f2fe;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid #7dd3fc;
  display: inline-block;
  transition: all 0.2s ease;
}
.ticket-pill:hover {
  background-color: #0284c7;
  color: #ffffff;
  transform: scale(1.05);
}

.cell-tipo {
  width: 50px;
  text-align: center;
  font-weight: 800;
}

/* =========================================================
   FIRMAS EN PLUMA AZUL DENTRO DE SU CUADRITO
   ========================================================= */
.firma-slot {
  height: 38px;
  min-width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgba(248, 250, 252, 0.6);
  border-radius: 4px;
}

.firma-slot img {
  max-height: 36px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(29, 78, 216, 0.3));
}

.btn-firma-slot {
  border: 1.5px dashed #93c5fd;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-firma-slot:hover {
  background-color: #dbeafe;
  border-color: #3b82f6;
  transform: scale(1.03);
}

/* =========================================================
   FOTO / OK: UNA SOLA IMAGEN CON EL "OK" DIBUJADO ENCIMA
   ========================================================= */
.foto-ok-container {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  border: 1.5px solid #475569;
  background-color: #0f172a;
  cursor: pointer;
  margin: 0 auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.foto-ok-container:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  border-color: #0284c7;
}

.foto-ok-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plumón / Sello "OK" dibujado directamente sobre la foto */
.ok-marker-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(0.5px);
  pointer-events: none;
}

.ok-marker-text {
  font-family: 'Permanent Marker', 'Impact', cursive;
  font-size: 1.6rem;
  color: #22c55e; /* Verde brillante estilo plumón */
  text-shadow: 
    0 0 3px #14532d,
    0 0 8px #4ade80,
    -1px -1px 0 #0f172a,
    1px -1px 0 #0f172a,
    -1px 1px 0 #0f172a,
    1px 1px 0 #0f172a;
  transform: rotate(-14deg);
  letter-spacing: 2px;
  user-select: none;
  animation: stampPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stampPop {
  0% { transform: scale(2.2) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(-14deg); opacity: 1; }
}

.btn-stamp-ok-cell {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: rgba(2, 132, 199, 0.9);
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: 800;
  border-radius: 4px;
  text-align: center;
  padding: 1px 0;
  text-transform: uppercase;
}

/* =========================================================
   TICKET TÉRMICO / NOTA DE REMISIÓN MEGA OUTLET (MODAL)
   ========================================================= */
.thermal-receipt {
  background-color: #fdfbf7;
  color: #1e293b;
  font-family: 'Courier Prime', 'Courier New', monospace;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 24px 20px;
  border-radius: 4px;
  border-top: 6px solid #0284c7;
}

/* Dientes de sierra del recibo térmico */
.thermal-receipt::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: radial-gradient(circle, transparent, transparent 50%, #fdfbf7 50%, #fdfbf7 100%);
  background-size: 16px 16px;
}

.thermal-divider {
  border-top: 1px dashed #94a3b8;
  margin: 10px 0;
}

/* =========================================================
   MODAL DE LAS 3 FASES FOTOGRÁFICAS
   ========================================================= */
.phase-card {
  border-top: 4px solid #cbd5e1;
  transition: all 0.2s ease-in-out;
}
.phase-card.fase-1 { border-top-color: #6366f1; } /* Fotos en Tienda */
.phase-card.fase-2 { border-top-color: #0284c7; } /* Entrada Bodega R */
.phase-card.fase-3 { border-top-color: #f97316; } /* Entrega Proveedor */
.phase-card.fase-4 { border-top-color: #10b981; } /* Retorno Bodega R Listo */

.thumb-container {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
}

.thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-chip {
  position: absolute;
  bottom: 0;
  inset-x: 0;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  text-align: center;
  backdrop-filter: blur(2px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   CANVAS DE FIRMAS
   ========================================================= */
.signature-pad-wrapper {
  position: relative;
  border: 2px dashed #93c5fd;
  border-radius: 8px;
  background-color: #ffffff;
  touch-action: none;
}
.signature-pad-wrapper canvas {
  width: 100%;
  height: 170px;
  display: block;
}
.signature-line {
  position: absolute;
  bottom: 25px;
  left: 20px;
  right: 20px;
  height: 1px;
  background-color: #cbd5e1;
  pointer-events: none;
}
.signature-hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.65rem;
  color: #64748b;
  pointer-events: none;
}

/* Modales y utilidades */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
}
.modal-card {
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   IDENTIDAD DE MARCA OFICIAL MEGA OUTLET (ROJO, AMARILLO, AZUL)
   ========================================================= */
.brand-tricolor-stripe {
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #dc2626 0%, #dc2626 33.3%, #f59e0b 33.3%, #f59e0b 66.6%, #2563eb 66.6%, #2563eb 100%);
}

.btn-mega-red {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid #991b1b !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}
.btn-mega-red:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-mega-amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #0f172a !important;
  border: 1px solid #d97706 !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}
.btn-mega-amber:hover {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%) !important;
  transform: translateY(-1px) !important;
}

.btn-mega-blue {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1e40af !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}
.btn-mega-blue:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   ALERTAS Y SEMÁFORO DE TIEMPOS (GARANTÍAS > 1 MES / DÍAS)
   ========================================================= */
.row-alerta-mes {
  background-color: #fef9c3 !important; /* Amarillo suave para garantías > 1 mes */
  border-left: 4px solid #f59e0b !important;
}
.row-alerta-mes:hover {
  background-color: #fef08a !important;
}

.badge-alerta-mes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* =========================================================
   PESTAÑAS DE CARPETA POR PROVEEDOR
   ========================================================= */
.folder-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px 8px 0 0;
  background-color: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.folder-tab:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}
.folder-tab.active {
  background-color: #ffffff;
  color: #1e3a8a;
  border-color: #94a3b8;
  border-bottom: 2px solid #ffffff;
  margin-bottom: -1px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
}

/* Badges explicativos de siglas */
.badge-sigla {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-width: 1px;
}

/* =========================================================
   RECIBO / NOTA DE REMISIÓN FÍSICA TÉRMICA (FONDO BLANCO SÓLIDO)
   ========================================================= */
.ticket-receipt-card {
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 1rem !important;
}

.ticket-receipt {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-family: 'Courier New', Courier, monospace, ui-monospace, sans-serif !important;
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
  position: relative;
  border: 1px solid #e2e8f0;
}

.ticket-receipt h2,
.ticket-receipt p,
.ticket-receipt span,
.ticket-receipt td,
.ticket-receipt th,
.ticket-receipt div {
  color: #0f172a !important;
}

.ticket-receipt .receipt-dashed {
  border-bottom: 2px dashed #94a3b8;
  margin: 0.75rem 0;
}

.ticket-receipt .receipt-double-dashed {
  border-bottom: 3px double #64748b;
  margin: 0.75rem 0;
}

.ticket-receipt .receipt-highlight {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
}

/* =========================================================
   CUADROS PEQUEÑOS EXPLICATIVOS DE SIGLAS (T.T, T.B, C.F)
   ========================================================= */
.siglas-legend-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sigla-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.sigla-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.sigla-badge-lg {
  font-size: 13px;
  font-weight: 900;
  padding: 5px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* =========================================================
   ARCHIVERO DE TABLAS GUARDADAS POR CARPETA
   ========================================================= */
.archivero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.tabla-card {
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tabla-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.tabla-card.active-open {
  border-color: #2563eb;
  background-color: #f8faff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.tabla-card-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

/* =========================================================
   ESTILOS DE IMPRESIÓN PROFESIONAL UNIVERSAL
   (MICROSOFT EDGE, GOOGLE CHROME, SAFARI iOS, FIREFOX, ANDROID)
   ========================================================= */

#mega-universal-print-container {
  display: none;
}

@media print {
  /* Cuando está activo el modo de impresión universal de documento */
  body.printing-mega-document {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  body.printing-mega-document > *:not(#mega-universal-print-container) {
    display: none !important;
  }

  body.printing-mega-document #mega-universal-print-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Reset radical para evitar fallos de layout y parpadeos en Chromium */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    flex: none !important;
    overflow: visible !important;
  }

  /* Ocultar elementos decorativos, barras y botones en papel */
  header,
  nav,
  .brand-tricolor-stripe,
  .siglas-legend-container,
  #header-stats-row,
  .folder-tab,
  #provider-folders-container,
  .no-print,
  button,
  #toast-container,
  .modal-backdrop:not(#modal-ticket-receipt),
  #view-archivero-tablas {
    display: none !important;
  }

  /* Si el modal de ticket está abierto, imprimir solo el ticket */
  #modal-ticket-receipt:not(.hidden) {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  #modal-ticket-receipt:not(.hidden) .ticket-receipt-card {
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Forzar visibilidad del contenedor de la tabla detallada al imprimir */
  #view-tabla-detallada {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #view-tabla-detallada > div:first-child {
    background: #1e3a8a !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
  }
  #view-tabla-detallada button {
    display: none !important;
  }

  .overflow-x-auto,
  .overflow-hidden {
    overflow: visible !important;
    width: 100% !important;
  }

  .libreta-banner-title {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 14pt !important;
    font-weight: 900 !important;
    padding: 6px !important;
    text-align: center !important;
  }

  .tabla-libreta {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  .tabla-libreta tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  .tabla-libreta th,
  .tabla-libreta td {
    border: 1.5px solid #000000 !important;
    font-size: 8.5pt !important;
    padding: 4px 6px !important;
    color: #000000 !important;
  }

  .tabla-libreta thead th {
    background-color: #bfdbfe !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #1e3a8a !important;
    font-weight: 900 !important;
  }

  .firma-slot img {
    max-height: 35px !important;
    display: block !important;
  }
}

/* =========================================================
   CONTENEDOR EXCLUSIVO PARA IMPRESIÓN UNIVERSAL MULTI-NAVEGADOR
   Compatible al 100% con Microsoft Edge, Google Chrome, Safari iOS,
   Firefox y Android.
   ========================================================= */
#mega-universal-print-container {
  display: none;
}

@media print {
  /* Cuando está activo el modo printing-mega-document, ocultar absolutamente TODO excepto el contenedor limpio */
  body.printing-mega-document {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.printing-mega-document > *:not(#mega-universal-print-container) {
    display: none !important;
  }

  body.printing-mega-document #mega-universal-print-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   INSPECTOR DE DAÑOS Y GOLPES CON PINES INTERACTIVOS
   ========================================================= */
.inspector-image-container {
  position: relative;
  display: inline-block;
  user-select: none;
  max-width: 100%;
}

.inspector-image-container img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  object-contain: contain;
  border-radius: 0.75rem;
}

.damage-marker-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 25;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: pulse-pin 2s infinite;
}

.damage-marker-pin:hover {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 30;
}

.damage-pin-golpe {
  background: radial-gradient(circle at 30% 30%, #ef4444, #b91c1c);
}

.damage-pin-rayon {
  background: radial-gradient(circle at 30% 30%, #f59e0b, #d97706);
}

.damage-pin-desgaste {
  background: radial-gradient(circle at 30% 30%, #3b82f6, #1d4ed8);
}

@keyframes pulse-pin {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7), 0 4px 10px rgba(0,0,0,0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0), 0 4px 10px rgba(0,0,0,0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 4px 10px rgba(0,0,0,0.3);
  }
}

.foto-limpia-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background-color: #ecfdf5;
  border: 1.5px solid #10b981;
  color: #065f46;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

/* =========================================================
   TIMELINE DE RASTREO HISTÓRICO DEL PRODUCTO
   ========================================================= */
.timeline-item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 1.5rem;
}

.timeline-item:last-child {
  padding-bottom: 0.25rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 0.875rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: #cbd5e1;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  position: absolute;
  left: 0.25rem;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: white;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* =========================================================
   TARJETAS DE ATENCIÓN TELEFÓNICA (LAURA EXPRESS)
   ========================================================= */
.phone-script-box {
  background: #f8fafc;
  border: 1.5px dashed #94a3b8;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: #1e293b;
  position: relative;
}

.phone-script-box::before {
  content: '💬 Script de Llamada:';
  display: block;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.25rem;
  letter-spacing: 0.5px;
}