/* EnvíosRD presentation layer. Business rules and original print styles stay in the HTML. */
@media screen {
  :root {
    --navy:#062c5c; --navy2:#0b4278; --gold:#f6b400; --bg:#f3f6fa; --line:#e1e7ef; --text:#182b45; --muted:#617086; --shadow:0 12px 36px rgba(6,44,92,.07);
    --font-heading: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  }
  html { -webkit-text-size-adjust:100%; scrollbar-gutter:stable; font-family: var(--font-body); }
  body { line-height:1.5; font-family: var(--font-body); }
  h1, h2, h3, .metric-value, .top-context strong, .brand-caption { font-family: var(--font-heading); }
  button,a,input,select { -webkit-tap-highlight-color:transparent; font-family: var(--font-body); }
  button { transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease; }
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid #b47b00; outline-offset:3px; }
  input:focus,select:focus { outline:none; border-color:#b47b00!important; box-shadow:0 0 0 3px rgba(246,180,0,.18); }
  input,select { min-width:0; color:var(--text); }
  button:disabled { cursor:not-allowed; }
  svg.ui-icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
  .app { min-height:100vh; min-height:100dvh; grid-template-columns:236px minmax(0,1fr); }
  .sidebar { height:100vh; height:100dvh; position:sticky; top:0; overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(165deg,#073565,#062c5c 55%,#041f43); scrollbar-width:thin; scrollbar-color:#426082 transparent; }
  .brand { padding:24px 22px 20px; gap:12px; }
  .brand img { width:152px; height:110px; border-radius:16px; padding:5px; transition:transform 0.2s ease; }
  .brand img:hover { transform:scale(1.02); }
  .brand-caption { color:#c7d7ec; font-size:10px; letter-spacing:2.2px; font-weight:700; text-transform:uppercase; }
  [hidden] { display: none !important; }
  .nav-item[hidden], .nav-operations[hidden], .nav-admin[hidden] { display: none !important; }
  .nav { padding:20px 12px; display:flex; flex-direction:column; gap:5px; }
  .nav-item { min-height:46px; height:auto; padding:12px; gap:11px; font-size:12px; line-height:1.4; border:0; border-radius:10px; color:#d4e0f0; transition:background 0.15s ease, transform 0.15s ease; }
  .nav-item .ico { display:grid; place-items:center; width:22px; flex-shrink:0; }
  .nav-item:hover { background:rgba(255,255,255,.09); color:white; transform:translateX(3px); }
  .nav-item.active { background:var(--gold); color:#082c55; box-shadow:0 6px 18px rgba(246,180,0,.25); font-weight:750; }
  .side-bottom { padding:12px 22px 24px; }
  .mini-brand { padding:16px 0 0; border:0; border-top:1px solid #ffffff24; border-radius:0; background:transparent; text-align:left; }
  .mini-brand img { display:none; }
  .mini-brand a { font-size:11px; }
  .workspace { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; min-width:0; width:100%; }
  .topbar { min-height:78px; height:auto; padding:16px 30px; gap:16px; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px) saturate(180%); border-bottom:1px solid rgba(225,231,239,0.8); position:sticky; top:0; z-index:30; }
  .top-context { display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .top-context strong { display:block; font-size:14px; letter-spacing:-.2px; color:var(--navy); font-weight:800; }
  .top-context small { display:block; color:var(--muted); font-size:10.5px; }
  .hamb { display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:white; cursor:pointer; }
  .top-actions { gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .btn { min-height:42px; justify-content:center; border-radius:10px; padding:10px 15px; font-size:12px; font-weight:700; line-height:1.4; transition:all 0.18s ease; }
  .btn-primary { box-shadow:0 4px 12px rgba(6,44,92,.12); }
  .btn-primary:hover { background:#0b4278; transform:translateY(-1px); box-shadow:0 6px 16px rgba(6,44,92,.18); }
  .btn-gold { box-shadow:0 4px 12px rgba(246,180,0,.2); }
  .btn-gold:hover { background:#ffc928; transform:translateY(-1px); box-shadow:0 6px 18px rgba(246,180,0,.3); }
  .clear:hover { background:#f3f6fa; border-color:#bbc8d8; transform:translateY(-1px); }
  .admin { padding-left:16px; gap:10px; }
  .admin-avatar { width:38px; height:38px; border-radius:12px; background:#edf3fa; color:var(--navy); box-shadow:0 2px 8px rgba(6,44,92,0.06); }
  .admin b { font-size:11px; }
  .content { padding:30px 30px 24px; flex:1 0 auto; }
  .utility-page { padding:30px 30px 24px; flex:1 0 auto; display:none; }
  .utility-page.show { display:flex; flex-direction:column; flex:1 0 auto; }
  .utility-shell { flex:1 0 auto; display:flex; flex-direction:column; width:100%; }
  .heading { margin-bottom:24px; }
  .heading h1 { font-size:32px; line-height:1.2; letter-spacing:-1px; color:var(--navy); font-weight:800; margin-bottom:6px; }
  .crumb { font-size:12px; color:var(--muted); }
  .view-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
  .view-tab { min-height:40px; border-radius:10px; padding:9px 15px; font-size:11px; font-weight:650; background:transparent; border-color:transparent; color:var(--muted); transition:all 0.15s ease; }
  .view-tab:hover { background:#e6edf5; color:var(--navy); }
  .view-tab.active { background:white; border-color:#d7e0ec; color:var(--navy); box-shadow:0 3px 10px rgba(6,44,92,.06); font-weight:750; }
  .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
  .metric { min-width:0; min-height:122px; border-radius:16px; padding:20px; gap:14px; background:#ffffff; border:1px solid rgba(225,231,239,0.8); box-shadow:0 4px 16px rgba(6,44,92,.04); align-items:center; transition:transform 0.18s ease, box-shadow 0.18s ease; }
  .metric:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(6,44,92,.08); }
  .metric.goldedge { border-left:3px solid var(--gold); }
  .metric-icon { width:44px; height:44px; border-radius:13px; flex-shrink:0; background:#edf3fb; }
  .metric-label { color:var(--muted); font-size:10px; letter-spacing:.6px; font-weight:700; text-transform:uppercase; }
  .metric-value { color:var(--navy); font-size:30px; line-height:1.2; letter-spacing:-.8px; font-weight:800; font-variant-numeric:tabular-nums; }
  .metric-sub { font-size:10.5px; margin-top:4px; }
  .main-grid { grid-template-columns:minmax(0,1fr) 330px; gap:22px; }
  .panel,.detail,.utility-panel,.utility-card { border-radius:16px; background:#ffffff; border:1px solid rgba(225,231,239,0.8); box-shadow:0 6px 20px rgba(6,44,92,.04); min-width:0; }
  .toolbar { padding:20px; gap:10px; }
  .search { flex:1 1 100%; min-width:0; }
  .search input { min-height:44px; padding:11px 40px 11px 14px; border-radius:10px; font-size:12px; background:#f8fafc; border:1px solid #d6deea; transition:border-color 0.15s, box-shadow 0.15s; }
  .search input:focus { background:#ffffff; }
  .search span { top:9px; font-size:22px; line-height:1; }
  .toolbar select { min-width:0; max-width:100%; flex:1 1 140px; min-height:42px; border-radius:10px; font-size:11px; background:#ffffff; border:1px solid #d6deea; }
  .table-wrap { max-width:100%; scrollbar-width:thin; scrollbar-color:#bdcbdc #f2f5fa; overscroll-behavior-x:contain; }
  .panel>.table-wrap { max-height:620px; max-height:min(62vh,680px); }
  .table-hint { display:flex; justify-content:space-between; gap:12px; padding:11px 20px; background:#fbfcfe; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }
  .table-hint b { color:var(--navy); font-weight:650; }
  .clients-table th { position:sticky; top:0; z-index:5; font-size:10px; padding:14px; letter-spacing:.4px; color:#617086; background:rgba(246,248,251,0.95); backdrop-filter:blur(6px); font-weight:750; text-transform:uppercase; border-bottom:1px solid var(--line); }
  .clients-table td { font-size:12px; padding:14px; border-color:#edf1f6; transition:background 0.12s ease; }
  .clients-table tbody tr:hover td { background:#f4f8fc; }
  .clients-table tbody tr.selected td { background:#fffae9; }
  .clients-table tbody tr.selected td:first-child { box-shadow:inset 4px 0 var(--gold); }
  .namecell { color:var(--navy); font-weight:700; font-family: var(--font-heading); }
  .badge,.ok { font-size:10.5px; padding:4px 10px; font-weight:700; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }

  /* Pill Status Badges Refinados */
  .badge.status-activo, .badge.status-Activo { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
  .badge.status-riesgo, .badge.status-En-riesgo { background:#fff3e0; color:#e65100; border:1px solid #ffe0b2; }
  .badge.status-inactivo, .badge.status-Inactivo { background:#ffebee; color:#c62828; border:1px solid #ffcdd2; }
  .badge.status-dormido, .badge.status-Dormido { background:#f3e5f5; color:#6a1b9a; border:1px solid #e1bee7; }
  .badge.status-nunca, .badge.status-Nunca-ha-pedido { background:#eceff1; color:#455a64; border:1px solid #cfd8dc; }

  .footer-table { padding:16px 20px; font-size:11px; }
  .page-btn { min-width:36px; height:36px; border-radius:8px; color:var(--navy); }
  #pageSize { border:1px solid var(--line); border-radius:8px; padding:7px; background:white; }
  .detail { top:96px; min-height:0; overflow:hidden; }
  .detail-head { padding:18px 20px; border-bottom:1px solid var(--line); background:#f8fafc; }
  .detail-head h2 { font-size:14px; color:var(--navy); font-weight:800; font-family: var(--font-heading); }
  .detail-head>span { display:none; }
  .detail-body { padding:20px; }
  .profile { align-items:flex-start; }
  .profile>div:last-child { min-width:0; }
  .avatar { border-radius:14px; width:48px; height:48px; flex-shrink:0; font-size:16px; font-weight:800; background:#edf3fa; color:var(--navy); box-shadow:0 3px 10px rgba(6,44,92,0.08); }
  .profile h3 { font-size:14px; line-height:1.4; overflow-wrap:anywhere; font-weight:800; font-family: var(--font-heading); }
  .profile small { font-size:10.5px; color:var(--muted); }
  .tabs { gap:16px; margin-top:18px; }
  .tab { font-size:10px; padding:11px 0; }
  .section { padding:18px 0; border-bottom:1px solid #edf1f6; }
  .section:last-child { border-bottom:0; }
  .section h4 { color:var(--navy); font-size:11.5px; margin-bottom:13px; font-weight:800; font-family: var(--font-heading); letter-spacing:.3px; text-transform:uppercase; }
  .kv { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:11px; font-size:11.5px; color:var(--muted); }
  .kv .v { color:var(--text); font-weight:600; }
  .identity-box { padding:14px; border-radius:12px; background:#f8fafc; border:1px solid #e1e8f0; }
  .identity-result { font-size:11.5px; line-height:1.5; }
  .source-note { font-size:10px; color:#748296; }
  .verify-btn,.edit-btn { border-radius:9px; min-height:36px; padding:7px 12px; font-weight:700; }
  .detail-action { min-height:44px; font-size:11.5px; border-radius:10px; font-weight:750; }}
  .detail-head h2 { font-size:13px; color:var(--navy); }
  .detail-head>span { display:none; }
  .detail-body { padding:20px; }
  .profile { align-items:flex-start; }
  .profile>div:last-child { min-width:0; }
  .avatar { border-radius:14px; width:46px; height:46px; flex-shrink:0; font-size:16px; background:#edf3fa; color:var(--navy); }
  .profile h3 { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
  .profile small { font-size:10px; }
  .tabs { gap:16px; margin-top:18px; }
  .tab { font-size:10px; padding:11px 0; }
  .section { padding:18px 0; }
  .section h4 { color:var(--navy); font-size:11px; margin-bottom:13px; }
  .kv { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:11px; font-size:11px; color:var(--muted); }
  .kv .v { color:var(--text); }
  .identity-box { padding:13px; border-radius:10px; }
  .identity-result { font-size:11px; }
  .source-note { font-size:10px; }
  .verify-btn,.edit-btn { border-radius:8px; min-height:34px; padding:7px 10px; }
  .detail-action { min-height:44px; font-size:11px; }
  .utility-shell { max-width:none; }
  .utility-card { padding:23px; }
  .utility-card .big { color:var(--navy); font-size:30px; letter-spacing:-1px; }
  .utility-card p,.utility-panel>p,.help-item span { font-size:12px; }
  .utility-panel { padding:24px; overflow-wrap:anywhere; }
  .utility-btn { border-radius:9px; min-height:44px; }
  .help-item,.setting-row { border-radius:12px; padding:20px; }
  .utility-table th,.utility-table td { padding:13px; font-size:12px; }
  .utility-table th { font-size:10px; color:var(--muted); }
  .identity-card { min-width:0; }
  .identity-email,.identity-name { overflow-wrap:anywhere; }
  .quality-note,.utility-note,.campaign-note { border-radius:10px; line-height:1.7; }
  .modal-backdrop { padding:24px; background:rgba(3,24,51,.62); overflow-y:auto; }
  .modal { display:flex; flex-direction:column; border-radius:18px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); }
  .modal.campaign-modal { width:min(760px,100%); }
  .modal-head { padding:20px 24px; flex-shrink:0; }
  .modal-head h3 { font-size:15px; }
  .modal-body { padding:24px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
  .modal-actions { padding:16px 24px; flex-wrap:wrap; flex-shrink:0; }
  .close-x { min-width:36px; min-height:36px; display:grid; place-items:center; border-radius:8px; }
  .close-x:hover { background:#ffffff1a; }
  .field input,.field select { width:100%; min-height:44px; border-radius:9px; }
  .field label { font-size:12px; }
  .field small { font-size:11px; }
  .export-menu { top:calc(100% + 8px); border-radius:12px; box-shadow:0 16px 40px #062c5c24; max-width:calc(100vw - 32px); }
  .export-menu button { min-height:46px; }
  .toast { max-width:calc(100vw - 32px); right:16px; bottom:16px; overflow-wrap:anywhere; border-radius:12px; font-size:13px; line-height:1.6; }
  .nav-scrim { display:none; }
  .auth-page { min-height:100vh; min-height:100dvh; padding:40px 24px; background:radial-gradient(ellipse at 15% 10%,#154d80,transparent 55%),#041f43; }
  .auth-page .shell { border-radius:24px; min-height:620px; border:1px solid #ffffff24; }
  .auth-page .brand-panel { padding:48px; background:linear-gradient(145deg,#0a3868,#05264e); }
  .auth-page .logo-box { width:170px; height:140px; border-radius:18px; box-shadow:none; display:block; overflow:hidden; }
  .auth-page .brand-panel { overflow:hidden; }
  .auth-page .brand-copy h1 { font-size:38px; line-height:1.2; letter-spacing:-1.2px; margin-top:40px; }
  .auth-page .brand-copy p { color:#c8d8ed; font-size:14px; }
  .auth-page .form-panel { padding:48px; }
  .auth-page .form-panel h2 { letter-spacing:-.8px; font-size:30px; }
  .auth-page .eyebrow { color:#856100; }
  .auth-page .field input { min-height:50px; border-radius:10px; font-size:16px; background:#fbfcfe; }
  .auth-page .input-wrap input { padding-right:76px; }
  .auth-page .toggle { min-width:54px; min-height:44px; right:6px; }
  .auth-page .submit { min-height:50px; border-radius:10px; background:var(--gold); color:var(--navy); font-size:14px; }
  .auth-page .submit:hover { background:#ffc928; }
  .auth-page .lead { font-size:14px; }
  .auth-page .foot { font-size:11px; line-height:1.6; color:var(--muted); }
  .footer-bottom, .app-footer { margin-top:auto !important; padding:18px 24px 24px; border-top:1px solid var(--line); background:#fff; width:100%; flex-shrink:0; display:block; }
  .footer-bottom-cont{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .footer-bottom-left,.footer-bottom-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .footer-bottom-left{color:var(--muted);font-size:11px;line-height:1.5}
  .footer-bottom-left .logo{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700}
  .footer-bottom-left img{height:20px;width:auto;object-fit:contain}
  .follow-text{font-size:10px;font-weight:900;color:var(--navy);letter-spacing:1px}
  .follow-icons{display:flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0}
  .follow-icons a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;font-size:11px;font-weight:800}
  .follow-icons a:hover{border-color:var(--gold);background:#fff9e5}
  .follow-icons a span{line-height:1}
  .auth-page .card { border-radius:22px; }
  .auth-page .head { padding:28px 32px; }
  .auth-page .body { padding:32px; }
  .auth-page .notice { font-size:12px; }
  .auth-page .message,.auth-page .msg { overflow-wrap:anywhere; font-size:13px; }
  @media(min-width:781px) and (max-height:800px) { .brand {padding:16px;} .brand img {height:80px;width:120px;} .nav {padding-top:12px;padding-bottom:12px;gap:3px;} .nav-item {min-height:40px;padding:9px 12px;} }
  @media(max-width:1439px) { .main-grid {grid-template-columns:minmax(0,1fr);} .detail {position:relative;top:0;} .detail-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;} .profile,.tabs {grid-column:1/-1;} .metrics {gap:12px;} .metric {padding:16px;gap:10px;} .metric-icon {width:36px;height:36px;} .top-context small {display:none;} }
  @media(max-width:1100px) { .top-context>div {display:none;} .top-context {display:none;} .top-actions {width:100%;justify-content:flex-end;} .metrics {grid-template-columns:repeat(2,minmax(0,1fr));} .content,.utility-page {padding:24px 22px 0;} .topbar {padding:14px 22px;} .utility-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media(max-width:780px) {
    html {scrollbar-gutter:auto;}
    .app {grid-template-columns:minmax(0,1fr);}
    .sidebar {display:flex;position:fixed;left:0;top:0;width:264px;max-width:calc(100vw - 56px);z-index:70;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:12px 0 40px #062c5c30;}
    .nav-open .sidebar {transform:translateX(0);visibility:visible;}
    .nav-open {overflow:hidden;}
    .nav-scrim {position:fixed;inset:0;background:#031e4099;border:0;z-index:60;}
    .nav-open .nav-scrim {display:block;}
    .hamb {display:flex;flex-shrink:0;}
    .top-context {display:flex;}
    .topbar {padding:12px 16px;min-height:68px;gap:8px;}
    .top-actions {width:auto;gap:8px;flex:1;}
    .top-actions .btn {min-width:44px;min-height:44px;}
    .top-actions .btn span.label {display:inline;}
    .admin {display:none;}
    .content,.utility-page {padding:24px 16px 0;}
    .heading h1 {font-size:28px;}
    .view-tabs {flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:6px;scrollbar-width:thin;}
    .view-tab {flex-shrink:0;min-height:44px;}
    .main-grid {display:grid;gap:18px;}
    .detail {margin-top:0;}
    .metric {min-height:112px;}
    .metric-value {font-size:27px;}
    .table-wrap {border-radius:0;}
    .page-btn {min-width:40px;height:40px;}
    .pager {flex-wrap:wrap;}
    .utility-panel {padding:20px;}
    .settings-grid,.help-grid {grid-template-columns:minmax(0,1fr);}
    .verify-btn,.edit-btn {min-height:44px;}
    .field input,.field select,.search input,.toolbar select,.setting-row select,#pageSize {font-size:16px;}
    .modal-backdrop {padding:12px;}
    .modal {max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:14px;}
    .modal-head,.modal-body {padding:18px;}
    .modal-actions {padding:14px 18px;}
    .modal-actions .btn {flex:1 1 130px;}
    .form-grid {grid-template-columns:minmax(0,1fr);}
    .campaign-status-grid {grid-template-columns:1fr;}
    .auth-page {padding:20px 16px;}
    .auth-page .shell {min-height:0;grid-template-columns:1fr;}
    .auth-page .brand-panel {padding:26px;}
    .auth-page .logo-box {width:125px;height:96px;}
    .auth-page .brand-copy h1 {font-size:28px;margin:22px 0 10px;}
    .auth-page .brand-copy p {font-size:13px;}
    .auth-page .security {margin-top:18px;}
    .auth-page .form-panel {padding:30px 26px;}
    .auth-page .head,.auth-page .body {padding:24px;}
  }
  @media(max-width:480px) {
    .top-actions .btn span.label {display:none;}
    .metrics {gap:10px;}
    .metric {padding:14px;display:block;}
    .metric-icon {width:32px;height:32px;margin-bottom:12px;border-radius:9px;}
    .metric-icon svg.ui-icon {width:18px;height:18px;}
    .metric-label {font-size:9px;letter-spacing:.3px;}
    .metric-value {font-size:28px;margin-top:4px;}
    .metric-sub {font-size:10px;}
    .toolbar {padding:16px;}
    .toolbar select {flex-basis:100%;}
    .toolbar .clear {width:100%;}
    .table-hint {padding:10px 16px;flex-wrap:wrap;gap:2px;}
    .detail-body {display:block;padding:18px;}
    .utility-grid {grid-template-columns:minmax(0,1fr);}
    .utility-actions .utility-btn {width:100%;}
    .campaign-summary {grid-template-columns:1fr;}
    .auth-page .head {align-items:flex-start;gap:12px;}
    .auth-page .head img {width:65px;height:58px;}
    .auth-page .head h1 {font-size:18px;}
    .auth-page .grid {grid-template-columns:1fr;}
    .auth-page .actions {flex-direction:column;}
  }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after {transition:none!important;animation:none!important;scroll-behavior:auto!important;} }
}
@media print { .nav-scrim,.table-hint {display:none!important;} }

@media screen {.verification-strip{margin:12px 30px 0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.verification-strip[hidden]{display:none}@media(max-width:780px){.verification-strip{margin:12px 16px 0}.top-actions{gap:6px}.top-actions .btn{padding:10px}}}
@media print{.verification-strip{display:none!important}}

/* =========================================================
   EnvíosRD CRM - Advanced UI/UX Extensions (2026-09)
   ========================================================= */

/* 1. Client Avatar with Initials & Dynamic Gradient */
.client-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  user-select: none;
}

/* 2. Hover Quick Actions Toolbar */
.clients-table tbody tr {
  position: relative;
}
.quick-actions-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(4px);
  margin-left: 8px;
}
.clients-table tbody tr:hover .quick-actions-bar {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.quick-act-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #d0dbe9;
  background: #ffffff;
  color: var(--navy);
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  transition: all 0.12s ease;
}
.quick-act-btn:hover {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  transform: scale(1.08);
}

/* 3. KPI Trend Badges & Micro Sparklines */
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 999px;
}
.kpi-trend.positive {
  background: #e6f4ea;
  color: #137333;
}
.kpi-trend.neutral {
  background: #f1f3f4;
  color: #5f6368;
}
.metric-sparkline-wrap {
  margin-top: 8px;
  height: 22px;
  width: 100%;
}
.metric-sparkline-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 4. Filter Chips Bar - Ultra-Modern Glassmorphic Capsule */
.panel .filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 20px 8px;
  background: rgba(240, 244, 250, 0.7);
  border-bottom: 1px solid rgba(225, 231, 239, 0.8);
}

.panel .filter-chips .filter-chips-label {
  font-size: 10px;
  font-weight: 800;
  color: #8fa0b5;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 4px;
  user-select: none;
}

.panel .filter-chips button.chip {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d4dfed;
  color: #4a5a70;
  font-size: 11.5px;
  font-weight: 650;
  font-family: 'Outfit', 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(6, 44, 92, 0.04);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.panel .filter-chips button.chip:hover {
  background: #f0f5fd;
  color: #062c5c;
  border-color: #b8cde8;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(6, 44, 92, 0.08);
}

.panel .filter-chips button.chip.active {
  background: linear-gradient(135deg, #062c5c, #0b4278);
  border-color: #062c5c;
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(6, 44, 92, 0.28);
  transform: translateY(-1px);
}

/* Distinct Signature Colors per Facet Chip */
.panel .filter-chips button.chip.chip-all.active {
  background: linear-gradient(135deg, #062c5c, #0b4278) !important;
  border-color: #062c5c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(6, 44, 92, 0.3) !important;
}

.panel .filter-chips button.chip.chip-cedula.active {
  background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
  border-color: #1b5e20 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35) !important;
}

.panel .filter-chips button.chip.chip-rnc.active {
  background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
  border-color: #0d47a1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.35) !important;
}

.panel .filter-chips button.chip.chip-passport.active {
  background: linear-gradient(135deg, #b78103, #e69d00) !important;
  border-color: #b78103 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(183, 129, 3, 0.35) !important;
}

.panel .filter-chips button.chip.chip-nodoc.active {
  background: linear-gradient(135deg, #b71c1c, #c62828) !important;
  border-color: #b71c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35) !important;
}

/* Document Type Badge Colors in Table */
.badge-doc-cedula {
  background: #e8f5e9 !important;
  color: #1b5e20 !important;
  border: 1px solid #c8e6c9 !important;
}
.badge-doc-rnc {
  background: #e3f2fd !important;
  color: #0d47a1 !important;
  border: 1px solid #bbdefb !important;
}
.badge-doc-passport {
  background: #fff8e1 !important;
  color: #b78103 !important;
  border: 1px solid #ffe082 !important;
}
.badge-doc-other {
  background: #f5f5f5 !important;
  color: #616161 !important;
  border: 1px solid #e0e0e0 !important;
}

.panel .filter-chips button.chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 5. Density Mode (Compact Table) */
.clients-table.compact-mode td {
  padding: 8px 12px;
  font-size: 11.5px;
}
.clients-table.compact-mode th {
  padding: 9px 12px;
}
.clients-table.compact-mode .client-avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

/* 6. Live Pulse Status Badge */
.live-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.2);
  color: #2e7d32;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 8px;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
  animation: pulseGlow 1.8s infinite;
}
@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

/* 7. Modern Toast Notification Cards */
.toast-modern-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.toast-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #ffffff;
  color: #182b45;
  border: 1px solid rgba(225,231,239,0.9);
  box-shadow: 0 12px 32px rgba(4,35,72,0.16);
  font-size: 12px;
  font-weight: 650;
  position: relative;
  overflow: hidden;
  animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-card.success { border-left: 4px solid #2e7d32; }
.toast-card.error { border-left: 4px solid #c62828; }
.toast-card.info { border-left: 4px solid #0b4278; }
.toast-card-icon { font-size: 16px; flex-shrink: 0; }
.toast-card-body { flex: 1; min-width: 0; }
.toast-card-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--navy);
  opacity: 0.3;
  width: 100%;
  animation: toastTimer 4s linear forwards;
}
@keyframes toastTimer {
  from { width: 100%; }
  to { width: 0%; }
}

/* 8. Dark Mode Adjustments for New Components */
[data-theme="dark"] .quick-act-btn {
  background: #04172d;
  border-color: rgba(255,255,255,0.15);
  color: #ffffff;
}
[data-theme="dark"] .quick-act-btn:hover {
  background: #0b4278;
}
[data-theme="dark"] .panel .filter-chips {
  background: #04172d !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .panel .filter-chips button.chip {
  background: #07213e !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #c5d8ee !important;
}

[data-theme="dark"] .panel .filter-chips button.chip:hover {
  background: #0d3159 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .panel .filter-chips button.chip.active {
  background: linear-gradient(135deg, #0b4278, #14599e) !important;
  border-color: #14599e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .toast-card {
  background: #07213e;
  color: #ffffff;
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .live-status-badge {
  background: rgba(46, 125, 50, 0.2);
  color: #81c784;
}

/* 9. Visual Grid Mode (Modo Visual con Avatares por Cliente) */
.table-wrap.visual-grid-mode .clients-table {
  display: block;
  width: 100%;
}

.table-wrap.visual-grid-mode .clients-table thead {
  display: none;
}

.table-wrap.visual-grid-mode .clients-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 18px;
  background: #f1f5fa;
  border-radius: 12px;
}

.table-wrap.visual-grid-mode .clients-table tbody tr {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e1e8f2;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(6, 44, 92, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.table-wrap.visual-grid-mode .clients-table tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(6, 44, 92, 0.12);
  border-color: #b8cde8;
}

.table-wrap.visual-grid-mode .clients-table tbody tr.selected {
  border-color: var(--gold);
  background: #fffdf5;
  box-shadow: 0 8px 22px rgba(246, 180, 0, 0.22);
}

.table-wrap.visual-grid-mode .clients-table tbody td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border: none;
  background: transparent !important;
  font-size: 11.5px;
}

.table-wrap.visual-grid-mode .clients-table tbody td.namecell {
  order: -1;
  font-size: 14px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.table-wrap.visual-grid-mode .clients-table tbody td.namecell .client-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.table-wrap.visual-grid-mode .clients-table tbody tr .quick-actions-bar {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e4ecf5;
  justify-content: flex-end;
  width: 100%;
}

[data-theme="dark"] .table-wrap.visual-grid-mode .clients-table tbody {
  background: #031427;
}

[data-theme="dark"] .table-wrap.visual-grid-mode .clients-table tbody tr {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .table-wrap.visual-grid-mode .clients-table tbody tr:hover {
  border-color: #14599e;
}

/* =========================================================
   EnvíosRD CRM - Complete Modern UI/UX Extensions (v11)
   ========================================================= */

/* 1. Topbar Quick Command Search Trigger */
.topbar-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f5fa;
  border: 1px solid #d4dfed;
  color: #53647a;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.18s ease;
  max-width: 320px;
  flex: 1 1 240px;
}
.topbar-search-trigger:hover {
  background: #ffffff;
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(6, 44, 92, 0.08);
}
.topbar-search-trigger svg {
  width: 15px;
  height: 15px;
  color: #798da6;
  flex-shrink: 0;
}
.topbar-search-trigger span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search-trigger kbd {
  font-size: 10px;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #ccd8e8;
  padding: 2px 6px;
  border-radius: 5px;
  color: #61738a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 2. Facet Chip Count Badges */
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  background: rgba(6, 44, 92, 0.09);
  color: #4a5a70;
  margin-left: 3px;
  line-height: 1.3;
}
.chip.active .chip-count {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* 3. Branch Chips Quick Bar */
.branch-chips-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #edf2f8;
  overflow-x: auto;
  scrollbar-width: thin;
}
.branch-chips-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 4px;
  flex-shrink: 0;
}
.branch-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.branch-chip {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #dce4ee;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.branch-chip:hover {
  background: #f1f5fa;
  border-color: #b8cde8;
  color: var(--navy);
}
.branch-chip.active {
  background: #eef4fc;
  border-color: var(--navy);
  color: var(--navy);
  font-weight: 750;
  box-shadow: 0 1px 4px rgba(6, 44, 92, 0.08);
}

/* 4. Sortable Columns Header Styles */
.clients-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  position: sticky;
  top: 0;
}
.clients-table th.sortable:hover {
  background: #e9f0f8;
  color: var(--navy);
}
.clients-table th.sortable::after {
  content: ' ⇅';
  font-size: 9px;
  color: #a0aec0;
  margin-left: 4px;
}
.clients-table th.sortable.sorted-asc::after {
  content: ' ▲';
  color: var(--navy);
  font-weight: 800;
}
.clients-table th.sortable.sorted-desc::after {
  content: ' ▼';
  color: var(--navy);
  font-weight: 800;
}

/* 5. Skeleton Shimmer Loaders */
.skeleton-row td {
  padding: 12px 14px !important;
}
.skeleton-bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #edf2f7 25%, #f7fafc 50%, #edf2f7 75%);
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s infinite linear;
}
@keyframes shimmerPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6. Detail Panel Controls (Collapse & Fullscreen Expand) */
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.detail-ctrl-btn {
  background: transparent;
  border: 1px solid #d4dfed;
  color: #5a6e85;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.15s ease;
}
.detail-ctrl-btn:hover {
  background: #eef4fc;
  color: var(--navy);
  border-color: var(--navy);
}
.main-grid.detail-collapsed {
  grid-template-columns: 1fr;
}
.main-grid.detail-collapsed .detail {
  display: none !important;
}
#toggleDetailBtn {
  font-weight: 700;
  transition: all 0.15s ease;
}
#toggleDetailBtn.active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}
.detail.expanded-fullscreen {
  position: fixed !important;
  inset: 20px;
  z-index: 100;
  box-shadow: 0 20px 60px rgba(4, 25, 54, 0.4);
  border-radius: 18px;
  border: 2px solid var(--gold);
  max-width: 960px;
  margin: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* 7. Client Lifecycle Timeline */
.client-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0;
  position: relative;
}
.client-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e2e8f0;
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px #cbd5e1;
  flex-shrink: 0;
  z-index: 2;
  margin-top: 1px;
}
.timeline-step.done .timeline-dot {
  background: #2e7d32;
  box-shadow: 0 0 0 1px #2e7d32;
}
.timeline-step.warn .timeline-dot {
  background: #e65100;
  box-shadow: 0 0 0 1px #e65100;
}
.timeline-body {
  flex: 1;
  font-size: 11.5px;
}
.timeline-body b {
  display: block;
  color: var(--navy);
  font-size: 11.5px;
}
.timeline-body small {
  color: var(--muted);
  font-size: 10.5px;
}

/* 8. Tracking Stepper Pipeline */
.tracking-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 8px;
  z-index: 2;
  transition: all 0.2s ease;
}
.stepper-step.active .stepper-circle {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(6, 44, 92, 0.15);
}
.stepper-step.completed .stepper-circle {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
}
.stepper-line {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #cbd5e1;
  z-index: 1;
}
.stepper-step:last-child .stepper-line {
  display: none;
}
.stepper-step.completed .stepper-line {
  background: #2e7d32;
}
.stepper-label {
  font-size: 11px;
  font-weight: 750;
  color: #1e293b;
}
.stepper-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* 9. Followups Kanban Board */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.kanban-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}
.kanban-badge-count {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.kanban-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(6, 44, 92, 0.08);
  border-color: #b8cde8;
}

/* 10. AI Chat Suggestion Bubbles & Copy Button */
.ai-suggestion-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #edf2f8;
}
.ai-suggestion-chip {
  background: #ffffff;
  border: 1px solid #d4dfed;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-suggestion-chip:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.ai-clean-copy-btn {
  align-self: flex-start;
  margin-top: 6px;
  background: transparent;
  border: 1px solid #d0dbe9;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 650;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-clean-copy-btn:hover {
  background: #f1f5fa;
  color: var(--navy);
  border-color: var(--navy);
}

/* 11. Duplicate Side-by-Side Diff Component */
.duplicate-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.duplicate-diff-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
}
.diff-field-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5fa;
  font-size: 11px;
}
.diff-field-row.highlight-extra {
  background: #e8f5e9;
  border-radius: 6px;
  padding: 6px 8px;
  font-weight: 700;
  color: #1b5e20;
}

/* 12. Complete Dark Mode Theme (data-theme="dark") */
[data-theme="dark"] {
  --bg: #031427;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] body {
  background: #031427;
  color: #e2e8f0;
}
[data-theme="dark"] .topbar {
  background: rgba(4, 25, 54, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .top-context strong {
  color: #ffffff;
}
[data-theme="dark"] .topbar-search-trigger {
  background: #072242;
  border-color: rgba(255, 255, 255, 0.15);
  color: #c0d1e5;
}
[data-theme="dark"] .topbar-search-trigger kbd {
  background: #04172d;
  border-color: rgba(255, 255, 255, 0.2);
  color: #94a3b8;
}
[data-theme="dark"] .panel, 
[data-theme="dark"] .detail, 
[data-theme="dark"] .utility-panel, 
[data-theme="dark"] .utility-card, 
[data-theme="dark"] .metric {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .heading h1, 
[data-theme="dark"] .detail-head h2,
[data-theme="dark"] .metric-value,
[data-theme="dark"] .namecell {
  color: #ffffff !important;
}
[data-theme="dark"] .clients-table th {
  background: #051a33;
  color: #c5d7ed;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .clients-table td {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .clients-table tbody tr:hover td {
  background: #0b2c52;
}
[data-theme="dark"] .clients-table tbody tr.selected td {
  background: #113866;
}
[data-theme="dark"] .branch-chips-bar {
  background: #041930;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .branch-chip {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
[data-theme="dark"] .branch-chip.active {
  background: #0f3d73;
  border-color: var(--gold);
  color: #ffffff;
}
[data-theme="dark"] .modal {
  background: #07213e;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .modal-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .modal-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .search input, 
[data-theme="dark"] .toolbar select, 
[data-theme="dark"] .field input, 
[data-theme="dark"] .field select {
  background: #04172d;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .identity-box {
  background: #04172d;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tracking-stepper,
[data-theme="dark"] .kanban-col {
  background: #04172d;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .stepper-circle {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
}
[data-theme="dark"] .stepper-label {
  color: #ffffff;
}
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .duplicate-diff-card {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
[data-theme="dark"] .diff-field-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .diff-field-row.highlight-extra {
  background: #0d381e;
  color: #86efac;
}
[data-theme="dark"] .ai-suggestion-chip {
  background: #07213e;
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
[data-theme="dark"] .ai-suggestion-chip:hover {
  background: var(--gold);
  color: var(--navy);
}
[data-theme="dark"] .ai-clean-copy-btn {
  border-color: rgba(255, 255, 255, 0.2);
  color: #94a3b8;
}
[data-theme="dark"] .ai-clean-copy-btn:hover {
  background: #0f3d73;
  color: #ffffff;
}

[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .app-footer {
  background: #07213e;
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}
[data-theme="dark"] .footer-bottom-left {
  color: #94a3b8;
}
[data-theme="dark"] .footer-bottom-left .logo {
  color: #f6b400;
}
[data-theme="dark"] .follow-text {
  color: #cbd5e1;
}
[data-theme="dark"] .follow-icons a {
  background: #04172d;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}
[data-theme="dark"] .follow-icons a:hover {
  background: #0b3b6d;
  border-color: var(--gold);
}