/* Timeline y componentes FTP (estilos mínimos comunes) */
.timeline .tm-title h5 { letter-spacing: .02em; }

/* Estilos de bloque de servicio e inputs (extraídos de pagar-servicio.blade) */
.tm-box-service .service-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
.service-media{flex:0 0 260px;max-width:260px;border-radius:10px;overflow:hidden;border:1px solid #e6e6e6;}
.service-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.service-content{flex:1;min-width:260px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.form-actions{margin-top:16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;}

.is-invalid{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;}

@media (max-width:768px){
  .service-media{flex-basis:100%;max-width:100%;}
  .form-grid{grid-template-columns:1fr;}
}

/* FTP status panel */
.ftp-status{ border:1px solid #e5e7eb; background:#fafafa; border-radius:10px; padding:10px 12px; }
.ftp-step{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.ftp-step .icon{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.ftp-step.pending .icon{ color:#0b75d1; }
.ftp-step.success .icon{ color:#16a34a; }
.ftp-step.error   .icon{ color:#dc2626; }
/* Spinner */
.ftp-step.pending .icon::before{ content:""; box-sizing:border-box; width:16px; height:16px; border:2px solid currentColor; border-top-color: transparent; border-radius:50%; display:inline-block; animation: ftp-spin .8s linear infinite; }
/* Check y X */
.ftp-step.success .icon::before{ content:"✓"; font-weight:700; }
.ftp-step.error   .icon::before{ content:"✕"; font-weight:700; }
@keyframes ftp-spin { to { transform: rotate(360deg); } }

/* Spinner genérico y check (usado en otros bloques del pagar-servicio) */
.spinner{display:inline-block;width:1em;height:1em;border:2px solid #cbd5e1;border-top-color:#22c55e;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-.125em}
@keyframes spin{to{transform:rotate(360deg)}}
.check{font-size:1.1em;vertical-align:-.125em}

/* Z-index modal (stacking) */
.modal-backdrop { z-index: 2000 !important; }
.modal { z-index: 2005 !important; }


/* Timeline normalization to match reference page across contexts */
.timeline { margin-top: 0.5rem; }
.timeline .tm-body { position: relative; }
.timeline .tm-title { margin-bottom: .5rem; }
.timeline .tm-title h5 { margin: 0; text-transform: uppercase; }
.timeline .tm-items { list-style: none; margin: 0; padding: 0; }
.timeline .tm-items > li { list-style: none; }
.timeline .tm-box { background: #fff; border: 1px solid #e6e6e6; border-radius: 6px; padding: 16px; }
.timeline .tm-info { display: flex; align-items: center; }
.timeline .tm-datetime { display: inline-block; }
.timeline .tm-datetime .tm-datetime-date { font-weight: 600; text-transform: lowercase; }
.timeline .tm-datetime .tm-datetime-time { text-transform: lowercase; }
.timeline .tm-icon { margin-left: 12px; color: #4b5563; }
/* Ensure pay-wrap spacing similar to reference */
.pay-wrap { border: 1px dashed #e5e7eb; border-radius: 6px; padding: 12px; background: #fcfcfc; }


/* Panel de estados FTP (compartido) */
.ftp-status{ border:1px solid #e5e7eb; background:#fafafa; border-radius:10px; padding:10px 12px; }
.ftp-step{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.ftp-step .icon{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.ftp-step.pending .icon{ color:#0b75d1; }
.ftp-step.success .icon{ color:#16a34a; }
.ftp-step.error   .icon{ color:#dc2626; }
.ftp-step.pending .icon::before{ content:""; box-sizing:border-box; width:16px; height:16px; border:2px solid currentColor; border-top-color: transparent; border-radius:50%; display:inline-block; animation: ftp-spin .8s linear infinite; }
.ftp-step.success .icon::before{ content:"✓"; font-weight:700; }
.ftp-step.error   .icon::before{ content:"✕"; font-weight:700; }
@keyframes ftp-spin { to { transform: rotate(360deg); } }
/* Ajuste visual del mensaje de bloqueo FTP */
#ftp-locked-message { margin-top: 6px; }