/* ============================================================================
   VALERIA · componente integrado en la vista "Sup Valeria" (y en /bitacora).
   Usa las variables del tema del panel (claro/medio/oscuro/noche); si no existen
   (página suelta /bitacora) caen a la paleta "noche".
   Regla daltonismo: todo estado = icono + palabra; el color solo refuerza.
   ============================================================================ */
.vd { --vd-bg: var(--bg-panel, #0a101e); --vd-bg2: var(--bg-elevated, #0f1728); --vd-in: var(--bg-input, #0f1a2c); --vd-hover: var(--bg-hover, #12203a);
      --vd-t: var(--text-primary, #e6edf7); --vd-t2: var(--text-secondary, #9fb0c7); --vd-t3: var(--text-light, #6b7d97); --vd-b: var(--border, #1c2a44);
      --vd-p: var(--primary, #3d9c74); --vd-acc: var(--accent, #7fd4ff); --vd-warn: #ffb454; --vd-venc: #ff7eb6; --vd-ok: #7fd4ff;
      color: var(--vd-t); font-size: 15px; line-height: 1.45; display: grid; gap: 16px; }
.vd * { box-sizing: border-box; }
.vd button { font: inherit; cursor: pointer; }
.vd .hidden { display: none !important; }

/* ---- rejilla principal: pendientes | chat ---- */
.vd-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .vd-grid { grid-template-columns: 1fr; } }

/* ---- pendientes ---- */
.vd-top { background: var(--vd-bg); border: 1px solid var(--vd-b); border-radius: 14px; overflow: hidden; }
.vd-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--vd-b); }
.vd-head .n { font-size: 34px; font-weight: 900; line-height: 1; min-width: 44px; text-align: center; }
.vd-head .t { font-size: 18px; font-weight: 800; }
.vd-head .s { color: var(--vd-t2); font-size: 13px; }
.vd-cards { display: grid; gap: 10px; padding: 12px; max-height: 62vh; overflow: auto; }
.vd-card { background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.vd-card.venc { border-color: var(--vd-venc); }
.vd-card.rev { border-color: var(--vd-warn); }
.vd-card .cli { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; flex-wrap: wrap; }
.vd-card .hace { margin-left: auto; color: var(--vd-t2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.vd-card .que { font-size: 15px; }
.vd-card .marcas { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-m { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; border-radius: 8px; padding: 3px 9px; border: 1.5px solid; }
.vd-m.hoy { color: var(--vd-t); border-color: var(--vd-t3); }
.vd-m.venc { color: #1a0a12; background: var(--vd-venc); border-color: var(--vd-venc); }
.vd-m.rev { color: #1a1200; background: var(--vd-warn); border-color: var(--vd-warn); }
.vd-m.prog { color: var(--vd-t2); border-color: var(--vd-b); }
.vd-card .acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.vd-btn { background: var(--vd-p); color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 800; font-size: 15px; }
.vd-btn:disabled { opacity: .5; cursor: default; }
.vd-btn.sec { background: transparent; color: var(--vd-t2); border: 1px solid var(--vd-b); font-weight: 600; font-size: 14px; }
.vd-btn.sec:hover { color: var(--vd-t); background: var(--vd-hover); }
.vd-notas { border-top: 1px dashed var(--vd-b); padding-top: 8px; display: grid; gap: 6px; font-size: 14px; }
.vd-nota { display: grid; gap: 2px; }
.vd-nota .f { color: var(--vd-t3); font-size: 12px; }
.vd-vacio { padding: 26px 16px; text-align: center; color: var(--vd-t2); font-size: 16px; }
.vd-vacio b { display: block; font-size: 22px; margin-bottom: 4px; }

/* ---- chat ---- */
.vd-chat { background: var(--vd-bg); border: 1px solid var(--vd-b); border-radius: 14px; display: flex; flex-direction: column; height: min(70vh, 640px); min-height: 420px; overflow: hidden; }
.vd-chat-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--vd-b); background: var(--vd-bg2); }
.vd-ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3d9c74, #7fd4ff); display: grid; place-items: center; color: #04060d; font-weight: 900; font-size: 18px; flex: none; }
.vd-chat-h .nm { font-weight: 800; font-size: 16px; }
.vd-chat-h .sub { color: var(--vd-t2); font-size: 12.5px; }
.vd-ctx { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--vd-in); border-bottom: 1px solid var(--vd-b); font-size: 13.5px; }
.vd-ctx b { color: var(--vd-t); }
.vd-ctx button { margin-left: auto; background: transparent; border: 1px solid var(--vd-b); color: var(--vd-t2); border-radius: 8px; padding: 3px 9px; font-size: 12.5px; }
.vd-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vd-bub { max-width: 84%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.5; }
.vd-bub.user { align-self: flex-end; background: var(--vd-p); color: #fff; border-bottom-right-radius: 4px; }
.vd-bub.assistant { align-self: flex-start; background: var(--vd-bg2); border: 1px solid var(--vd-b); border-bottom-left-radius: 4px; }
.vd-bub.pensando { color: var(--vd-t2); font-style: italic; }
.vd-quick { display: flex; gap: 6px; padding: 6px 10px 0; flex-wrap: wrap; }
.vd-chip { background: var(--vd-bg2); border: 1px solid var(--vd-b); color: var(--vd-t2); padding: 5px 11px; border-radius: 999px; font-size: 13px; }
.vd-chip.active, .vd-chip:hover { color: var(--vd-t); border-color: var(--vd-acc); }
.vd-in { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--vd-b); }
.vd-in textarea { flex: 1; resize: none; min-height: 46px; max-height: 130px; background: var(--vd-in); color: var(--vd-t); border: 1px solid var(--vd-b); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; }

/* ---- supervisión (admin, colapsada) ---- */
.vd-sup { background: var(--vd-bg); border: 1px solid var(--vd-b); border-radius: 14px; }
.vd-sup > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--vd-t2); list-style: none; display: flex; align-items: center; gap: 8px; }
.vd-sup > summary::-webkit-details-marker { display: none; }
.vd-sup > summary::before { content: "▸"; transition: transform .15s; }
.vd-sup[open] > summary::before { transform: rotate(90deg); }
.vd-sup-body { border-top: 1px solid var(--vd-b); padding: 12px 14px; display: grid; gap: 14px; font-size: 14px; }
.vd-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vd-stat { background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 10px; padding: 10px 12px; }
.vd-stat .n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.vd-stat .l { color: var(--vd-t2); font-size: 12px; margin-top: 3px; }
.vd-stat.rev { border-color: var(--vd-warn); } .vd-stat.rev .n { color: var(--vd-warn); }
.vd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.vd-tbl th, .vd-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--vd-b); }
.vd-tbl th { color: var(--vd-t2); font-weight: 600; font-size: 12px; }
.vd-sup h4 { margin: 4px 0 6px; font-size: 12.5px; color: var(--vd-t2); text-transform: uppercase; letter-spacing: .5px; }
.vd-sup select, .vd-sup input { background: var(--vd-in); color: var(--vd-t); border: 1px solid var(--vd-b); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.vd-sup-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 12px; }
@media (max-width: 980px) { .vd-sup-grid { grid-template-columns: 1fr; } }
.vd-plist { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.vd-prow { background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: grid; gap: 3px; font-size: 13px; }
.vd-prow.sel { border-color: var(--vd-acc); }
.vd-prow.rev { box-shadow: inset 3px 0 0 var(--vd-warn); }
.vd-prow .c { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.vd-prow .c small { color: var(--vd-t3); font-weight: 500; }
.vd-prow .d { color: var(--vd-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; border: 1px solid var(--vd-b); color: var(--vd-t2); margin-right: 4px; text-transform: uppercase; }
.vd-tag.resuelto { color: var(--vd-ok); border-color: #2f6f8a; }
.vd-tag.archivado { color: var(--vd-t3); border-style: dashed; }
.vd-tag.rev { color: #1a1200; background: var(--vd-warn); border-color: var(--vd-warn); }
.vd-tag.venc { color: var(--vd-venc); border-color: #a04b74; }
.vd-det { background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 10px; padding: 12px; display: grid; gap: 12px; }
.vd-det h3 { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vd-meta { color: var(--vd-t2); font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; }
.vd-tl { display: grid; gap: 8px; }
.vd-tle { border: 1px solid var(--vd-b); border-radius: 8px; padding: 8px 10px; background: var(--vd-bg); }
.vd-tle.discrepancia { border-color: var(--vd-warn); }
.vd-tle.resolucion { border-color: #2f6f8a; }
.vd-tle .h { font-size: 12px; color: var(--vd-t2); margin-bottom: 3px; }
.vd-tle .h b { color: var(--vd-t); }
.vd-tle .t { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
.vd-tle .hs { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--vd-t3); margin-top: 4px; }
.vd-conv { max-height: 320px; overflow: auto; display: grid; gap: 5px; border: 1px solid var(--vd-b); border-radius: 8px; padding: 8px; background: var(--vd-bg); }
.vd-msg { font-size: 12.5px; padding: 5px 8px; border-radius: 8px; max-width: 86%; white-space: pre-wrap; word-break: break-word; }
.vd-msg.contact { background: var(--vd-bg2); justify-self: start; }
.vd-msg.agent, .vd-msg.bot { background: var(--vd-p); color: #fff; justify-self: end; }
.vd-msg .mm { opacity: .75; font-size: 10.5px; margin-bottom: 2px; }
.vd-msg.failed { outline: 1px dashed var(--vd-warn); }
.vd-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.vd-cfg label { display: grid; gap: 3px; font-size: 12.5px; color: var(--vd-t2); }
.vd-hor { display: grid; grid-template-columns: 34px 22px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 5px; max-width: 360px; }
.vd-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--vd-bg2); border: 1px solid var(--vd-b); color: var(--vd-t); padding: 10px 16px; border-radius: 10px; z-index: 9999; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.vd-toast.err { border-color: var(--vd-warn); }

/* ---- barra de campaña publicitaria ---- */
.vd-camp { padding: 12px 14px 14px; border-bottom: 1px solid var(--vd-b); display: grid; gap: 8px; }
.vd-camp:empty { display: none; }
.vd-camp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vd-camp-h b { font-size: 16px; } .vd-camp-h span { color: var(--vd-t2); font-size: 12.5px; }
.vd-bar { position: relative; height: 16px; border-radius: 999px; background: var(--vd-in); border: 1px solid var(--vd-b); margin: 14px 0 26px; }
.vd-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3d9c74, #7fd4ff); transition: width .6s ease; }
.vd-bar-fill.on { background: linear-gradient(90deg, #7fd4ff, #c3b5ff); }
.vd-bar-mark { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--vd-t); border-radius: 2px; transform: translateX(-50%); }
.vd-bar-mark span { position: absolute; top: 100%; right: 0; margin-top: 4px; font-size: 11.5px; color: var(--vd-t2); white-space: nowrap; }
.vd-camp-t { color: var(--vd-t2); font-size: 13px; }
.vd-more { justify-self: center; margin-bottom: 4px; }
@media (max-width: 520px) { .vd-bar-mark span { font-size: 10.5px; } }

/* ---- "Ver como" (admin) + mini-barras por vendedora (2026-08-25) ---- */
.vd-ver { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--vd-bg); border: 1px solid var(--vd-b); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
.vd-ver label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.vd-ver select { font: inherit; font-size: 14px; background: var(--vd-in); color: var(--vd-t); border: 1px solid var(--vd-b); border-radius: 10px; padding: 7px 10px; }
.vd-ver-msg { color: var(--vd-warn); font-weight: 600; font-size: 13.5px; }
.vd.vd-vercomo .vd-grid { outline: 2px dashed var(--vd-warn); outline-offset: 4px; border-radius: 14px; }
.vd-minis { display: grid; gap: 8px; }
.vd-mini { display: grid; grid-template-columns: 130px minmax(120px, 1fr) auto; gap: 12px; align-items: center; background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 10px; padding: 8px 12px; }
.vd-mini.on { border-color: var(--vd-ok); }
.vd-mini .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-mini .pc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.vd-mini .pc small { color: var(--vd-t2); }
.vd-bar.mini { height: 10px; margin: 0; }
.vd-bar.mini .vd-bar-mark { top: -4px; bottom: -4px; width: 2px; }
@media (max-width: 640px) { .vd-mini { grid-template-columns: 1fr; gap: 6px; } }

/* ---- contexto fijo del chat (2026-08-25) ---- */
.vd-ctx { flex-wrap: wrap; }
.vd-ctx select { flex: 1; min-width: 160px; font: inherit; font-size: 13px; background: var(--vd-bg2); color: var(--vd-t); border: 1px solid var(--vd-b); border-radius: 8px; padding: 4px 8px; }
.vd-bub.ctx { border-left: 3px solid var(--vd-acc); }

/* ---- Para retomar (2026-08-25): sugerencias, no pendientes ---- */
.vd-retomar { border-top: 1px dashed var(--vd-b); }
.vd-retomar > summary { cursor: pointer; padding: 10px 16px; font-weight: 700; color: var(--vd-t2); list-style: none; }
.vd-retomar > summary::-webkit-details-marker { display: none; }
.vd-retomar > summary::before { content: "▸ "; }
.vd-retomar[open] > summary::before { content: "▾ "; }
.vd-retomar > summary small { font-weight: 500; font-size: 12px; margin-left: 6px; }
.vd-ret-list { display: grid; gap: 8px; padding: 0 12px 12px; max-height: 40vh; overflow: auto; }
.vd-ret { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--vd-bg2); border: 1px solid var(--vd-b); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.vd-ret .f { color: var(--vd-t2); font-size: 12.5px; }
@media (max-width: 640px) { .vd-ret { flex-direction: column; align-items: stretch; } }