/* ====== UI helpers (leve, sem brigar com Bootstrap) ====== */
    .page-head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        margin-bottom:12px;
    }
    .page-title{
        display:flex;
        align-items:center;
        gap:10px;
        margin:0;
        font-weight:700;
    }
    .page-subtitle{
        margin:2px 0 0;
        color:#6c757d;
        font-size:.875rem;
    }
    .icon-circle{
        width:36px;
        height:36px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(13,110,253,.08);
        border:1px solid rgba(13,110,253,.15);
    }
    .icon-circle i{ width:18px; height:18px; }

    .card{
        border-radius:14px;
        border:1px solid #e9ecef;
        overflow:hidden;
    }
    .card-header{
        background:#fff;
        border-bottom:1px solid #f0f1f3;
    }
    .section-title{
        display:flex;
        align-items:center;
        gap:8px;
        font-weight:700;
        margin:0;
    }
    .section-title i{ width:16px; height:16px; }

    .form-label{
        font-size:.80rem;
        font-weight:700;
        color:#6c757d;
        text-transform:uppercase;
        letter-spacing:.04em;
        margin-bottom:.35rem;
    }

    .input-group-text{
        background:#f8f9fa;
        border-color:#e9ecef;
        border-radius:10px 0 0 10px;
    }
    .form-control, .form-select{
        border-radius:10px;
        border-color:#e9ecef;
    }
    .input-group .form-control{
        border-radius:0 10px 10px 0;
    }

    .sticky-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:12px 16px;
        background:#fff;
        border-top:1px solid #f0f1f3;
    }

    /* Tabela de atendimentos */
    .history-table{
        width:100%;
    }
    .history-table thead th{
        font-size:.72rem;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:#6c757d;
        border-bottom:1px solid #f0f1f3 !important;
        padding:10px 12px;
        white-space:nowrap;
    }
    .history-table tbody td{
        padding:12px;
        border-bottom:1px solid #f3f4f6 !important;
        vertical-align:top;
    }
    .date-box{
        display:inline-flex;
        flex-direction:column;
        gap:2px;
        padding:6px 10px;
        border-radius:12px;
        background:#f8f9fa;
        border:1px solid #e9ecef;
        min-width:140px;
    }
    .date-box .lbl{
        font-size:.68rem;
        text-transform:uppercase;
        color:#6c757d;
        letter-spacing:.04em;
        line-height:1;
    }
    .date-box .val{
        font-weight:800;
        font-size:.88rem;
        line-height:1.1;
    }
    .date-box--ok{
        background:rgba(25,135,84,.07);
        border-color:rgba(25,135,84,.15);
    }
    .badge-soft{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius:999px;
        font-size:.78rem;
        font-weight:700;
        border:1px solid transparent;
        white-space:nowrap;
    }
    .badge-soft--active{
        color:#0d6efd;
        background:rgba(13,110,253,.08);
        border-color:rgba(13,110,253,.18);
    }
    .badge-soft--inactive{
        color:#dc3545;
        background:rgba(220,53,69,.08);
        border-color:rgba(220,53,69,.18);
    }
    .toolbar{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        justify-content:flex-end;
    }

    .btn{
        border-radius:10px;
    }
    .btn .lucide{
        width:16px;
        height:16px;
        margin-right:6px;
        vertical-align:-2px;
    }

    .empty-state{
        padding:18px;
        border-radius:14px;
        border:1px dashed #dee2e6;
        background:#fafafa;
        color:#6c757d;
        display:flex;
        gap:12px;
        align-items:flex-start;
    }
    .empty-state i{
        width:18px;
        height:18px;
        margin-top:2px;
    }



    /* ====== UI helpers (leve e consistente com Bootstrap) ====== */
    .page-head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        margin-bottom:12px;
    }
    .page-title{
        display:flex;
        align-items:center;
        gap:10px;
        margin:0;
        font-weight:800;
    }
    .page-subtitle{
        margin:2px 0 0;
        color:#6c757d;
        font-size:.875rem;
    }
    .icon-circle{
        width:36px;
        height:36px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(13,110,253,.08);
        border:1px solid rgba(13,110,253,.15);
    }
    .icon-circle i{ width:18px; height:18px; }

    .card{
        border-radius:14px;
        border:1px solid #e9ecef;
        overflow:hidden;
    }
    .card-header{
        background:#fff;
        border-bottom:1px solid #f0f1f3;
    }
    .section-title{
        display:flex;
        align-items:center;
        gap:8px;
        font-weight:800;
        margin:0;
    }
    .section-title i{ width:16px; height:16px; }

    .form-label{
        font-size:.80rem;
        font-weight:800;
        color:#6c757d;
        text-transform:uppercase;
        letter-spacing:.04em;
        margin-bottom:.35rem;
    }
    .input-group-text{
        background:#f8f9fa;
        border-color:#e9ecef;
        border-radius:10px 0 0 10px;
    }
    .form-control, .form-select{
        border-radius:10px;
        border-color:#e9ecef;
    }
    .input-group .form-control{
        border-radius:0 10px 10px 0;
    }
    .btn{
        border-radius:10px;
    } 

    .toolbar{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        justify-content:flex-end;
    }

    .list-group-item{
        border-color:#f0f1f3;
        padding:12px 14px;
    }
    .list-title{
        display:flex;
        align-items:center;
        gap:8px;
        font-weight:800;
    }

    .meta-line{
        color:#6c757d;
        font-size:.85rem;
    }

    .pill{
    cursor: default;
    border-radius: 999px;
    padding: .25rem .5rem;
    font-size: 12px;
    border: 1px solid rgba(13,110,253,.15);
    background: rgba(13,110,253,.08);
    color: #0b5ed7;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
  }
    .pill--on{
        color:#198754;
        background:rgba(25,135,84,.08);
        border-color:rgba(25,135,84,.16);
    }
    .pill--off{
        color:#6c757d;
        background:rgba(108,117,125,.08);
        border-color:rgba(108,117,125,.16);
    }

    .action-link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        border-radius:10px;
        border:1px solid rgba(220,53,69,.20);
        background:rgba(220,53,69,.08);
        color:#dc3545;
        text-decoration:none;
    }
    .action-link:hover{
        background:rgba(220,53,69,.14);
        color:#dc3545;
    }
    .action-link i{ width:18px; height:18px; }

    .sticky-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:12px 16px;
        background:#fff;
        border-top:1px solid #f0f1f3;
    }

    .searchbox{
        position:relative;
        max-width:320px;
        width:100%;
    }
    .searchbox i{
        position:absolute;
        left:10px;
        top:50%;
        transform:translateY(-50%);
        width:16px;
        height:16px;
        color:#6c757d;
    }
    .searchbox input{
        padding-left:34px;
    }

    .empty-state{
        padding:18px;
        border-radius:14px;
        border:1px dashed #dee2e6;
        background:#fafafa;
        color:#6c757d;
        display:flex;
        gap:12px;
        align-items:flex-start;
    }
    .empty-state i{
        width:18px;
        height:18px;
        margin-top:2px;
    }