/* <bm-pedidos-especiales-table> */

.pe-wrap { margin-top: 1rem; }

.pe-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.pe-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.pe-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-card);
}

.pe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}
.pe-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-muted, #f3f4f6);
  color: var(--text-strong);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border-soft);
  z-index: 1;
}
.pe-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.pe-table tbody tr:hover { background: var(--surface-muted, #f9fafb); }
.pe-table th.num, .pe-table td.num   { text-align: right; }
.pe-table th.date, .pe-table td.date { white-space: nowrap; }

.pe-status {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.pe-error { color: #b91c1c; }

.pe-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.85rem;
}
.pe-pginfo { font-size: 0.82rem; color: var(--text-muted); min-width: 140px; text-align: center; }
.pe-pgbtn {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pe-pgbtn:hover:not(:disabled) { background: var(--surface-muted, #f3f4f6); }
.pe-pgbtn:disabled { opacity: 0.4; cursor: default; }

/* Barra de filtros del dashboard Post-Venta */
.pe-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-soft);
}
.pe-field { display: flex; flex-direction: column; gap: 0.25rem; }
.pe-field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.pe-field input {
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-strong);
  background: var(--surface, #fff);
}
.pe-field input:focus { outline: none; border-color: #033932; }
.pe-field-search input { min-width: 160px; }
.pe-clear {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  height: fit-content;
}
.pe-clear:hover { background: var(--surface-muted, #f3f4f6); color: var(--text-strong); }

/* Headers ordenables */
.pe-table th.pe-sortable { cursor: pointer; user-select: none; }
.pe-table th.pe-sortable:hover { background: var(--surface, #eef0f2); }
.pe-table th.is-sorted { color: #033932; }

/* Semáforo del ETA */
.pe-table td.eta-cell { font-weight: 600; }
.pe-table td.eta-green  { background: #dcfce7; color: #166534; }
.pe-table td.eta-yellow { background: #fef9c3; color: #854d0e; }
.pe-table td.eta-red    { background: #fee2e2; color: #b91c1c; }
.pe-table td.eta-done   { background: transparent; color: var(--text); font-weight: 400; }

/* Panel de ETA vencidos (rojos) */
.pe-rojos-wrap { margin: 0.5rem 0 1.75rem; }
.pe-rojos-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.pe-rojos-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #b91c1c;
}
.pe-rojos-count { font-size: 0.78rem; color: var(--text-muted); }
.pe-rojos-wrap .pe-table-scroll { border-color: #fca5a5; }

/* ETA vencidos: scroll contenido + botón descarga */
.pe-rojos-head { display: flex; align-items: center; gap: 0.75rem; }
.pe-rojos-scroll { max-height: 420px; overflow: auto; border-color: #fca5a5; }
.pe-rojos-scroll thead th { position: sticky; top: 0; z-index: 1; }
.pe-rojos-dl {
  margin-left: auto;
  background: #033932; color: #fff; border: none; border-radius: 7px;
  padding: 0.35rem 0.8rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.pe-rojos-dl:hover { background: #04534a; }
.pe-rojos-dl:disabled { opacity: 0.6; cursor: default; }