/* Piezas reutilizables: botones, campos, etiquetas de estado,
   tabla, tarjetas, vista previa del mensaje, registro, panel lateral */

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong);
  background:var(--surface); border-radius:8px; padding:7px 13px; cursor:pointer;
  font-size:13px; font-weight:500; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.danger{color:var(--err); border-color:var(--err-bd)}
.btn.danger:hover{background:var(--err-bg)}
.btn.sm{padding:5px 10px; font-size:12px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:16px}
.field label{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.field .hint{font-size:11.5px; color:var(--faint); line-height:1.45}
input[type=text],input[type=url],select,textarea{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 10px; width:100%; font-size:13.5px;
}
textarea{resize:vertical; min-height:96px; line-height:1.55}
input:disabled{background:var(--surface-2); color:var(--faint)}
.err-msg{color:var(--err); font-size:11.5px; font-weight:500}

/* ---------- pills & badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 9px;
  font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.st-APPROVED{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd)}
.st-PENDING{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd)}
.st-REJECTED{background:var(--err-bg); color:var(--err); border-color:var(--err-bd)}
.st-PAUSED,.st-DRAFT{background:var(--slate-bg); color:var(--slate); border-color:var(--slate-bd)}
.st-PENDING .dot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Fichas: prioridad y estado (misma paleta que los estados de plantilla) */
.pr-alta{background:var(--err-bg); color:var(--err); border-color:var(--err-bd)}
.pr-media{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd)}
.pr-baja{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd)}
.ef-validado{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd)}
.ef-borrador{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd)}
.ef-archivado{background:var(--slate-bg); color:var(--slate); border-color:var(--slate-bd)}
.tag{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:2px 7px; border-radius:5px; background:var(--surface-3); color:var(--muted);
}
.perm{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; background:var(--accent-soft);
  color:var(--accent); padding:2px 6px; border-radius:5px; font-weight:500;
}

/* ---------- toolbar / filters ---------- */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.search{position:relative; flex:1 1 220px; max-width:320px}
.search input{padding-left:32px}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.5}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid var(--border-strong); background:var(--surface); border-radius:999px;
  padding:5px 11px; font-size:12.5px; cursor:pointer; display:flex; gap:6px; align-items:center;
}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.chip b{font-variant-numeric:tabular-nums; opacity:.65; font-weight:600}
/* .fchip: mismo aspecto que .chip, para los filtros de Fichas. Clase aparte
   a propósito — .chip ya lo intercepta el núcleo (js/app.js) a nivel de
   documento, así que un filtro de fichas con esa clase nunca se vería. */
.fchip{
  border:1px solid var(--border-strong); background:var(--surface); border-radius:999px;
  padding:5px 11px; font-size:12.5px; cursor:pointer; display:flex; gap:6px; align-items:center;
}
.fchip:hover{background:var(--surface-2)}
.fchip[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.fchip b{font-variant-numeric:tabular-nums; opacity:.65; font-weight:600}

/* ---------- table ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.tablewrap{overflow-x:auto; border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  font-weight:600; padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
.tprev.rejected{color:var(--err)}
.tname{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500}
.tprev{color:var(--faint); font-size:12px; margin-top:2px; max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.num{font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.empty{padding:56px 20px; text-align:center; color:var(--faint)}

/* ---------- editor ---------- */
.editor{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card h3{font-size:13.5px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.card h3 .n{
  width:19px; height:19px; border-radius:5px; background:var(--surface-3); color:var(--muted);
  display:grid; place-items:center; font-size:11px; font-family:"IBM Plex Mono",monospace;
}
.radios{display:grid; gap:8px}
.radio{
  display:flex; gap:9px; align-items:flex-start; border:1px solid var(--border-strong);
  border-radius:8px; padding:10px 12px; cursor:pointer;
}
.radio:hover{background:var(--surface-2)}
.radio input{margin-top:2px; accent-color:var(--accent)}
.radio.sel{border-color:var(--accent); background:var(--accent-soft)}
.radio b{font-size:13px; display:block; font-weight:600}
.radio span{font-size:11.5px; color:var(--muted)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 150px; min-width:0}
.counter{font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; margin-left:auto}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.varlist{display:grid; gap:8px}
.varrow{display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:center}
.varrow .k{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); font-weight:500}
.btnitem{display:grid; grid-template-columns:110px 1fr auto; gap:8px; align-items:start; margin-bottom:10px}
.btnitem > .tag{margin-top:9px}
.icon-btn{background:none; border:0; cursor:pointer; color:var(--faint); padding:5px; border-radius:6px; line-height:0}
.icon-btn:hover{background:var(--surface-2); color:var(--err)}
.sticky{position:sticky; top:88px}

/* ---------- categorías de fichas (panel de la derecha) ---------- */
.catlegend{display:grid; gap:6px}
.catitem{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px}
.catitem b{font-size:12.5px; display:block; font-weight:600}
.catitem span{font-size:11.5px; color:var(--muted); display:block; margin-top:1px}
.catitem.sel{border-color:var(--accent); background:var(--accent-soft)}

/* ---------- phone preview ---------- */
.phone{
  border:1px solid var(--border-strong); border-radius:20px; overflow:hidden;
  background:var(--chat-bg); box-shadow:var(--shadow);
}
.phone-top{
  background:var(--surface-2); border-bottom:1px solid var(--border);
  padding:10px 14px; display:flex; align-items:center; gap:9px;
}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--slate-bg); color:var(--slate);
  display:grid; place-items:center; font-size:11px; font-weight:700; font-family:Archivo}
.phone-top b{font-size:12.5px; font-weight:600}
.phone-top small{display:block; font-size:10.5px; color:var(--faint)}
.chat{padding:16px 12px 20px; min-height:210px;
  background-image:radial-gradient(circle at 1px 1px, rgba(128,120,110,.16) 1px, transparent 0);
  background-size:16px 16px;}
.bubble{
  background:var(--bubble); border:1px solid var(--bubble-bd); border-radius:10px 10px 10px 3px;
  padding:9px 11px; font-size:13px; max-width:250px; box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.bubble .bhead{font-weight:600; margin-bottom:5px; font-size:13px}
.bubble .bimg{
  height:74px; border-radius:6px; margin:-2px 0 7px; background:var(--surface-3);
  display:grid; place-items:center; color:var(--faint); font-size:10.5px; letter-spacing:.05em;
}
.bubble .bbody{white-space:pre-wrap; word-break:break-word}
.bubble .bfoot{color:var(--faint); font-size:11px; margin-top:6px}
.bubble .btime{text-align:right; color:var(--faint); font-size:10px; margin-top:3px}
.bbtns{margin-top:6px; display:grid; gap:3px}
.bbtn{
  background:var(--bubble); border:1px solid var(--bubble-bd); border-top:0;
  text-align:center; padding:7px; font-size:12.5px; color:var(--accent); font-weight:500;
}
.bbtn:first-child{border-top:1px solid var(--bubble-bd); border-radius:0 0 3px 3px}
.var-hl{background:var(--accent-soft); color:var(--accent); border-radius:3px; padding:1px 1px; font-weight:500}

/* ---------- payload / log ---------- */
pre.json{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:12px; overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  line-height:1.6; margin:0; color:var(--muted);
}
details.acc{border-top:1px solid var(--border); padding-top:12px; margin-top:14px}
details.acc > summary{cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); list-style:none; display:flex; gap:6px; align-items:center}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::before{content:"▸"; font-size:10px; transition:transform .15s}
details.acc[open] > summary::before{transform:rotate(90deg)}
details.acc > div{margin-top:10px}

.logitem{border-bottom:1px solid var(--border); padding:12px 16px}
.logitem:last-child{border-bottom:0}
.loghead{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.method{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500; padding:2px 6px;
  border-radius:4px; background:var(--accent-soft); color:var(--accent); letter-spacing:.03em;
}
.method.del{background:var(--err-bg); color:var(--err)}
.method.hook{background:var(--ok-bg); color:var(--ok)}
.logpath{font-family:"IBM Plex Mono",monospace; font-size:12px; word-break:break-all}
.logmeta{font-size:11.5px; color:var(--faint); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.ok-code{color:var(--ok); font-weight:600}
.bad-code{color:var(--err); font-weight:600}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ---------- drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(15,14,19,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s}
.overlay.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(460px,100%); background:var(--surface);
  border-left:1px solid var(--border); z-index:61; transform:translateX(101%); transition:transform .22s ease;
  display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:flex-start}
.drawer-body{padding:18px 20px; overflow-y:auto; flex:1}
.drawer-foot{padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:8px; flex-wrap:wrap; background:var(--surface-2)}
.kv{display:grid; grid-template-columns:112px 1fr; gap:6px 12px; font-size:12.5px; margin-bottom:16px}
.kv dt{color:var(--faint)}
.kv dd{margin:0; font-weight:500}
.notice{
  border-radius:8px; padding:10px 12px; font-size:12.5px; display:flex; gap:9px; align-items:flex-start;
  border:1px solid var(--border); background:var(--surface-2); line-height:1.5;
}
.notice.warn{background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn)}
.notice.err{background:var(--err-bg); border-color:var(--err-bd); color:var(--err)}
.notice.ok{background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok)}

/* ---------- toasts ---------- */
.toasts{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(440px,calc(100% - 32px))}
.toast{
  background:var(--text); color:var(--bg); border-radius:9px; padding:10px 14px; font-size:13px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5); display:flex; gap:9px; align-items:center; width:100%;
  animation:rise .2s ease;
}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
.toast .tdot{width:7px; height:7px; border-radius:50%; flex:none}

/* ---------- segmented ---------- */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:8px; padding:2px}
.seg button{background:none; border:0; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08)}

.mode-pill{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); padding:6px 8px; border-radius:7px; background:var(--surface-2)}
.mode-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--warn); flex:none}
.mode-pill.live .dot{background:var(--ok)}

/* ---------- mensajes (bandeja tipo WhatsApp Web) ---------- */
/* La bandeja usa todo el ancho disponible (más aún con la barra plegada). */
#view-mensajes.wrap{max-width:none}
.msgs{
  /* La fila de la cuadrícula tiene que poder encogerse (minmax(0,1fr)): si
     no, crece con el contenido, el hilo nunca hace scroll y la caja de
     texto se va hacia abajo con cada mensaje. */
  display:grid; grid-template-columns:300px 1fr; grid-template-rows:minmax(0, 1fr);
  height:calc(100vh - 158px); min-height:440px;
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow);
}
.msgs-list{border-right:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; min-width:0; min-height:0}
.msgs-search{padding:10px; border-bottom:1px solid var(--border)}
.msgs-search .search{max-width:none}
.convitem{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; cursor:pointer; border-bottom:1px solid var(--border)}
.convitem:hover{background:var(--surface-2)}
.convitem.sel{background:var(--accent-soft)}
.convitem .avatar{width:36px; height:36px; font-size:13px}
.convrow{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.convrow + .convrow{margin-top:2px}
.convname{font-size:13.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.convtime{font-size:10.5px; color:var(--faint); flex:none}
.convprev{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.convbadge{
  background:var(--accent); color:var(--accent-ink); border-radius:999px; min-width:17px; height:17px;
  font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; flex:none;
}
.msgs-thread{display:flex; flex-direction:column; min-width:0; min-height:0}
.thread-empty{display:flex; align-items:center; justify-content:center; height:100%; color:var(--faint); font-size:13px; text-align:center; padding:24px}
.thread-head{padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex:none}
.thread-back{display:none}
.thread-body{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; min-height:0;
  background:var(--chat-bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(128,120,110,.16) 1px, transparent 0); background-size:16px 16px;
}
.msgrow{display:flex}
.msgrow.out{justify-content:flex-end}
.msgbubble{
  max-width:70%; background:var(--bubble); border:1px solid var(--bubble-bd); border-radius:10px 10px 10px 3px;
  padding:8px 10px; font-size:13px; box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.msgrow.out .msgbubble{background:var(--accent-soft); border-color:var(--accent); border-radius:10px 10px 3px 10px}
.msgbubble .mtext{white-space:pre-wrap; word-break:break-word}
.msgbubble .mtime{display:block; text-align:right; font-size:10px; color:var(--faint); margin-top:3px}
.thread-foot{border-top:1px solid var(--border); padding:10px 12px; display:flex; gap:8px; align-items:flex-end; flex:none}
.thread-foot textarea{resize:none; min-height:38px; max-height:120px; flex:1; overflow-y:auto}

@media (max-width:940px){
  .msgs{height:calc(100vh - 220px)}
  .msgs-list{border-right:0}
  .msgs,.msgs-list,.msgs-thread{grid-template-columns:1fr; display:block}
  .msgs-thread{display:none; position:relative}
  .msgs.thread-open .msgs-list{display:none}
  .msgs.thread-open .msgs-thread{display:flex; flex-direction:column; height:100%}
  .thread-back{display:inline-flex}
}

/* ---------- envío masivo ---------- */
#view-masivo.wrap{max-width:1360px}
.mv > *{min-width:0}   /* sin esto, la tabla ancha estira la página en celular */
.mv .hint{font-size:11.5px; color:var(--faint); line-height:1.45}
.mv-side{max-height:calc(100vh - 100px); overflow-y:auto; padding-bottom:4px}
.mv-side .card{margin-top:14px}
.mv-h3extra{margin-left:auto; font:400 12px "IBM Plex Sans",system-ui,sans-serif; color:var(--faint)}
.mv-barra{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.mv-barra select{width:auto; max-width:100%; min-width:0}
.mv-barra .search{flex:1 1 200px; max-width:300px}
.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.mv-confirma{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; color:var(--err); flex-wrap:wrap}
.mv-check{display:inline-flex; gap:7px; align-items:center; font-size:12.5px; color:var(--muted); cursor:pointer}
.mv-check input,.mv-tabla input[type=checkbox],.mv-pick input{accent-color:var(--accent)}
.mv-panel{border:1px solid var(--border-strong); border-radius:8px; padding:12px; margin-bottom:12px; background:var(--surface-2)}
.mv-panel textarea{min-height:120px; font-family:"IBM Plex Mono",monospace; font-size:12.5px}
.mv-picklist{max-height:280px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:8px}
.mv-pick{display:flex; gap:9px; align-items:center; padding:7px 10px; border-bottom:1px solid var(--border); cursor:pointer; font-size:13px}
.mv-pick:last-child{border-bottom:0}
.mv-pick:hover{background:var(--surface-2)}
.mv-pick.ya{opacity:.6; cursor:default}
.mv-pickn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mv-pickt{font-size:12px; color:var(--muted)}
.mv-tag{display:inline-block; font-size:10px; font-weight:600; letter-spacing:.02em; padding:1px 6px; border-radius:999px;
  background:var(--surface-3); color:var(--muted); margin-left:6px; white-space:nowrap; vertical-align:1px}
.mv-tag.ok{background:var(--ok-bg); color:var(--ok)}
.mv-tag.warn{background:var(--warn-bg); color:var(--warn)}
.mv-tablewrap{box-shadow:none}
.mv-tabla th{padding:9px 10px}
.mv-tabla td{padding:6px 10px}
.mv-tabla tbody tr{cursor:default}
.mv-tabla tbody tr.sel td{background:var(--accent-soft)}
.mv-tabla tbody tr.off td{opacity:.55}
.mv-tabla input.mv-in{padding:5px 8px; font-size:12.5px; min-width:130px}
.mv-tabla input.mv-in[aria-invalid="true"]{border-color:var(--warn-bd); background:var(--warn-bg)}
.mv-tabla input.mv-in[aria-invalid="true"]::placeholder{color:var(--warn)}
.mv-tel{white-space:nowrap; font-size:12.5px}
.mv-vacio{padding:30px 16px; border:1px dashed var(--border-strong); border-radius:8px}
.mv-pag{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:10px; font-size:12px; color:var(--muted)}
.mv-guardar{margin:14px 0 4px}
.mv-guardar input{flex:1 1 220px; max-width:360px}
.mv-tplinfo{display:flex; gap:8px; align-items:center; margin:-4px 0 14px}
.mv-globales{display:grid; gap:10px}
.mv-grow{display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:4px 10px; align-items:center}
.mv-gk{display:flex; flex-direction:column; min-width:0}
.mv-gk code{font-size:12px; color:var(--accent); font-weight:500}
.mv-gk span{font-size:11px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mv-gw{grid-column:2; font-size:11.5px}
.mv-gw:empty{display:none}
.mv-warn-t{color:var(--warn); font-weight:600}
.mv-err-t{color:var(--err)}
.mv-miss{background:var(--warn-bg); color:var(--warn); border-radius:3px; padding:0 2px; font-family:"IBM Plex Mono",monospace; font-size:12px}
.mv-problemas{margin:0 0 12px; padding-left:18px; font-size:12.5px; color:var(--muted); display:grid; gap:6px}
.mv-prog{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.mv-prog > div{height:100%; background:var(--accent); transition:width .25s}
.mv-progtxt{font-size:12.5px; color:var(--muted); margin-top:8px}
.mv-resumen{margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.mv-cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin-bottom:12px}
.mv-cifras > div{background:var(--surface-2); border-radius:8px; padding:8px 10px}
.mv-cifras b{display:block; font-family:Archivo,sans-serif; font-size:18px; font-variant-numeric:tabular-nums}
.mv-cifras span{font-size:11px; color:var(--faint)}
.mv-motivos{margin:0 0 10px; padding-left:18px; font-size:12px; color:var(--muted)}
.mv-kv{grid-template-columns:92px 1fr; margin-bottom:10px}
.mv-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--border); padding-top:10px}
.mv-total span{font-size:12px; color:var(--muted); font-weight:600}
.mv-total b{font-family:Archivo,sans-serif; font-size:20px; font-variant-numeric:tabular-nums}
.mv-real{font-size:12px; color:var(--ok); margin-top:6px}
.mv-notas{margin-top:10px; font-size:11.5px; color:var(--faint); line-height:1.45}
.mv-notas p{margin:0 0 6px}
.mv-notas b{color:var(--warn)}
/* Estado de cada destinatario (misma paleta que las plantillas) */
.mvs-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd)}
.mvs-acc{background:var(--accent-soft); color:var(--accent)}
.mvs-warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd)}
.mvs-err{background:var(--err-bg); color:var(--err); border-color:var(--err-bd)}
.mvs-slate{background:var(--slate-bg); color:var(--slate); border-color:var(--slate-bd)}
.mvs-list{color:var(--muted); border-color:var(--border-strong)}
.mvs-run{background:var(--accent-soft); color:var(--accent)}
.mvs-run .dot{animation:pulse 1.2s ease-in-out infinite}
.pill[title]{cursor:help}
@media (max-width:940px){
  .mv-side{max-height:none; overflow:visible}
}
@media (max-width:640px){
  .mv-grow{grid-template-columns:1fr}
  .mv-gw{grid-column:1}
}