/* Modal de confirmação (cancelamento) */
.td-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.td-confirm-modal{background:#ffffff;text-align:left;border-radius:12px;max-width:360px;width:100%;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);overflow:hidden;}
.td-confirm-modal .td-modal-head{padding:18px 16px 12px;background:#fff;}
.td-modal-icon{display:flex;margin-left:auto;margin-right:auto;background:#fee2e2;justify-content:center;align-items:center;width:48px;height:48px;border-radius:9999px;color:#dc2626;}
.td-modal-icon svg{width:24px;height:24px;}
.td-modal-title{margin-top:10px;text-align:center;color:#111827;font-size:15px;font-weight: 750;}
.td-modal-msg{margin-top:8px;text-align:center;color:#6b7280;font-size:12px;line-height:1.35;}
.td-modal-actions{margin:0 16px 16px;background:#f9fafb;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:10px;}
.td-btn-danger{background:#dc2626;color:#fff;border:1px solid transparent;}
.td-btn-danger:hover{filter:brightness(.96);}


/* Tabs dentro de detalhes */
.td-tabs{display:flex;gap:8px;margin-top:10px;}
.td-tab{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px 10px;font-weight: 700;font-size:12px;color:#334155;cursor:pointer;}
.td-tab.is-active{background:#0f172a;color:#fff;border-color:#0f172a;}
.td-tabpanes{margin-top:12px;}
.td-tabpane{display:none;}
.td-tabpane.is-active{display:block;}

/* Linha do tempo */
.td-timeline{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px;}
.td-tl-item{display:flex;gap:12px;position:relative;padding:6px 0;}
.td-tl-dot{width:10px;height:10px;border-radius:999px;background:#0f172a;margin-top:6px;flex:0 0 10px;}
.td-tl-content{flex:1;}
.td-tl-title{font-weight: 750;color:#0f172a;font-size:12px;}
.td-tl-time{color:#94a3b8;font-size:12px;margin-top:2px;}



/* Tabs inside pedido detalhes */
.td-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.td-tab{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;font-weight: 700;font-size:12px;color:#111827;cursor:pointer;transition:.18s;}
.td-tab:hover{border-color:#cbd5e1;}
.td-tab.is-active{background:#0f172a;color:#fff;border-color:#0f172a;}
.td-tabpanes{margin-top:12px;}
.td-tabpane{display:none;}
.td-tabpane.is-active{display:block;}

/* Timeline (stepper) */
.td-stepper-box{background:#fff;border-radius:12px;padding:10px;border:1px solid #e5e7eb;box-shadow:0 4px 12px rgba(0,0,0,0.04);max-height:190px;overflow:auto;}
.td-stepper-step{display:flex;gap:10px;position:relative;padding-bottom:12px;}
.td-stepper-step:last-child{padding-bottom:0;}
.td-stepper-line{position:absolute;left:11px;top:24px;bottom:0;width:2px;background:#e2e8f0;}
.td-stepper-step:last-child .td-stepper-line{display:none;}
.td-stepper-circle{width:24px;height:24px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex:0 0 24px;z-index:2;font-weight: 750;font-size:12px;}
.td-stepper-completed .td-stepper-circle{background:#0f172a;color:#fff;}
.td-stepper-active .td-stepper-circle{border:2px solid #0f172a;color:#0f172a;background:#fff;}
.td-stepper-pending .td-stepper-circle{border:2px solid #e2e8f0;color:#94a3b8;background:#fff;}
.td-stepper-content{flex:1;}
.td-stepper-title{font-weight: 700;color:#0f172a;margin-top:0;font-size:12px;}
.td-stepper-status{margin-top:4px;font-size:10px;display:inline-block;padding:2px 8px;border-radius:9999px;}
.td-stepper-completed .td-stepper-status{background:#dcfce7;color:#166534;}
.td-stepper-active .td-stepper-status{background:#dbeafe;color:#1d4ed8;}
.td-stepper-pending .td-stepper-status{background:#f1f5f9;color:#64748b;}
.td-stepper-time{margin-top:4px;font-size:10px;color:#64748b;}
.td-stepper-bad .td-stepper-circle{background:#dc2626;color:#fff;}
.td-stepper-bad .td-stepper-status{background:#fee2e2;color:#991b1b;}


.td-stepper-sub{margin-top:3px;font-size:10px;color:#64748b;line-height:1.25;}


/* === Trajet: Tabs mais integradas (Pedidos) === */
.td-tabs{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  padding: 6px;
  border-radius: 14px;
}
.td-tab{
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
}
.td-tab:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.12);
}
.td-tab.is-active{
  background: #2563eb;
  border-color: #2563eb;
  color:#fff;
}