:root{
  /* texto/tinta */
  --ink:#16203A; --ink2:#475069; --ink3:#7a8398;

  /* superficies (3) — surface-0/1 con alias a --bg/--panel para no romper el código actual */
  --surface-0:#EBEEF4; --surface-1:#FFFFFF; --surface-2:#F5F8FC;
  --bg:var(--surface-0); --panel:var(--surface-1);
  --line:#DCE1EC; --line2:#EAEDF4;

  /* marca + tinte */
  --brand:#2950D8; --brand-deep:#16203A;
  --brand-50:#EEF2FE; --brand-100:#DCE6FF; --brand-700:#1E3DA8; --brand-on-dark:#7FA0FF;

  /* acero/plata — identidad (eco del logo; aproximado hasta tener el logo final) */
  --steel:#8C9BBE; --nav-surface:#26324F; --nav-line:#38456A;

  /* semánticos de riesgo */
  --a:#157046; --a-bg:#E6F3EB; --b:#9A5B0B; --b-bg:#F9EFDC;
  --c:#BC3D0E; --c-bg:#FAE6DC; --cob:#CF2222; --cob-bg:#FADFDF;
  --emg:#8B0E1F; --emg-bg:#F6D7DC; --aun:#586379; --aun-bg:#E8EBF1;
  /* estado, independientes de las bandas */
  --pos:#0C7A59; --ready:var(--pos); --warn:#9A5B0B;

  /* radios (3) */
  --r-sm:8px; --r-md:12px; --r-pill:999px;

  /* espaciado (base 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px;

  /* tipografía — escala (9 pasos: 10/11/12/13/14/16/20/30/40) */
  --fs-1:10px; --fs-2:11px; --fs-3:12px; --fs-4:13px; --fs-5:14px; --fs-6:16px; --fs-7:20px; --fs-9:30px; --fs-10:40px;

  /* elevación */
  --shadow:0 1px 2px rgba(22,32,58,.06),0 8px 24px rgba(22,32,58,.06);
  --shadow-sm:0 1px 2px rgba(22,32,58,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:var(--fs-5); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums}
button{font-family:inherit; cursor:pointer}
.wrap{max-width:1320px; margin:0 auto; padding:0 22px 60px}

/* ---------- header ---------- */
header.bar{background:var(--brand-deep); color:#fff}
.bar .wrap{display:flex; align-items:center; gap:16px; padding:var(--s-6) var(--s-12)}
.logo{display:flex; align-items:baseline; gap:10px}
.logo b{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:23px; letter-spacing:-.02em; color:#fff}
.logo b span{color:#7FA0FF}
.logo small{color:#aeb8d4; font-size:var(--fs-3); letter-spacing:.04em; text-transform:uppercase}
.actions{display:flex; align-items:center; gap:9px; margin-left:auto; flex-wrap:wrap}
.hdiv{width:1px; align-self:stretch; min-height:30px; background:rgba(255,255,255,.14)}

/* bloque de perfil (encabezado) */
.profile{position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; padding:5px 8px; border-radius:10px}
.profile:hover{background:rgba(255,255,255,.06)}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:var(--fs-4)}
.pmeta{display:flex; flex-direction:column; line-height:1.18}
.pmeta b{color:#fff; font-size:var(--fs-4); font-weight:600}
.pmeta small{color:#aeb8d4; font-size:var(--fs-2)}
.pchev{color:#aeb8d4; font-size:var(--fs-2)}
.pmenu{position:absolute; top:calc(100% + 8px); right:0; min-width:236px; z-index:200; display:none;
  background:var(--surface-1); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:6px}
.pmenu.open{display:block}
.pmenu .pmhead{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); padding:8px 10px 4px}
.pmenu .pmitem{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-4); color:var(--ink); cursor:pointer; white-space:nowrap}
.pmenu .pmitem:hover{background:var(--line2)}
.pmenu .pmitem.active{color:var(--brand); font-weight:600}
.pmenu .pmsep{height:1px; background:var(--line); margin:6px 4px}
.pmenu .pmitem.logout{color:var(--cob); font-weight:600}
.btn{
  border:1px solid transparent; border-radius:var(--r-sm); padding:9px 14px; font-size:var(--fs-4); font-weight:600;
  background:var(--brand); color:#fff; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{background:var(--brand-700)}
.btn.outline{background:transparent; border-color:rgba(255,255,255,.20); color:#dbe2f2}
.btn.outline:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.36)}
.btn.subtle{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn.subtle:hover{background:var(--surface-2)}
/* base de interacción compartida (sin fusionar clases) */
.btn:disabled, .minibtn:disabled, .iconbtn:disabled{opacity:.45; cursor:not-allowed}
.btn:focus-visible, .minibtn:focus-visible, .iconbtn:focus-visible, .chip:focus-visible, .vtab:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.bar .btn:focus-visible{outline-color:var(--brand-on-dark)}

/* ---------- meta line ---------- */
.meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:var(--s-6) 0 var(--s-2); color:var(--ink2); font-size:var(--fs-4)}
.meta .scope{display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--brand)}

/* ---------- hero: distribution ---------- */
.hero{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:var(--s-6); margin-top:0}
.hero h2{margin:0 0 3px; font-size:var(--fs-5); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-weight:600}
.hero-sub{margin:0 0 4px; font-size:var(--fs-2); letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); font-weight:600}
.hero .head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.bignum{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:var(--fs-10); line-height:1; letter-spacing:-.03em}
.bignum small{font-size:var(--fs-5); font-weight:500; color:var(--ink2); letter-spacing:0}
.distbar{display:flex; height:38px; border-radius:10px; overflow:hidden; margin:14px 0 12px; border:1px solid var(--line)}
.distbar > div{position:relative; transition:flex-grow .4s ease; min-width:2px}
.distbar .seg-emg{animation:segpulse 1.8s ease-in-out infinite}
@keyframes segpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.distbar .seg-emg{animation:none}}
.legend{display:flex; flex-wrap:wrap; gap:6px 8px}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface-1); border-radius:var(--r-pill); padding:5px 11px 5px 8px; font-size:var(--fs-4); cursor:pointer; user-select:none}
.chip:hover{border-color:#c3ccdc}
.chip.off{opacity:.4}
.chip .sw{width:11px; height:11px; border-radius:3px}
.chip b{font-weight:600}
.chip .n{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ink2)}
/* pulso de cartera — chips informativos */
.pulsechips{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.pulsechip{display:inline-flex; align-items:baseline; gap:7px; padding:9px 16px; white-space:nowrap; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface-1)}
.pulsechip b{font-family:'Space Grotesk',sans-serif; font-size:var(--fs-6); font-weight:700; color:var(--ink)}
.pulsechip span{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:600}

/* ---------- controls row ---------- */
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:var(--s-6) 0 var(--s-4)}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); font-weight:600}
.field select,.field input{border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; font-family:inherit; font-size:var(--fs-4); background:var(--surface-1); color:var(--ink)}
.field input.search{min-width:230px}
.spacer{flex:1}

/* ---------- table ---------- */
.tablecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden}
table{width:100%; border-collapse:collapse}
thead th{
  text-align:left; font-size:var(--fs-2); letter-spacing:.05em; text-transform:uppercase; color:var(--ink3);
  font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); position:sticky; top:0; z-index:2
}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:middle}
tbody tr:hover{background:var(--surface-2)}
td.cli{border-left:3px solid var(--rc,transparent)}
.cli b{font-weight:600; display:block}
.cli span{color:var(--ink3); font-size:var(--fs-3); display:block}
.num{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums}
.unit{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ink2)}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-3); font-weight:600; padding:4px 9px; border-radius:7px; white-space:nowrap}
.badge .sw{width:8px; height:8px; border-radius:50%}
.b-A{background:var(--a-bg); color:var(--a)} .b-A .sw{background:var(--a)}
.b-B{background:var(--b-bg); color:var(--b)} .b-B .sw{background:var(--b)}
.b-C{background:var(--c-bg); color:var(--c)} .b-C .sw{background:var(--c)}
.b-COB{background:var(--cob-bg); color:var(--cob)} .b-COB .sw{background:var(--cob)}
.b-EMG{background:var(--emg-bg); color:var(--emg)} .b-EMG .sw{background:var(--emg)}
.b-AUN{background:var(--aun-bg); color:var(--aun)} .b-AUN .sw{background:var(--aun)}
.b-EMG .sw{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}
@media (prefers-reduced-motion:reduce){.b-EMG .sw{animation:none}}
.action{font-size:var(--fs-2); color:var(--ink3); margin-top:3px}

.opcell{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.opsel{border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-family:inherit; font-size:var(--fs-4); background:var(--surface-1); max-width:172px}
.opdate{border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font-family:inherit; font-size:var(--fs-3)}
.minibtn{border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); padding:6px 9px; font-size:var(--fs-3); font-weight:600; color:var(--brand); transition:background .15s ease, border-color .15s ease}
.minibtn:hover{background:var(--brand-50)}
.ready{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-3); font-weight:700; color:var(--ready)}
.ready .sw{width:8px;height:8px;border-radius:50%;background:var(--ready)}
.muted{color:var(--ink3); font-size:var(--fs-3)}
.empty{padding:var(--s-12); text-align:center; color:var(--ink3)}

/* ---------- drawer (rules) ---------- */
.scrim{position:fixed; inset:0; background:rgba(16,22,40,.42); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:430px; max-width:92vw; background:var(--panel);
  box-shadow:-10px 0 40px rgba(16,22,40,.18); transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.7,.3,1); z-index:41; overflow-y:auto}
.drawer.open{transform:none}
.drawer .dh{padding:var(--s-6) var(--s-6) var(--s-4); border-bottom:1px solid var(--line)}
.drawer .dh h3{margin:0 0 3px; font-family:'Space Grotesk',sans-serif; font-size:var(--fs-7); letter-spacing:-.01em}
.drawer .dh p{margin:0; color:var(--ink2); font-size:var(--fs-4)}
.drawer .body{padding:var(--s-6) var(--s-6) var(--s-8)}
.rulegrp{margin-bottom:22px}
.rulegrp h4{margin:0 0 4px; font-size:var(--fs-3); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3)}
.rulegrp .hint{margin:0 0 12px; font-size:var(--fs-3); color:var(--ink3)}
.rrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line)}
.rrow:last-child{border-bottom:none}
.rrow .lab{display:flex; align-items:center; gap:9px; font-size:var(--fs-4)}
.rrow .sw{width:10px;height:10px;border-radius:3px}
.rrow input{width:78px; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-family:'JetBrains Mono',monospace; font-size:var(--fs-4); text-align:right}
.bandline{font-size:var(--fs-3); color:var(--ink2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-top:6px}
.dactions{display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--panel)}
.note{font-size:var(--fs-3); color:var(--ink3); margin-top:10px; line-height:1.5}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--brand-deep); color:#fff;
  padding:11px 18px; border-radius:10px; font-size:var(--fs-4); font-weight:500; opacity:0; transition:.25s; z-index:60; box-shadow:var(--shadow)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.lock{font-size:var(--fs-3); color:var(--ink3); font-style:italic}
.avance{margin-top:18px}
.avance-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.avance-top > span:first-child{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); font-weight:600}
.avance-top > span:last-child{font-size:var(--fs-4); color:var(--ink2)}
.avance-top b{font-family:'JetBrains Mono',monospace; color:var(--ink); font-weight:700}
.progbar{height:9px; border-radius:99px; background:var(--line); overflow:hidden}
.progfill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--ready),#34c98a); transition:width .45s cubic-bezier(.2,.8,.2,1); width:0%}
@media(max-width:820px){
  .bignum{font-size:var(--fs-9)}
  .hero .head{gap:18px}
  .hero .head>div{text-align:left !important}
  .viewtabs{overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap}
  .vtab{white-space:nowrap}
  table, thead, tbody, tr, td{display:block; width:auto}
  thead{display:none}
  tbody tr{margin:0 0 12px; border:1px solid var(--line); border-left:4px solid var(--rc,var(--line)); border-radius:13px; padding:13px 15px; background:var(--panel); box-shadow:var(--shadow)}
  tbody tr:hover{background:var(--panel)}
  tbody td{border:none; padding:6px 0; display:flex; justify-content:space-between; align-items:center; gap:14px}
  tbody td::before{content:attr(data-label); font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:700; flex:0 0 auto}
  td.cli{display:block; border-left:none; padding:0 0 9px; margin-bottom:7px; border-bottom:1px dashed var(--line)}
  td.cli::before{content:""}
  td.montotd, td.optd, td.eligtd{display:block}
  td.montotd::before, td.optd::before, td.eligtd::before{display:block; margin-bottom:5px}
  td.optd .opcell, td.optd .gestorPanel{width:100%}
  td.num, td.unit{justify-content:space-between}
  .bar .wrap{flex-wrap:wrap; gap:12px; padding:var(--s-4) var(--s-6)}
  .hdiv{display:none}
  .profile{order:2; margin-left:auto}
  .actions{order:3; width:100%; margin-left:0; flex-wrap:wrap; gap:8px}
  .actions .btn{flex:1 1 auto; justify-content:center}
  .controls .field{flex:1 1 140px}
  /* acciones del cliente en móvil: etiqueta visible (no hay hover) y objetivo táctil mayor */
  .cliacts{gap:7px}
  .iconbtn{width:auto; height:34px; padding:0 11px; gap:6px; font-size:var(--fs-3); font-weight:600}
  .iconbtn .lbl{display:inline}
  .iconbtn::after{display:none}
  .iconbtn .badge{display:none}
}
.pcard{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-4); margin-bottom:14px; background:var(--surface-2)}
.pcard-h{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.plabel{flex:1; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-family:inherit; font-size:var(--fs-5); font-weight:600; color:var(--ink)}
.pkey{font-family:'JetBrains Mono',monospace; font-size:var(--fs-2); color:var(--ink3); background:var(--surface-2); padding:3px 7px; border-radius:var(--r-sm)}
.psub{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); font-weight:600; margin:12px 0 7px; display:flex; align-items:center; gap:10px}
.psub .pscope{margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font-family:inherit; font-size:var(--fs-4); color:var(--ink)}
.uchks{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px}
.uchk{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 9px; font-family:'JetBrains Mono',monospace; font-size:var(--fs-3); cursor:pointer; background:var(--surface-1)}
.uchk input{margin:0}
.cchks{display:grid; grid-template-columns:1fr 1fr; gap:7px 10px}
.cchk{display:flex; align-items:center; gap:7px; font-size:var(--fs-4); cursor:pointer}
.tabs{display:flex; gap:6px; margin-top:14px; margin-bottom:-13px}
.tab{border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r-md) var(--r-md) 0 0; padding:8px 15px; font-family:inherit; font-size:var(--fs-4); font-weight:600; color:var(--ink2); border-bottom:1px solid var(--line)}
.tab.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.delx{border:1px solid var(--line); background:var(--surface-1); color:var(--cob); width:32px; height:32px; border-radius:var(--r-sm); font-size:var(--fs-7); line-height:1; flex:0 0 auto; font-weight:600}
.delx:hover{background:var(--cob-bg); border-color:var(--cob)}
.montocell{display:flex; flex-direction:column; gap:3px; min-width:118px}
.montoinwrap{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); padding:0 8px; background:var(--surface-1); max-width:128px; transition:border-color .15s,background .15s}
.montocell.bad .montoinwrap{border-color:var(--cob); background:var(--cob-bg)}
.montoinwrap .pfx{color:var(--ink3); font-family:'JetBrains Mono',monospace; font-size:var(--fs-4)}
.montoinp{border:none; outline:none; background:transparent; width:70px; padding:7px 4px; font-family:'JetBrains Mono',monospace; font-size:var(--fs-4); font-variant-numeric:tabular-nums; color:var(--ink)}
.montoinp:disabled{color:var(--ink3)}
.montohint{font-size:var(--fs-2); line-height:1.3}
.montohint .mr{color:var(--ink3)}
.montohint .mwarn{color:var(--cob); font-weight:600}
.viewtabs{display:flex; gap:4px; margin:var(--s-6) 0 0}
.vtab{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-bottom:none; background:var(--surface-2); color:var(--ink2); border-radius:var(--r-md) var(--r-md) 0 0; padding:11px 18px; font-family:inherit; font-size:var(--fs-5); font-weight:600}
.vtab.active{background:var(--panel); color:var(--ink); box-shadow:0 -2px 0 var(--brand) inset}
.vcount{font-family:'JetBrains Mono',monospace; font-size:var(--fs-3); font-weight:600; background:var(--ready); color:#fff; border-radius:var(--r-pill); padding:1px 8px; min-width:20px; text-align:center}
.vtab:not(.active) .vcount{background:var(--ink3)}
.viewtabs + .tablecard{border-top-left-radius:0}
.sched{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-3); font-weight:600; color:var(--aun); background:var(--aun-bg); padding:3px 8px; border-radius:7px; white-space:nowrap}
.sched.aprob{color:var(--ready); background:#dcf2ea}
.sched.ver{color:var(--b); background:var(--b-bg)}
.b-NUEVA{background:var(--brand-50); color:var(--brand)} .b-NUEVA .sw{background:var(--brand)}
.wa{display:inline-block; margin-top:3px; font-size:var(--fs-2); font-weight:600; color:#0C7A59; text-decoration:none}
.wa:hover{text-decoration:underline}
/* fila compacta de acciones por cliente (iconos + tooltip) */
.cliacts{display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
.cliacts .telbad{margin-top:0}
.iconbtn{position:relative; width:26px; height:26px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1.5px solid transparent; background:transparent; cursor:pointer; text-decoration:none;
  font-size:var(--fs-4); line-height:1; padding:0; font-family:inherit;
  transition:background .15s ease, box-shadow .15s ease, transform .08s ease}
.iconbtn .lbl{display:none}
.iconbtn:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(16,32,58,.18)}
.iconbtn:active{transform:translateY(0)}
.iconbtn.wa1{background:linear-gradient(135deg,#22324F,#16203A); border-color:rgba(255,255,255,.08); color:#fff; box-shadow:0 1px 3px rgba(16,32,58,.28)}
.iconbtn.wa1 .waico{color:#25D366}
.iconbtn.wa1:hover{box-shadow:0 3px 10px rgba(37,211,102,.35)}
.iconbtn.wa2{border-color:#25D366; color:#25D366; background:#E4F8EC}
.iconbtn.wa2:hover{background:#D3F5E0}
.iconbtn.wa3{border-color:#2950D8; color:#2950D8; background:#E5EAFA}
.iconbtn.wa3:hover{background:#D6DEF8}
.iconbtn.nota{border-color:var(--line); background:var(--surface-2); color:var(--ink2)}
.iconbtn.nota:hover, .iconbtn.nota.has{border-color:var(--brand); background:var(--brand-50); color:var(--brand)}
.iconbtn .badge{position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; padding:0 3px; border-radius:99px;
  background:var(--brand); color:#fff; font-size:var(--fs-1); font-weight:700; display:flex; align-items:center; justify-content:center}
/* tooltip: abajo y alineado a la izquierda, para no chocar con el overflow:hidden de .tablecard */
.iconbtn::after{content:attr(data-tip); position:absolute; top:calc(100% + 7px); left:0;
  background:var(--brand-deep); color:#fff; font-size:var(--fs-2); font-weight:600; white-space:nowrap;
  padding:5px 9px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .14s ease; z-index:60}
.iconbtn:hover::after, .iconbtn:focus-visible::after{opacity:1}
.telbad{display:inline-block; margin-top:3px; font-size:var(--fs-2); color:var(--cob)}
.minibtn.ok{color:#fff; background:var(--ready); border-color:var(--ready)}
.minibtn.ok:hover{filter:brightness(1.07); background:var(--ready)}
.minibtn.warn{color:#fff; background:var(--warn); border-color:var(--warn)}
.minibtn.warn:hover{filter:brightness(1.07)}
.minibtn.bad{color:#fff; background:var(--cob); border-color:var(--cob)}
.minibtn.bad:hover{filter:brightness(1.07)}
.gestorPanel{display:flex; gap:6px; flex-wrap:wrap}
.gestorPanel .minibtn{flex:0 1 calc(33.333% - 4px); min-width:80px}
.gestorGate{display:flex; flex-direction:column; gap:9px}
.codebox{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-3)}
.codesent{font-size:var(--fs-3); color:var(--ink2); line-height:1.4}
.codesim{font-size:var(--fs-2); color:var(--brand); margin-top:3px; font-family:'JetBrains Mono',monospace}
.codehdr{font-size:var(--fs-3); color:var(--ink2); line-height:1.4; margin-bottom:8px}
.codeerr{font-size:var(--fs-3); color:var(--cob); line-height:1.4; margin-top:6px}
.linklike{margin-top:6px; background:none; border:none; padding:0; color:var(--brand); font-size:var(--fs-2); font-weight:600; cursor:pointer; text-decoration:underline}
.fixtelrow{display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap}
.fixtel{flex:1; min-width:140px; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:var(--fs-3); color:var(--ink)}
.codeinp{margin-top:8px; width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-family:'JetBrains Mono',monospace; font-size:var(--fs-6); letter-spacing:.25em; text-align:center; color:var(--ink)}
.photorow{display:flex; gap:6px}
.photorow .minibtn{flex:1}
.minibtn.okq{border-color:var(--ready); color:var(--ready); background:#eafaf2}
.reagwrap{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.reagwrap input[type=date],.reagwrap .rjinput{border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-family:inherit; font-size:var(--fs-4); color:var(--ink)}
.reagwrap .rjinput{min-width:150px}
.rjreason{font-size:var(--fs-3); color:var(--ink2); margin-bottom:6px; font-style:italic}
.archtag{display:inline-block; font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--aun); background:var(--aun-bg); border-radius:5px; padding:1px 5px; margin-left:4px; vertical-align:middle}
.notesThread{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.noteitem{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-3); background:var(--surface-2)}
.notehead{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px}
.notehead b{font-size:var(--fs-4)}
.noterole{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:600}
.notewhen{margin-left:auto; font-size:var(--fs-2); color:var(--ink3); font-family:'JetBrains Mono',monospace}
.noteDel{background:transparent; border:none; color:var(--ink3); cursor:pointer; font-size:var(--fs-4); line-height:1; padding:2px 5px; border-radius:var(--r-sm)}
.noteDel:hover{color:var(--cob); background:var(--cob-bg)}
.notetag{display:inline-block; font-size:var(--fs-2); font-weight:700; color:var(--brand); background:var(--brand-50); border-radius:6px; padding:2px 8px; margin-bottom:6px}
.notetext{font-size:var(--fs-5); color:var(--ink); line-height:1.45; white-space:pre-wrap}
#note_text{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 11px; font-family:inherit; font-size:var(--fs-5); color:var(--ink); resize:vertical; width:100%}
.action.chg{color:var(--cob); font-weight:700}
.vfield{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.vfield label{font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); font-weight:600}
.vfield input,.vfield select{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 11px; font-family:inherit; font-size:var(--fs-5); color:var(--ink)}
.rcard{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-4); margin-bottom:14px; background:var(--surface-2)}
.rcard h4{margin:0 0 8px; font-size:var(--fs-3); text-transform:uppercase; letter-spacing:.05em; color:var(--ink3)}
.rrow2{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:var(--fs-4)}
.rrow2:last-child{border-bottom:none}