/* ═══════════════════════════════════════════════════════════════════
   css/panel-pro.css — Rediseño del panel (10/11/2026)
   Pedido del dueño: «el rediseño tiene que ser como este» (maqueta de
   Pedidos: tarjetas de métricas con tendencia, pestañas por estado, tabla
   con acciones y asistente a la derecha), para TODO el panel.

   1) Pedidos (clases pd-*): funcionan con cualquier tema, sólo usan
      variables (--card, --text1, --p2…).
   2) Tema Pro: pulido de los componentes compartidos (menú, barra de
      arriba, paneles, botones, tablas, campos). TODO cuelga de
      [data-theme="pro"], así que los otros temas quedan exactamente igual.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PEDIDOS ─────────────────────────────────────────────────────── */
#page-pedidos { --pd-r: 16px; }

.pd-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.pd-head-l { display:flex; align-items:center; gap:14px; min-width:0; }
.pd-head-ic {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--pg); box-shadow:0 8px 24px rgba(124,58,237,.40);
}
.pd-title { margin:0; font-size:26px; line-height:1.1; font-weight:800; letter-spacing:-.6px; color:var(--text1); }
.pd-sub { margin-top:4px; font-size:12.5px; color:var(--text3); max-width:560px; }
.pd-head-r { display:flex; gap:8px; flex-wrap:wrap; }
.pd-head-r .btn { padding:9px 16px; font-size:12px; border-radius:10px; }

.pd-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.pd-main { min-width:0; container-type:inline-size; container-name:pdmain; }
#page-pedidos.pd-ai-hidden .pd-layout { grid-template-columns:minmax(0,1fr); }
#page-pedidos.pd-ai-hidden .pd-ai { display:none; }
.pd-ai-open { display:none; }
#page-pedidos.pd-ai-hidden .pd-ai-open {
  display:flex; position:fixed; right:22px; bottom:22px; z-index:150;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; font-size:24px;
  align-items:center; justify-content:center; background:var(--pg); box-shadow:0 10px 28px rgba(124,58,237,.5);
}

/* Tarjetas de métricas */
.pd-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.pd-kpi {
  position:relative; overflow:hidden; text-align:left; cursor:pointer; font-family:inherit;
  padding:16px 16px 14px; min-height:128px; border-radius:var(--pd-r);
  background:linear-gradient(160deg, color-mix(in srgb, var(--kc) 16%, var(--card)) 0%, var(--card) 62%);
  border:1px solid color-mix(in srgb, var(--kc) 28%, var(--bord));
  box-shadow:var(--shadow-sm); transition:transform .15s, border-color .15s, box-shadow .15s;
}
.pd-kpi:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--kc) 55%, transparent); box-shadow:0 10px 28px color-mix(in srgb, var(--kc) 22%, transparent); }
.pd-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.pd-kpi-ic {
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800; color:#fff; background:var(--kc);
  box-shadow:0 6px 18px color-mix(in srgb, var(--kc) 45%, transparent);
}
.pd-kpi-val { max-width:58%; margin-top:12px; font-size:26px; font-weight:800; letter-spacing:-.6px; color:var(--text1); line-height:1; position:relative; z-index:1; }
.pd-kpi-lbl { max-width:56%; margin-top:6px; font-size:12px; color:var(--text3); position:relative; z-index:1; }
.pd-spark { position:absolute; right:12px; bottom:14px; width:36%; height:36px; opacity:.95; }
.pd-trend { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; color:var(--text3); background:rgba(127,127,160,.14); white-space:nowrap; }
.pd-trend.up { color:#22c55e; background:rgba(34,197,94,.14); }
.pd-trend.down { color:#f87171; background:rgba(239,68,68,.14); }

/* Pestañas */
.pd-tabs-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pd-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.pd-tab {
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:11px; cursor:pointer;
  font:600 12px/1 var(--outfit); color:var(--text2); background:var(--card); border:1px solid var(--bord);
  transition:background .15s, border-color .15s, color .15s;
}
.pd-tab:hover { border-color:var(--bord3); color:var(--text1); }
.pd-tab.on { background:var(--pg); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(124,58,237,.35); }
.pd-tab-ic { font-size:12px; }
.pd-tab-n { font-size:11px; font-weight:700; opacity:.75; }
.pd-tab.on .pd-tab-n { opacity:.9; }

.pd-select {
  height:38px; padding:0 12px; border-radius:11px; cursor:pointer;
  font:600 12px var(--outfit); color:var(--text2); background:var(--card); border:1px solid var(--bord);
  color-scheme:var(--scheme);
}
.pd-select:hover { border-color:var(--bord3); }

.pd-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pd-search {
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px; height:38px; padding:0 12px;
  border-radius:11px; background:var(--card); border:1px solid var(--bord); color:var(--text3);
}
.pd-search:focus-within { border-color:var(--p2); box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.pd-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text1); font:500 12.5px var(--outfit); }
.pd-search input::placeholder { color:var(--text3); }

/* Tabla */
.pd-card { background:var(--card); border:1px solid var(--bord); border-radius:var(--pd-r); box-shadow:var(--shadow-sm); }
.pd-table-wrap { overflow:hidden; }
#pedList { overflow-x:auto; }
.pd-tbl { width:100%; border-collapse:separate; border-spacing:0; }
.pd-tbl th {
  text-align:left; padding:12px 14px; font:600 11px var(--outfit); color:var(--text3);
  border-bottom:1px solid var(--bord); white-space:nowrap; background:rgba(127,127,170,.04);
}
.pd-tbl td { padding:11px 14px; border-bottom:1px solid var(--bord); font-size:12.5px; color:var(--text2); vertical-align:middle; }
.pd-tbl tbody tr { cursor:pointer; transition:background .12s; }
.pd-tbl tbody tr td:first-child { box-shadow:inset 3px 0 0 var(--sc); }
.pd-tbl tbody tr:hover td { background:rgba(139,92,246,.07); }
.pd-tbl tbody tr:last-child td { border-bottom:none; }
.pd-r { text-align:right !important; }
.pd-id { font-weight:800; color:var(--text1); font-size:12.5px; white-space:nowrap; }
.pd-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.pd-tags > span { font-size:9.5px !important; padding:1px 7px !important; white-space:nowrap; }
.pd-tags:empty { display:none; }
.pd-new, .pd-urg { font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:999px; }
.pd-new { background:rgba(139,92,246,.18); color:var(--p4); border:1px solid rgba(139,92,246,.4); }
.pd-urg { background:var(--rdim); color:var(--red2); border:1px solid rgba(239,68,68,.35); }
.pd-cli { display:flex; align-items:center; gap:10px; min-width:0; }
.pd-av {
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; color:#fff; background:var(--ac);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 30%, transparent);
}
.pd-cli-t { min-width:0; }
.pd-cli-n { font-weight:700; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.pd-cli-s { font-size:11px; color:var(--text3); margin-top:2px; white-space:nowrap; }
.pd-prod { max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text2); }
.pd-total { font-weight:800; color:var(--text1); white-space:nowrap; }
.pd-mut { color:var(--text4); }
.pd-st {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; white-space:nowrap;
  font-size:11px; font-weight:700; color:var(--sc); background:var(--sb);
  border:1px solid color-mix(in srgb, var(--sc) 35%, transparent);
}
.pd-when { font-size:11.5px; color:var(--text3); white-space:nowrap; }
.pd-acts { display:inline-flex; gap:4px; }
.pd-acts button {
  width:30px; height:30px; border-radius:9px; cursor:pointer; font-size:13px; line-height:1;
  background:transparent; border:1px solid var(--bord); color:var(--text2); transition:background .12s, border-color .12s;
}
.pd-acts button:hover { background:rgba(139,92,246,.14); border-color:rgba(139,92,246,.45); }

.pd-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 14px; border-top:1px solid var(--bord); }
.pd-foot:empty { display:none; }
.pd-foot-l { font-size:11.5px; color:var(--text3); }
.pd-foot-r { display:flex; gap:4px; align-items:center; }
.pd-pg {
  min-width:30px; height:30px; padding:0 8px; border-radius:9px; cursor:pointer;
  font:700 12px var(--outfit); color:var(--text2); background:transparent; border:1px solid var(--bord);
}
.pd-pg:hover:not(:disabled) { border-color:var(--bord3); color:var(--text1); }
.pd-pg.on { background:var(--pg); color:#fff; border-color:transparent; }
.pd-pg:disabled { opacity:.35; cursor:default; }
.pd-pg-gap { color:var(--text4); padding:0 2px; }

.pd-empty { text-align:center; padding:56px 20px; color:var(--text3); }
.pd-empty-ic { font-size:40px; margin-bottom:10px; }
.pd-empty-t { font-size:14px; font-weight:700; color:var(--text1); }
.pd-empty-s { font-size:12px; margin:6px auto 0; max-width:420px; }

/* Asistente lateral */
.pd-ai {
  position:sticky; top:12px; display:flex; flex-direction:column; max-height:calc(100vh - 110px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--p) 10%, var(--card)), var(--card) 40%);
  border:1px solid var(--bord2); border-radius:var(--pd-r); box-shadow:var(--shadow-md); overflow:hidden;
}
.pd-ai-hd { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--bord); }
.pd-ai-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--pg); box-shadow:0 6px 18px rgba(124,58,237,.4);
}
.pd-ai-name { font-size:13.5px; font-weight:800; color:var(--text1); display:flex; align-items:center; gap:6px; }
.pd-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; }
.pd-ai-role { font-size:11px; color:var(--text3); }
.pd-ai-x { background:none; border:none; color:var(--text3); font-size:14px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.pd-ai-x:hover { color:var(--text1); background:rgba(255,255,255,.06); }
.pd-ai-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.pd-ai-msg {
  align-self:flex-start; max-width:100%; padding:10px 12px; border-radius:4px 14px 14px 14px;
  font-size:12.5px; line-height:1.5; color:var(--text1); background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.22);
}
.pd-ai-msg a { color:var(--p4); }
.pd-ai-ans { background:var(--bg3); border-color:var(--bord); color:var(--text2); }
.pd-ai-acts { display:flex; flex-direction:column; gap:6px; }
.pd-ai-acts button {
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border-radius:10px; cursor:pointer; text-align:left;
  font:600 12px var(--outfit); color:var(--text2); background:rgba(127,127,170,.06); border:1px solid var(--bord);
  transition:background .12s, border-color .12s, color .12s;
}
.pd-ai-acts button span { width:22px; height:22px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; background:rgba(139,92,246,.18); }
.pd-ai-acts button:hover { color:var(--text1); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.1); }
.pd-ai-rec {
  padding:12px; border-radius:12px; background:linear-gradient(135deg, rgba(109,40,217,.55), rgba(139,92,246,.25));
  border:1px solid rgba(167,139,250,.35);
}
.pd-ai-rec.ok { background:linear-gradient(135deg, rgba(22,163,74,.35), rgba(34,197,94,.12)); border-color:rgba(74,222,128,.3); }
.pd-ai-rec-t { font-size:12.5px; font-weight:800; color:#fff; }
.pd-ai-rec-s { font-size:12px; color:rgba(255,255,255,.85); margin-top:4px; line-height:1.45; }
.pd-ai-rec button { margin-top:10px; width:100%; padding:8px; border-radius:9px; border:none; cursor:pointer; font:700 12px var(--outfit); color:#fff; background:rgba(255,255,255,.14); }
.pd-ai-rec button:hover { background:rgba(255,255,255,.22); }
.pd-ai-in { display:flex; gap:6px; padding:12px; border-top:1px solid var(--bord); }
.pd-ai-in input {
  flex:1; min-width:0; height:38px; padding:0 12px; border-radius:11px; outline:none;
  font:500 12px var(--outfit); color:var(--text1); background:var(--bg3); border:1px solid var(--bord);
}
.pd-ai-in input:focus { border-color:var(--p2); }
.pd-ai-in button { width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; color:#fff; font-size:14px; background:var(--pg); }

/* Claros (Snow/Breeze): textos sobre degradé violeta siguen siendo blancos; el resto toma las variables */
[data-theme="snow"] .pd-ai-msg, [data-theme="breeze"] .pd-ai-msg { color:var(--text1); }

@media (max-width:1280px) {
  .pd-layout { grid-template-columns:minmax(0,1fr); }
  .pd-ai { position:static; max-height:none; }
  .pd-ai-acts { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
}
@media (max-width:1100px) { .pd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* La tabla se adapta al ancho real de la columna (con o sin asistente), no al de la pantalla */
@container pdmain (max-width:960px) { .pd-hide-md { display:none; } }
@container pdmain (max-width:720px) { .pd-hide-sm { display:none; } }
@media (max-width:640px) {
  .pd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pd-kpi { min-height:112px; padding:12px; }
  .pd-kpi-ic { width:32px; height:32px; font-size:15px; border-radius:10px; }
  .pd-kpi-val { font-size:21px; max-width:none; }
  .pd-kpi-lbl { max-width:none; font-size:11px; }
  .pd-spark { width:55%; height:26px; bottom:auto; top:16px; right:10px; opacity:.6; }
  .pd-kpi .pd-trend { display:none; }
  .pd-hide-sm { display:none; }
  .pd-title { font-size:22px; }
  .pd-tbl td, .pd-tbl th { padding:10px; }
}

/* ── 2. TEMA PRO: pulido global ─────────────────────────────────────── */
[data-theme="pro"] body { background:var(--bg); }

/* Menú lateral: ítem activo como pastilla violeta llena, como la maqueta */
[data-theme="pro"] .sidebar {
  background:linear-gradient(180deg, #0f0c2b 0%, #0a0920 100%);
  border-right:1px solid var(--sb-bord);
  box-shadow:6px 0 36px rgba(3,2,20,.55);
}
[data-theme="pro"] .sb-logo { border-bottom-color:var(--sb-bord); }
[data-theme="pro"] .sb-icon { background:var(--pg); box-shadow:0 6px 20px rgba(124,58,237,.5); }
[data-theme="pro"] .nav-sep {
  border-top:none; margin-top:8px; padding:12px 12px 6px;
  font-size:9.5px; letter-spacing:1.6px; color:rgba(169,164,214,.55);
}
[data-theme="pro"] .nav-item {
  padding:9px 12px; border-radius:11px; margin-bottom:3px; font-size:12.5px; border:1px solid transparent;
}
[data-theme="pro"] .nav-item:hover { background:rgba(139,124,255,.08); border-color:rgba(139,124,255,.08); color:var(--sb-text); }
[data-theme="pro"] .nav-item.active {
  background:var(--sb-active-bg); color:#fff; border:1px solid rgba(196,181,253,.25); border-left:1px solid rgba(196,181,253,.25);
  box-shadow:0 8px 22px rgba(124,58,237,.42);
}
[data-theme="pro"] .nav-item.active .ni { filter:none; opacity:1; }
[data-theme="pro"] .sb-nav .nav-item.active .nav-badge { color:#fff; }
[data-theme="pro"] .sb-bottom { border-top-color:var(--sb-bord); }

/* Barra de arriba: vidrio oscuro, búsqueda ancha y botones redondeados */
[data-theme="pro"] .topbar {
  height:60px; background:rgba(12,10,36,.78); border-bottom:1px solid var(--bord);
  box-shadow:0 6px 24px rgba(3,2,20,.35);
}
[data-theme="pro"] .tb-title { font-size:15px; }
[data-theme="pro"] .tb-search {
  height:38px; border-radius:12px; width:300px;
  background:rgba(255,255,255,.04); border:1px solid var(--bord2);
}
[data-theme="pro"] .tb-btn {
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--bord);
}
[data-theme="pro"] .tb-btn:hover { background:rgba(139,124,255,.12); border-color:var(--bord3); }

/* Paneles / tarjetas */
[data-theme="pro"] .panel {
  border-radius:16px;
  background:linear-gradient(180deg, rgba(31,27,78,.97) 0%, var(--card) 100%);
  border:1px solid var(--bord);
  box-shadow:0 6px 22px rgba(3,2,20,.4);
}
[data-theme="pro"] .panel:hover { border-color:var(--bord2); }
[data-theme="pro"] .panel-hdr { background:rgba(139,124,255,.04); border-bottom-color:var(--bord); }
[data-theme="pro"] .sec-title { font-size:20px; letter-spacing:-.5px; }

/* Botones */
[data-theme="pro"] .btn { border-radius:10px; }
[data-theme="pro"] .btn-primary { background:var(--pg); box-shadow:0 6px 20px rgba(124,58,237,.42); }
[data-theme="pro"] .btn-primary:hover { box-shadow:0 10px 28px rgba(124,58,237,.55); }
[data-theme="pro"] .btn-secondary { background:rgba(255,255,255,.04); border:1px solid var(--bord2); color:var(--text2); }
[data-theme="pro"] .btn-secondary:hover { background:rgba(139,124,255,.12); border-color:var(--p2); color:#fff; }

/* Campos */
[data-theme="pro"] .form-input,
[data-theme="pro"] .form-select {
  border-radius:10px; background:rgba(10,9,32,.6); border:1px solid var(--bord2); color:var(--text1);
}
[data-theme="pro"] .form-input:focus,
[data-theme="pro"] .form-select:focus { border-color:var(--p2); box-shadow:0 0 0 3px rgba(139,92,246,.18); outline:none; }

/* Tablas compartidas (.tbl): encabezado liviano y hover violeta */
[data-theme="pro"] .tbl th {
  font-family:var(--outfit); font-size:11px; letter-spacing:.2px; text-transform:none; font-weight:600;
  color:var(--text3); background:rgba(139,124,255,.04);
}
[data-theme="pro"] .tbl tr:hover td { background:rgba(139,92,246,.07); }

/* Scrollbars finos acordes */
[data-theme="pro"] ::-webkit-scrollbar-thumb { background:rgba(139,124,255,.22); border-radius:8px; }
[data-theme="pro"] ::-webkit-scrollbar-thumb:hover { background:rgba(139,124,255,.38); }