/* NOSCargo Timeline Final */
:root {
  --circle-size: 60px;
  --icon-size: 28px;
}
.noscargo-wrapper{max-width:760px;margin:20px auto;padding:20px;border:1px solid #eee;border-radius:16px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.noscargo-form{display:flex;gap:8px;margin-bottom:20px}
.noscargo-form input{flex:1;padding:10px;border:1px solid #ccc;border-radius:8px}
.noscargo-form button{padding:10px 16px;background:#dc2626;color:#fff;border:none;border-radius:8px;cursor:pointer} .noscargo-form button:hover{background:#b91c1c}
.noscargo-progress{display:flex;align-items:center;justify-content:space-between;margin:30px 0;gap:8px}
.noscargo-progress .step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.noscargo-progress .circle{width:var(--circle-size);height:var(--circle-size);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d1d5db;margin-bottom:8px;line-height:0}
.noscargo-progress .circle .icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.noscargo-progress .circle img{width:var(--icon-size);height:var(--icon-size);object-fit:contain;display:block}
.noscargo-progress .done .circle{background:#22c55e}
.noscargo-progress .line{flex:1;height:6px;background:#d1d5db;border-radius:4px}
.noscargo-progress .line.done{background:#22c55e}
.noscargo-progress .label{font-size:.95rem;font-weight:500}
.noscargo-details{margin-top:16px;font-size:.95rem}
.noscargo-voucher{margin-top:20px}
.noscargo-voucher img{max-width:100%;border:1px solid #ccc;border-radius:8px;margin-bottom:10px}
.noscargo-btn{display:inline-block;padding:10px 16px;background:#22c55e;color:#fff;text-decoration:none;border-radius:8px}
.noscargo-btn:hover{background:#16a34a}

.noscargo-details strong{font-weight:700 !important;}


/* Header: logo left, print button right */
.noscargo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}
.noscargo-logo{max-height:64px;width:auto;display:block}
.noscargo-tools{margin-left:auto}
.noscargo-print-btn{padding:8px 12px;border-radius:8px}

/* Print rules */
@media print{
  .noscargo-form, .noscargo-tools{ display:none !important; } /* voucher visible in print */
  .noscargo-header,.noscargo-progress,.noscargo-details{ page-break-inside:avoid; }
}

/* Comprobante ribbon */
.noscargo-ribbon{background:#ecfdf5;border-left:6px solid #22c55e;padding:8px 12px;border-radius:8px;display:flex;align-items:center;gap:10px;margin:6px 0 10px;font-weight:600}
.noscargo-ribbon .dot{width:16px;height:16px;border-radius:9999px;background:#22c55e;opacity:.85}

/* Voucher */
.noscargo-voucher img{border-radius:8px;display:block;max-width:100%;height:auto}

/* Timeline móvil con tramos */
@media (max-width: 480px){
  .noscargo-progress{ --seg:34px; position:relative; display:block !important; padding-left:40px; margin-top:10px; }
  .noscargo-progress::before{ content:""; position:absolute; left:22px; top:0; bottom:0; width:4px; background:#e5e7eb; border-radius:2px; }
  .noscargo-progress .step, .noscargo-progress > div:not(.line){ position:relative; display:flex; align-items:center; gap:12px; margin:8px 0 calc(var(--seg) - 6px); }
  .noscargo-progress .circle{ width:44px; height:44px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; position:relative; box-shadow:0 0 0 3px #fff; }
  .noscargo-progress .label, .noscargo-progress span{ font-size:.96rem; line-height:1.2; text-align:left; }
  .noscargo-progress .step::after, .noscargo-progress > div:not(.line)::after{ content:""; position:absolute; left:22px; top:48px; width:4px; height:var(--seg); background:transparent; border-radius:2px; }
  .noscargo-progress .step:last-of-type::after, .noscargo-progress > div:not(.line):last-of-type::after{ display:none; }
  .noscargo-progress .step.done::after, .noscargo-progress > div.done::after{ background:#22c55e; }
  .noscargo-progress .line{ display:none !important; }
}


/* Mostrar botón imprimir solo en escritorio */
@media (max-width: 480px){ .only-desktop{ display:none !important; } }


  .noscargo-wrapper, .noscargo-wrapper *{ visibility: visible !important; }
  .noscargo-wrapper{ position: absolute !important; left:0 !important; top:0 !important; width:100% !important; box-shadow:none !important; }
  /* Esconde botones/acciones en PDF (imprimir/descargar) */
  .noscargo-btn, .noscargo-tools, .noscargo-voucher p{ display:none !important; }
  /* Oculta títulos de página/tema comunes */
  .entry-title, .page-title, header, footer, .site-header, .site-footer{ display:none !important; }
}


/* ===== Forzar 1 sola hoja en impresión ===== */
@media print{
  @page { size: A4 portrait; margin: 8mm; }
  html, body{ width: 210mm; height: auto; }
  .noscargo-wrapper{ 
    width: 190mm !important; 
    transform: scale(0.92); 
    transform-origin: top left; 
    page-break-inside: avoid; 
    break-inside: avoid;
  }
  .noscargo-card, .noscargo-voucher, .noscargo-voucher img{
    page-break-inside: avoid; 
    break-inside: avoid;
  }
  .noscargo-voucher img{ 
    max-height: 110mm !important; 
    height: auto; 
    width: auto; 
  }
  .noscargo-card{ box-shadow:none !important; margin: 0 !important; }
}


/* ===== Print V2: solo track, 1 página si es posible ===== */
@media print{
  @page { size: A4 portrait; margin: 5mm; }
  html, body{ margin:0 !important; padding:0 !important; width: 210mm; }
  body *{ display: none !important; }
  .noscargo-wrapper, .noscargo-wrapper *{ display: revert !important; }
  .noscargo-wrapper{ 
    position: static !important;
    width: 200mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  .noscargo-card, .noscargo-voucher{ page-break-inside: avoid; break-inside: avoid; }
  .noscargo-steps{ margin-top: 6mm !important; margin-bottom: 6mm !important; }
  .noscargo-voucher img{ 
    width: 100% !important; height: auto !important;
    max-height: 95mm !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  .noscargo-btn, .noscargo-tools{ display:none !important; }
}


/* Botón imprimir visible en desktop/tablet, oculto en móviles angostos */
@media (max-width: 480px){
  .always-desktop{ display:none !important; }
}


/* Override: remove max-height for voucher in print (usamos escalado dinámico) */
@media print{
  .noscargo-voucher img{ max-height: none !important; }
}