/* ---------- attention cards ---------- */
  .attention-count{
    background:#fdeceb;color:#c0392b;font-size:12px;font-weight:800;
    padding:2px 10px;border-radius:999px;margin-left:6px;
  }
  .attn-card{
    position:relative;
    border:1px solid #f1d5d2;
    border-left:4px solid #e0453b;
    background:linear-gradient(180deg,#fffafa 0%,#fdf7f6 100%);
    border-radius:14px;
    padding:0;
    margin-bottom:12px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(90,25,20,.05);
    transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
  }
  .attn-card:hover{
    transform:translateY(-1px);
    box-shadow:0 9px 24px rgba(90,25,20,.09);
  }
  .attn-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:13px 15px 11px;
    cursor:pointer;
    user-select:none;
  }
  .attn-card-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .attn-card-main{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .attn-client{
    font-size:13px;
    font-weight:900;
    color:var(--black);
  }
  .attn-product{
    font-size:11.5px;
    color:var(--muted);
    font-weight:700;
  }
  .attn-date{
    font-size:10.5px;
    color:var(--muted);
    white-space:nowrap;
  }
  .critical-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    padding:4px 8px;
    background:#fee7e4;
    color:#a83228;
    font-size:9.5px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
  }
  .critical-badge::before{
    content:'';
    width:7px;height:7px;border-radius:50%;
    background:#e0453b;
    box-shadow:0 0 0 3px rgba(224,69,59,.12);
  }
  .attn-toggle{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid #e8c9c6;
    background:#fff;
    color:#8c312b;
    border-radius:999px;
    padding:7px 10px;
    font-family:inherit;
    font-size:10.5px;
    font-weight:900;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
  }
  .attn-toggle:hover{
    background:#fff1ef;
    border-color:#e0453b;
  }
  .attn-toggle-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;height:16px;
    transition:transform .2s ease;
  }
  .attn-card.collapsed .attn-toggle-icon{transform:rotate(-90deg);}
  .attn-body{
    display:grid;
    grid-template-rows:1fr;
    transition:grid-template-rows .22s ease,opacity .18s ease;
    opacity:1;
  }
  .attn-body-inner{
    min-height:0;
    overflow:hidden;
    padding:0 15px 14px;
  }
  .attn-card.collapsed .attn-body{
    grid-template-rows:0fr;
    opacity:0;
  }
  .attn-card.collapsed .attn-body-inner{
    padding-bottom:0;
  }
  .attn-card .attn-scores{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:0 0 10px;
  }
  .attn-card .attn-scores span{
    background:#fff;
    border:1px solid #efd3d0;
    border-radius:999px;
    padding:4px 9px;
    font-size:10.5px;
    font-weight:800;
    color:#a83228;
  }
  .attn-comment{
    position:relative;
    margin-top:3px;
    padding:11px 13px 11px 34px;
    border-radius:10px;
    background:#fff;
    border:1px solid #f0dddd;
    color:#342322;
    font-size:13px;
    font-weight:600;
    line-height:1.45;
  }
  .attn-comment::before{
    content:'“';
    position:absolute;
    left:11px;
    top:3px;
    color:#e0453b;
    font-family:Georgia,serif;
    font-size:28px;
    line-height:1;
    font-weight:900;
  }
  .attn-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:11px;
  }

  body.dark-mode .attn-card{
    background:linear-gradient(180deg,#2c2324 0%,#271f20 100%);
    border-color:#573234;
    border-left-color:#ff6258;
    box-shadow:0 5px 18px rgba(0,0,0,.18);
  }
  body.dark-mode .attn-card:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.28);
  }
  body.dark-mode .attn-client{color:#fff;}
  body.dark-mode .attn-product,
  body.dark-mode .attn-date{color:#b9bdc7;}
  body.dark-mode .critical-badge{
    background:#4b2928;
    color:#ffb1ab;
  }
  body.dark-mode .critical-badge::before{
    background:#ff6258;
    box-shadow:0 0 0 3px rgba(255,98,88,.14);
  }
  body.dark-mode .attn-toggle{
    background:#33292a;
    border-color:#684143;
    color:#ffc0bb;
  }
  body.dark-mode .attn-toggle:hover{
    background:#422e30;
    border-color:#ff6258;
  }
  body.dark-mode .attn-card .attn-scores span{
    background:#252a32;
    border-color:#4c5868;
    color:#f4f7fb;
  }
  body.dark-mode .attn-comment{
    background:#20242b;
    border-color:#3d4653;
    color:#f5f7fa;
    font-weight:600;
  }
  body.dark-mode .attn-comment::before{color:#ff746b;}

  @media(max-width:620px){
    .attn-card-header{
      padding:12px;
      gap:10px;
    }
    .attn-toggle .attn-toggle-text{display:none;}
    .attn-toggle{padding:7px;}
    .attn-body-inner{padding-left:12px;padding-right:12px;}
    .attn-actions{
      align-items:stretch;
      flex-direction:column;
    }
    .attn-actions .whatsapp-link{
      width:100%;
      justify-content:center;
    }
  }

  /* ---------- volume trend ---------- */
  .trend-row{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:10px;}
  .trend-col{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;
    border:0;background:transparent;font-family:inherit;padding:0;cursor:pointer;border-radius:8px;
  }
  .trend-col:hover{background:#f6f1ff;}
  .trend-col:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}
  .trend-col.selected{background:#f1e8ff;}
  .trend-bar{width:100%;max-width:26px;background:linear-gradient(180deg,var(--orange),var(--purple));border-radius:5px 5px 0 0;min-height:2px;pointer-events:none;}
  .trend-label{font-size:9.5px;color:var(--muted);margin-top:6px;font-weight:600;white-space:nowrap;pointer-events:none;}
  .trend-val{font-size:10.5px;font-weight:800;margin-bottom:2px;pointer-events:none;}
  .trend-hint{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;}

  table.resp-table{width:100%;border-collapse:collapse;font-size:13px;}
  table.resp-table th{text-align:left;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;padding:8px 10px;border-bottom:1.5px solid var(--line);}
  table.resp-table td{padding:10px;border-bottom:1px solid #f0f0f0;vertical-align:top;}
  table.resp-table tr:last-child td{border-bottom:none;}
  .pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#f1eaff;color:var(--purple-dark);}
  .comment-cell{max-width:260px;color:#333;}
  .muted-small{color:var(--muted);font-size:11.5px;}

  .dash-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
  .dash-toolbar .left h1{margin-bottom:2px;}

  .filter-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
  .filter-title{font-weight:700;font-size:13.5px;color:var(--black);padding-bottom:11px;margin-right:2px;}
  .filter-field{display:flex;flex-direction:column;gap:5px;}
  .filter-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
  .filter-date{padding:9px 12px;font-size:13.5px;min-width:150px;}
  .filter-info{font-size:12.5px;color:var(--purple-dark);font-weight:700;margin-left:2px;}
  .filter-info.is-error{color:#c0392b;}
  .toolbar-actions{display:flex;gap:8px;}
  .btn.small{padding:9px 16px;font-size:13px;}

  footer.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);flex-wrap:wrap;gap:6px;}

  .loading-msg{text-align:center;color:var(--muted);padding:40px 0;font-size:13.5px;}
  .hidden{display:none !important;}