.panel-shell {
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 2px solid var(--amber);
  margin-bottom: 24px;
}

.panel-header img { height: 42px; width: auto; }

.panel-tabs {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.panel-tab {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}

.panel-tab.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--paper-ink);
}

.panel-section { display: none; }
.panel-section.is-active { display: block; }

.panel-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-size: 14px;
}

.panel-table th, .panel-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.panel-table th {
  background: var(--bg-alt);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.panel-table input[type="number"], .panel-table input[type="text"], .panel-table input[type="date"] {
  width: 100%;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-card);
}

.panel-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

.panel-toggle {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

.panel-toggle.is-off { background: var(--border-soft); color: var(--text-muted); }
.panel-toggle.is-on { background: var(--amber); color: var(--paper-ink); }

.panel-items-list { font-size: 13px; color: var(--text-muted); max-width: 260px; }

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.panel-table select, .panel-table textarea {
  width: 100%;
  min-width: 122px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-card);
}

.panel-table select { font-weight: 600; cursor: pointer; }

.panel-table textarea { min-width: 150px; min-height: 64px; resize: vertical; }

.panel-estado-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.panel-estado-nuevo { background: var(--border-soft); color: var(--text-muted); }
.panel-estado-contactado { background: #dbeafe; color: #1d4ed8; }
.panel-estado-muestra_enviada { background: #fef3c7; color: #92400e; }
.panel-estado-convertido { background: #dcfce7; color: #166534; }
.panel-estado-descartado { background: #fee2e2; color: #991b1b; }

.panel-estado-pendiente { background: var(--border-soft); color: var(--text-muted); }
.panel-estado-confirmado { background: #dbeafe; color: #1d4ed8; }
.panel-estado-entregado { background: #dcfce7; color: #166534; }
.panel-estado-cancelado { background: #fee2e2; color: #991b1b; }

/* ---------- Selección múltiple + acciones masivas (imprimir/descargar
   varios comprobantes juntos) — Pedidos ---------- */

.panel-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.panel-bulk-actions .panel-count {
  margin-left: 0;
  font-weight: 700;
  color: var(--ink);
}

.panel-check-col {
  width: 36px;
  text-align: center;
}

.panel-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--amber);
}

/* ---------- Toolbar de búsqueda/filtros (Pedidos, Muestras, Perfiles) ---------- */

.panel-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-search {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-card);
}

.panel-filter-select,
.panel-filter-number {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--ink);
}

.panel-filter-number { width: 150px; }

.panel-filter-dates {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.panel-filter-dates label { display: flex; align-items: center; gap: 6px; }

.panel-filter-dates input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
}

.btn-sm { padding: 8px 14px; font-size: 12px; }

.panel-count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- Tabla con scroll horizontal (más columnas ahora) ---------- */

.panel-table-wrap {
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
  scrollbar-color: var(--amber-dim) var(--bg-alt);
}

.panel-table-wrap::-webkit-scrollbar { height: 10px; }
.panel-table-wrap::-webkit-scrollbar-track { background: var(--bg-alt); }
.panel-table-wrap::-webkit-scrollbar-thumb { background: var(--amber-dim); border-radius: 999px; }

.panel-table-wrap .panel-table { box-shadow: none; }

/* ---------- Filas coloreadas según estado — para diferenciar de un
   vistazo sin tener que leer el badge de cada fila. Ninguna fila queda en
   blanco puro: hasta "pendiente/nuevo" lleva un tinte crema de marca, y el
   resto de los estados usa un color con más peso (fondo + borde + el propio
   select también coloreado) para que se note sin tener que leer el texto. */

.panel-table tbody tr { border-left: 6px solid transparent; transition: background 0.15s, border-color 0.15s; }
.panel-table tbody tr:hover { filter: brightness(0.97); }

.panel-table tbody tr[data-estado="nuevo"],
.panel-table tbody tr[data-estado="pendiente"] { background: var(--bg-alt); border-left-color: var(--border); }

.panel-table tbody tr[data-estado="contactado"],
.panel-table tbody tr[data-estado="confirmado"] { background: #dbeafe; border-left-color: #1d4ed8; }

.panel-table tbody tr[data-estado="muestra_enviada"] { background: #fef3c7; border-left-color: #92400e; }

.panel-table tbody tr[data-estado="convertido"],
.panel-table tbody tr[data-estado="entregado"] { background: #dcfce7; border-left-color: #166534; }

.panel-table tbody tr[data-estado="descartado"],
.panel-table tbody tr[data-estado="cancelado"] { background: #fee2e2; border-left-color: #991b1b; }

/* El select de estado repite el color de su fila — así el estado se lee
   directo en el control, no solo en el fondo de alrededor. */
.panel-table tbody tr[data-estado="contactado"] select[data-field="estado"],
.panel-table tbody tr[data-estado="confirmado"] select[data-field="estado"] { border-color: #1d4ed8; color: #1d4ed8; }
.panel-table tbody tr[data-estado="muestra_enviada"] select[data-field="estado"] { border-color: #92400e; color: #92400e; }
.panel-table tbody tr[data-estado="convertido"] select[data-field="estado"],
.panel-table tbody tr[data-estado="entregado"] select[data-field="estado"] { border-color: #166534; color: #166534; }
.panel-table tbody tr[data-estado="descartado"] select[data-field="estado"],
.panel-table tbody tr[data-estado="cancelado"] select[data-field="estado"] { border-color: #991b1b; color: #991b1b; }

/* ---------- Zebra en tablas sin estado propio (Perfiles, Clientes,
   Precios) — para que no se pierdan entre filas blancas idénticas cuando
   hay muchas juntas. Tono crema de marca, no gris genérico. ---------- */

#tbody-perfiles tr:nth-child(even),
#tbody-clientes tr:nth-child(even),
#tbody-precios tr:nth-child(even) { background: var(--bg-alt); }

/* Perfil con 30% activo — mismo verde que "convertido/entregado", para que
   se reconozca de un vistazo sin leer la columna N° Cliente. */
#tbody-perfiles tr.has-descuento { background: #dcfce7; border-left-color: #166534; }

.panel-row-actions { display: flex; flex-direction: column; gap: 6px; min-width: 128px; }

.panel-delete {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.panel-delete:hover { background: #fee2e2; }

.panel-badge-descuento {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #dcfce7;
  color: #166534;
}

/* Envío/Retiro en Muestras — a propósito con look distinto (contorno, no
   relleno) al de los badges de estado, para no confundirlos con un estado
   más del pipeline nuevo→convertido. */
.panel-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.panel-tag-envio { background: rgba(248, 189, 37, 0.16); border-color: rgba(248, 189, 37, 0.5); color: var(--amber-ink); }
.panel-tag-retiro { background: var(--border-soft); border-color: var(--border); color: var(--text-muted); }

/* Chips de "¿qué busca mejorar?" en la tabla de Muestras — dicen con qué
   argumento entrarle a cada lead antes de llamarlo. */
.panel-mejorar-cell { min-width: 150px; line-height: 2; }

.panel-tag-mejorar {
  background: rgba(248, 189, 37, 0.18);
  border-color: rgba(248, 189, 37, 0.45);
  color: var(--amber-ink);
  font-size: 10.5px;
}