:root{
    --bg:#daf1ef; --panel:#fff; --ink:#13243b; --muted:#4b7671; --faint:#7fada7;
    --line:#b9e4df; --line2:#daf1ef;
    --navy:#239089; --navy-deep:#1c746f; --navy-soft:#3fa59e; --navy-line:#4bb0a9;
    --accent:#329b93; --accent-soft:#daf1ef;
    --ok:#1f9d6b; --ok-soft:#e3f5ee; --warn:#cf8b1e; --warn-soft:#fbf0db; --bad:#d65846; --bad-soft:#fbe7e3;
    --radius:14px; --shadow:0 1px 2px rgba(19,36,59,.04),0 10px 26px rgba(19,36,59,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  .app{display:flex;min-height:100vh}

  /* ===== SIDEBAR ===== */
  .side{width:236px;background:linear-gradient(180deg,rgba(28,63,60,.95),rgba(15,36,34,.98));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid rgba(255,255,255,.07);color:#dcefec;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
  .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:#fff}
  .brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#3fa59e,#1c746f);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .brand .dword{height:20px;width:auto;display:block;user-select:none}
  .nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
  .navlbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#6f9992;font-weight:700;padding:13px 10px 5px}
  .ni{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:#bfe0da;font-size:13.5px;font-weight:600;cursor:pointer;border:0;background:none;width:100%;text-align:left;position:relative;transition:background .16s ease,color .16s ease,transform .16s ease}
  .ni .ic,.ni-sub .ic{width:18px;text-align:center;font-size:14px;opacity:.92;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
  .ni:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}
  .ni.on{background:rgba(255,255,255,.14);color:#fff}
  .ni.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--navy-line);transition:opacity .16s ease}
  .ni .bdg{margin-left:auto;background:#d65846;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
  .ni .bdg.soft{background:rgba(255,255,255,.18)}
  .me{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
  .me .av{width:32px;height:32px;border-radius:9px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
  .me .mn{font-size:12.5px;font-weight:700;color:#fff;line-height:1.2}
  .me .mr{font-size:11px;color:#8fb5af}

  /* ===== MAIN ===== */
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .top{display:flex;align-items:center;gap:16px;padding:16px 26px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
  .top h1{font-size:20px;font-weight:800;letter-spacing:-.02em}
  .top .sub{font-size:12.5px;color:var(--muted);font-weight:500}
  .modo-global-wrap{margin-left:auto;display:flex;align-items:center;gap:14px}
  /* Switch general POR CANAL (18/8/2026): en la pestaña WhatsApp se ve el de WhatsApp, en la de
     Instagram el de Instagram, y en "Todos" los dos juntos — nunca un switch sin dueño visible. */
  .mg-canal{display:flex;align-items:center;gap:7px}
  .mg-canal .mg-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;color:#fff;flex-shrink:0}
  .mg-canal .mg-ic.wa{background:#25d366}
  .mg-canal .mg-ic.ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
  /* ===== segmented toggle IA/Humano — pastilla sólida que desliza sobre el texto activo ===== */
  .seg2{position:relative;display:inline-flex;background:var(--accent-soft);border-radius:999px;padding:3px;flex:none}
  .seg2-pill{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:var(--navy);border-radius:999px;transition:left .32s cubic-bezier(.34,1.56,.64,1),width .32s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px rgba(0,0,0,.15)}
  .seg2-opt{position:relative;z-index:1;border:0;background:none;padding:6px 15px;font:inherit;font-size:12.5px;font-weight:700;border-radius:999px;cursor:pointer;color:var(--muted);transition:color .2s ease}
  .seg2-opt.active{color:#fff}
  .seg2.disabled .seg2-opt{cursor:not-allowed}
  .seg2.disabled{opacity:.6}
  .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;width:240px;color:var(--faint);font-size:13px}
  .search input{border:0;outline:0;font:inherit;color:var(--ink);width:100%;background:none}
  .bell{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;cursor:pointer;position:relative}
  .bell::after{content:"";position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:#d65846;border:2px solid #fff}
  .bell.quiet::after{display:none}
  .content{padding:24px 26px 50px;position:relative}
  .skel-swap{position:absolute;inset:24px 26px;z-index:5;background:var(--bg);transition:opacity .3s ease}
  .skel-swap.out{opacity:0;pointer-events:none}
  .skel-bar,.skel-card{background:linear-gradient(90deg,var(--line2) 25%,var(--accent-soft) 50%,var(--line2) 75%);background-size:200% 100%;animation:skelShimmer 1.3s ease-in-out infinite;border-radius:8px}
  .skel-card{height:84px;border-radius:14px}
  .skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
  @media(max-width:900px){.skel-grid{grid-template-columns:repeat(2,1fr)}}
  @keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @media (prefers-reduced-motion: reduce){.skel-bar,.skel-card{animation:none}}

  /* ===== AGENDA ===== */
  .agbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .daynav{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px}
  .daynav button{border:0;background:none;width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:14px}
  .daynav button:hover{background:var(--bg)}
  .daynav .today{width:auto;padding:0 14px;font-weight:700;font-size:13px;color:var(--ink)}
  .seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px;gap:2px}
  .seg button{border:0;background:none;padding:6px 14px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
  .seg button.on{background:var(--navy);color:#fff}
  .btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:11px;padding:10px 16px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}
  .btn.primary{background:var(--navy);color:#fff;box-shadow:0 3px 0 var(--navy-deep)}
  .btn.primary:hover{background:var(--navy-deep)}
  .btn.primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-deep)}
  .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 0 var(--line)}
  .btn.ghost:active{transform:translateY(2px);box-shadow:0 0 0 var(--line)}
  .ml-auto{margin-left:auto}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
  .kpi .top2{display:flex;align-items:center;justify-content:space-between}
  .kpi .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px}
  .kpi .lab{font-size:12px;color:var(--muted);font-weight:600;margin-top:11px}
  .kpi .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
  .kpi .val small{font-size:13px;color:var(--faint);font-weight:600}

  .cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .calhead{display:grid;border-bottom:1px solid var(--line);overflow-x:hidden}
  .calhead .corner{padding:12px}
  .doc-h{padding:12px 10px;border-left:1px solid var(--line2);display:flex;align-items:center;gap:9px}
  .doc-h .da{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
  .doc-h .dn{font-size:13px;font-weight:700;line-height:1.1}
  .doc-h .ds{font-size:10.5px;color:var(--muted)}
  .calbody{display:grid;position:relative;overflow-x:auto}
  .timegut{border-right:1px solid var(--line)}
  .tick{height:56px;position:relative;font-size:10.5px;color:var(--faint);font-weight:600;padding:2px 8px;text-align:right}
  .col{border-left:1px solid var(--line2);position:relative}
  .col .slot{height:56px;border-top:1px solid var(--line2)}
  .closed{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,#f5f7fa,#f5f7fa 8px,#eef2f7 8px,#eef2f7 16px);z-index:1;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--faint);font-weight:700;letter-spacing:.05em}
  .appt{position:absolute;left:5px;right:5px;border-radius:9px;padding:7px 9px;z-index:2;overflow:hidden;cursor:pointer;border-left:3px solid;box-shadow:0 2px 6px rgba(19,36,59,.07)}
  .appt .at{font-size:10px;font-weight:700;opacity:.8}
  .appt .ap{font-size:12px;font-weight:700;line-height:1.15;margin-top:1px}
  .appt .as{font-size:10.5px;opacity:.85;margin-top:1px}
  .appt .st{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%}
  .appt .debe-mark{position:absolute;top:5px;right:17px;font-size:11px;font-weight:800;line-height:1;color:var(--bad)}

  /* ===== STUB ===== */
  .stub{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:54px 30px;text-align:center;max-width:560px;margin:30px auto}
  .stub .si{width:64px;height:64px;border-radius:18px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:28px;margin:0 auto 18px}
  /* ===== Inicio / Resumen al abrir sesión ===== */
  .home-greet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:6px}
  .home-greet h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
  .home-greet .sub{color:var(--muted);font-size:13px;margin-top:3px;text-transform:capitalize}
  .home-sec{margin-top:22px}
  .home-sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .home-sec-head h2{font-size:14.5px;font-weight:800;margin:0}
  .home-sec-head a{color:var(--accent);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer}
  .home-sec-head a:hover{text-decoration:underline}
  .home-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .home-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line2)}
  .home-row:last-child{border-bottom:none}
  .home-row .av{width:38px;height:38px;border-radius:11px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
  .home-row .who{flex:1;min-width:0}
  .home-row .pac{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-row .svc{color:var(--muted);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-row .time{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0;text-align:right}
  .home-row .time small{display:block;font-weight:600;color:var(--faint);font-size:10px}
  .home-alert{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line2)}
  .home-alert:last-child{border-bottom:none}
  .home-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .home-dot.warn{background:var(--warn)}.home-dot.bad{background:var(--bad)}.home-dot.ok{background:var(--ok)}
  .home-atxt{flex:1;font-size:13px}
  .home-atxt b{font-weight:700}
  .home-atag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0}
  .home-atag.warn{background:var(--warn-soft);color:#9a6a12}
  .home-atag.bad{background:var(--bad-soft);color:var(--bad)}
  .home-alert.actionable{flex-direction:column;align-items:stretch;gap:8px;padding:13px 16px}
  .aa-top{display:flex;align-items:center;gap:11px}
  .aa-actions{display:flex;gap:8px;padding-left:19px}
  .aa-actions .btn{padding:7px 13px;font-size:12px}
  .home-empty{padding:22px 16px;text-align:center;color:var(--faint);font-size:13px}
  .stub h2{font-size:21px;font-weight:800;letter-spacing:-.02em}
  .stub p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.6}
  .stub .tag{display:inline-block;margin-top:16px;background:var(--warn-soft);color:#9a6a12;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px}

  .hide{display:none}
  @keyframes secEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .content>section.sec-enter{animation:secEnter .32s cubic-bezier(.16,1,.3,1) both}
  @keyframes kpiEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .sec-enter .kpi{animation:kpiEnter .38s cubic-bezier(.16,1,.3,1) both}
  .sec-enter .kpi:nth-child(1){animation-delay:.02s}
  .sec-enter .kpi:nth-child(2){animation-delay:.07s}
  .sec-enter .kpi:nth-child(3){animation-delay:.12s}
  .sec-enter .kpi:nth-child(4){animation-delay:.17s}
  @keyframes rchartDotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
  .rchart-dot{transform-origin:center;transform-box:fill-box;animation:rchartDotIn .35s cubic-bezier(.34,1.56,.64,1) both;transition:r .12s ease}
  @keyframes rchartAreaIn{from{opacity:0}to{opacity:1}}
  .rchart-area{animation:rchartAreaIn 1s ease .1s both}
  .rchart-guide{transition:opacity .12s ease}
  .rchart-tip{display:none;position:absolute;top:0;transform:translateY(-100%) translateY(-10px);background:var(--navy);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(0,0,0,.22);pointer-events:none;white-space:nowrap;z-index:5}
  .rchart-tip-d{font-weight:700;margin-bottom:4px;font-size:12.5px}
  .rchart-tip-row{display:flex;justify-content:space-between;gap:14px;color:rgba(255,255,255,.75)}
  .rchart-tip-row b{color:#fff;font-variant-numeric:tabular-nums}
  .rchart-tip-money{border-top:1px solid rgba(255,255,255,.18);margin-top:4px;padding-top:4px;color:rgba(255,255,255,.75)}
  @keyframes waCtxEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .wa-ctx.wa-ctx-enter{animation:waCtxEnter .3s cubic-bezier(.16,1,.3,1) both}
  @keyframes waListEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  #waChats.wa-list-enter{animation:waListEnter .28s cubic-bezier(.16,1,.3,1) both}
  @media (prefers-reduced-motion: reduce){.content>section.sec-enter,.sec-enter .kpi,.rchart-dot,.rchart-area,.wa-ctx.wa-ctx-enter,#waChats.wa-list-enter{animation:none}.rchart-line{transition:none!important;stroke-dashoffset:0!important}}

  /* ===== LOGIN ===== */
  #loginScreen{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#1c3f3c,#0f2422);display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
  /* foto del local físico de Clínica Dental, borrosa de fondo. Si el archivo no está, queda el gradiente navy (no se rompe). */
  #loginScreen::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--navy),var(--navy-deep));z-index:0}
  #loginScreen::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 20%,rgba(87,187,180,.35),transparent 55%),radial-gradient(circle at 75% 80%,rgba(35,144,137,.3),transparent 50%),linear-gradient(135deg,rgba(28,63,60,.72),rgba(15,36,34,.8));animation:lgDrift 14s ease-in-out infinite alternate;z-index:0}
  @keyframes lgDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-3%) scale(1.08)}}
  #loginScreen .lg-card{position:relative;z-index:1}
  .lg-card{background:rgba(255,255,255,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.5);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:380px;padding:34px 30px;text-align:center}
  .lg-forgot{font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease}
  .lg-forgot:hover{color:var(--navy);border-bottom-color:var(--navy)}
  .lg-logo{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,#3fa59e,#1c746f);color:#fff;display:grid;place-items:center;font-size:28px;margin:0 auto 16px}
  .lg-card h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
  .lg-card .lg-sub{color:var(--muted);font-size:13px;margin-top:5px;margin-bottom:22px}
  .lg-field{text-align:left;margin-bottom:14px}
  .lg-field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
  .lg-field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);outline:0;background:#fafcff}
  .lg-field input:focus{border-color:var(--accent);background:#fff}
  .lg-btn{width:100%;border:0;border-radius:11px;padding:13px;background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:6px}
  .lg-btn:hover{background:var(--navy-deep)}
  .lg-btn:disabled{opacity:.6;cursor:default}
  .lg-err{color:var(--bad);font-size:12.5px;font-weight:600;margin-top:12px;min-height:16px}
  .me .logout{margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#c2d2e6;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px}
  .me .logout:hover{background:rgba(255,255,255,.2);color:#fff}
  .ni.locked{display:none}
  .t24{font-variant-numeric:tabular-nums;letter-spacing:.05em}
  /* ===== toggle de stock (inventario) ===== */
  .stk{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
  .stkb{border:0;background:#fff;padding:5px 11px;font:inherit;font-size:11.5px;font-weight:700;color:var(--faint);cursor:pointer;border-left:1px solid var(--line);transition:background .12s}
  .stkb:first-child{border-left:0}
  .stkb:hover{background:var(--bg)}
  .stkb.on.sin{background:var(--bad-soft);color:var(--bad)}
  .stkb.on.poco{background:var(--warn-soft);color:#9a6a12}
  .stkb.on.en{background:var(--ok-soft);color:var(--ok)}
  /* ===== preview de plantilla outbound ===== */
  .tpl-prev{background:#dcf3e4;border:1px solid #bfe6cb;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;min-height:42px}
  .tick.half{color:var(--faint);font-weight:500}
  .dd{position:relative}
  .ddmenu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:250px;z-index:30}
  .ddmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);padding:9px 10px;border-radius:9px;cursor:pointer}
  .ddmenu button:hover{background:var(--bg)}
  .ddmenu button .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .ddmenu button .dm{display:flex;flex-direction:column;gap:1px;min-width:0}
  .ddmenu button .dm-n{white-space:nowrap}
  .ddmenu button small{color:var(--faint);font-weight:600;font-size:11px;line-height:1.2}
  .hamb{display:none;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:17px;cursor:pointer}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(19,36,59,.4);z-index:40}
  @media(max-width:900px){
    .side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s}
    .side.open{transform:none}
    .backdrop.show{display:block}
    .hamb{display:grid;place-items:center}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .search{display:none}
    /* iOS no hace auto-zoom al enfocar un campo si la letra es >=16px */
    input,select,textarea{font-size:16px}
    /* Fila de usuario (Config→Usuarios): avatar+nombre en la línea 1, badges/botones
       saltan a la línea 2 en vez de desbordar el ancho de la pantalla en vertical. */
    .userrow{flex-wrap:wrap}
    .userrow .uperm{margin-left:0}
    .userrow>div:last-of-type{flex:1 1 100%;min-width:0}
  }
  @media(max-width:560px){
    .content{padding:16px 14px 42px}
    .top{padding:13px 16px;gap:10px}
    .top h1{font-size:17px}
    .top .sub{display:none}
    .kpi{padding:13px}
    .kpi .val{font-size:22px}
    /* Varios .ntrow traen align-items:flex-end inline (pensado para alinear label+input
       contra el botón en la fila de escritorio) — al apilarse en columna en vertical, ese
       MISMO align-items pasa a significar "pegate a la derecha" en vez de "estirate entero",
       dejando todo corrido con una franja blanca a la izquierda. Se neutraliza acá (el inline
       le gana a cualquier regla sin !important). */
    .ntrow{flex-direction:column;gap:0;align-items:stretch!important}
    .modal{padding:12px}
    .repgrid{grid-template-columns:1fr}
    .fstats{grid-template-columns:1fr 1fr}
    .repgrid .field,.fgrid .field,.rgrid .field,.setgrid .field{min-width:0}
    .btn{padding:9px 13px;font-size:12.5px}
    /* encabezados de tarjeta: apilar título+texto arriba y botones abajo (no exprimir el texto) */
    .cardhead{flex-direction:column;align-items:stretch;margin-bottom:16px}
    .cardhead .sd{margin-bottom:2px}
    .pac-bar{flex-wrap:wrap;gap:8px}
  }

  /* ===== CHATS (17/8/2026, rediseño: lista real | hilo real, dos columnas — el panel de
     detalles ya no es una tercera columna, ver .wa-details más abajo) ===== */
  /* 18/8/2026 (pedido de Feli — "queda amontonado el logo, la cantidad de mensajes y el nombre
     de la red social"): 290px -> 420px. Solo la columna de Chats; Contactos (.wbox-ctc) no se
     toca, ese pedido era puntual a la bandeja de WhatsApp/Instagram. */
  .wbox{display:grid;grid-template-columns:420px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;height:calc(100vh - 168px);min-height:520px}
  .wbox.wbox-ctc{grid-template-columns:1fr 330px}
  .wa-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
  .wa-thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
  .wa-th-head{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0}
  .wa-th-head .av{width:38px;height:38px;border-radius:11px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden}
  .wa-th-head .av-btn{cursor:pointer;border:0;padding:0;font:inherit}
  .wa-th-head .nm-btn{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;display:flex;align-items:center}
  .wa-th-head .nm{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
  .wa-th-head .ph{font-size:11.5px;color:var(--muted)}
  /* Toggle IA/Humano de ESTE chat, en la esquina derecha del header del hilo (pedido de Feli
     18/8/2026): en Instagram es el único lugar donde vive (ese canal no tiene panel de detalles),
     en WhatsApp convive con el de la ficha y los dos se pintan juntos desde refreshHeader(). */
  .wa-th-mode{margin-left:auto;flex-shrink:0}
  .wa-th-mode .seg2-opt{padding:5px 12px;font-size:11.5px}
  @media(max-width:520px){ .wa-th-mode .seg2-opt{padding:5px 9px;font-size:11px} }
  .wa-panelbtn{border:1px solid var(--line);background:#fff;border-radius:10px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;color:var(--navy)}
  .wa-panelbtn:hover{background:var(--bg)}
  .wa-panelbtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .wa-th-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px}
  .wa-daysep{align-self:center;font-size:11px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:4px 12px;border-radius:99px;margin:6px 0 10px}
  .wa-bubble{position:relative;max-width:68%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .wa-bubble.in{align-self:flex-start;background:#fff;border:1px solid var(--line)}
  .wa-bubble.out{align-self:flex-end}
  .wa-bubble.out.whatsapp{background:#d9fdd3}
  .wa-bubble.out.instagram{background:linear-gradient(135deg,#5b51d8,#833ab4);color:#fff}
  .wa-bubble.out.instagram .wbt{color:rgba(255,255,255,.75)}
  .wa-bubble .wbt{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:10px;color:var(--faint);margin-top:4px}
  .wa-bubble .wcheck{flex-shrink:0}
  .wa-bubble .wcheck.read{color:#53bdeb}
  .wa-bubble .wcheck.failed{color:#e05252}
  /* 18/8/2026 (pedido de Feli): antes el bubble pending se grisaba entero además del tick único
     — redundante, WhatsApp real no atenúa el bubble, el tick solo ya comunica "enviado, no
     confirmado". El color final del bubble aparece de una, el tick hace todo el trabajo. */
  /* ===== 18/8/2026: MediaBubble — imagen/video/audio/archivo/sticker/cita/reacciones/editado.
     Antes esto era una sola línea de texto plano + link "📎 ver adjunto" (item 1 del roadmap
     de UI/UX omnicanal: "destruye por completo el dinamismo de la conversación"). ===== */
  .wa-bubble.media{padding:4px}
  .wa-bubble.media .wbt{padding:2px 6px 4px}
  .wa-bubble .wb-img{display:block;max-width:280px;max-height:280px;width:100%;border-radius:9px;cursor:pointer;object-fit:cover}
  .wa-bubble .wb-video{display:block;max-width:280px;max-height:280px;border-radius:9px;cursor:pointer;background:#000}
  .wa-bubble .wb-video-wrap{position:relative;display:inline-block;cursor:pointer;line-height:0}
  .wa-bubble .wb-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;pointer-events:none}
  .wa-bubble .wb-caption{padding:7px 9px 2px}
  .wa-bubble .wb-file{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:180px;cursor:pointer}
  .wa-bubble .wb-file-ic{width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,.08);display:grid;place-items:center;flex-shrink:0}
  .wa-bubble.out.instagram .wb-file-ic{background:rgba(255,255,255,.18)}
  .wa-bubble .wb-file-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wa-bubble .wb-file-sub{font-size:10.5px;opacity:.65}
  .wa-bubble.sticker{background:none!important;border:0!important;padding:0!important;box-shadow:none;display:inline-flex;flex-direction:column}
  .wa-bubble .wb-sticker{width:110px;height:110px;object-fit:contain;display:block}
  .wa-bubble .wb-audio{display:flex;align-items:center;gap:8px;padding:4px 2px;min-width:190px}
  .wa-bubble .wb-audio button{border:0;background:rgba(0,0,0,.08);color:inherit;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
  .wa-bubble.out.instagram .wb-audio button{background:rgba(255,255,255,.22)}
  .wa-bubble .wb-audio-bars{flex:1;height:20px;display:flex;align-items:center;gap:2px}
  .wa-bubble .wb-audio-bars span{flex:1;background:currentColor;opacity:.35;border-radius:2px;height:40%}
  .wa-bubble .wb-audio-time{font-size:10px;opacity:.65;flex-shrink:0}
  .wa-bubble .wb-quote{border-left:3px solid rgba(0,0,0,.2);padding:4px 8px;margin:2px 2px 6px;border-radius:4px;background:rgba(0,0,0,.04);font-size:12px;opacity:.8}
  .wa-bubble.out.instagram .wb-quote{border-left-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
  .wa-bubble .wb-reactions{position:absolute;bottom:-11px;right:8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:1px 5px;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .wa-bubble.deleted,.wa-bubble.unsupported{font-style:italic;opacity:.65}
  .wa-bubble .wb-edited{font-size:10px;opacity:.6;font-style:italic;margin-left:3px}
  /* ===== 18/8/2026 — menú de acciones del mensaje (Responder/Reaccionar/Copiar/Reenviar),
     PLAN-CHAT-PARIDAD-2.md fase 2. La flechita vive dentro de cada burbuja pero el dropdown es
     UNO SOLO a nivel body (#msgMenu) — 100 dropdowns por hilo de 100 mensajes rompía el DOM y el
     THREADSIG. Se posiciona con getBoundingClientRect() del botón que lo abrió. ===== */
  .wa-bubble .wb-menu-btn{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:inherit;opacity:0;cursor:pointer;display:grid;place-items:center;transition:opacity .12s,background .12s}
  .wa-bubble.media .wb-menu-btn,.wa-bubble.sticker .wb-menu-btn{background:rgba(0,0,0,.4);color:#fff}
  .wa-bubble:hover .wb-menu-btn,.wa-bubble .wb-menu-btn:focus-visible,.wa-bubble.menu-open .wb-menu-btn{opacity:1}
  .wa-bubble .wb-menu-btn:hover{background:rgba(0,0,0,.14)}
  .wa-bubble.media .wb-menu-btn:hover,.wa-bubble.sticker .wb-menu-btn:hover{background:rgba(0,0,0,.55)}
  .msgmenu{position:fixed;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:400;display:none}
  .msgmenu.show{display:block}
  .msgmenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);padding:9px 10px;border-radius:9px;cursor:pointer}
  .msgmenu button:hover{background:var(--bg)}
  .msgmenu button svg{flex-shrink:0;opacity:.7}
  .msgmenu-emojis{display:flex;gap:2px;padding:4px 2px}
  .msgmenu-emojis button{width:34px;height:34px;flex-shrink:0;font-size:17px;justify-content:center;padding:0}
  .msgmenu-emojis button.mine{background:var(--accent-soft)}
  .msgmenu-sep{height:1px;background:var(--line);margin:5px 4px}
  /* barra de "Respondiendo a…" arriba del composer, mismo patrón visual que .wb-quote */
  .wa-reply-bar{display:none;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);background:var(--bg);flex-shrink:0}
  .wa-reply-bar.show{display:flex}
  .wa-reply-bar-line{width:3px;align-self:stretch;background:var(--accent);border-radius:2px;flex-shrink:0}
  .wa-reply-bar-body{flex:1;min-width:0}
  .wa-reply-bar-who{font-size:11.5px;font-weight:700;color:var(--accent)}
  .wa-reply-bar-txt{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wa-reply-bar-close{border:0;background:none;color:var(--faint);cursor:pointer;padding:6px;border-radius:8px;flex-shrink:0}
  .wa-reply-bar-close:hover{background:var(--line2);color:var(--ink)}
  /* burbuja optimista mostrando la cita antes de que vuelva confirmado de Zernio */
  .wa-bubble .wb-quote.pending{opacity:.85}
  /* modal "Reenviar a…" */
  .fwd-search{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--faint);margin-bottom:10px}
  .fwd-search input{border:0;background:none;outline:0;font:inherit;width:100%;color:var(--ink)}
  .fwd-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
  .fwd-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
  .fwd-row:hover{background:var(--bg)}
  .fwd-row.sel{background:var(--accent-soft);border-color:var(--accent)}
  .fwd-row .av{width:34px;height:34px;border-radius:10px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0;overflow:hidden}
  .fwd-row .fn{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fwd-row .fs{font-size:11.5px;color:var(--muted)}
  .wa-th-empty{margin:auto;text-align:center;color:var(--faint);font-size:13.5px;line-height:1.6;padding:30px}
  /* 16/8/2026 (fix de raíz, bug real: la caja del chat se veía rota partida en franjas incluso
     sin ningún chat abierto): .wa-th-head/.wa-th-msgs/.wa-composer definen `display` DESPUÉS de
     `.hide` en la hoja — misma especificidad, gana la última regla y `.hide` no pisa nada. En vez
     de pelear el orden en cascada, el estado pasa al contenedor: sin `.has-chat` estos tres van
     ocultos por default, ninguno depende ya de la clase `.hide`. */
  .wa-thread .wa-th-head,.wa-thread .wa-th-msgs,.wa-thread .wa-composer{display:none}
  .wa-thread.has-chat .wa-th-head{display:flex}
  .wa-thread.has-chat .wa-th-msgs{display:flex}
  .wa-thread.has-chat .wa-composer{display:flex}
  .wa-thread.has-chat .wa-th-empty{display:none}
  /* 17/8/2026 (pedido de Feli): el panel de detalles ya no es un drawer angosto, ocupa TODO
     el espacio donde antes se veían los mensajes — se intercambian en el mismo lugar, el
     header (avatar/nombre/toggle/puertita) queda fijo arriba en los dos estados. */
  .wa-details{display:none;flex:1;overflow-y:auto;background:var(--panel)}
  .wa-thread.details-open .wa-th-msgs,.wa-thread.details-open .wa-composer{display:none}
  .wa-thread.details-open .wa-th-empty{display:none}
  .wa-thread.details-open .wa-details{display:block}
  /* 17/8/2026 (pedido de Feli, root-cause: "el espacio está muy mal optimizado" — una sola
     columna de 620px centrada en un panel mucho más ancho dejaba muchísimo vacío a los lados):
     grilla de 2 columnas (ficha+toggle a la izquierda, acciones+info a la derecha) hasta que el
     panel es angosto, ahí colapsa a 1 columna en vez de quedar apretada. */
  /* 18/8/2026 (PLAN-CHAT-PARIDAD-2.md fase 3.2, layout "header + tiles" elegido por Feli sobre
     mockups): antes 2 columnas 1fr/1fr — con pocos datos (la mayoría de los chats no tienen obra
     social/turnos cargados todavía) la columna derecha quedaba con aire enorme debajo de los 4
     botones. Ahora una sola columna a lo ancho: header con el toggle a la derecha, tiles de datos
     en fila, botones en fila, escalación y estado del chat abajo — sin huecos estructurales. */
  .wa-details-inner{max-width:1000px;margin:0 auto;padding:28px 28px 40px;display:flex;flex-direction:column;gap:20px}
  .wa-details-head{display:flex;align-items:center;gap:16px}
  .wa-details-head .cav{width:60px;height:60px;border-radius:17px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex-shrink:0;overflow:hidden}
  .wa-details-head h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:7px}
  .wa-details-head .sm{font-size:12.5px;color:var(--muted);margin-top:3px}
  .wa-details-head .seg2{margin-left:auto;flex-shrink:0}
  .wa-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .wa-tile{background:var(--bg);border-radius:12px;padding:12px 14px}
  .wa-tile span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
  .wa-tile b{font-size:13.5px;font-weight:700}
  .ctx-act.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ctx-act.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .wa-details-inner .wa-conv-info{margin:0;text-align:left;max-width:none;padding:12px 13px;background:var(--accent-soft);border-radius:10px;color:var(--navy-deep);font-size:12.5px;line-height:1.6}
  @media(max-width:900px){.wa-tiles,.ctx-act.grid4{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.wa-tiles,.ctx-act.grid4{grid-template-columns:1fr}.wa-details-head{flex-wrap:wrap}.wa-details-head .seg2{margin-left:0}}
  .wa-th-banner{display:none;flex-shrink:0}
  .wa-th-banner.show{display:block;animation:waBannerDrop .26s cubic-bezier(.16,1,.3,1) both}
  @keyframes waBannerDrop{from{transform:translateY(-100%);opacity:.4}to{transform:translateY(0);opacity:1}}
  @media(prefers-reduced-motion:reduce){.wa-th-banner.show{animation:none}}
  .wa-th-banner .flagcard{margin:12px 16px 0;border-radius:12px}
  .wa-th-banner .flagclose{position:absolute;top:10px;right:10px;border:0;background:none;color:var(--faint);cursor:pointer;padding:4px}
  .wa-composer{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel);flex-shrink:0;align-items:flex-end}
  .wa-attach{border:0;background:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:9px;flex-shrink:0}
  .wa-attach:hover{background:var(--bg);color:var(--navy)}
  .wa-composer textarea{flex:1;border:1px solid var(--line);border-radius:16px;padding:10px 14px;font:inherit;font-size:13.5px;background:var(--bg);resize:none;max-height:120px;overflow-y:auto;line-height:1.4}
  .wa-composer textarea:focus{outline:none;border-color:var(--accent)}
  .wa-composer button:not(.wa-attach){border:0;background:var(--accent);color:#fff;border-radius:11px;width:38px;height:38px;flex-shrink:0;cursor:pointer;display:grid;place-items:center}
  .wa-composer button:disabled{opacity:.5;cursor:default}
  .platform-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;background:var(--bg);color:var(--muted)}
  /* ===== flechita submenu del item de nav (Chats > Contactos / Plantillas) ===== */
  .ni-row{display:flex;align-items:stretch}
  .ni-row .ni{flex:1}
  .ni-caret{width:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:0;background:none;color:rgba(255,255,255,.55);cursor:pointer;border-radius:9px;transition:transform .18s ease,color .12s}
  .ni-caret:hover{color:#fff;background:rgba(255,255,255,.08)}
  .ni-caret.open{transform:rotate(90deg)}
  .ni-submenu{display:none;flex-direction:column}
  .ni-submenu.open{display:flex}
  .ni-sub{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 40px;border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:13px;width:100%;text-align:left;cursor:pointer;border-radius:9px}
  .ni-sub:hover{background:rgba(255,255,255,.06);color:#fff}
  .ni-sub.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
  .wa-lh{padding:12px;border-bottom:1px solid var(--line)}
  .wa-lh-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
  .wa-lh-top h2{font-size:15.5px;font-weight:800}
  .wa-lh-count{font-size:11.5px;color:var(--muted);font-weight:600;flex-shrink:0}
  .wa-search{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--faint)}
  .wa-search input{border:0;background:none;outline:0;font:inherit;width:100%;color:var(--ink)}
  .wa-tabs{display:flex;gap:4px;margin-top:9px}
  .wa-tabs button{flex:1;border:0;background:var(--bg);font:inherit;font-size:11px;font-weight:700;color:var(--muted);padding:6px 4px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
  .wa-tabs button.on{background:var(--navy);color:#fff}
  .wa-tab-n{font-size:9.5px;font-weight:800;opacity:.75}
  .wa-tplbtn{width:100%;margin-top:8px;justify-content:center;font-size:12.5px}
  .wa-chats{overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#c2cfde transparent}
  .wa-chats::-webkit-scrollbar{width:10px}
  .wa-chats::-webkit-scrollbar-thumb{background:#c2cfde;border-radius:6px;border:2px solid var(--panel)}
  .wa-chats::-webkit-scrollbar-thumb:hover{background:#a7b8cc}
  .wc{display:flex;gap:10px;padding:11px 12px;cursor:pointer;border-bottom:1px solid var(--line2);align-items:center}
  .wc:hover{background:var(--bg)}
  .wc.on{background:var(--accent-soft)}
  .wc .av{position:relative;width:42px;height:42px;border-radius:12px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0}
  /* 17/8/2026 (pedido de Feli): el badge de red social vive DENTRO de .av con offset negativo
     para asomar fuera del cuadrado — .av tenía overflow:hidden (para recortar la foto de perfil
     al cuadrado redondeado) y eso cortaba el propio badge que necesitaba salirse. Se saca
     overflow:hidden de acá y se lo pasa a la foto (border-radius:inherit en el <img>, ver
     convAvatarInner) para que siga recortada sin volver a tapar el badge. */
  .plat-dot{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;border:2px solid var(--panel);z-index:1}
  .wc .wcb{min-width:0;flex:1}
  .wc .wcn{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
  .wc .wcnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .wc .wcl{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .wc .wcr{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .wc .wct{font-size:10.5px;color:var(--faint);font-weight:600}
  .wc .wcu{background:#25d366;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
  .wc .wcpin{font-size:12px;opacity:0;cursor:pointer;transition:opacity .12s}
  .wc:hover .wcpin{opacity:.5}
  .wc.pinned .wcpin{opacity:1}
  .wc.pinned{background:rgba(47,127,208,.06)}
  .wc.pinned.on{background:var(--accent-soft)}
  /* fila con escalación pendiente (portado del panel base, 17/8/2026): franja izquierda + fondo
     teñido en toda la fila, mucho más visible escaneando la lista que un ícono suelto.
     18/8/2026 (pedido de Feli): contorno completo con outline (no border, no mueve el layout de
     la fila) sumado a la franja izquierda que ya existía. */
  .wc.flagged{outline:1.5px solid var(--bad);outline-offset:-1.5px;border-left:4px solid var(--bad);padding-left:8px;background:var(--bad-soft)}
  .wc.flagged.on{background:var(--accent-soft)}
  .mtag{font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
  .mtag.ia{background:var(--accent-soft);color:var(--accent)}
  .mtag.hum{background:var(--warn-soft);color:#9a6a12}
  .turnoflag{display:inline-flex;width:15px;height:15px;border-radius:50%;background:var(--bad);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;flex-shrink:0}
  .flagcard{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px;text-align:left}
  .flagcard .fi{width:44px;height:44px;border-radius:12px;background:var(--bad-soft);display:grid;place-items:center;font-size:20px;flex-shrink:0}
  .flagcard .ft{font-weight:800;font-size:14.5px;margin-bottom:4px}
  .flagcard .fd{font-size:13px;color:var(--muted);line-height:1.5}
  .flagcard .fa{display:flex;gap:9px;margin-top:12px}
  .flagcard.bottom{border:1.5px solid var(--bad);border-left:1.5px solid var(--bad);margin-top:14px;margin-bottom:0}
  .wc .rowsw{width:34px;height:20px;border-radius:99px;background:var(--accent);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
  .wc .rowsw.hum{background:var(--warn)}
  .wc .rowsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
  .wc .rowsw.hum::after{left:16px}
  .wa-conv-info{margin:auto;text-align:center;color:var(--muted);font-size:13px;line-height:1.7;padding:30px;max-width:280px}
  .wa-conv-info b{color:var(--ink)}
  .wa-ctx .wa-conv-info{margin:16px 0 0;text-align:left;max-width:none;padding:12px 13px;background:var(--accent-soft);border-radius:10px;color:var(--navy-deep);font-size:12.5px;line-height:1.6}
  .wa-ch2{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
  .wa-ch2 h3{display:flex;align-items:center;gap:5px}
  .wa-ch2 .wa-back{margin-top:2px}
  .wa-ch{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
  .wa-ch .av{width:38px;height:38px;border-radius:11px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
  .wa-ch .nm{font-size:14px;font-weight:700}
  .wa-ch .ph{font-size:11.5px;color:var(--muted)}
  .toggle{margin-left:auto;display:flex;align-items:center;gap:9px}
  .toggle .sw{width:46px;height:26px;border-radius:99px;background:var(--accent);position:relative;cursor:pointer;transition:background .3s ease;flex-shrink:0;box-shadow:inset 0 1px 4px rgba(0,0,0,.18)}
  .toggle .sw.hum{background:var(--warn)}
  .toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .32s cubic-bezier(.34,1.56,.64,1),width .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .toggle .sw.hum::after{left:23px}
  .toggle .sw:active::after{width:25px}
  .toggle .sw.hum:active::after{left:18px}
  .toggle .tl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .ai-wrap{display:flex;flex-direction:column;height:calc(100vh - 190px);max-height:760px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-top:14px}
  .ai-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:#f6f8fb}
  .ai-bubble{max-width:74%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
  .ai-bubble.user{align-self:flex-end;background:#d7ecff}
  .ai-bubble.bot{align-self:flex-start;background:#fff;border:1px solid var(--line)}
  .ai-inputbar{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:var(--panel)}
  .ai-inputbar input{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font:inherit;font-size:13.5px;background:var(--bg)}
  .ai-inputbar input:focus{outline:none;border-color:var(--accent)}
  .lib-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
  .lib-saved{font-size:12px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .25s}
  .lib-saved.show{opacity:1}
  .lib-area{width:100%;min-height:360px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-family:inherit;font-size:14.5px;line-height:1.7;color:var(--ink);background:var(--card);box-shadow:0 1px 2px rgba(8,16,30,.04)}
  .lib-area:focus{outline:none;border-color:var(--accent)}
  /* ===== Libreta tipo notas (varias notas por usuario) ===== */
  .notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .note-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:15px 16px;cursor:pointer;min-height:128px;display:flex;flex-direction:column;gap:7px;transition:transform .12s,box-shadow .12s}
  .note-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(19,36,59,.1)}
  .note-card-t{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .note-card-p{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-wrap}
  .note-card-d{font-size:11px;color:var(--faint);font-weight:600;margin-top:auto}
  .lib-ebar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .note-edit{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px}
  .note-title{width:100%;border:0;outline:0;font:inherit;font-size:20px;font-weight:800;color:var(--ink);padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:12px;background:none}
  .note-title::placeholder{color:var(--faint)}
  #libEditor .lib-area{min-height:320px;border:0;box-shadow:none;padding:4px 2px;border-radius:0}
  #libEditor .lib-area:focus{border:0}
  /* "+" prolijo: dos barras en color heredado (blanco en botones primary), centrado y nítido.
     .btn es inline-flex con gap → el espaciado lo da el gap, sin margen extra. */
  .plus{display:inline-block;width:13px;height:13px;position:relative;vertical-align:middle;flex:0 0 auto}
  .plus::before,.plus::after{content:"";position:absolute;background:currentColor;border-radius:1.5px}
  .plus::before{left:0;right:0;top:50%;height:2.2px;transform:translateY(-50%)}
  .plus::after{top:0;bottom:0;left:50%;width:2.2px;transform:translateX(-50%)}
  /* encabezado de categoría en la tabla de servicios */
  tr.svccat td{background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;padding:8px 12px}
  #lightbox{position:fixed;inset:0;background:rgba(8,16,30,.88);z-index:1200;display:none;align-items:center;justify-content:center}
  #lightbox.show{display:flex}
  #lightbox .lb-x{position:absolute;top:16px;right:22px;color:#fff;font-size:26px;cursor:pointer;opacity:.85;z-index:2;line-height:1}
  #lightbox .lb-load{color:#fff;font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .lb-spin{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:lbsp .8s linear infinite}
  @keyframes lbsp{to{transform:rotate(360deg)}}
  .wa-ctx{border-left:1px solid var(--line);padding:16px;background:var(--panel);overflow-y:auto}
  .wa-ctx .cav{width:54px;height:54px;border-radius:15px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;margin-bottom:10px}
  .wa-ctx h3{font-size:15px;font-weight:800}
  .wa-ctx .sm{font-size:12px;color:var(--muted);margin-top:2px}
  .ctx-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
  .ctx-row span{color:var(--muted)}
  .ctx-row b{font-weight:700;text-align:right}
  .ctx-act{margin-top:14px;display:flex;flex-direction:column;gap:8px}
  .ctx-act button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left;display:flex;align-items:center;gap:9px;color:var(--ink)}
  .ctx-act button:hover{background:var(--bg)}
  .wa-back{display:none;border:0;background:none;font-size:26px;line-height:1;color:var(--navy);cursor:pointer;padding:0 6px 0 0;font-weight:700}
  @media(max-width:1300px){
    .wbox{grid-template-columns:340px 1fr}
    .wbox.wbox-ctc{grid-template-columns:1fr 300px}
  }
  @media(max-width:900px){
    .wbox,.wbox.wbox-ctc{grid-template-columns:1fr}
    .wbox .wa-list{display:flex}
    .wbox .wa-thread,.wbox .wa-ctx{display:none}
    .wbox.show-conv .wa-list{display:none}
    .wbox.show-conv .wa-thread{display:flex}
    .wbox.show-conv .wa-ctx{display:block}
    .wa-back{display:inline-flex;align-items:center}
  }

  /* ===== PACIENTES + FICHA ===== */
  .pac-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
  .pac-count{font-size:13px;color:var(--muted);font-weight:700}
  .tablecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;overflow-x:auto}
  .ptable{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:680px}
  .ptable th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:8px 16px}
  .ptable td{padding:13px 16px;font-size:13px;background:var(--panel);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .ptable td:first-child{border-left:1px solid var(--line2);border-radius:10px 0 0 10px}
  .ptable td:last-child{border-right:1px solid var(--line2);border-radius:0 10px 10px 0}
  .ptable tbody tr{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
  .ptable tbody tr:hover td{background:var(--accent-soft);border-color:var(--navy-line)}
  .ptable tbody tr:hover{transform:translateY(-1px)}
  .ptable tbody tr:active{transform:translateY(0)}
  .pcell{display:flex;align-items:center;gap:10px}
  .pcell .av{width:36px;height:36px;border-radius:10px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
  .pcell .pn{font-weight:700}
  .pcell .pp{font-size:11.5px;color:var(--muted)}
  .pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
  .pill.os{background:var(--accent-soft);color:var(--accent)}
  .linklike{color:var(--accent);font-weight:700;font-size:12.5px;white-space:nowrap}
  .ficha{display:none}
  .fbar{margin-bottom:16px}
  .fback{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
  .fback:hover{background:var(--bg)}
  .fcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:14px}
  .fhead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .fhead .fav{width:60px;height:60px;border-radius:16px;background:linear-gradient(150deg,#3fa59e,#1c746f);color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800}
  .fname{font-size:23px;font-weight:800;letter-spacing:-.01em}
  .fmeta{color:var(--muted);font-size:13px;margin-top:2px}
  .fid{margin-left:auto;text-align:right;font-size:10.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
  .fid b{display:block;font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:2px}
  .ftags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
  .ftag{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px}
  .ftag.al{background:var(--bad-soft);color:#9c2b2b}.ftag.wa{background:var(--warn-soft);color:#8a5708}.ftag.inf{background:var(--accent-soft);color:var(--accent)}
  .fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
  .fstat{background:#f7f9fc;border:1px solid var(--line);border-radius:11px;padding:11px 12px}
  .fstat .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
  .fstat .v{font-size:14px;font-weight:700;margin-top:3px}
  .plan-embed{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .fsec h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;margin-bottom:14px}
  .odo-lg{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;font-size:11.5px;color:var(--muted)}
  .odo-lg span{display:inline-flex;align-items:center;gap:6px}
  .odo-lg i{width:11px;height:11px;border-radius:3px}
  .arch{display:flex;flex-direction:column;gap:6px}
  .arch .lab{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:700;text-align:center}
  .teeth{display:flex;justify-content:center;gap:3px;flex-wrap:wrap}
  .tooth{width:26px;height:34px;border-radius:6px 6px 8px 8px;border:1.5px solid var(--line);background:#fbfdfe;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2px;font-size:8.5px;color:var(--faint);font-weight:700}
  .tooth .cr{width:11px;height:11px;border-radius:50%;margin-top:3px;margin-bottom:auto}
  .tooth.tx{background:var(--accent-soft);border-color:#bcdcf7;color:var(--accent)}.tooth.tx .cr{background:var(--accent)}
  .tooth.or{background:var(--warn-soft);border-color:#ecd09a;color:#8a5708}.tooth.or .cr{background:var(--warn)}
  .tooth.gone{background:repeating-linear-gradient(45deg,#f0f2f5,#f0f2f5 3px,#e6e9ee 3px,#e6e9ee 6px);border-color:#dfe4ea;color:#aab4c0}
  /* ===== Odontograma por superficies (item 3) ===== */
  .odo-dent{display:inline-flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;margin:4px 0 14px}
  .odo-dent button{border:0;background:none;padding:6px 13px;border-radius:8px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
  .odo-dent button.on{background:var(--navy);color:#fff}
  .odo-dentlbl{font-size:12px;font-weight:700;color:var(--muted);margin:4px 0 14px}
  /* ===== Historia clínica (EHR) ===== */
  .ehr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
  .ehr-k{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
  .ehr-v{font-size:13.5px;color:var(--ink);font-weight:600}
  .ehr-chips{display:flex;flex-wrap:wrap;gap:6px}
  .ehr-none{font-size:13px;color:var(--faint)}
  .ehr-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .ehr-chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
  .ehr-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
  @media(max-width:560px){.ehr-grid{grid-template-columns:1fr}.ehr-checks{grid-template-columns:1fr}}
  /* ===== Plan de tratamiento ===== */
  .plan-est{border:0;border-radius:8px;padding:5px 11px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
  .plan-est.est-pend{background:var(--warn-soft);color:#8a5708}
  .plan-est.est-curso{background:var(--accent-soft);color:var(--accent)}
  .plan-est.est-hecho{background:var(--ok-soft);color:var(--ok)}
  .plan-tot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;flex-wrap:wrap}
  .plan-tot b{font-size:17px;color:var(--ink);margin-left:6px}
  .plan-det{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4;font-weight:500;max-width:420px}
  /* ===== Archivos / estudios ===== */
  .files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .files-empty{color:var(--faint);font-size:13px;padding:6px 0;grid-column:1/-1}
  .file-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
  .file-th{width:100%;height:96px;object-fit:cover;cursor:pointer;display:block;background:#eef2f7}
  .file-ic{height:96px;display:grid;place-items:center;font-size:34px;background:#eef2f7;cursor:pointer}
  .file-meta{padding:8px 10px;min-width:0}
  .file-nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .file-sub{font-size:11px;color:var(--faint);margin-top:1px}
  .file-acts{display:flex;gap:5px;padding:0 8px 9px}
  .file-acts .ibtn{font-size:12px;text-decoration:none;display:inline-grid;place-items:center;color:var(--ink)}
  .odo-scroll{overflow-x:auto;padding-bottom:8px}
  #odoChart{display:inline-flex;flex-direction:column;gap:16px;min-width:100%;padding:4px 0}
  .odg-row{display:flex;gap:6px;align-items:flex-start;justify-content:center}
  .odg-row.kid{opacity:.92}
  .odg-divider{border:0;border-top:1px dashed var(--line);margin:2px 0}
  .odg-gap{width:16px;flex-shrink:0}
  .odg-tooth{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
  .odg-grid{position:relative;display:grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:1.5px}
  .oz{cursor:pointer;background:#fff;border:1px solid #cfd6df;transition:background .1s}
  .oz:hover{outline:1.5px solid var(--accent);outline-offset:-1px;z-index:1}
  .oz-t{grid-area:1/2/2/3}.oz-l{grid-area:2/1/3/2}.oz-c{grid-area:2/2/3/3;border-radius:2px}.oz-r{grid-area:2/3/3/4}.oz-b{grid-area:3/2/4/3}
  .oz.st-caries{background:#e5534b;border-color:#cc3c34}
  .oz.st-obturado{background:#2f7fd0;border-color:#2569b0}
  .oz.st-sellante{background:#1f9d6b;border-color:#178055}
  .odg-num{font-size:9.5px;font-weight:700;color:var(--faint);cursor:pointer;user-select:none}
  .odg-num:hover{color:var(--accent)}
  .wt-mark{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;pointer-events:none}
  .wt-ausente .odg-grid{opacity:.4} .wt-ausente .wt-mark{color:#8794a3}
  .wt-extraer .wt-mark{color:#e5534b}
  .wt-corona .odg-grid{outline:2px solid #d4a017;outline-offset:1px;border-radius:3px}
  .wt-implante .odg-grid{outline:2px solid #7a5cd0;outline-offset:1px;border-radius:3px}
  .odg-legend{display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:14px;font-size:11px;color:var(--muted);font-weight:600}
  .odg-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px;border:1px solid #cfd6df}
  .odg-hint{font-size:11px;color:var(--faint);margin-top:6px}
  .odg-num.kidnum{color:var(--accent);opacity:.75}
  .odg-num.has-note{position:relative}
  .odg-num.has-note::after{content:"";position:absolute;top:-1px;right:-5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .tooth-w{display:flex;flex-wrap:wrap;gap:6px}
  .tw-b{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
  .tw-b:hover{background:var(--bg)}
  .tw-b.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .odo-log{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
  .odo-log summary{font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;list-style:none}
  .odo-log summary::-webkit-details-marker{display:none}
  .odo-log summary::before{content:"▸ ";color:var(--faint)}
  .odo-log[open] summary::before{content:"▾ "}
  .odo-log-list{margin-top:8px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
  .ol-row{font-size:12px;color:var(--ink);background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:7px 9px;line-height:1.4}
  .ol-row b{color:var(--navy)}
  .ol-meta{font-size:10.5px;color:var(--faint);font-weight:600;margin-top:2px}
  .tl{position:relative;padding-left:22px}
  .tl::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--line)}
  .ev{position:relative;padding-bottom:16px}.ev:last-child{padding-bottom:0}
  .ev::before{content:"";position:absolute;left:-19px;top:3px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--accent)}
  .ev{padding-right:46px}
  .ev .et{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
  .ev .es{font-weight:700;font-size:14px}.ev .ed{font-size:11.5px;color:var(--faint);font-weight:600}
  .ev .ev-act{position:absolute;top:0;right:0;display:flex;gap:1px}
  .ev-b{border:0;background:none;cursor:pointer;font-size:12.5px;opacity:.4;padding:3px 5px;border-radius:6px;line-height:1}
  .ev-b:hover{opacity:1;background:var(--bg)}
  .tl-scroll{max-height:360px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
  .tl-scroll::-webkit-scrollbar{width:7px}.tl-scroll::-webkit-scrollbar-thumb{background:#d4dbe4;border-radius:4px}
  .ev .edoc{font-size:12px;color:var(--accent);font-weight:700;margin-top:1px}
  .ev .en{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
  .fnext{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#3fa59e,#1c746f);color:#fff;border-radius:12px;padding:14px;margin-top:14px}
  .fnext .cal{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
  .fnext .cal .d{font-size:18px;font-weight:800;line-height:1}.fnext .cal .m{font-size:9px;text-transform:uppercase;opacity:.85}
  .fnext .ft{font-weight:700;font-size:14px}.fnext .fs{font-size:12px;opacity:.9;margin-top:1px}
  @media(max-width:780px){.fgrid{grid-template-columns:1fr}}

  /* ===== DOCTORES ===== */
  .docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .doccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column}
  .dch{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--line2);margin-bottom:13px}
  .dav{width:44px;height:44px;border-radius:12px;color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
  .dchb{flex:1;min-width:0}
  .dnm{font-size:15px;font-weight:800}
  .dsp{font-size:12px;color:var(--muted)}
  .dstate{font-size:10.5px;font-weight:800;color:var(--ok);background:var(--ok-soft);padding:4px 9px;border-radius:999px}
  .doc-aus-banner{background:var(--bad-soft);color:var(--bad);font-size:11.5px;font-weight:700;padding:8px 12px;border-radius:var(--radius) var(--radius) 0 0;margin:-16px -16px 13px -16px;display:flex;align-items:center;gap:6px}
  .dblock{margin-bottom:12px}
  .dlbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;margin-bottom:7px}
  .dval{font-size:13px;font-weight:600}
  .chips{display:flex;flex-wrap:wrap}
  .chip{display:inline-block;font-size:11px;font-weight:600;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:4px 9px;border-radius:7px;margin:0 5px 5px 0}
  .ausrow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0}
  .ausrow span{color:var(--bad);font-weight:700}
  .ausnone{font-size:12.5px;color:var(--muted)}
  .dbtn{width:100%;margin-top:auto;justify-content:center}

  /* ===== MODAL ===== */
  /* z-index 210 (2/8/2026, fix de raiz, bug real): #loginScreen usa z-index:200 y sigue visible
     durante firstLoginFlow (primer ingreso / reset de contraseña) -- con el modal por debajo de
     eso, "Creá tu contraseña" se abria perfecto en el DOM pero quedaba tapado sin que nadie
     pudiera verlo ni tocarlo, dejando el login trabado en un loop silencioso. */
  .modal{position:fixed;inset:0;background:rgba(19,36,59,.5);display:none;align-items:center;justify-content:center;z-index:210;padding:20px}
  .modal.show{display:flex}
  /* 3/8/2026: toast centrado para avisos breves (ej. "paciente no registrado") — no bloquea
     como un modal, se desvanece solo, no requiere que Agos lo cierre a mano. */
  .toastc{position:fixed;top:28px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:300;
    background:var(--navy-deep);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:600;
    box-shadow:0 14px 34px rgba(19,36,59,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .toastc.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .modalbox{background:#fff;border-radius:16px;width:100%;max-width:440px;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
  .modalbox .mhd{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
  .modalbox .mhd h3{font-size:16px;font-weight:800}
  .modalbox .mhd .x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
  .modalbox .mbd{padding:20px;display:flex;flex-direction:column;gap:12px;max-height:70vh;overflow-y:auto}
  .field label{font-size:11.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
  .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;outline:0;color:var(--ink)}
  .field input:focus,.field select:focus{border-color:var(--accent)}
  /* iOS: los input date tienen ancho propio y se desbordan → forzarlos al ancho del campo */
  .field input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
  .ntrow .field{min-width:0}
  .modalbox .mft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

  /* 6/8/2026: turno para un tercero (mamá agendando para su hija, etc.) */
  .btn.sm{padding:7px 11px;font-size:12px;border-radius:9px}
  .whoseg{display:flex;background:var(--line2);border-radius:11px;padding:3px;gap:3px}
  .whoseg button{flex:1;border:0;background:transparent;padding:9px 8px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
  .whoseg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(19,36,59,.12)}
  .contactbox{border:1px dashed var(--accent);border-radius:12px;padding:13px;background:var(--accent-soft);display:flex;flex-direction:column;gap:11px}
  .contactbox .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}
  .reuse{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .reuse .num{font-size:13px;font-weight:700}
  .reuse .tag{font-size:10.5px;color:var(--muted);margin-top:1px}
  .reuse .btns{display:flex;gap:6px;flex:none}

  /* ===== ESCALACIONES ===== */
  .esc-intro{background:var(--accent-soft);border:1px solid #cfe0f3;color:#235a8c;border-radius:var(--radius);padding:14px 16px;font-size:13px;line-height:1.55;margin-bottom:16px}
  .esc-head{margin-bottom:12px}
  .esc-card{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;margin-bottom:12px}
  .esc-card.pend{border-left:4px solid var(--warn)}
  .esc-card.resuelto{opacity:.6;border-left:4px solid var(--ok)}
  .esc-icon{width:46px;height:46px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:22px;flex-shrink:0}
  .esc-body{flex:1;min-width:0}
  .esc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .esc-pac{font-weight:800;font-size:14.5px}
  .esc-ph{font-size:11.5px;color:var(--faint)}
  .esc-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:var(--warn-soft);color:#8a5708;padding:2px 7px;border-radius:5px}
  .esc-time{font-size:11px;color:var(--faint);margin-left:auto;font-weight:600}
  .esc-motivo{font-size:13px;color:var(--ink);margin-top:5px}
  .esc-motivo-part{padding:6px 0 6px 10px;border-left:2px solid var(--line)}
  .esc-motivo-part+.esc-motivo-part{margin-top:4px}
  .esc-route{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:7px;background:var(--accent-soft);display:inline-block;padding:5px 10px;border-radius:8px}
  .esc-route b{font-weight:800}
  .esc-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
  .esc-actions .btn{padding:8px 13px;font-size:12px}
  .esc-done{color:var(--ok);font-weight:800;font-size:13px}
  @media(max-width:720px){.esc-card{flex-wrap:wrap}.esc-actions{flex-direction:row;width:100%}.esc-time{margin-left:0}}

  /* ===== RESUMEN / KPIs ===== */
  .kpi .delta{font-size:11.5px;font-weight:800;margin-top:6px}
  .kpi .delta.up{color:var(--ok)} .kpi .delta.down{color:var(--bad)}
  .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .rcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .rcard h3{font-size:13px;font-weight:800;margin-bottom:16px}
  .barlist{display:flex;flex-direction:column;gap:13px}
  .barrow .bl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
  .barrow .bl b{font-weight:800}
  .bartrack{height:9px;border-radius:5px;background:var(--bg);overflow:hidden}
  .barfill{height:100%;border-radius:5px}
  .vbars{display:flex;align-items:flex-end;gap:10px;height:178px;margin-top:6px}
  .vbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
  .vbar .vv{font-size:10.5px;color:var(--faint);font-weight:700}
  .vbar .vb{width:100%;max-width:44px;background:linear-gradient(180deg,#3f8fd8,#1b3a5e);border-radius:7px 7px 0 0}
  .vbar .vl{font-size:11px;color:var(--muted);font-weight:700}
  @media(max-width:780px){.rgrid{grid-template-columns:1fr}}

  /* ===== FACTURACIÓN / INVENTARIO pills ===== */
  .pill.ok{background:var(--ok-soft);color:var(--ok)}
  .pill.wa{background:var(--warn-soft);color:#8a5708}
  .pill.bad{background:var(--bad-soft);color:#9c2b2b}
  .amount{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .muted{color:var(--faint)}

  /* ===== REPORTES + ACTIVIDAD ===== */
  .repgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .acts{display:flex;flex-direction:column}
  .act{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line2)}
  .act:last-child{border-bottom:0}
  .act .ai{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
  .act .ab{flex:1;font-size:13px;line-height:1.4}
  .act .ab b{font-weight:800}
  .act .at{font-size:11px;color:var(--faint);font-weight:600;white-space:nowrap}
  @media(max-width:780px){.repgrid{grid-template-columns:1fr 1fr}}

  /* ===== AGENDA legend + turno detail ===== */
  .aglegend{display:flex;align-items:center;gap:16px;margin-bottom:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
  .aglegend span{display:inline-flex;align-items:center;gap:6px;font-weight:700}
  .aglegend i{width:10px;height:10px;border-radius:3px}
  .aglegend .aghint{margin-left:auto;color:var(--faint);font-style:italic;font-weight:500}
  .trow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px}
  .trow span{color:var(--muted)}.trow b{font-weight:700;text-align:right}
  @media(max-width:600px){.aglegend .aghint{display:none}}

  /* ===== CONFIGURACIÓN ===== */
  .setcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
  .setcard h3{font-size:13px;font-weight:800}
  .setcard .sd{font-size:12.5px;color:var(--muted);margin:3px 0 14px}
  .setgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .userrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line2)}
  .userrow:last-child{border-bottom:0}
  .userrow .av{width:36px;height:36px;border-radius:10px;background:var(--navy-soft);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
  .userrow .un{font-weight:700;font-size:13px}.userrow .ur{font-size:11.5px;color:var(--muted)}
  .userrow .uperm{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:4px 9px;border-radius:999px;white-space:nowrap}
  .wa-conn{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #b9e3d0;background:var(--ok-soft);border-radius:11px;margin-bottom:12px}
  .wa-conn .dotok{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,107,.2);flex-shrink:0}
  .hrow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13px}
  .hrow:last-child{border-bottom:0}.hrow b{font-weight:700}
  @media(max-width:780px){.setgrid{grid-template-columns:1fr}}

  /* ===== Cambios v2 ===== */
  .cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  td[contenteditable="true"]{background:#fffbe6;outline:1px dashed var(--warn);border-radius:4px;cursor:text}
  .docfoot{display:flex;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
  .docfoot .btn{flex:1;justify-content:center;text-decoration:none}
  .fnotas{width:100%;min-height:92px;border:1px solid var(--line);border-radius:10px;padding:11px;font:inherit;font-size:13px;resize:vertical;outline:0;color:var(--ink)}
  .fnotas:focus{border-color:var(--accent)}
  .bellwrap{position:relative}
  .bell{padding:0}
  .notifpanel{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:60;overflow:hidden}
  .np-h{padding:12px 14px;font-weight:800;font-size:13px;border-bottom:1px solid var(--line)}
  .np-i{display:flex;gap:11px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line2);font:inherit}
  .np-i:last-child{border-bottom:0}
  .np-i:hover{background:var(--bg)}
  .np-ic{width:32px;height:32px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-size:15px;flex-shrink:0}
  .np-t{font-size:13px;font-weight:700}.np-s{font-size:11.5px;color:var(--muted)}
  .cin{width:100%;border:0;border-bottom:1.5px solid transparent;border-radius:0;padding:6px 2px;font:inherit;font-size:12.5px;background:transparent;outline:0;color:var(--ink);transition:border-color .15s ease}
  .cin:hover{border-bottom-color:var(--line)}
  .cin:focus{border-bottom-color:var(--accent)}
  .ntrow{display:flex;gap:12px}.ntrow .field{flex:1}
  /* Buscador vinculado Paciente/Profesional (Facturación, 5/8/2026) */
  .lp-wrap{position:relative}
  /* position:fixed (no absolute) a propósito: la tabla de Facturación (.tablecard) tiene
     overflow:hidden en el eje vertical, así que un dropdown position:absolute quedaba cortado
     apenas se salía del borde de la tabla. Con fixed, la posición se calcula en JS (lpPosition)
     contra el input real y el dropdown escapa de cualquier contenedor con overflow, incluida
     la tabla y el modal de "Agregar transacción". */
  .lp-drop{position:fixed;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 20px rgba(8,16,30,.16);max-height:220px;overflow-y:auto;z-index:220}
  .lp-drop.hide{display:none}
  .lp-opt{padding:8px 12px;font-size:13px;cursor:pointer;color:var(--ink)}
  .lp-opt:hover{background:var(--accent-soft)}
  .lp-warn{padding:8px 12px;font-size:12px;color:var(--muted)}
  .lp-warn a{color:var(--accent);font-weight:700;text-decoration:none}
  .lp-inp.lp-invalid{border-color:var(--bad);background:#fdecea}
  .ibtn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 9px;cursor:pointer;font-size:13px;margin-left:4px}
  .ibtn:hover{background:var(--bg)}.ibtn.del:hover{background:var(--bad-soft)}
  .rowpaused{opacity:.5}