/* ═══════════════════════════════════════════════════════════════════════════════════════════
   RECORD PANEL v2 — rediseño "HubSpot" (2026-07-19). Hoja propia del drawer/overlay global de
   registro (record-panel.js). Cargada desde index.html como ULTIMA hoja del head: debe ir tras
   datalyse-theme.css (los tokens --rp-* delegan en --text-color/--white-color/--border-color del
   puente 165_varsfusion.css, que conmutan solos con [data-bs-theme]) y su regla body.rp-open
   compite con el z-index del topbar (datalyse-theme.css:967).

   Geometria: drawer 480px pegado a la derecha (base) | overlay centrado con margen 3% y grid de
   3 columnas cuando .wide y viewport >=1100px | fullscreen <=600px.
   Contratos JS que NO se pueden tocar: ids #rp-*, clases show/wide/disabled/is-active/editing/
   saving/invalid/rp-prow/pv/rp-fitem/rp-busca/inv-list/cnt/rp-loading, body.rp-open (datalyse-
   sidebar.css:808), y los style="display:none" que el JS togglea (#rp-prev/#rp-next/.rp-busca/
   #rp-feedmore).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 01 · tokens ────────────────────────────────────────────────────────────────────────────
   familia --sal-* de sales.html: acento azul, muted/faint derivados de --text-color via
   color-mix, superficie/borde delegadas. v2 añade fondo-app vs card (elevacion HubSpot). */
:root{
  --rp-topbar:70px;
  --rp-accent:var(--dt-cta,#111110); --rp-accent-soft:var(--dt-hover,rgba(15,15,15,.045)); --rp-accent-fg:var(--dt-cta-fg,#fff);
  --rp-ink:var(--dt-text,var(--text-color,#171c2e));
  --rp-surface:var(--dt-surface,var(--white-color,#fff));
  --rp-border:var(--dt-border,var(--border-color,#e3e6f0));
  --rp-muted:var(--dt-muted,color-mix(in srgb,var(--text-color,#171c2e) 62%,transparent));
  --rp-faint:var(--dt-faint,color-mix(in srgb,var(--text-color,#171c2e) 45%,transparent));
  --rp-hover:var(--dt-hover);
  --rp-thumb:color-mix(in srgb,var(--text-color,#171c2e) 22%,transparent);
  --rp-ok:var(--dt-success); --rp-bad:#c22432; --rp-bad-soft:rgba(220,38,38,.10);
  --rp-scrim:var(--dt-backdrop,rgba(15,15,15,.44));
  --rp-shadow:none; /* 26-10: las capas se separan por su borde de 1 px, no por sombra */
  /* v2: fondo de app (gris) sobre el que flotan las cards */
  --rp-bg:var(--dt-surface,var(--white-color,#fff)); /* 26-10: una sola superficie, fondo = card */
  --rp-card:var(--dt-surface,var(--white-color,#fff));
  --rp-card-border:var(--dt-border,var(--border-color,#e3e6f0));
  --rp-card-shadow:none;
  --rp-menu-shadow:var(--dt-pop-shadow,none);
  --rp-r-card:var(--dt-surface); --rp-r-ctl:8px; --rp-r-item:8px;
}
[data-bs-theme="dark"]:root{
  --rp-accent:var(--dt-cta,#ededeb); --rp-accent-soft:var(--dt-hover,rgba(255,255,255,.055)); --rp-accent-fg:var(--dt-cta-fg,#111110);
  --rp-ok:var(--dt-success); --rp-bad:#f27584; --rp-bad-soft:rgba(242,117,132,.14);
  --rp-scrim:var(--dt-backdrop,rgba(0,0,0,.7));
  --rp-shadow:none;
  /* en dark el fondo va MAS oscuro que la card (elevacion correcta) */
  --rp-bg:var(--dt-surface,var(--white-color,#1c1c1d));
  --rp-card-shadow:none;
  --rp-menu-shadow:var(--dt-pop-shadow,none);
}

/* ── 02 · scrim + topbar ── */
#rp-scrim{position:fixed;inset:0;background:var(--rp-scrim);opacity:0;pointer-events:none;transition:opacity .18s;z-index:1039}
#rp-scrim.show{opacity:1;pointer-events:auto}
/* scrim y overlay por encima de menu y topbar: body.rp-open los baja replicando body.modal-open
   (topbar z:3000! en datalyse-theme.css:967; el sidebar z:3001! lleva :not(.rp-open) en
   datalyse-sidebar.css:808). Con el overlay al 3% esta regla es OBLIGATORIA: el panel invade
   la franja del topbar. */
body.rp-open:not(.rp-wide) .topbar,body.rp-open:not(.rp-wide) .app-header,body.rp-open:not(.rp-wide) .header,body.rp-open:not(.rp-wide) .navbar.topbar{z-index:1030 !important}

/* ── 03 · shell (drawer base) ── */
#rp-panel{
  position:fixed;top:var(--rp-topbar);right:0;bottom:0;width:min(480px,94vw);z-index:1040;
  background:var(--rp-bg);color:var(--rp-ink);
  border-left:1px solid var(--rp-border);border-top:1px solid var(--rp-border);border-top-left-radius:14px;
  box-shadow:none;
  transform:translateX(103%);
  transition:transform .22s cubic-bezier(.3,.9,.3,1),width .22s;
  display:flex;flex-direction:column;font-size:13.5px;
}
/* transform:none (NO translateX(0)): un transform != none convierte al panel en containing block
   y los .rp-menu position:fixed se posicionarian relativos al panel (descolocados). La transicion
   interpola none como identidad, asi que el slide-in no cambia. */
#rp-panel.show{transform:none}
/* reset de botones con especificidad CERO en el id (:where): cualquier clase del panel gana sin
   !important; los globales de la app (button a nivel de elemento) pierden por orden de cascada */
:where(#rp-panel) button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:4px}
#rp-panel :is(button,select):focus-visible{outline:2px solid var(--rp-accent);outline-offset:2px}
#rp-panel :is(input,textarea):focus-visible{outline:none} /* el editor inline ya pinta borde accent */
#rp-head{padding:14px 16px 0;flex:none}

/* ── 04 · chrome (.rp-win) ── */
.rp-win{margin-left:auto;display:flex;gap:2px;flex:none;align-items:flex-start}
#rp-panel .rp-win button{padding:7px;border-radius:8px;color:var(--rp-muted);transition:background .12s,color .12s}
#rp-panel .rp-win button:hover{background:var(--rp-hover);color:var(--rp-ink)}
/* pointer-events con !important: 165_behaviours.css:1388 lleva button:disabled{pointer-events:all !important} */
#rp-panel .rp-win button[disabled]{opacity:.35;pointer-events:none !important}

/* ── 05 · card identidad (.rp-top + #rp-quick = card partida) ── */
.rp-top{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--rp-card);border:0;border-bottom:0;
  border-radius:var(--rp-r-card) var(--rp-r-card) 0 0;box-shadow:none;
  padding:16px 16px 6px;
}
#rp-avatar{width:44px;height:44px;font-size:16px;border-radius:12px;background:var(--rp-av,#2563eb);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
[data-bs-theme="dark"] #rp-avatar{background:color-mix(in srgb,var(--rp-av,#5d8bff) 28%,transparent);color:color-mix(in srgb,var(--rp-av,#5d8bff) 55%,#fff)}
.rp-idbox{min-width:0;flex:1}
.rp-idbox h2{margin:0;font-size:16.5px;font-weight:650;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rp-sub{color:var(--rp-muted);font-size:12px;margin-top:2px}
#rp-meta{margin-top:5px;font-size:12.5px;color:var(--rp-muted);display:flex;align-items:center;flex-wrap:wrap;gap:3px 0;min-width:0}
#rp-meta:empty{display:none}
#rp-meta .mi{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rp-meta .mi .ti{color:var(--rp-faint);font-size:13px;flex:none}
#rp-meta .mdot{margin:0 7px;color:var(--rp-faint)}
#rp-panel .rp-accbtn{
  display:inline-flex;align-items:center;gap:5px;padding:6px 11px;margin-right:4px;flex:none;
  border:0;border-radius:9px;background:var(--rp-card);
  font-size:12.5px;font-weight:600;color:var(--rp-muted);white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;
}
#rp-panel .rp-accbtn:hover{border-color:color-mix(in srgb,var(--rp-accent) 45%,transparent);color:var(--rp-accent);background:var(--rp-accent-soft)}
#rp-panel .rp-accbtn .ti{font-size:13px}
#rp-quick{
  display:flex;justify-content:center;align-items:flex-start;gap:12px 8px;margin:0;
  flex-wrap:wrap; /* fallback sin container queries: mejor 2 filas que sobresalir de la card */
  background:var(--rp-card);border:0;border-top:0;
  border-radius:0 0 var(--rp-r-card) var(--rp-r-card);box-shadow:none;
  padding:8px 10px 14px;
}
/* SIEMPRE una fila (peticion Marc): con container queries los circulos se encogen en columnas
   estrechas (la izq del overlay baja a 300px) en vez de saltar de linea */
@supports (container-type: inline-size){
  #rp-quick{flex-wrap:nowrap;container-type:inline-size;gap:12px 6px}
  @container (max-width:330px){
    #rp-panel .rp-qa{font-size:10px;gap:4px}
    #rp-panel .rp-qa i{width:34px;height:34px;font-size:15px}
    #rp-panel .rp-qa span{max-width:52px}
  }
  @container (max-width:280px){
    #rp-panel .rp-qa i{width:30px;height:30px;font-size:13.5px}
    #rp-panel .rp-qa span{max-width:44px}
  }
}
/* accion circular con label debajo (HubSpot) */
#rp-panel .rp-qa{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px;border:0;background:none;font-size:11px;font-weight:600;color:var(--rp-muted);transition:color .15s;min-width:0}
#rp-panel .rp-qa span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rp-panel .rp-qa i{
  width:40px;height:40px;border-radius:50%;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:var(--rp-card);
  transition:border-color .15s,background .15s,color .15s;
}
#rp-panel .rp-qa:hover{color:var(--rp-accent)}
#rp-panel .rp-qa:hover i{border-color:color-mix(in srgb,var(--rp-accent) 45%,transparent);background:var(--rp-accent-soft);color:var(--rp-accent)}
#rp-panel .rp-qa.disabled{opacity:.4;pointer-events:none}

/* ── 06 · menu desplegable (.rp-menuwrap/.rp-menu): Acciones, Mas y More del feed ── */
.rp-menuwrap{position:relative;display:inline-flex}
.rp-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:6;display:none;min-width:210px;
  background:var(--rp-card);border:0;border-radius:10px;
  box-shadow:none;padding:6px;
}
/* abierto: rp_menu() lo pasa a FIXED con coordenadas del trigger (los scrollers del panel — #rp-feed
   en overlay — recortan un absolute); pop de entrada estilo dropdown global de la app */
.rp-menuwrap.open .rp-menu{display:block;position:fixed;right:auto;animation:fadeInOnly .22s cubic-bezier(.16,1,.3,1);transform-origin:top right;will-change:transform,opacity}
.rp-menu .mcheck{display:none;margin-left:auto;color:var(--rp-accent);font-size:14px}
#rp-panel .rp-menu button.is-active{color:var(--rp-accent);background:var(--rp-accent-soft)}
#rp-panel .rp-menu button.is-active .mcheck{display:inline-flex}
#rp-panel .rp-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--rp-ink);white-space:nowrap;transition:background .12s}
#rp-panel .rp-menu button:hover{background:var(--rp-hover)}
#rp-panel .rp-menu button .ti{font-size:15px;color:var(--rp-muted);flex:none}
.rp-menu .sep{height:1px;background:var(--rp-border);margin:6px 4px}
/* variante "Mas": buscador arriba + lista scrolleable (estilo menu Mas de HubSpot) */
#rp-masmenu{min-width:240px}
.rp-menu .msearch{display:flex;align-items:center;gap:7px;margin:2px 2px 6px;padding:7px 10px;border:0;border-radius:8px;background:var(--rp-bg)}
.rp-menu .msearch .ti{font-size:14px;color:var(--rp-faint);flex:none}
.rp-menu .msearch input{border:0;outline:none;background:none;font:inherit;font-size:12.5px;color:inherit;width:100%;padding:0}
.rp-menu .mlist{max-height:264px;overflow-y:auto} /* auto-hide del scrollbar: bloque unificado de la seccion 08 */

/* ── 07 · tabs del drawer (Summary/Activity/Related): pastilla rellena solo la activa ── */
#rp-tabs{display:flex;gap:6px;margin-top:12px;padding-bottom:2px}
#rp-panel .rp-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:9px;font-weight:600;font-size:13px;color:var(--rp-muted);transition:background .13s,color .13s,box-shadow .13s}
#rp-panel .rp-tab i{font-size:15px;opacity:.75}
#rp-panel .rp-tab.is-active i{opacity:1}
#rp-panel .rp-tab:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-tab.is-active{background:color-mix(in srgb,var(--rp-accent) 11%,transparent);color:var(--rp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rp-accent) 26%,transparent)}

/* ── 08 · cuerpo (scroller unico del drawer) ── */
#rp-body{flex:1;overflow:auto;padding:14px 16px 24px}
/* scrollbars auto-ocultas en TODOS los scrollers del panel: thumb invisible hasta hover del
   scroller (con rueda/trackpad el cursor esta encima => visible mientras se scrollea).
   Doble via: scrollbar-color (FF/Chrome>=121; si esta seteado Chrome ignora los pseudos webkit)
   + ::-webkit-scrollbar (Safari/Chrome viejos). En tactil el SO ya pinta overlay propio. */
#rp-body,#rp-sum,#rp-feed,#rp-assoc,.rp-group.is-active,.rp-mt4tablewrap,.rp-menu .mlist,.rp-buscares{scrollbar-width:thin;scrollbar-color:transparent transparent}
#rp-body:hover,#rp-sum:hover,#rp-feed:hover,#rp-assoc:hover,.rp-group.is-active:hover,.rp-mt4tablewrap:hover,.rp-menu .mlist:hover,.rp-buscares:hover{scrollbar-color:var(--rp-thumb) transparent}
:is(#rp-body,#rp-sum,#rp-feed,#rp-assoc,.rp-group.is-active,.rp-mt4tablewrap,.rp-menu .mlist,.rp-buscares)::-webkit-scrollbar{width:8px;height:8px}
:is(#rp-body,#rp-sum,#rp-feed,#rp-assoc,.rp-group.is-active,.rp-mt4tablewrap,.rp-menu .mlist,.rp-buscares)::-webkit-scrollbar-track{background:transparent}
:is(#rp-body,#rp-sum,#rp-feed,#rp-assoc,.rp-group.is-active,.rp-mt4tablewrap,.rp-menu .mlist,.rp-buscares)::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:content-box;transition:background-color .2s}
:is(#rp-body,#rp-sum,#rp-feed,#rp-assoc,.rp-group.is-active,.rp-mt4tablewrap,.rp-menu .mlist,.rp-buscares):hover::-webkit-scrollbar-thumb{background:var(--rp-thumb);background-clip:content-box}
#rp-body>section{display:none}
#rp-panel[data-tab="sum"] #rp-sum,#rp-panel[data-tab="act"] #rp-feed,#rp-panel[data-tab="lnk"] #rp-assoc{display:block}

/* ── 09 · summary: tabs de grupos + card de propiedades (label arriba / valor abajo) ── */
.rp-sumtabs{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:2px 2px 10px;position:sticky;top:0;z-index:2;background:var(--rp-bg);
}
.rp-sumtabs::-webkit-scrollbar{display:none}
#rp-panel .rp-stab{flex:none;padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600;color:var(--rp-muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .13s,color .13s,box-shadow .13s}
#rp-panel .rp-stab:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-stab.is-active{background:color-mix(in srgb,var(--rp-accent) 11%,transparent);color:var(--rp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rp-accent) 26%,transparent)}
.rp-group{display:none;background:var(--rp-card);border:0;border-radius:var(--rp-r-card);box-shadow:none;padding:6px;margin:0 0 14px}
.rp-group.is-active{display:block}
.rp-group h3{display:none} /* transicion: el titulo del grupo lo pone su tab */
.rp-prow{display:block;padding:7px 10px;border-radius:var(--rp-r-item);transition:background .12s}
.rp-prow:hover{background:var(--rp-hover)}
.rp-prow .pl{display:block;color:var(--rp-muted);font-size:11.5px;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-prow .pv{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:13.5px}
.rp-prow .pv.empty{color:var(--rp-faint);font-weight:400}
.rp-prow.editable .pv{cursor:pointer}
.rp-prow .pedit{opacity:0;color:var(--rp-faint);font-size:12.5px;margin-left:5px;padding:3px;border-radius:5px;transition:opacity .12s;vertical-align:-2px;cursor:pointer}
.rp-prow.editable:hover .pedit{opacity:.75}
.rp-prow .pedit:hover{opacity:1 !important;background:var(--rp-hover);color:var(--rp-muted)}
/* valor email/telefono accionable: click envia email / marca por webphone; editar solo con el lapiz */
.rp-prow .pv .pva{display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--rp-accent);vertical-align:bottom}
.rp-prow .pv .pva .ti{color:var(--rp-faint);font-size:13px;flex:none}
.rp-prow .pv .pva:hover{text-decoration:underline}
.rp-prow .pv .pva:hover .ti{color:var(--rp-accent)}
/* boton copiar junto al telefono (26-10, record-panel.js rp_panelFilas): solo sale con el numero a la vista */
.rp-prow .pv .pva-copy{border:0;background:none;color:var(--rp-faint);padding:0 4px;vertical-align:bottom;cursor:pointer}
.rp-prow .pv .pva-copy:hover{color:var(--rp-accent)}
.rp-prow .pv .pva:has(+.pva-copy){max-width:calc(100% - 52px)} /* sitio para copiar + lapiz sin clipar el lapiz */
.rp-prow.editing{background:var(--rp-accent-soft)}
.rp-prow.editing .pv{overflow:visible;white-space:normal}
.rp-prow.saving{opacity:.55;pointer-events:none}
.rp-prow .pv input,.rp-prow .pv textarea,.rp-prow .pv select{width:100%;font:inherit;font-size:13px;background:var(--rp-card);border:0;border-radius:var(--rp-r-ctl);padding:6px 9px;outline:none;color:inherit}
.rp-prow .pv textarea{resize:vertical;min-height:160px}
/* props tipo textarea: en lectura se ve multilinea (hasta 8 lineas, luego "..."), no 1 linea con ellipsis */
.rp-prow.ta:not(.editing) .pv{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-height:1.45}
.rp-prow .pv .dui-select{width:100%}
/* chips multi (agents_id/tags): el tema deja .dui-select__tag sin max-width y el span sin
   ellipsis -> un nombre largo desborda .dui-select__value y clipa la x. Scoped a .pv. */
.rp-prow .pv .dui-select__tag{max-width:100%;min-width:0}
.rp-prow .pv .dui-select__tag>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-prow .pv .dui-select__tag-remove{flex:none}
/* select simple: dUI pinta el valor como text node; block+nowrap para 1 linea con ellipsis */
.rp-prow .pv .dui-select:not(.dui-select--multiple) .dui-select__value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* barra guardar/revertir A LA DERECHA del control, en linea (peticion Marc 2026-07) */
.rp-edwrap{display:flex;align-items:center;gap:6px}
.rp-edwrap.ta{align-items:flex-start}
.rp-edwrap .edctl{flex:1;min-width:0}
.rp-edbar{display:flex;gap:5px;align-items:center;flex:none;margin:0}
#rp-panel .rp-edbar .ebtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--rp-r-ctl);border:0;background:var(--rp-card);color:var(--rp-muted)}
#rp-panel .rp-edbar .ebtn:hover{background:var(--rp-accent-soft)}
#rp-panel .rp-edbar .ebtn.ok{background:var(--rp-accent);border-color:var(--rp-accent);color:var(--rp-accent-fg)}
#rp-panel .rp-edbar .ebtn.ok:hover{filter:brightness(1.08)}
.rp-ederr{display:block;color:var(--rp-bad);font-size:11.5px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-ederr:empty{display:none}
.rp-prow .pv input.invalid{border-color:var(--rp-bad)}

/* ── 10 · columna central: destacados + tabs de filtro + timeline como cards ── */
#rp-high{display:none} /* solo overlay (seccion 15) */
/* perfil IA del cliente (superagents-scoring.js). Se ve en overlay Y en drawer; sin
   analisis el div queda vacio y no debe ocupar ni un pixel. */
#rp-sa:empty{display:none}
#rp-sa .sas-card{width:100%;max-width:none;box-sizing:border-box;margin:14px 0}
.rp-fitem.rp-sa-flash{animation:rp-sa-flash 1.6s ease-out}
@keyframes rp-sa-flash{0%,40%{background:rgba(93,135,255,.16)}100%{background:transparent}}
.rp-feedbar{position:sticky;top:0;z-index:2;background:var(--rp-bg);display:flex;align-items:center;gap:8px;padding:2px 0 10px}
/* sin overflow-x: el menu More es absolute y un scroller lo recortaria; si no caben, las tabs saltan de linea */
#rp-feedtabs{display:none;align-items:center;gap:4px;min-width:0;flex:1;flex-wrap:wrap}
#rp-panel .rp-ftab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--rp-muted);transition:background .13s,color .13s,box-shadow .13s}
#rp-panel .rp-ftab:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-ftab.is-active{background:color-mix(in srgb,var(--rp-accent) 11%,transparent);color:var(--rp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rp-accent) 26%,transparent)}
#rp-panel .rp-ftab.more .ti{font-size:13px;color:var(--rp-faint)}
#rp-panel .rp-ftab.more.is-active .ti{color:inherit}
#rp-feedtabs .rp-menu{min-width:190px}
#rp-feedfilter{font:inherit;font-size:12.5px;font-weight:600;background:var(--rp-card);border:0;border-radius:9px;padding:6px 10px;color:inherit}
.rp-fitem{
  display:flex;gap:10px;margin:0 0 10px;padding:12px 14px;
  background:var(--rp-card);border:0;border-radius:10px;
  box-shadow:none;transition:border-color .12s;
}
.rp-fitem:hover{border-color:color-mix(in srgb,var(--rp-ink) 18%,var(--rp-card-border))}
.rp-ficon{width:32px;height:32px;border-radius:50%;background:var(--rp-accent-soft);color:var(--rp-accent);display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.rp-fitem.err .rp-ficon{background:var(--rp-bad-soft);color:var(--rp-bad)}
.rp-fbody{min-width:0;flex:1}
.rp-fhead{font-weight:600;font-size:13px}
.rp-fmeta{color:var(--rp-muted);font-size:11.5px;margin-top:1px}
.rp-ftext{margin-top:5px;font-size:12.5px;overflow-wrap:anywhere}
.rp-ftext .link,.rp-associtem .link{color:var(--rp-accent);cursor:pointer;text-decoration:none}
.rp-factions{margin-top:6px}
#rp-panel .rp-fdel{opacity:0;color:var(--rp-faint);flex:none;padding:4px;border-radius:6px;transition:opacity .12s,color .12s}
.rp-fitem:hover .rp-fdel{opacity:.8}
#rp-panel .rp-fdel:hover{color:var(--rp-bad)}
.rp-fdiff{margin-top:4px;font-size:12px}
.rp-fdiff .fk{display:inline-block;background:var(--rp-accent-soft);color:var(--rp-accent);border-radius:5px;padding:1px 6px;font-weight:600;margin-right:4px}
.rp-fdiff .fold{color:var(--rp-bad);text-decoration:line-through}
.rp-fdiff .fnew{color:var(--rp-ok);font-weight:600}
.rp-ok{color:var(--rp-ok);font-weight:600}
/* ── historial v2: tabla campo / antes → despues por cambio (rama historyvars) ── */
.rp-fhist{margin-top:6px;font-size:12px;display:grid;gap:2px}
.fh-row{display:grid;grid-template-columns:minmax(80px,130px) minmax(0,1fr) auto minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:3px 8px;border-radius:6px}
.fh-row:hover{background:var(--rp-hover)}
.fh-k{color:var(--rp-muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-old{color:var(--rp-faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--rp-bad) 40%,transparent);overflow-wrap:anywhere}
.fh-new{color:var(--rp-ok);font-weight:600;overflow-wrap:anywhere}
.fh-old.vacio,.fh-new.vacio{color:var(--rp-faint);text-decoration:none;font-weight:400}
.fh-row .ti{color:var(--rp-faint);font-size:12px}
.rp-fhead .fhn{color:var(--rp-muted);font-weight:500}
.rp-fhist .fhmore{display:none}
.rp-fhist.todos .fhmore{display:contents} /* contents: las filas plegadas vuelven al grid del contenedor */
#rp-panel .fhtoggle{text-align:left;padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--rp-accent);border-radius:6px}
#rp-panel .fhtoggle:hover{background:var(--rp-accent-soft)}
.rp-fhist:not(.todos) .fhtoggle .vmenos{display:none}
.rp-fhist.todos .fhtoggle .vmas{display:none}
#rp-panel #rp-feedmore{display:block;margin:6px auto 0;padding:8px 18px;border:0;border-radius:var(--rp-r-ctl);background:var(--rp-card);font-weight:600;font-size:12.5px;color:var(--rp-muted);transition:border-color .13s,color .13s}
#rp-panel #rp-feedmore:hover{border-color:var(--rp-accent);color:var(--rp-accent)}
#rp-panel #rp-feedmore[disabled]{opacity:.5;pointer-events:none !important}
.rp-empty{color:var(--rp-muted);text-align:center;padding:26px 12px;font-size:12.5px}
.rp-empty.err{color:var(--rp-bad)}
.rp-fitem audio{max-width:100%;margin-top:6px}
/* ── card de llamada v2: player + duracion + descargar + transcribir ── */
.rp-calldur{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--rp-muted);background:var(--rp-hover);border-radius:6px;padding:3px 8px}
.rp-ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rp-ai-toggle{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:6px;padding:5px 8px;background:var(--rp-surface2,var(--rp-hover));color:var(--rp-ink);font:inherit;font-size:12px;cursor:pointer}
.rp-ai-toggle[hidden]{display:none}
.rp-ai-toggle:hover,.rp-ai-toggle[aria-expanded="true"]{background:var(--rp-hover)}
.rp-ai-toggle:focus-visible{outline:2px solid var(--rp-ink);outline-offset:2px}
.rp-ai-panel{margin-top:10px;min-width:0}
.rp-ai-panel[hidden]{display:none}
.rp-ai-conversation{display:flex;flex-direction:column;gap:12px;max-height:360px;overflow:auto;padding:10px;border:0;border-radius:8px;background:var(--rp-surface2,var(--rp-hover))}
.rp-ai-speaker{font-size:11px;font-weight:600;color:var(--rp-muted);margin-bottom:3px}
.rp-ai-message{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;color:var(--rp-ink)}
.rp-ai-feedback{color:var(--rp-muted);font-size:12px;margin-bottom:8px}
.rp-ai-feedback.is-error{color:var(--rp-bad)}
.rp-loading.rp-ai-loading{flex-direction:row;justify-content:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--rp-border);border-radius:8px;background:var(--rp-surface2,var(--rp-hover));color:var(--rp-ink)}
.rp-loading.rp-ai-loading .spin{flex:none;width:16px;height:16px}
/* «Volver a llamar» de la card de llamada (26-10): prefijo #rp-panel como el resto de botones del panel (gana a los button globales) */
#rp-panel .rp-callback{display:inline-flex;align-items:center;gap:4px;margin-top:6px;margin-left:6px;padding:3px 10px;border:0;border-radius:8px;background:none;color:var(--rp-ink);font-size:12px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s}
#rp-panel .rp-callback:first-child{margin-left:0}
#rp-panel .rp-callback:hover{background:var(--rp-hover);border-color:color-mix(in srgb,var(--rp-accent) 35%,var(--rp-border))}
#rp-panel .rp-callback .ti{font-size:13px;color:var(--rp-muted)}
/* estados y resultado de la transcripcion local (record-panel-asr.js) */
.rp-fitem img.rp-fimg{max-width:100%;border-radius:8px;margin-top:6px;cursor:pointer}
/* ── emails auto-visibles: iframe sandbox colapsado con fade + Expand ── */
.rp-emailwrap{position:relative;max-height:220px;overflow:hidden;margin-top:6px;border-radius:8px}
.rp-emailwrap iframe{display:block;width:100%;height:400px;border:0;border-radius:8px;background:var(--dt-surface)} /* background:#fff deliberado: los emails asumen fondo claro tambien en dark */
.rp-emailwrap.open{max-height:none}
.rp-emailwrap.open iframe{min-height:220px} /* el onload fija height exacta en px; esto es red de seguridad */
.rp-emailwrap:not(.open)::after{content:'';position:absolute;left:1px;right:1px;bottom:1px;height:44px;background:linear-gradient(transparent,#fff);pointer-events:none;border-radius:0 0 8px 8px}
/* banner de imagenes bloqueadas (paridad inbox, 2026-07-28): clicable entero, tokens del theme */
.rp-emailbanner{display:flex;align-items:flex-start;gap:8px;margin-top:6px;margin-bottom:6px;padding:8px 10px;border:0;border-radius:8px;background:var(--rp-accent-soft);color:var(--rp-ink);font-size:11.5px;line-height:1.35;cursor:pointer}
.rp-emailbanner:hover{border-color:color-mix(in srgb,var(--rp-accent) 35%,var(--rp-border))}
.rp-emailbanner i{color:var(--rp-accent);font-size:14px;flex:none;margin-top:1px}
#rp-panel .rp-emailtoggle{display:block;margin-top:4px;padding:4px 8px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--rp-accent)}
#rp-panel .rp-emailtoggle:hover{background:var(--rp-accent-soft)}
.rp-emailwrap.open+.rp-emailtoggle .vmas{display:none}
.rp-emailwrap:not(.open)+.rp-emailtoggle .vmenos{display:none}
.rp-emailld{color:var(--rp-faint)}

/* ── 11 · columna de vinculados: cards de asociacion con items mini-card ── */
.rp-assocblock{background:var(--rp-card);border:0;border-radius:var(--rp-r-card);box-shadow:none;padding:12px 14px;margin-bottom:14px}
.abhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.abhead h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rp-muted);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abhead h3 .cnt{color:var(--rp-muted);font-weight:600;letter-spacing:0}
#rp-panel .abhead .add{margin-left:auto;flex:none;color:var(--rp-accent);font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;transition:background .12s}
#rp-panel .abhead .add:hover{background:var(--rp-accent-soft)}
.rp-associtem{
  display:flex;align-items:flex-start;gap:8px;padding:9px 11px;margin:0 0 8px;
  border:0;border-radius:var(--rp-r-item);background:var(--rp-card);
  font-size:12.5px;transition:border-color .12s;
}
.rp-associtem:hover{border-color:color-mix(in srgb,var(--rp-accent) 35%,var(--rp-border))}
.rp-associtem:last-child{margin-bottom:0}
.rp-associtem .ai{min-width:0;flex:1}
.rp-associtem .ait{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.rp-associtem .link.ait{color:var(--rp-accent)}
.rp-associtem .link.ait:hover{text-decoration:underline}
.rp-associtem .ai small{color:var(--rp-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#rp-panel .rp-associtem .aix{opacity:0;color:var(--rp-faint);padding:3px;border-radius:6px;flex:none;transition:opacity .12s,color .12s}
.rp-associtem:hover .aix{opacity:.8}
#rp-panel .rp-associtem .aix:hover{color:var(--rp-bad)}
.rp-badge{display:inline-block;border-radius:5px;padding:1px 7px;font-size:11px;font-weight:600;background:var(--rp-accent-soft);color:var(--rp-accent)}
/* "Ver todos (n)": 5 items visibles, el resto plegado en .aimore */
.rp-assocblock .aimore{display:none}
.rp-assocblock.todos .aimore{display:block}
#rp-panel .abvermas{display:block;width:100%;text-align:center;margin-top:2px;padding:7px;border-radius:6px;font-size:12px;font-weight:600;color:var(--rp-accent);transition:background .12s}
#rp-panel .abvermas:hover{background:var(--rp-accent-soft)}
.rp-assocblock .abvermas .vmenos{display:none}
.rp-assocblock.todos .abvermas .vmas{display:none}
.rp-assocblock.todos .abvermas .vmenos{display:inline}
/* empty state explicativo */
.rp-empty.compact{padding:14px 10px;border:1px dashed var(--rp-border);border-radius:var(--rp-r-item)}
.rp-empty.compact .ti{display:block;font-size:24px;color:var(--rp-faint);margin-bottom:4px}
.rp-empty.compact span{display:block;font-weight:600;font-size:12.5px;color:var(--rp-muted)}
.rp-empty.compact small{display:block;font-size:11.5px;color:var(--rp-faint);margin-top:2px}
/* el buscador de vincular existentes (.rp-busca/.rp-buscares) vive en la capa #rpb-* desde la r5
   (antes inline en la card): su look esta en la seccion 22; los .bitem, en la seccion final */

/* ── 12 · broker hub MT4 (card estandar; en overlay ocupa la fila superior a todo el ancho) ── */
#rp-mt4:empty{display:none}
#rp-mt4{margin-top:12px}
/* acciones por entidad (budgets/payments v2): mismo patron vacio-se-oculta que #rp-mt4 */
#rp-extraacts:empty{display:none}
#rp-extraacts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
/* banda ancha de productos del budget (view + edicion inline), patron rp-mt4 */
#rp-lineitems:empty{display:none}
#rp-lineitems{margin-top:10px}
#rp-panel .rp-elibtn{color:var(--rp-accent);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;border:0;background:none;cursor:pointer;margin-left:auto;transition:background .12s}
#rp-panel .rp-elibtn:hover{background:var(--rp-accent-soft)}
/* el schema admite hasta 500 lineas: sin tope, la banda tapaba tabs y summary (vive en #rp-head,
   que no scrollea, y en wide en una fila auto de un grid con overflow:hidden) */
.rp-elibody{padding:10px 12px;max-height:280px;overflow:auto}
.rp-eliacts{display:flex;gap:8px;justify-content:flex-end;margin:0;padding:8px 12px;border-top:1px solid var(--rp-border)}
#rp-panel .rp-elisave{background:var(--rp-accent);color:var(--dt-cta-fg);border:0;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
#rp-panel .rp-elisave:hover{filter:brightness(1.08)}
#rp-panel .rp-elicancel{background:none;color:var(--rp-muted);border:0;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
#rp-panel .rp-elicancel:hover{background:var(--rp-hover)}
#rp-panel .rp-xact{color:var(--rp-accent);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;border:0;background:var(--rp-card);transition:background .12s}
#rp-panel .rp-xact:hover{background:var(--rp-accent-soft)}
.rp-mt4card{background:var(--rp-card);border:0;border-radius:var(--rp-r-card);box-shadow:none;overflow:hidden}
.rp-mt4head{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--rp-border);background:var(--rp-hover);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rp-muted)}
#rp-panel .rp-mt4head .mtb{color:var(--rp-accent);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;transition:background .12s}
#rp-panel .rp-mt4head .mtb:hover{background:var(--rp-accent-soft)}
.rp-mt4head .mtb:first-of-type{margin-left:auto}
.rp-mt4tablewrap{overflow:auto;max-height:176px} /* head fijo: con muchas cuentas la tabla scrollea dentro */
.rp-mt4card table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
.rp-mt4card th{font-weight:600;color:var(--rp-muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--rp-border);font-size:11px}
.rp-mt4card td{padding:6px 10px;border-bottom:1px solid color-mix(in srgb,var(--rp-border) 60%,transparent)}
.rp-mt4card tr:last-child td{border-bottom:0}
.rp-mt4bdg{display:inline-block;border-radius:5px;padding:1px 7px;font-size:10.5px;font-weight:700}
.rp-mt4bdg.live{background:color-mix(in srgb,var(--rp-ok) 15%,transparent);color:var(--rp-ok)}
.rp-mt4bdg.demo{background:rgba(240,168,72,.15);color:#f0a848}
#rp-panel .rp-mt4card .mtact{background:var(--rp-accent);color:var(--rp-accent-fg);border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap;padding:4px 9px}
#rp-panel .rp-mt4card .mtact:hover{opacity:.85}
.rp-mt4tot{display:flex;gap:16px;flex-wrap:wrap;padding:8px 12px;font-size:12px;border-top:1px solid var(--rp-border);color:var(--rp-muted)}
.rp-mt4tot b{font-weight:650;color:var(--rp-ink)}

/* ── 13 · footer (solo drawer) ── */
#rp-foot{border-top:1px solid var(--rp-border);background:var(--rp-card);padding:10px 16px;display:flex;align-items:center;gap:10px;flex:none}
#rp-hint{color:var(--rp-muted);font-size:11.5px;margin-left:auto}

/* ── 14 · loading ("cargando": aro girando + texto; sustituye al skeleton de burbujas, 2026-07-19) ── */
.rp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 12px;color:var(--rp-muted);font-size:12.5px}
.rp-loading .spin{width:22px;height:22px;border-radius:50%;border:2px solid color-mix(in srgb,var(--rp-ink) 14%,transparent);border-top-color:var(--rp-ink);animation:rp-spin .8s linear infinite}
@keyframes rp-spin{to{transform:rotate(360deg)}}

/* ── 15 · OVERLAY (.wide en viewport >=1100px): ENCIMA DE LA SECCIÓN, 100% x 100% de la zona de contenido (sin leftbar ni
   topbar; y sin el chat de Dalia si está acoplado), grid 3 columnas (2026-10-21, Marc: "en vez de modal al 100%, encima de la
   sección al 100% x 100% del contenido de la sección menos el sidebar y topbar"). La zona sale de variables en body con los
   mismos selectores que el layout (datalyse-sidebar.css §3/§10/§11); --rp-area-right sigue el ancho del chat acoplado
   mediante body.dalia-docked. Sin scrim: el leftbar y la topbar siguen a la vista y usables (body.rp-wide).
   Todo el modo overlay vive DENTRO de esta media query: en <=1099 no hay nada que revertir. */
body{--rp-area-left:0px;--rp-area-top:var(--dt-topbar-h,44px);--rp-area-right:0px}
body[data-sidebartype="mini-sidebar"]{--rp-area-left:60px}
@media (min-width:1300px){
  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]){--rp-area-left:260px}
}
@media (min-width:1100px){
  body.dalia-docked{--rp-area-right:var(--dalia-dock-w,420px)}
  body.rp-wide #rp-scrim{opacity:0 !important;pointer-events:none !important}
  /* leftbar por encima de la ficha (sus paneles flotantes del rail salen sobre la zona de contenido); con modal o con otra capa
     encima (alta, buscador) vuelve a quedar debajo como siempre */
  body[data-sidebartype].rp-open.rp-wide:not(.modal-open):not(.rpn-open):not(.rpb-open) .left-sidebar{z-index:3001 !important}
  #rp-panel.wide{
    top:var(--rp-area-top);right:var(--rp-area-right);bottom:0;left:var(--rp-area-left);
    width:auto;height:auto;
    border:0;border-radius:0;
    box-shadow:none;
    display:grid;
    grid-template-columns:minmax(320px,380px) minmax(0,1fr) minmax(300px,380px);
    /* filas: 1=mt4|productos (a todo el ancho) · 2=extraacts · 3-5=las 3 columnas */
    grid-template-rows:auto auto auto auto minmax(0,1fr);
    column-gap:16px;row-gap:0;
    padding:46px 16px 16px; /* 46px = franja superior para .rp-win */
    overflow:hidden;
    /* entrada propia de overlay: fade + lift (translateX del drawer no tiene sentido centrado);
       visibility con delay para que cerrado no intercepte clicks ni foco */
    transform:translateY(10px) scale(.985);
    opacity:0;visibility:hidden;
    transition:transform .22s cubic-bezier(.3,.9,.3,1),opacity .18s ease-out,visibility 0s .22s;
  }
  #rp-panel.wide.show{
    transform:none;opacity:1;visibility:visible;
    transition:transform .22s cubic-bezier(.3,.9,.3,1),opacity .18s ease-out,visibility 0s;
  }
  /* head y body se disuelven: sus hijos pasan a ser items del grid */
  #rp-panel.wide #rp-head,#rp-panel.wide #rp-body{display:contents}
  #rp-panel.wide #rp-mt4{grid-area:1/1/2/4;margin:0 0 14px}
  /* R3.6 (peticion Marc): productos del budget arriba del todo IGUAL que las cuentas MT4 — comparten
     la fila 1: nunca coinciden (mt4 solo leads, productos solo budgets). Los botones share/etc de
     extraacts bajan a la fila 2 (en budgets salen las dos bandas: productos ENCIMA de los botones). */
  #rp-panel.wide #rp-lineitems{grid-area:1/1/2/4;margin:0 0 14px}
  #rp-panel.wide #rp-extraacts{grid-area:2/1/3/4;margin:0 0 14px;align-content:start}
  #rp-panel.wide .rp-top{grid-area:3/1/4/2}
  #rp-panel.wide #rp-quick{grid-area:4/1/5/2}
  #rp-panel.wide #rp-sum{grid-area:5/1/6/2;margin-top:16px}
  #rp-panel.wide #rp-feed{grid-area:3/2/6/3}
  #rp-panel.wide #rp-assoc{grid-area:3/3/6/4}
  #rp-panel.wide #rp-body>section{display:block;min-height:0;overflow-y:auto;padding:2px} /* scrollbar: bloque auto-hide de la seccion 08 */
  /* summary: el scroll sale por el INTERIOR de la card blanca activa (peticion Marc), con las
     tabs de grupo quietas encima. Selector con #rp-body> para ganar a la regla de secciones. */
  #rp-panel.wide #rp-body>#rp-sum{display:flex;flex-direction:column;overflow:hidden}
  #rp-panel.wide #rp-sum .rp-sumtabs{flex:none;position:static;padding-bottom:8px}
  #rp-panel.wide #rp-sum .rp-group{margin:0}
  #rp-panel.wide #rp-sum .rp-group.is-active{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  #rp-panel.wide #rp-sum .rp-loading,#rp-panel.wide #rp-sum .rp-empty{flex:none}
  #rp-panel.wide #rp-tabs,#rp-panel.wide #rp-foot{display:none}
  #rp-panel.wide .rp-win{position:absolute;top:8px;right:12px;margin:0}
  #rp-panel.wide #rp-avatar{width:56px;height:56px;font-size:19px;border-radius:16px}
  #rp-panel.wide .rp-idbox h2{font-size:17.5px}
  /* tira de destacados: 3 celdas en card */
  #rp-panel.wide #rp-high{
    display:grid;grid-template-columns:repeat(3,1fr);margin:2px 2px 12px;
    background:var(--rp-card);border:0;border-radius:var(--rp-r-card);
    box-shadow:none;
  }
  #rp-panel.wide #rp-high:empty{display:none}
  #rp-high .hc{padding:12px 16px;min-width:0}
  #rp-high .hc+.hc{border-left:1px solid var(--rp-border)}
  #rp-high .hc small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rp-muted);margin-bottom:3px}
  #rp-high .hc b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* tabs de filtro en vez del select */
  #rp-panel.wide #rp-feedtabs{display:flex}
  #rp-panel.wide #rp-feedfilter{display:none}
  /* la feedbar sticky del overlay pega sobre el fondo del grid (las sumtabs ya son static) */
  #rp-panel.wide .rp-feedbar{top:-2px}
  /* registros sin feed (budgets, feed.soporta='n'): fuera la columna central muerta;
     Vinculados se expande a su sitio (la clase la pone rp_onGetrecord) */
  #rp-panel.wide.nofeed #rp-feed{display:none}
  #rp-panel.wide.nofeed #rp-assoc{grid-area:3/2/6/4}
}

/* ── 16 · wide neutralizado (<=1099px): actua EXACTAMENTE como el drawer ── */
@media (max-width:1099px){
  #rp-panel.wide{width:min(480px,94vw)}
  #rp-expand{display:none}
  #rp-panel .rp-mexpand{display:none} /* sin overlay, el item Expand de los menus no hace nada */
}

/* ── 17 · fullscreen movil (<=600px) ──
   left:0+right:0 en vez de width:100vw (100vw incluye la barra de scroll y desbordaba) */
@media (max-width:600px){
  #rp-panel,#rp-panel.wide{top:0;left:0;width:auto;border-left:0;border-top:0;border-top-left-radius:0}
  #rp-head{padding:calc(10px + env(safe-area-inset-top)) 12px 0}
  .rp-top{gap:10px;padding:12px 12px 4px}
  #rp-accwrap{display:none} /* el circulo Mas ofrece las mismas acciones */
  #rp-body{padding:12px 12px calc(20px + env(safe-area-inset-bottom))}
  #rp-foot{display:none}
  /* sin scroll-x: el menu del circulo Mas es absolute y el scroller lo recortaria; los circulos
     caben en >=360px y si no, saltan de linea */
  #rp-quick{flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 10px 12px;overflow:visible}
  #rp-panel .rp-qa{flex:none;white-space:nowrap}
  #rp-tabs{margin-top:10px}
  #rp-panel .rp-tab{flex:1;text-align:center}
  .rp-prow .pv input,.rp-prow .pv textarea,.rp-prow .pv select,#rp-feedfilter,.rp-busca input{font-size:16px} /* anti-zoom iOS */
  .fh-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .fh-k{grid-column:1/-1}
}

/* ── 18 · capacidades: tactil / sin hover / reduced motion ── */
@media (pointer:coarse){
  #rp-panel .rp-win button{padding:10px}
  /* target tactil 44px SOLO si la card tiene sitio: en columnas estrechas mandan las reglas
     @container de la seccion 05 (sin container queries esta regla no matchea y queda el base 40px) */
  @container (min-width:331px){ #rp-panel .rp-qa i{width:44px;height:44px} }
  #rp-panel .rp-tab{padding:11px 13px}
  #rp-panel .rp-stab,#rp-panel .rp-ftab{padding:9px 13px}
  #rp-panel .rp-edbar .ebtn{width:38px;height:38px}
  #rp-panel #rp-feedmore{padding:10px 18px}
  #rp-panel .rp-menu button{padding:12px 14px}
}
@media (hover:none){
  .rp-prow .pedit,.rp-fdel,.rp-associtem .aix{opacity:.55}
}
/* ── entrada sutil global del template (keyframe fadeInOnly de 165_behaviours.css, convencion
   de la app: .22-.24s out-expo); stagger acotado a 4 delays para no eternizar listas largas ── */
.rp-fitem,.rp-assocblock,.rp-group.is-active{animation:fadeInOnly .24s cubic-bezier(.16,1,.3,1) backwards}
.rp-fitem:nth-child(2),.rp-assocblock:nth-child(2){animation-delay:.03s}
.rp-fitem:nth-child(3),.rp-assocblock:nth-child(3){animation-delay:.06s}
.rp-fitem:nth-child(4),.rp-assocblock:nth-child(4){animation-delay:.09s}
.rp-fitem:nth-child(n+5),.rp-assocblock:nth-child(n+5){animation-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .rp-loading .spin{animation-duration:1.6s}
  #rp-panel,#rp-panel.wide,#rp-panel.wide.show{transition:opacity .15s linear}
  .rp-fitem,.rp-assocblock,.rp-group.is-active,.rp-menuwrap.open .rp-menu{animation:none}
}

/* ── 19 · El buscador interior comparte la superficie de su menú.
   Los campos editables heredan fondo, foco y errores del kit global. */
#rp-panel .rp-menu .msearch input{border:0 !important;background:none !important;border-radius:0 !important;box-shadow:none !important;color:inherit !important;padding:0 !important}

/* ── 20 · botonera del alta (compartida con la capa #rpn-*; el modo embebido .rp-nuevo murio en
   la r3 2026-07-28: el alta vive SIEMPRE en su propia capa, seccion 21) ── */
.rp-newacts{display:flex;gap:8px;margin-left:auto;align-items:center}
.rp-newacts button{font:inherit;cursor:pointer;transition:filter .13s,background .13s,color .13s}
#rp-btncrear{background:var(--rp-accent);color:var(--rp-accent-fg);border:0;border-radius:9px;padding:8px 18px;font-weight:600;min-width:104px}
#rp-btncrear:hover{filter:brightness(1.08)}
#rp-btncrear[disabled]{opacity:.6;cursor:default}
.rp-btncancel{background:var(--rp-card);border:0;color:var(--rp-muted);border-radius:9px;padding:8px 14px;font-weight:600}
.rp-btncancel:hover{background:var(--rp-hover);color:var(--rp-ink)}
.rp-nfrow .nfreq{color:var(--rp-bad);font-weight:700}
.rp-nfchk{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.rp-nfrepeat{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.rp-nfrepeat input[type=number]{width:74px}

/* ── 21 · CAPA DE ALTA (#rpn-*, r3 2026-07-28): drawer propio SOBRE el panel — la ficha de
   debajo queda visible/intacta y cancelar solo cierra esta capa. z: #rp-panel 1040 < #rpb-*
   1042/1043 (capa de vinculo, seccion 22) < scrim 1044 < #rpn-panel 1045 < dUI.Modal 1050+ <
   confirma 1080 < dropdowns dUI.Select 2001. Mismo truco transform:none que el panel (un
   transform != none romperia los position:fixed internos). ── */
body.rpn-open .topbar,body.rpn-open .app-header,body.rpn-open .header,body.rpn-open .navbar.topbar{z-index:1030 !important}
#rpn-scrim{position:fixed;inset:0;background:var(--rp-scrim);opacity:0;pointer-events:none;transition:opacity .18s;z-index:1044}
#rpn-scrim.show{opacity:1;pointer-events:auto}
#rpn-panel{
  position:fixed;top:var(--rp-topbar);right:0;bottom:0;width:min(640px,96vw);z-index:1045;
  background:var(--rp-bg);color:var(--rp-ink);
  border-left:1px solid var(--rp-border);border-top:1px solid var(--rp-border);border-top-left-radius:14px;
  box-shadow:none;
  transform:translateX(103%);
  transition:transform .22s cubic-bezier(.3,.9,.3,1),width .22s;
  display:flex;flex-direction:column;font-size:13.5px;
}
/* El alta comparte el espacio libre del CRM con la columna de IA, también al redimensionarla. */
@media (min-width:641px){
  body.dalia-docked #rpn-panel{
    right:var(--dalia-dock-w,420px);
    width:min(640px,max(0px,calc(100vw - var(--dalia-dock-w,420px) - var(--rp-area-left))));
  }
  body.dalia-docked #rpn-scrim{right:var(--dalia-dock-w,420px)}
}
#rpn-panel:not(.show){visibility:hidden}
#rpn-panel.show{transform:none}
:where(#rpn-panel) button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:4px}
#rpn-panel :is(button,select):focus-visible{outline:2px solid var(--rp-accent);outline-offset:2px}
/* cabecera: identidad de la entidad (icono+color del schema) + titulo con genero correcto */
#rpn-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rp-border);background:var(--rp-card);flex:none;border-top-left-radius:13px}
#rpn-avatar{width:40px;height:40px;font-size:17px;border-radius:11px;background:var(--rp-av,#2563eb);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
[data-bs-theme="dark"] #rpn-avatar{background:color-mix(in srgb,var(--rp-av,#5d8bff) 28%,transparent);color:color-mix(in srgb,var(--rp-av,#5d8bff) 55%,#fff)}
.rpn-idbox{min-width:0;flex:1}
.rpn-idbox h2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rpn-sub{color:var(--rp-muted);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rpn-sub:empty{display:none}
#rpn-panel #rpn-x{padding:8px;border-radius:8px;color:var(--rp-muted);flex:none;transition:background .12s,color .12s}
#rpn-panel #rpn-x:hover{background:var(--rp-hover);color:var(--rp-ink)}
/* cuerpo scrolleable + footer fijo */
#rpn-body{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 24px}
#rpn-lineitems:empty{display:none}
#rpn-lineitems{margin-bottom:14px}
#rpn-foot{border-top:1px solid var(--rp-border);background:var(--rp-card);padding:12px 18px;display:flex;align-items:center;gap:10px;flex:none}
/* scrollbar auto-oculta (mismo patron de la seccion 08) */
#rpn-body{scrollbar-width:thin;scrollbar-color:transparent transparent}
#rpn-body:hover{scrollbar-color:var(--rp-thumb) transparent}
#rpn-body::-webkit-scrollbar{width:8px;height:8px}
#rpn-body::-webkit-scrollbar-track{background:transparent}
#rpn-body::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:content-box;transition:background-color .2s}
#rpn-body:hover::-webkit-scrollbar-thumb{background:var(--rp-thumb);background-clip:content-box}
/* tabs de grupos (gemelas de las #rp-panel .rp-stab de la seccion 09) */
#rpn-panel .rp-stab{flex:none;padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600;color:var(--rp-muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .13s,color .13s,box-shadow .13s}
#rpn-panel .rp-stab:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rpn-panel .rp-stab.is-active{background:color-mix(in srgb,var(--rp-accent) 11%,transparent);color:var(--rp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rp-accent) 26%,transparent)}
/* FORM: card del grupo activo como grid responsive — 2 columnas si el contenedor da >=560px
   (drawer 640px si, movil no); .nf-half media columna, el resto (textarea/html/tags/pickers/
   lineitems/checkbox) a columna completa. Los spans los emite rp_nfSpan en record-panel.js */
#rpn-sum .rp-group{grid-template-columns:minmax(0,1fr);gap:12px 16px;padding:16px}
#rpn-sum .rp-group.is-active{display:grid}
@supports (container-type:inline-size){
  #rpn-body{container-type:inline-size}
  @container (min-width:560px){
    #rpn-sum .rp-group{grid-template-columns:repeat(2,minmax(0,1fr))}
    #rpn-sum .rp-nfrow.nf-half{grid-column:auto}
  }
}
/* filas del form: etiqueta encima del control, sin el padding/hover de las filas de lectura.
   overflow visible: el desplegable .entassoc-results (absolute) se recortaria con el hidden */
#rpn-sum .rp-nfrow{display:block;grid-column:1/-1;padding:0;margin:0;cursor:default}
#rpn-sum .rp-nfrow:hover{background:none}
#rpn-sum .rp-nfrow .pl{display:block;font-size:12px;font-weight:500;color:var(--rp-muted);margin-bottom:5px;white-space:normal;overflow:visible;text-overflow:clip}
#rpn-sum .rp-nfrow .pv{display:block;overflow:visible;white-space:normal;text-overflow:clip}
/* Solo medidas: el kit compartido define fondo, radio, foco y errores. */
#rpn-panel .rp-nfrow .pv :is(input,textarea,select){
  width:100%;font:inherit;font-size:13px;padding:8px 10px;
  transition:border-color .13s,box-shadow .13s;
}
#rpn-panel .rp-nfrow .pv input:disabled{opacity:.6;cursor:not-allowed}
#rpn-panel .rp-nfrow .pv textarea{min-height:96px;resize:vertical}
#rpn-panel .rp-nfrow .pv .dui-select{width:100%}
#rpn-panel .rp-nfrow .rp-ederr{margin-top:4px}
/* excepciones al width:100% de arriba (misma especificidad, orden decide) */
#rpn-panel .rp-nfrow input[type=checkbox]{width:16px;height:16px;accent-color:var(--rp-accent)}
#rpn-panel .rp-nfrepeat input[type=number]{width:74px}
/* picker de asociacion: por fin con CSS real (el markup legacy de entities-client conserva
   estilos inline como fallback: se pisan con !important SOLO en lo que aquel setea) */
.entassoc-picker input{width:100%}
/* campo del padre bloqueado en el alta (lock:'y' en el prefill): el input disabled ya lo estila la
   regla de arriba (#rpn-panel ... input:disabled); aqui solo el candado y el hueco para el */
#rpn-panel .entassoc-picker.locked input{padding-right:32px}
.entassoc-picker.locked{cursor:not-allowed}
.entassoc-picker.locked .ti-lock{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--rp-muted);pointer-events:none;
}
.entassoc-results{
  background:var(--rp-card) !important;border:0 !important;
  border-radius:10px !important;box-shadow:none;
  margin-top:4px;max-height:220px !important;overflow-y:auto;padding:4px;
}
.entassoc-results .entassoc-item{border-radius:6px;cursor:pointer;transition:background .12s}
.entassoc-results .entassoc-item:hover{background:var(--rp-hover)}
/* items de los dropdowns de busqueda (.bitem): mismo look mini-card que .rp-associtem de la
   columna de Vinculados (r3: render unificado en rp_bitemHTML) */
.rp-buscares{padding:6px}
.rp-buscares .bitem{
  display:block;padding:8px 11px;margin:0 0 6px;cursor:pointer;font-size:12.5px;
  border:0;border-radius:var(--rp-r-item);background:var(--rp-card);
  transition:border-color .12s,background .12s;
}
.rp-buscares .bitem:last-child{margin-bottom:0}
.rp-buscares .bitem:hover{background:var(--rp-hover);border-color:color-mix(in srgb,var(--rp-accent) 35%,var(--rp-border))}
.rp-buscares .bitem .ait{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.rp-buscares .bitem small{color:var(--rp-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rp-buscares .bitem.noaction{cursor:default;border-style:dashed;color:var(--rp-muted)}
.rp-buscares .bitem.noaction .ait{font-weight:400}
.rp-buscares .bitem.noaction:hover{background:var(--rp-card);border-color:var(--rp-border)}
.rp-buscares .bnuevo .ait{color:var(--rp-accent)}
/* estado Buscando… de los dropdowns de busqueda (spinner reutiliza @keyframes rp-spin, seccion 14) */
.rp-buscares .bitem.buscando{display:flex;align-items:center;gap:8px}
.rp-buscares .bitem.buscando .ait{flex:1;min-width:0}
.rp-buscares .bitem.buscando .spin{width:13px;height:13px;flex:none;border-radius:50%;border:0;border-top-color:var(--rp-ink);animation:rp-spin .8s linear infinite}
/* r5: items del picker .entassoc-* con titulo+sub (clases .bitem/.ait compartidas con los
   buscadores del panel; el look mini-card de .rp-buscares NO aplica aqui — este dropdown ya es
   una caja flotante compacta, solo se adopta la estructura de dos lineas) */
.entassoc-results .entassoc-item{padding:6px 10px;font-size:13px}
.entassoc-results .entassoc-item .ait{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entassoc-results .entassoc-item small{color:var(--rp-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;margin-top:1px}
/* idem para los pickers .entassoc-* del alta/edicion inline (entities-client.js) */
.entassoc-results .entassoc-buscando{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12px;color:var(--rp-muted)}
.entassoc-results .entassoc-buscando .spin{width:12px;height:12px;flex:none;border-radius:50%;border:0;border-top-color:var(--rp-ink);animation:rp-spin .8s linear infinite}
/* reduced-motion de los spinners de Buscando…: DEBE ir DESPUES de sus reglas base (misma
   especificidad: el shorthand animation de arriba re-fijaria la duracion si esto fuera antes) */
@media (prefers-reduced-motion:reduce){
  .rp-buscares .bitem.buscando .spin,.entassoc-results .entassoc-buscando .spin{animation-duration:1.6s}
}
/* variantes de tamano */
@media (min-width:1100px){
  #rpn-panel.wide{width:min(780px,96vw)}
}
@media (max-width:600px){
  #rpn-panel,#rpn-panel.wide{top:0;left:0;width:auto;border-left:0;border-top:0;border-top-left-radius:0}
  #rpn-head{padding:calc(10px + env(safe-area-inset-top)) 14px 12px;border-top-left-radius:0}
  #rpn-panel .rp-nfrow .pv :is(input,textarea,select){font-size:16px} /* anti-zoom iOS */
}
@media (prefers-reduced-motion:reduce){
  #rpn-panel{transition:opacity .15s linear}
}

/* ── 22 · CAPA DE VINCULO (#rpb-*, r5 2026-07-28): chooser Crear/Buscar + buscador de los
   "+ Añadir" de Vinculados. Gemela estrecha de #rpn-panel; elegir Crear la CIERRA antes de abrir
   el alta (el orden z 1042/1043 < #rpn 1044/1045 queda solo como defensa). ── */
body.rpb-open .topbar,body.rpb-open .app-header,body.rpb-open .header,body.rpb-open .navbar.topbar{z-index:1030 !important}
#rpb-scrim{position:fixed;inset:0;background:var(--rp-scrim);opacity:0;pointer-events:none;transition:opacity .18s;z-index:1042}
#rpb-scrim.show{opacity:1;pointer-events:auto}
#rpb-panel{
  position:fixed;top:var(--rp-topbar);right:0;bottom:0;width:min(480px,94vw);z-index:1043;
  background:var(--rp-bg);color:var(--rp-ink);
  border-left:1px solid var(--rp-border);border-top:1px solid var(--rp-border);border-top-left-radius:14px;
  box-shadow:none;
  transform:translateX(103%);
  transition:transform .22s cubic-bezier(.3,.9,.3,1);
  display:flex;flex-direction:column;font-size:13.5px;
}
#rpb-panel.show{transform:none}
:where(#rpb-panel) button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:4px}
#rpb-panel :is(button,input):focus-visible{outline:2px solid var(--rp-accent);outline-offset:2px}
#rpb-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rp-border);background:var(--rp-card);flex:none;border-top-left-radius:13px}
#rpb-avatar{width:40px;height:40px;font-size:17px;border-radius:11px;background:var(--rp-accent-soft);color:var(--rp-accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
#rpb-sub{color:var(--rp-muted);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rpb-sub:empty{display:none}
#rpb-panel #rpb-x{padding:8px;border-radius:8px;color:var(--rp-muted);flex:none;transition:background .12s,color .12s}
#rpb-panel #rpb-x:hover{background:var(--rp-hover);color:var(--rp-ink)}
#rpb-body{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 24px}
/* Buscador de vínculo: medidas locales, superficie y foco del kit compartido. */
#rpb-panel .rp-busca{margin:0}
#rpb-panel .rp-busca input{width:100%;font:inherit;font-size:13px;padding:8px 10px;margin-bottom:10px}
#rpb-panel .rp-buscares{border:0;border-radius:0;background:none;max-height:none;overflow:visible;padding:0}
/* chooser: dos botones-card grandes (icono en circulo accent + titulo + hint) */
.rpb-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#rpb-panel .rpb-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;text-align:center;
  border:0;border-radius:12px;background:var(--rp-card);transition:border-color .12s,background .12s}
#rpb-panel .rpb-opt:hover{background:var(--rp-hover);border-color:color-mix(in srgb,var(--rp-accent) 35%,var(--rp-border))}
.rpb-opt .ric{width:34px;height:34px;border-radius:50%;background:var(--rp-accent-soft);color:var(--rp-accent);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.rpb-opt .rt{font-weight:600;font-size:13px;color:var(--rp-ink)}
.rpb-opt small{font-size:11.5px;color:var(--rp-muted)}
@media (max-width:420px){.rpb-choose{grid-template-columns:1fr}}
@media (max-width:600px){
  #rpb-panel{top:0;left:0;width:auto;border-left:0;border-top:0;border-top-left-radius:0}
  #rpb-head{padding:calc(10px + env(safe-area-inset-top)) 14px 12px;border-top-left-radius:0}
  #rpb-panel .rp-busca input{font-size:16px} /* anti-zoom iOS */
}
@media (prefers-reduced-motion:reduce){
  #rpb-panel{transition:opacity .15s linear}
}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ 23 · Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al FINAL de la hoja: solo color, borde, sombra, radio, espaciado y peso. Ningún id, clase ni atributo que
   lea record-panel.js cambia (.show/.wide/.nofeed, [data-tab], .is-active, .editing/.saving/.invalid, .disabled, .open,
   .todos, body.rp-open/.rpn-open/.rpb-open y los style="display:none" siguen igual). Los tokens --rp-* se re-apuntan a
   --dt-* SOLO en las tres raíces del panel (#rp-panel, #rpn-panel, #rpb-panel): los :root de la sección 01 quedan para
   entities-lineitems.css / entities-richtext.css fuera del panel (modales). Una sola superficie con líneas finas y sin
   sombras; la tinta es el único acento; pestañas subrayadas; cuadrados de icono neutros; botones ghost de 28-34 px y
   UN CTA en tinta (Create / Save). Referencia: modules/control-phonenumbers.html (.pn-action-btn, #pn-main-content >
   .pn-tabs, .pn-group-ic, .pn-status-badge). Las reglas de tamaño que viven en @container / (pointer:coarse) se repiten
   al final porque las de aquí, al ir después con la misma especificidad, las pisarían. */
#rp-panel,#rpn-panel,#rpb-panel{
  --rp-accent:var(--dt-cta,var(--dt-text,#111110));
  --rp-accent-soft:var(--dt-hover,rgba(15,15,15,.045));
  --rp-accent-fg:var(--dt-cta-fg,#fff);
  --rp-cta-hover:var(--dt-cta-hover,#2b2b29);
  --rp-ink:var(--dt-text,var(--text-color,#111110));
  --rp-muted:var(--dt-muted,#5f5f5c);
  --rp-faint:var(--dt-faint,#72726e);
  --rp-surface:var(--dt-surface,var(--white-color,#fff));
  --rp-surface2:var(--dt-surface-2,#eeeeec);
  --rp-border:var(--dt-border,rgba(15,15,15,.08));
  --rp-border-strong:var(--dt-border-strong,rgba(15,15,15,.18));
  --rp-hover:var(--dt-hover,rgba(15,15,15,.045));
  --rp-active:var(--dt-active,rgba(15,15,15,.08));
  --rp-focus:var(--dt-focus,var(--dt-text,#111110));
  --rp-warn:var(--dt-warning,#b86513);
  --rp-shadow:none;
  --rp-bg:var(--dt-surface,var(--white-color,#fff));
  --rp-card:var(--dt-surface,var(--white-color,#fff));
  --rp-card-border:var(--dt-border,rgba(15,15,15,.08));
  --rp-card-shadow:none;
  --rp-menu-shadow:var(--dt-pop-shadow,none);
  --rp-r-card:var(--dt-surface);
  /* velo del color de estado que EntitiesClient pinta inline en los .badge: tinte suave, el color pleno queda en el punto */
  --rp-badge-veil:color-mix(in srgb,var(--rp-surface) 84%,transparent);
}
[data-bs-theme="dark"] #rp-panel,[data-bs-theme="dark"] #rpn-panel,[data-bs-theme="dark"] #rpb-panel{--rp-warn:var(--dt-warning)}
#rp-scrim,#rpn-scrim,#rpb-scrim{background:var(--dt-backdrop,rgba(15,15,15,.44))}

/* drawers: sin sombra ni esquina redondeada; la separación es la línea fina fuerte del borde izquierdo */
#rp-panel,#rpn-panel,#rpb-panel{box-shadow:none;border-top-left-radius:0;border-left-color:var(--rp-border-strong);border-top-color:var(--rp-border)}
#rpn-panel #rpn-head,#rpb-panel #rpb-head{border-top-left-radius:0;background:var(--rp-surface);border-bottom-color:var(--rp-border)}

/* identidad: la card partida (.rp-top + #rp-quick) se disuelve en la superficie; avatar en cuadrado neutro (el JS solo
   fija --rp-av, que ya no se lee) */
#rp-panel .rp-top{background:transparent;border:0;border-radius:0;box-shadow:none;padding:4px 0 8px}
#rp-panel #rp-avatar{background:var(--rp-surface2);color:var(--rp-ink);border:1px solid var(--rp-border);border-radius:10px;font-weight:600;font-size:15px}
#rp-panel .rp-idbox h2{font-weight:600;letter-spacing:-.02em}
#rp-panel #rp-meta{color:var(--rp-muted);font-variant-numeric:tabular-nums}
#rp-panel .rp-accbtn{height:30px;padding:0 10px;margin-right:6px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-ink)}
#rp-panel .rp-accbtn:hover{border-color:var(--rp-border-strong);color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-accbtn .ti{color:var(--rp-muted)}
#rp-panel #rp-quick{background:transparent;border:0;border-radius:0;box-shadow:none;padding:4px 0 12px;justify-content:flex-start;gap:12px 10px}
#rp-panel .rp-qa{font-weight:500;color:var(--rp-muted)}
#rp-panel .rp-qa i{width:34px;height:34px;border-radius:9px;font-size:16px;border:0;background:var(--rp-surface2);color:var(--rp-muted)}
#rp-panel .rp-qa:hover{color:var(--rp-ink)}
#rp-panel .rp-qa:hover i{border-color:var(--rp-border-strong);background:var(--rp-hover);color:var(--rp-ink)}

/* menús flotantes: línea fina fuerte en vez de sombra; item activo en gris activo con tick en tinta */
#rp-panel .rp-menu{border-color:var(--rp-border-strong);border-radius:10px;box-shadow:none}
#rp-panel .rp-menu button.is-active{color:var(--rp-ink);background:var(--rp-active)}
#rp-panel .rp-menu .mcheck{color:var(--rp-ink)}
#rp-panel .rp-menu .msearch{background:transparent;border-color:var(--rp-border-strong)}

/* pestañas Summary / Activity / Related: subrayado de 2 px en tinta a sangre completa (como #pn-main-content > .pn-tabs) */
#rp-panel #rp-tabs{gap:18px;margin:10px -16px 0;padding:0 16px;border-bottom:1px solid var(--rp-border)}
#rp-panel .rp-tab{height:40px;padding:0 2px;border-radius:0;background:transparent;box-shadow:none;color:var(--rp-muted);font-weight:600;transition:color .13s,box-shadow .13s}
#rp-panel .rp-tab:hover{color:var(--rp-ink);background:transparent}
#rp-panel .rp-tab.is-active,#rp-panel .rp-tab.is-active:hover{color:var(--rp-ink);background:transparent;box-shadow:inset 0 -2px var(--rp-ink)}
#rp-panel .rp-tab i{opacity:1;color:var(--rp-faint)}
#rp-panel .rp-tab.is-active i{color:var(--rp-muted)}

/* pestañas de grupo del summary (panel y gemelas del alta) y de filtro del feed: mismo subrayado */
:is(#rp-panel,#rpn-panel) .rp-sumtabs{gap:16px;padding:0 2px;margin-bottom:12px;border-bottom:1px solid var(--rp-border)}
:is(#rp-panel,#rpn-panel) .rp-stab,#rp-panel .rp-ftab{height:36px;padding:0 2px;border-radius:0;background:transparent;box-shadow:none;color:var(--rp-muted);font-weight:600;transition:color .13s,box-shadow .13s}
:is(#rp-panel,#rpn-panel) .rp-stab:hover,#rp-panel .rp-ftab:hover{color:var(--rp-ink);background:transparent}
:is(#rp-panel,#rpn-panel) .rp-stab.is-active,:is(#rp-panel,#rpn-panel) .rp-stab.is-active:hover,#rp-panel .rp-ftab.is-active,#rp-panel .rp-ftab.is-active:hover{color:var(--rp-ink);background:transparent;box-shadow:inset 0 -2px var(--rp-ink)}
#rp-panel #rp-feedtabs{gap:16px}
#rp-panel .rp-feedbar{padding:0 0 10px}
#rp-panel #rp-feedfilter{height:34px;padding:0 10px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-ink)}

/* propiedades: grupo con línea fina y radio 10; valores email/teléfono en tinta (el icono tenue y el subrayado al pasar
   siguen marcando que son accionables); fila en edición en gris hover; editor con borde fuerte y foco en tinta, sin halo */
:is(#rp-panel,#rpn-panel) .rp-group{border-color:var(--rp-border);border-radius:10px;box-shadow:none}
:is(#rp-panel,#rpn-panel) .rp-prow .pl{color:var(--rp-muted)}
#rp-panel .rp-prow .pv{font-variant-numeric:tabular-nums}
#rp-panel .rp-prow .pv .pva{color:var(--rp-ink)}
#rp-panel .rp-prow .pv .pva:hover .ti{color:var(--rp-muted)}
#rp-panel .rp-prow.editing{background:var(--rp-hover)}
#rp-panel .pva-copy{color:var(--rp-faint);padding:3px;border-radius:5px;vertical-align:-2px}
#rp-panel .pva-copy:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-edbar .ebtn{width:30px;height:30px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-muted)}
#rp-panel .rp-edbar .ebtn:hover{background:var(--rp-hover);color:var(--rp-ink)}
#rp-panel .rp-edbar .ebtn.ok{background:var(--rp-accent);border-color:var(--rp-accent);color:var(--rp-accent-fg)}
#rp-panel .rp-edbar .ebtn.ok:hover{filter:none;background:var(--rp-cta-hover);border-color:var(--rp-cta-hover);color:var(--rp-accent-fg)}

/* badges de estado de EntitiesClient (inline background:<color>;color:#fff): velo + punto de 6 px con el color pleno +
   texto en tinta, como .pn-status-badge/.pn-status-dot (el velo va en background-image: el inline es el shorthand
   background sin !important; el punto hereda el background-color inline). .rp-badge (vínculos/contadores) en gris. */
#rp-panel .badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:22px;padding:0 9px 0 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1;letter-spacing:0;vertical-align:middle;color:var(--rp-ink) !important;background-image:linear-gradient(var(--rp-badge-veil),var(--rp-badge-veil)) !important}
#rp-panel .badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background-color:inherit}
#rp-panel .rp-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--rp-border);background:var(--rp-surface2);color:var(--rp-muted);font-size:11px;font-weight:600}

/* timeline: lista con separadores finos en vez de cards; icono en cuadrado neutro (rojo solo en el glifo si falló) */
#rp-panel .rp-fitem{margin:0;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid var(--rp-border);border-radius:0;box-shadow:none}
#rp-panel .rp-fitem:hover{border-color:var(--rp-border)}
#rp-panel #rp-feedlist>.rp-fitem:last-child{border-bottom:0}
#rp-panel .rp-ficon{width:28px;height:28px;border-radius:8px;border:0;background:var(--rp-surface2);color:var(--rp-muted);font-size:14px}
#rp-panel .rp-fitem.err .rp-ficon{background:var(--rp-surface2);border-color:var(--rp-border);color:var(--rp-bad)}
#rp-panel .rp-fmeta{color:var(--rp-faint);font-variant-numeric:tabular-nums}
#rp-panel .rp-ftext .link{color:var(--rp-ink);font-weight:600}
#rp-panel .rp-ftext .link:hover{text-decoration:underline}
#rp-panel .rp-factions .link{color:var(--rp-muted);font-weight:600;cursor:pointer}
#rp-panel .rp-factions .link:hover{color:var(--rp-ink)}
#rp-panel .rp-fdiff .fk{background:var(--rp-surface2);color:var(--rp-muted);border-radius:5px}
#rp-panel .fh-row{font-variant-numeric:tabular-nums}
#rp-panel .rp-calldur{background:var(--rp-surface2);border-radius:6px;font-variant-numeric:tabular-nums}
#rp-panel .rp-callback{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;margin-top:6px;border:0;border-radius:7px;font-size:12px;font-weight:600;color:var(--rp-muted)}
#rp-panel .rp-callback:hover{background:var(--rp-hover);color:var(--rp-ink)}
#rp-panel .fhtoggle,#rp-panel .rp-emailtoggle,#rp-panel .abvermas{color:var(--rp-muted)}
#rp-panel .fhtoggle:hover,#rp-panel .rp-emailtoggle:hover,#rp-panel .abvermas:hover{color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel .rp-emailbanner{background:var(--rp-surface2);border-color:var(--rp-border)}
#rp-panel .rp-emailbanner:hover{border-color:var(--rp-border-strong)}
#rp-panel .rp-emailbanner i{color:var(--rp-muted)}
#rp-panel #rp-feedmore{padding:7px 14px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-muted)}
#rp-panel #rp-feedmore:hover{border-color:var(--rp-border-strong);color:var(--rp-ink);background:var(--rp-hover)}
#rp-panel #rp-high .hc b{font-variant-numeric:tabular-nums}
@keyframes rp-sa-flash{0%,40%{background:var(--rp-active,rgba(15,15,15,.08))}100%{background:transparent}}

/* vinculados: bloques separados por línea fina; título 13/600 con el contador tenue; "+ Add" ghost de 28 px */
#rp-panel .rp-assocblock{background:transparent;border:0;border-bottom:1px solid var(--rp-border);border-radius:0;box-shadow:none;padding:4px 0 14px;margin-bottom:12px}
#rp-panel .rp-assocblock:last-child{border-bottom:0}
#rp-panel .abhead{margin-bottom:10px}
#rp-panel .abhead h3{font-size:13px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--rp-ink)}
#rp-panel .abhead h3 .cnt{color:var(--rp-faint);font-weight:500;letter-spacing:0}
#rp-panel .abhead .add{height:28px;padding:0 9px;border:0;border-radius:7px;color:var(--rp-muted);font-size:12px;font-weight:600}
#rp-panel .abhead .add:hover{background:var(--rp-hover);color:var(--rp-ink)}
#rp-panel .rp-associtem{border-color:var(--rp-border);border-radius:8px;background:transparent}
#rp-panel .rp-associtem:hover{border-color:var(--rp-border-strong);background:var(--rp-hover)}
#rp-panel .rp-associtem .link.ait{color:var(--rp-ink)}
#rp-panel .rp-empty.compact{border-style:solid}

/* cuentas MT4 / productos / acciones por entidad: card con línea fina y cabecera 13/600 sin banda gris; botones ghost;
   Live/Demo con tinte suave + punto; Save del editor de productos = CTA tinta, Cancel ghost */
#rp-panel .rp-mt4card{border-color:var(--rp-border);border-radius:10px;box-shadow:none}
#rp-panel .rp-mt4head{background:transparent;padding:10px 12px;font-size:13px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--rp-ink)}
#rp-panel .rp-mt4head .mtb,#rp-panel .rp-elibtn{height:28px;padding:0 9px;border:0;border-radius:7px;color:var(--rp-muted);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
#rp-panel .rp-mt4head .mtb:hover,#rp-panel .rp-elibtn:hover{background:var(--rp-hover);color:var(--rp-ink)}
#rp-panel .rp-mt4card th{color:var(--rp-faint)}
#rp-panel .rp-mt4card td,#rp-panel .rp-mt4tot{font-variant-numeric:tabular-nums}
#rp-panel .rp-mt4tot b{font-weight:600}
#rp-panel .rp-mt4bdg{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600}
#rp-panel .rp-mt4bdg::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
#rp-panel .rp-mt4bdg.live{background:color-mix(in srgb,var(--rp-ok) 10%,transparent);color:var(--rp-ok)}
#rp-panel .rp-mt4bdg.demo{background:color-mix(in srgb,var(--rp-warn) 12%,transparent);color:var(--rp-warn)}
#rp-panel .rp-mt4card .mtact{height:26px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--rp-ink);font-weight:600}
#rp-panel .rp-mt4card .mtact:hover{opacity:1;background:var(--rp-hover)}
#rp-panel .rp-xact{height:30px;padding:0 10px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-ink);font-size:12.5px}
#rp-panel .rp-xact:hover{background:var(--rp-hover)}
#rp-panel .rp-xact .ti{color:var(--rp-muted)}
#rp-panel .rp-eliacts{border-top-color:var(--rp-border)}
#rp-panel .rp-elisave{height:30px;padding:0 12px;border-radius:8px;background:var(--rp-accent);color:var(--rp-accent-fg)}
#rp-panel .rp-elisave:hover{filter:none;background:var(--rp-cta-hover)}
#rp-panel .rp-elicancel{height:30px;padding:0 12px;border-radius:8px;border-color:var(--rp-border-strong);color:var(--rp-ink)}

/* capa de alta (#rpn-*): avatar neutro y acción de creación compartida */
#rpn-panel #rpn-avatar,#rpb-panel #rpb-avatar{background:var(--rp-surface2);color:var(--rp-muted);border:0;border-radius:10px;font-size:16px}
:is(#rpn-panel,#rpb-panel) .rpn-idbox h2{font-weight:600;letter-spacing:-.02em}
#rpn-panel .rp-nfrow input[type=checkbox]{accent-color:var(--rp-accent)}
:is(#rp-panel,#rpn-panel) .entassoc-results{border-color:var(--rp-border-strong) !important;box-shadow:none}
#rpn-panel #rp-btncrear{height:34px;padding:0 14px;min-width:96px;border-radius:8px;background:var(--rp-accent);border-color:var(--rp-accent);color:var(--rp-accent-fg)}
#rpn-panel #rp-btncrear:hover{filter:none;background:var(--rp-cta-hover);border-color:var(--rp-cta-hover)}
#rpn-panel .rp-btncancel{height:34px;padding:0 14px;border-radius:8px;background:transparent;border-color:var(--rp-border-strong);color:var(--rp-ink)}
#rpn-panel .rp-btncancel:hover{background:var(--rp-hover);color:var(--rp-ink)}

/* capa de vínculo (#rpb-*): resultados y acciones de asociación */
:is(#rp-panel,#rpn-panel,#rpb-panel) .rp-buscares .bitem{border-radius:8px;background:transparent}
:is(#rp-panel,#rpn-panel,#rpb-panel) .rp-buscares .bitem:hover{background:var(--rp-hover);border-color:var(--rp-border-strong)}
:is(#rp-panel,#rpn-panel,#rpb-panel) .rp-buscares .bitem.noaction{border-style:solid}
:is(#rp-panel,#rpn-panel,#rpb-panel) .rp-buscares .bitem.noaction:hover{background:transparent;border-color:var(--rp-border)}
:is(#rp-panel,#rpn-panel,#rpb-panel) .rp-buscares .bnuevo .ait{color:var(--rp-ink)}
#rpb-panel .rpb-opt{border-radius:10px;background:transparent}
#rpb-panel .rpb-opt:hover{background:var(--rp-hover);border-color:var(--rp-border-strong)}
#rpb-panel .rpb-opt .ric{width:32px;height:32px;border-radius:9px;background:var(--rp-surface2);border:0;color:var(--rp-muted)}

/* overlay (>=1100px .wide): el avatar de 56 px a radio 12; línea fina bajo las acciones rápidas (en el drawer la pone la
   fila de pestañas); las sumtabs del overlay van static con padding-bottom:8px en la sección 15 y el subrayado quedaría
   despegado de la línea; la feedbar sticky lleva la línea de las pestañas de filtro */
@media (min-width:1100px){
  #rp-panel.wide #rp-avatar{border-radius:12px}
  #rp-panel.wide #rp-quick{border-bottom:1px solid var(--rp-border);padding-bottom:14px}
  #rp-panel.wide #rp-sum .rp-sumtabs{padding-bottom:0}
  #rp-panel.wide .rp-feedbar{padding:0;margin-bottom:12px;border-bottom:1px solid var(--rp-border)}
}
/* móvil: #rp-head lleva 12 px de lateral, la sangre completa de las pestañas se ajusta */
@media (max-width:600px){
  #rp-panel #rp-tabs{margin:10px -12px 0;padding:0 12px}
}
/* tamaños por contenedor y táctil: repetidos aquí porque las reglas de arriba (mismas especificidades, más tarde) pisan
   a las de las secciones 05 y 18 */
@supports (container-type: inline-size){
  @container (max-width:330px){
    #rp-panel .rp-qa i{width:34px;height:34px;font-size:15px}
  }
  @container (max-width:280px){
    #rp-panel .rp-qa i{width:30px;height:30px;font-size:13.5px}
  }
}
@media (pointer:coarse){
  @container (min-width:331px){ #rp-panel .rp-qa i{width:44px;height:44px} }
  #rp-panel .rp-edbar .ebtn{width:36px;height:36px}
}

/* ═══════════ 24 · Overlay con menos de 1280 px disponibles ═══════════
   record-panel.js mide la ficha tras descontar el sidebar y Dalia; sin ResizeObserver conserva dos columnas.
   Izquierda = cabecera, acciones, propiedades y debajo asociaciones (cada una con su scroll, mitad y mitad);
   derecha = resumen y actividad a todo el alto. Solo cambia el grid, sin reconstruir el contenido. */
@media (min-width:1100px){
  #rp-panel.wide.rp-two-cols{grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) minmax(0,1fr)}
  #rp-panel.wide.rp-two-cols #rp-mt4,#rp-panel.wide.rp-two-cols #rp-lineitems{grid-area:1/1/2/3}
  #rp-panel.wide.rp-two-cols #rp-extraacts{grid-area:2/1/3/3}
  #rp-panel.wide.rp-two-cols #rp-feed{grid-area:3/2/7/3}
  #rp-panel.wide.rp-two-cols #rp-assoc{grid-area:6/1/7/2;margin-top:12px;padding-top:12px;border-top:1px solid var(--rp-border)}
  #rp-panel.wide.rp-two-cols.nofeed #rp-assoc{grid-area:3/2/7/3;margin-top:0;padding-top:2px;border-top:0}
}
/* Shared read-only form answers, also used by the Forms submissions drawer. */
.form-submission { font-size: 13px; line-height: 1.55; }
.form-submission__title { font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.form-submission__answers.row { height: auto; margin: 0 -8px; }
.form-submission__answer { min-width: 0; padding: 8px; border-bottom: 1px solid var(--el-border, #e5e7eb); }
.form-submission__answer:last-child { border-bottom: 0; }
.form-submission__answer dt { color: var(--el-text-dim, #6b7280); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.form-submission__answer dd { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-submission-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.form-submission-date { color: var(--el-text-dim, #6b7280); font-size: 12px; }
/* Let content placeholders use the full available panel width. */
.rp-loading.rp-loading--content { display:block; padding:0; width:100%; }