/* =============================================================
   Astolfi CRM — style.css
   Paleta baseada na tela de login (gradiente teal) + Gantari
   ============================================================= */

:root{
  --brand-900:#0f4a53;
  --brand-700:#14606c;
  --brand-600:#1c7480;
  --brand-500:#2a8f96;
  --brand-400:#3fb3ac;
  --brand-100:#e6f4f3;

  --ink-900:#1f2733;
  --ink-600:#5b6472;
  --ink-400:#8a93a1;

  --bg-app:#f4f5f7;
  --border-soft:#e7e9ee;

  --status-confirmado-bg:#e3f7ec; --status-confirmado-fg:#1a9d5c;
  --status-atendendo-bg:#e5f2fb;  --status-atendendo-fg:#2685c9;
  --status-cancelado-bg:#fdeaea;  --status-cancelado-fg:#d5484a;
  --status-retorno-bg:#f2e9fb;    --status-retorno-fg:#8a4fd1;
  --status-novolead-bg:#eef0f4;   --status-novolead-fg:#5b6472;
  --status-ia-bg:#fff3e0;         --status-ia-fg:#c98416;

  --sidebar-w:100px;
  --tabs-h: 42px;
}

/* Scrollbar global */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: #eef0f4;
}

::-webkit-scrollbar-thumb {
    background: #42A8B2;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #42A8B2;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #42A8B2 #eef0f4;
}

*{box-sizing:border-box;}

html, body{
  height:100%;
  overflow:hidden; /* a página nunca rola */
}


body{
  font-family:'Gantari', sans-serif;
  background:var(--bg-app);
  color:var(--ink-900);
  font-size:.925rem;
}

a{ text-decoration:none; }

/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
}
.auth-side{
  flex:1 1 45%;
  background:linear-gradient(160deg, var(--brand-900) 0%, var(--brand-500) 100%);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4rem;
  color:#fff;
}
.auth-side .brand-logo{
  font-weight:800;
  font-size:2.1rem;
  letter-spacing:-.5px;
  margin-bottom:.75rem;
}
.auth-side .brand-tag{
  color:rgba(255,255,255,.85);
  max-width:320px;
  line-height:1.4;
}
.auth-side .deco-circle{
  position:absolute;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}
.auth-form-side{
  flex:1 1 55%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-app);
  padding:2rem;
}
.auth-form-card{ width:100%; max-width:380px; }
.auth-form-card h2{ font-weight:800; margin-bottom:.25rem; }
.auth-form-card p.subtitle{ color:var(--ink-600); margin-bottom:2rem; }
.auth-form-card .form-control{
  background:#fff;
  border:1px solid var(--border-soft);
  padding:.85rem 1rem;
  border-radius:.6rem;
  margin-bottom:1rem;
}
.auth-form-card .form-control:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 .2rem rgba(42,143,150,.15);
}
.btn-brand{
  background:linear-gradient(120deg, var(--brand-700), var(--brand-500));
  border:none;
  color:#fff;
  font-weight:700;
  padding:.85rem 1rem;
  border-radius:.6rem;
  width:100%;
}
.btn-brand:hover{ color:#fff; filter:brightness(1.05); }

/* ---------------------------------------------------------
   Layout interno (app)
   --------------------------------------------------------- */
.app-shell{
  display:flex;
  flex:1;        /* ocupa o espaço restante depois da recent-tabs */
  min-height:0;  /* essencial pro overflow funcionar dentro do flex */
  overflow:hidden;
}

.sidebar{
  width:var(--sidebar-w);
  background:#fff;
  border-right:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.25rem 0;
  height:calc(100dvh - var(--tabs-h));
}
.sidebar .brand-logo{
  font-weight:800;
  color:var(--brand-600);
  font-size:1.15rem;
  margin-bottom:2rem;
}
.sidebar .nav-icon{
  position:relative;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.8rem;
  color:var(--ink-400);
  margin-bottom:.4rem;
  font-size: 1.7rem;
}
.sidebar .nav-icon:hover{ background:var(--brand-100); color:var(--brand-600); }
.sidebar .nav-icon.active{ background:var(--brand-100); color:var(--brand-600); }
.sidebar .nav-icon .icon-label{
  font-size:.62rem;
  display:block;
  text-align:center;
  margin-top:2px;
  font-weight:600;
}
.sidebar .nav-icon .badge-count{
  position:absolute;
  top:2px; right:4px;
  background:#d5484a;
  color:#fff;
  border-radius:50px;
  font-size:.6rem;
  font-weight:700;
  padding:1px 5px;
  line-height:1.3;
}
.sidebar .nav-icon-wrap{
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar .sidebar-footer{ margin-top:auto; text-align:center; }
.sidebar .sidebar-user-avatar img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--brand-100);
}
.sidebar .sidebar-user-name{
    font-size: .65rem;
    font-weight: 700;
    margin-top: .35rem;
    color: var(--brand-600);
}
.sidebar .sidebar-user-role{ font-size:.6rem; color:var(--ink-400); }


.main-content{
  flex:1;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  padding:1.75rem 2rem;
}

.page-title{ font-weight:800; font-size:1.5rem; margin-bottom:0; }
.page-subtitle{ color:var(--ink-600); font-size:.85rem; }

.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:start;
  justify-content:space-between;
  margin-bottom:1.25rem;
}
.topbar .search-box{ position:relative; min-width:280px; flex:1 1 280px; }
.topbar .search-box i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-400);
}
.topbar .search-box input{ padding-left:2.4rem; border-radius:.6rem; }
.topbar .filter-select{ border-radius:.6rem; min-width:150px; }
.btn-new{
  background:var(--brand-600);
  color:#fff;
  font-weight:700;
  border-radius:.6rem;
  border:none;
  padding:.55rem 1.1rem;
  white-space:nowrap;
}
.btn-new:hover{ background:var(--brand-700); color:#fff; }

.subbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:1.25rem;
}
.subbar .tabs a{
  display:inline-block;
  padding:.6rem .25rem;
  margin-right:1.75rem;
  color:var(--ink-600);
  font-weight:700;
  border-bottom:2px solid transparent;
}
.subbar .tabs a.active{ color:var(--brand-600); border-color:var(--brand-600); }
.subbar .date-range, .subbar .order-by, .date-range {
  font-size:.82rem;
  color:var(--ink-600);
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.5rem;
  padding:.4rem .75rem;
  display: flex;
  align-items: center;
}

.order-by select {
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-600);
    background: #fff;
    border: none;
    padding: 0;
}

.subbar .date-range strong, .subbar .order-by strong{ color:var(--brand-600); }

/* ---------------------------------------------------------
   Tabela "Listas"
   --------------------------------------------------------- */
.card-table{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.8rem;
  overflow:hidden;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /* height: 100vh; */
    /* overflow-y: auto; */
    max-height: 100vh;
    overflow-y: auto;
}

.table-astolfi{ margin-bottom:0; }
.table-astolfi thead th{
  border-bottom:1px solid var(--border-soft);
  color:var(--ink-400);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
  padding:1rem .9rem;
  white-space:nowrap;
}
.table-astolfi tbody td{
  padding:.85rem .9rem;
  vertical-align:middle;
  border-bottom:1px solid var(--border-soft);
}
.table-astolfi tbody tr:last-child td{ border-bottom:none; }

.person-cell{ display:flex; align-items:center; gap:.6rem; }
.person-cell img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.person-cell .p-name{ font-weight:700; font-size:.85rem; }
.person-cell .p-sub{ font-size:.72rem; color:var(--ink-400); }

.badge-status{
  font-size:.68rem;
  font-weight:800;
  padding:.35rem .6rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space: nowrap;
}
.badge-status.confirmado{ background:var(--status-confirmado-bg); color:var(--status-confirmado-fg); }
.badge-status.atendendo{ background:var(--status-atendendo-bg); color:var(--status-atendendo-fg); }
.badge-status.cancelado{ background:var(--status-cancelado-bg); color:var(--status-cancelado-fg); }
.badge-status.retorno{ background:var(--status-retorno-bg); color:var(--status-retorno-fg); }
.badge-status.novolead{ background:var(--status-novolead-bg); color:var(--status-novolead-fg); }
.badge-status.contatocomia{ background:var(--status-ia-bg); color:var(--status-ia-fg); }

.badge-dependente{
  display:inline-block;
  background:#fdf1e2;
  color:#b3760f;
  font-size:.68rem;
  font-weight:700;
  padding:.25rem .55rem;
  border-radius:50px;
  margin:1px 2px;
}

.btn-eye{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--brand-600);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}
.btn-eye:disabled, .btn-eye[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

.pagination-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1rem;
  font-size:.82rem;
  color:var(--ink-600);
}

/* ---------------------------------------------------------
   Kanban (Funil de Atendimento)
   --------------------------------------------------------- */
.kanban-board{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:1rem;
  align-items:flex-start;
}
.kanban-col{
  background:#eef0f3;
  border-radius:.8rem;
  min-width:270px;
  max-width:270px;
  flex:0 0 270px;
  padding:.75rem;
  min-height:120px;
}
.kanban-col.drag-over{ background:var(--brand-100); outline:2px dashed var(--brand-400); }
.kanban-col-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .75rem .75rem;
    font-weight: 600;
    font-size: .85rem;
    border-bottom: 3px solid var(--brand-500);
    margin-bottom: .75rem;
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
}
.kanban-col-header .count{
  background:#fff;
  color:var(--ink-600);
  font-size:.7rem;
  font-weight:700;
  border-radius:50px;
  padding:.05rem .5rem;
}
.kanban-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.65rem;
  padding:.75rem;
  margin-bottom:.6rem;
  cursor:grab;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.kanban-card:active{ cursor:grabbing; }
.kanban-card.dragging{ opacity:.4; }
.kanban-card .kc-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; }
.kanban-card .kc-top img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.kanban-card .kc-name{ font-weight:700; font-size:.82rem; }
.kanban-card .kc-name a { font-weight:600; font-size:.82rem; color: #000;}
.kanban-card .kc-sub{ font-size:.7rem; color:var(--ink-400); }
.kanban-card .kc-meta{ font-size:.75rem; color:var(--ink-600); margin-bottom:.5rem; }
.kanban-card .kc-footer{ display:flex; align-items:center; justify-content:space-between; }
.kanban-card .kc-footer img{ width:24px; height:24px; border-radius:50%; }
.kanban-card .alert-flag{
  color:#d5484a;
  position:absolute;
  margin-left:-6px;
  margin-top:-6px;
}

.alerta-av {
    border: 2px solid #d5484a;
}

.btn-1 {
    padding: 10px 20px;
    background: #42A8B2;
    border-radius: 4px;
    border: none;
    white-space: nowrap;
    font-family: 'Gantari';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: #F7F5F2;
}

.btn-1:hover {
    opacity: 0.8;
}





/* =========================================================
   DATE RANGE PICKER
========================================================= */

.date-range-picker {
    position: relative;
    display: inline-block;
    font-family: inherit;
}


/* Campo principal
--------------------------------------------------------- */

.date-range {
    min-width: 485px;
    display: flex;
    align-items: center;
    /*padding: 0 25px;*/
    border: 1px solid #e1e3e8;
    border-radius: 16px;
    background: #fff;
    color: #5c6470;
    /*font-size: 23px;*/
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

.date-range:hover {
    border-color: #cfd3d9;
}

.date-range:focus {
    outline: none;
    border-color: #218090;
    box-shadow: 0 0 0 3px rgba(33,128,144,.10);
}

.date-range > i {
    margin-right: 18px;
    font-size: 25px;
    color: #5c6470;
}

.date-range-text {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.date-range strong {
    color: #197b8a;
    font-weight: 700;
}

.date-range .date-end {
    margin-left: 2px;
}


/* =========================================================
   CALENDÁRIO
========================================================= */

.date-range-calendar {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1050;
    width: 690px;
    max-width: 100%;
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0,0,0,.12);
    display: none;
}

.date-range-picker.open .date-range-calendar {
    display: block;
}


/* Header
--------------------------------------------------------- */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.calendar-header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5c6470;
    cursor: pointer;
}

.calendar-header button:hover {
    background: #f1f3f5;
}

.calendar-months {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #343a40;
}


/* Dois calendários
--------------------------------------------------------- */

.calendar-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
}

.calendar-divider {
    width: 1px;
    background: #e9ecef;
}


/* Nome do mês
--------------------------------------------------------- */

.calendar-month-title {
    text-align: center;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #343a40;
}


/* Dias da semana
--------------------------------------------------------- */

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendar-weekdays {
    margin-bottom: 5px;
}

.calendar-weekday {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #9aa0a6;
}


/* Dia
--------------------------------------------------------- */

.calendar-day {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #343a40;
    font-size: 13px;
    cursor: pointer;
    position: relative;
}

.calendar-day:hover {
    background: #f0f5f6;
}

.calendar-day.other-month {
    color: #c7cbd1;
}

.calendar-day.today {
    font-weight: 700;
}

.calendar-day.start,
.calendar-day.end {
    background: #197b8a;
    color: #fff;
    font-weight: 700;
}

.calendar-day.in-range {
    background: #e5f1f3;
    border-radius: 0;
    color: #197b8a;
}

.calendar-day.start {
    border-radius: 8px 0 0 8px;
}

.calendar-day.end {
    border-radius: 0 8px 8px 0;
}

.calendar-day.start.end {
    border-radius: 8px;
}


/* Footer
--------------------------------------------------------- */

.calendar-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.calendar-footer button {
    border: 0;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.calendar-clear {
    background: transparent;
    color: #6c757d;
}

.calendar-clear:hover {
    background: #f1f3f5;
}

.calendar-apply {
    background: #197b8a;
    color: #fff;
}

.calendar-apply:hover {
    background: #146a76;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px;
}

.pagination-limit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-limit .form-select {
    width: 70px;
}

.pagination-info {
    margin-left: auto;
}

.pagination {
    gap: 4px;
}

.pagination .page-link {
    border-radius: 6px !important;
    min-width: 32px;
    text-align: center;
    color: var(--brand-900);
}

.active>.page-link, .page-link.active {
    background-color: var(--brand-400);
    border-color: var(--brand-400);
}

.tag-responsavel {
    color: #F7F5F2;
    background-color: #F5A32D;
}


.atendimento-shell{
  flex:1;
  display:flex;
  min-width:0;
  height:calc(100dvh - var(--tabs-h));
  overflow:hidden;
}
 
/* ---------------------------------------------------------
   Coluna 1 — Lista de conversas
   --------------------------------------------------------- */
.conv-list-col{
  width:340px;
  flex:0 0 340px;
  border-right:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  background:#fff;
  min-height:0;
}
.conv-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.25rem .9rem;
}
.conv-search{
  position:relative;
  padding:0 1.25rem .75rem;
}
.conv-search i{
  position:absolute; left:1.6rem; top:35%; transform:translateY(-50%);
  color:var(--ink-400);
}
.conv-search input{ padding-left:2.3rem; border-radius:.6rem; }
 
.conv-tabs{
  display:flex;
  gap:.5rem;
  padding:0 1.25rem .9rem;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
.conv-tab{
  border:1px solid var(--border-soft);
  background:#f5f6f8;
  color:var(--ink-600);
  font-size:.75rem;
  font-weight:700;
  padding:.35rem .75rem;
  border-radius:50px;
  width: max-content;
  flex-shrink: 0;
}
.conv-tab.active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.conv-tab-count{
  background:rgba(0,0,0,.15);
  border-radius:50px;
  padding:0 .4rem;
  margin-left:.2rem;
  font-size:.68rem;
}
.conv-tab.active .conv-tab-count{ background:rgba(255,255,255,.25); }
 
.conv-list{
  flex:1;
  overflow-y:auto;
  border-top:1px solid var(--border-soft);
}
.conv-item{
  display:flex;
  gap:.65rem;
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--border-soft);
  color:var(--ink-900);
  position:relative;
}
.conv-item:hover{ background:#f7f8fa; }
.conv-item.active{ background:var(--brand-100); }
.conv-item.hidden-by-filter{ display:none; }
 
.conv-item-avatar{ position:relative; flex:0 0 auto; }
.conv-item-avatar img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.conv-alert-dot{
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #d5484a;
    /*border: 2px solid #fff;*/
    border-radius: 50%;
    font-size: 9px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
.conv-item-body{ flex:1; min-width:0; }
.conv-item-top{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.conv-item-name{
  font-weight:700;
  font-size:.85rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:130px;
}
.badge-modo{
  font-size:.6rem;
  font-weight:800;
  padding:.15rem .45rem;
  border-radius:50px;
  white-space:nowrap;
}
.badge-modo.ia-ativa{ background:#fff3e0; color:#c98416; }
.badge-modo.atendendo{ background:#e5f2fb; color:#2685c9; }
 
.conv-item-mid{ margin:.3rem 0; }
 
.conv-item-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.conv-item-preview{
  font-size:.78rem;
  color:var(--ink-400);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:170px;
}
.conv-item-time{ font-size:.68rem; color:var(--ink-400); white-space:nowrap; }
 
.conv-unread-badge{
  background:var(--brand-500);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  min-width:20px;
  height:20px;
  border-radius:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .3rem;
}
 
/* ---------------------------------------------------------
   Coluna 2 — Conversa
   --------------------------------------------------------- */
.chat-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#f7f8fa;
}
 
.chat-empty-state{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ink-400);
  padding:2rem;
}
.chat-empty-state i{ font-size:2.6rem; margin-bottom:1rem; color:var(--brand-400); }
.chat-empty-state p{ max-width:320px; font-weight:600; }
 
.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-bottom:1px solid var(--border-soft);
  padding:.85rem 1.25rem;
}
.chat-header-contact, .chat-header-responsavel{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.chat-header-contact img, .chat-header-responsavel img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
}
.chat-header-name{ font-weight:700; font-size:.85rem; }
.chat-header-phone{ font-size:.72rem; color:var(--ink-400); }
.btn-toggle-panel{
  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--brand-600);
  width:34px; height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
 
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.chat-day-divider{ text-align:center; margin-bottom:.75rem; }
.chat-day-divider span{
  background:#fff;
  border:1px solid var(--border-soft);
  color:var(--ink-400);
  font-size:.72rem;
  padding:.25rem .9rem;
  border-radius:50px;
}
.msg-row{ display:flex; }
.msg-row.in{ justify-content:flex-start; }
.msg-row.out{ justify-content:flex-end; }
.msg-bubble{
  max-width:60%;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.75rem;
  padding:.7rem .9rem 1.4rem;
  font-size:.85rem;
  position:relative;
  line-height:1.4;
}
.msg-row.out .msg-bubble{ background:var(--brand-100); border-color:var(--brand-100); }
.msg-time{
  position:absolute;
  right:.75rem; bottom:.4rem;
  font-size:.65rem;
  color:var(--ink-400);
}
 
.chat-input-bar{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:#fff;
  border-top:1px solid var(--border-soft);
  padding:.85rem 1.25rem;
}
.btn-attach{
  border:none;
  background:#f0f1f4;
  color:var(--ink-600);
  width:38px; height:38px;
  border-radius:50%;
  flex:0 0 auto;
}
.chat-input-bar input{
  flex:1;
  border-radius:1.5rem;
  border:1px solid var(--border-soft);
  padding:.6rem 1rem;
}
.btn-send{
  border:none;
  background:var(--brand-600);
  color:#fff;
  width:38px; height:38px;
  border-radius:50%;
  flex:0 0 auto;
}
.btn-send:hover{ background:var(--brand-700); }
 
/* ---------------------------------------------------------
   Coluna 3 — Painel lateral (Detalhes / Financeiro / Resposta)
   --------------------------------------------------------- */
.side-panel{
  width:320px;
  flex:0 0 320px;
  border-left:1px solid var(--border-soft);
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:margin-right .2s ease;
}
.side-panel.collapsed{
  margin-right:-320px;
}
 
.side-panel-tabs{
  display:flex;
  border-bottom:1px solid var(--border-soft);
}
.side-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--ink-600);
  font-size:.75rem;
  font-weight:700;
  padding:.9rem .4rem;
  border-bottom:2px solid transparent;
}
.side-tab.active{ color:var(--brand-600); border-color:var(--brand-600); }
 
.side-panel-body{ flex:1; overflow-y:auto; padding:1rem; }

.side-tab-pane {
    display: none;
}

.side-tab-pane.active {
    display: block;
}
 
.side-card{
  border:1px solid var(--border-soft);
  border-radius:.7rem;
  padding:1rem;
  margin-bottom:1rem;
  background-color: #fff;
}
.side-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:.75rem;
}
.side-link{ font-size:.75rem; color:var(--brand-600); }
 
.side-detail-list{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px;
  margin:0;
  max-height: 50vh;
  overflow-y: auto;
}
.side-detail-list dt{ color:var(--ink-400); font-size:.75rem; font-weight:600; }
.side-detail-list dd{ margin:0; font-size:.8rem; font-weight:600; text-align:right; }
 
.side-agendamento{ display:flex; align-items:center; gap:.85rem; }
.side-agendamento-date{
  background:var(--brand-100);
  color:var(--brand-700);
  border-radius:.6rem;
  padding:.4rem .7rem;
  text-align:center;
  font-size:.7rem;
  font-weight:700;
  line-height:1.1;
  min-width:52px;
}
.side-agendamento-date strong{ display:block; font-size:1.1rem; }
 
.text-financeiro-pago{ color:var(--status-confirmado-fg); font-weight:700; }
.text-financeiro-pendente{ color:#c98416; font-weight:700; }
 
.quick-reply-list{ display:flex; flex-direction:column; gap:.5rem; }
.quick-reply-item{
  text-align:left;
  border:1px solid var(--border-soft);
  background:#f7f8fa;
  border-radius:.6rem;
  padding:.6rem .75rem;
  font-size:.8rem;
  color:var(--ink-900);
}
.quick-reply-item:hover{ background:var(--brand-100); border-color:var(--brand-400); }





@media (max-width: 992px){
  .side-panel{ position:fixed; right:0; top:0; height:100vh; z-index:20; box-shadow:-4px 0 12px rgba(0,0,0,.08); }
}

/* =========================================================
   MOBILE
========================================================= */


.acao-modelo-resposta {
    font-size: 16px;
    color: var(--ink-400);
    background-color: transparent;
    border: none;
}


.chat-input-bar {
    position: relative;
}

.quick-reply-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 320px;
    max-width: calc(100% - 20px);
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: none;
    z-index: 100;
    overflow-y:auto;
}

.quick-reply-menu.active {
    display: block;
}

.quick-reply-menu-item {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.quick-reply-menu-item:hover {
    background: #f5f5f5;
}

.quick-reply-group-title{
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--brand-600);
  padding:.6rem .75rem .25rem;
}
.quick-reply-group-title:not(:first-child){
  margin-top:.35rem;
  border-top:1px solid var(--border-soft);
}
.quick-reply-group-empty{
  font-size:.75rem;
  color:var(--ink-400);
  padding:.25rem .75rem .5rem;
}


.fin-topbar{ align-items:center; }
 
.fin-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.8rem;
  padding:1.25rem;
}
.fin-card-resultado{ background:var(--brand-100); border-color:var(--brand-100); }
 
.fin-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  font-weight:700;
  font-size:.9rem;
  color:var(--ink-900);
  margin-bottom:1rem;
}
 
.fin-icon-badge{
  width:42px; height:42px;
  border-radius:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--brand-500);
  font-size:1.1rem;
  flex:0 0 auto;
}
.fin-icon-badge.azul{ background:#e5f2fb; color:#2685c9; }
.fin-icon-badge.laranja{ background:#fff3e0; color:#c98416; }
.fin-icon-badge.verde{ background:#e3f7ec; color:#1a9d5c; }
.fin-icon-badge.roxo{ background:#f2e9fb; color:#8a4fd1; }
 
.fin-resultado-valor{
  font-size:2.1rem;
  font-weight:800;
  color:var(--ink-900);
  margin-bottom:1.25rem;
}
 
.fin-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.4rem;
  flex-wrap:wrap;
  gap:.4rem;
}
.fin-meta-pct{ font-weight:800; color:var(--brand-700); font-size:.9rem; }
 
.fin-progress{
  height:8px;
  border-radius:50px;
  background:#d7e9e9;
}
.fin-progress .progress-bar{
  background:linear-gradient(90deg, var(--brand-600), var(--brand-400));
  border-radius:50px;
}
 
.fin-posicao-atual{
  font-size:1.8rem;
  font-weight:800;
  color:#8a4fd1;
  margin:.2rem 0 .5rem;
}
.fin-proxima{ font-weight:800; color:#8a4fd1; margin-bottom:1.1rem; }
 
.fin-fila-avatares{
  display:flex;
  gap:1.1rem;
  overflow-x:auto;
  padding-top:.25rem;
}
.fin-fila-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:0 0 auto;
  width:64px;
}
.fin-fila-item img{
  width:48px; height:48px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid transparent;
}
.fin-fila-item.atual img{ border-color:#8a4fd1; }
.fin-fila-posicao{
  font-size:.75rem;
  font-weight:700;
  color:var(--ink-400);
  margin-top:.25rem;
}
.fin-fila-item.atual .fin-fila-posicao{ color:#8a4fd1; }
.fin-fila-nome{
  font-size:.7rem;
  color:var(--ink-600);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:64px;
}
.fin-fila-item.atual .fin-fila-nome{ color:#8a4fd1; font-weight:700; }
 
.fin-stat-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.8rem;
  padding:1.1rem;
  height:100%;
}
.fin-stat-label{ color:var(--ink-600); font-size:.8rem; margin:.75rem 0 .25rem; }
.fin-stat-valor{ font-size:1.4rem; font-weight:800; color:var(--ink-900); }
 
/* ---------------------------------------------------------
   Perfil
   --------------------------------------------------------- */
.perfil-banner{
  background:linear-gradient(120deg, var(--brand-700), var(--brand-400));
  border-radius:.9rem;
  padding:1.5rem 1.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem;
  color:#fff;
  margin-bottom:1.25rem;
}
.perfil-banner-info{ display:flex; align-items:center; gap:1rem; }
.perfil-banner-info img{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.5);
}
.perfil-badge-cargo{
  display:inline-block;
  background:rgba(255,255,255,.9);
  color:var(--brand-700);
  font-size:.7rem;
  font-weight:800;
  padding:.2rem .6rem;
  border-radius:50px;
  margin-bottom:.35rem;
}
.perfil-banner-email{ font-size:.8rem; color:rgba(255,255,255,.9); }
.perfil-banner-nome{ font-size:1.1rem; font-weight:800; margin-top:.15rem; }
 
.perfil-banner-stats{ display:flex; gap:2.5rem; }
.perfil-stat{ text-align:center; }
.perfil-stat-valor{ font-size:1.9rem; font-weight:800; line-height:1; }
.perfil-stat-label{ font-size:.75rem; color:rgba(255,255,255,.9); margin-top:.25rem; white-space:nowrap; }
 
.perfil-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.8rem;
  padding:1.25rem 1.5rem;
  height:100%;
  overflow: hidden;
}

.column-detalhes-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inner-detalhes-card {
    height: 70vh;
    overflow-y: auto;
}

.perfil-card-title{ font-weight:800; font-size:.95rem; margin-bottom:1.1rem; }
.perfil-label{ font-size:.72rem; color:var(--ink-400); font-weight:700; margin-bottom:0px; display:block; }
.perfil-card input.form-control[readonly]::placeholder{ color:var(--ink-400); }
 
.perfil-suporte-list{ list-style:none; margin:0; padding:0; }
.perfil-suporte-list li{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--border-soft);
  font-size:.85rem;
}
.perfil-suporte-list li:last-child{ border-bottom:none; }
.perfil-suporte-list i{ color:var(--brand-600); width:18px; text-align:center; }
.perfil-suporte-list a{ color:var(--ink-900); }
.perfil-suporte-list a:hover{ color:var(--brand-600); }


.secao-titulo {
    font-family: 'Gantari';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #42A8B2;
    display: block;
}

.detalhes-internos label {
    min-width: 60px;
}

.detalhes-internos input {
    background-color: transparent !important;
    border: none;
}

.atividade-titulo {
    font-family: 'Gantari';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #42A8B2;
}

.atividade-hora, .atividade-meta, .atividade-financeiro-grid {
    font-family: 'Gantari';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #6C6C6C;
}

.atividade-financeiro-grid {
  display: grid;
  grid-template-columns: max-content 1fr; 
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin: 0;
}

.atividade-financeiro-grid dt {
  font-weight: bold;
  grid-column: 1;
}

.atividade-financeiro-grid dd {
  margin: 0;
  grid-column: 2;
}

.atividade-registrar select {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border-radius: 100%;
    font-size: 16px;
    border: none;
    color: #42A8B2;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.recent-tabs {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    padding: 0 20px;
}

.recent-tabs-list {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
}


/* Aba */

.recent-tab {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 140px;
    max-width: 220px;
    height: 42px;
    background: #f5f6f7;
    border-radius: 7px 7px 0 0;
    transition: all .2s ease;
}


/* Link */

.recent-tab-link {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px 0 15px;
    color: #555;
    text-decoration: none;
}


/* Título */

.recent-tab-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Fechar */

.recent-tab-close {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border: 0;
    background: transparent;
    color: #999;
    border-radius: 50%;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;
    transition: all .2s ease;
}

.recent-tab-close:hover {
    background: #e5e5e5;
    color: #333;
}


/* Hover */

.recent-tab:hover {
    background: #eef1f2;
}


/* Aba ativa */

.recent-tab.ativo {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.recent-tab.ativo .recent-tab-title {
    color: #42A8B2;
    font-weight: 600;
}

.recent-tab.ativo::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: #42A8B2;
}

.btn-chat-back {
    display: none;
    border: none;
    background: transparent;
    color: var(--brand-600);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1rem;
}

/* =========================================================
   PÁGINA DO CLIENTE (cliente.php) — escopado em .main-cliente
   Página sem rolagem; cada coluna rola internamente
========================================================= */

/* Mobile/tablet: comportamento normal, a página rola */
.main-cliente .inner-detalhes-card{
  height:auto;
  overflow:visible;
}

@media (min-width: 992px){

  /* A página não rola */
  .main-cliente{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-bottom:1.25rem;
  }

  .main-cliente .topbar{
    flex:0 0 auto;
    margin-bottom:1rem;
  }

  /* Linha ocupa o restante da altura */
  .main-cliente .cliente-row{
    flex:1 1 0;
    min-height:0;
    flex-wrap:nowrap;
    align-items:stretch;
    margin-bottom:0;
  }

  .main-cliente .cliente-row > [class*="col-"]{
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0;
  }

  /* ---------- Coluna 1: detalhes ---------- */
  .main-cliente .column-detalhes-card{
    flex:1 1 0;
    height:auto;
    min-height:0;
  }

  .main-cliente .inner-detalhes-card{
    flex:1 1 0;
    height:auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:.5rem;
  }

  /* ---------- Coluna 2: agendamento fixo + notas com rolagem ---------- */
  .main-cliente .side-card{
    /*margin-bottom:0;*/
  }

  /* ---------- Coluna 2: notas com rolagem ---------- */
  .main-cliente .notas-card{
    display:flex !important;
    flex-direction:column;
    flex:1 1 0 !important;   /* vence o .flex-fill do Bootstrap */
    min-height:0 !important;
    overflow:hidden;
  }

  .main-cliente .notas-card > .d-flex{
    flex:1 1 0;
    height:auto !important;  /* vence o .h-100 */
    min-height:0;
  }

  /* não depende mais da classe .notas-scroll */
  .main-cliente .notas-card > .d-flex > div:first-child{
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
    padding-right:.35rem;
  }

  .main-cliente .notas-card > .d-flex > div:last-child{
    flex:0 0 auto;
  }

  /* ---------- Coluna 3: atividades com rolagem + registro fixo ---------- */
  .main-cliente .atividades-col{
    flex:1 1 0;
    height:auto !important;
    min-height:0;
  }

  .main-cliente .atividades-scroll{
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
    padding-right:.35rem;
  }

  .main-cliente .atividades-scroll .side-card:last-child{
    margin-bottom:0;
  }

  .main-cliente .atividades-scroll .atividades-header{
    position:sticky;
    top:0;
    z-index:1;
    background:var(--bg-app);
    padding-bottom:.5rem;
    margin-bottom:.5rem;
  }

  .main-cliente .atividade-registrar{
    flex:0 0 auto;
    margin-top:1rem;
    margin-bottom:0 !important;
  }
}





/* ---------------------------------------------------------
   Aba Agendamento (painel lateral do atendimento)
   --------------------------------------------------------- */
.ag-label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--ink-600);
  margin-bottom:.25rem;
}

.ag-calendar{
  border:1px solid var(--border-soft);
  border-radius:.6rem;
  padding:.75rem;
}
.ag-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.6rem;
  font-size:.8rem;
}
.ag-nav{
  border:none;
  background:transparent;
  color:var(--ink-600);
  width:28px; height:28px;
  border-radius:50%;
}
.ag-nav:hover{ background:var(--brand-100); color:var(--brand-600); }

.ag-weekdays, .ag-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
  text-align:center;
}
.ag-weekdays span{
  font-size:.65rem;
  font-weight:600;
  color:var(--ink-400);
  padding-bottom:.25rem;
}

.ag-day{
  height:30px;
  width:30px;
  margin:0 auto;
  border:none;
  background:transparent;
  border-radius:50%;
  font-size:.75rem;
  color:var(--ink-900);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ag-day:disabled{ cursor:default; color:var(--ink-600); }
.ag-day.ag-empty{ pointer-events:none; }
.ag-day.is-available{ background:#dcecee; cursor:pointer; }
.ag-day.is-available:hover{ background:#c9e3e6; }
.ag-day.is-today{ box-shadow:inset 0 0 0 1px var(--brand-500); }
.ag-day.is-selected{
  background:var(--brand-500);
  color:#fff;
  font-weight:700;
  box-shadow:none;
}

.ag-legend{
  display:flex;
  gap:1rem;
  margin-top:.6rem;
  font-size:.65rem;
  color:var(--ink-400);
}
.ag-dot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  margin-right:.2rem;
}
.ag-dot-sel{ background:var(--brand-500); }
.ag-dot-av{ background:#dcecee; }

.ag-times{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.75rem;
}
.ag-time{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:none;
  background:#eef0f4;
  color:var(--ink-900);
  font-size:.72rem;
  padding:.3rem .6rem;
  border-radius:.4rem;
}
.ag-time::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  border:1px solid var(--ink-400);
  background:#fff;
}
.ag-time:hover{ background:#e2e6ec; }
.ag-time.is-selected{ background:var(--brand-500); color:#fff; font-weight:700; }
.ag-time.is-selected::before{ border-color:#fff; box-shadow:inset 0 0 0 2px var(--brand-500); background:#fff; }

.ag-list{
  margin-top:1rem;
  max-height:200px;
  overflow-y:auto;
}
.ag-item{
  font-size:.78rem;
  padding:.6rem 0;
  border-top:1px solid var(--border-soft);
  line-height:1.45;
}
.ag-item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Seletor de etiquetas */
.tag-picker-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-bottom:.5rem;
}
.tag-picker-chips:empty{ display:none; }

.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:var(--brand-100);
  color:var(--brand-700);
  font-size:.72rem;
  font-weight:700;
  padding:.25rem .3rem .25rem .6rem;
  border-radius:50px;
}
.tag-chip-remove{
  border:none;
  background:transparent;
  color:var(--brand-600);
  width:18px; height:18px;
  border-radius:50%;
  font-size:.95rem;
  line-height:1;
  padding:0;
}
.tag-chip-remove:hover{ background:var(--brand-500); color:#fff; }



/* Contatos (view Lista): a página não rola, só a tabela */
@media (min-width: 992px){
  .main-lista{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:1.25rem;
  }

  .main-lista .topbar,
  .main-lista .subbar{
    flex:0 0 auto;
  }

  .main-lista .card-table{
    flex:1 1 0;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .main-lista .table-responsive{
    flex:1 1 0;
    min-height:0;
    max-height:none;
    overflow:auto;
  }

  .main-lista .pagination-bar{
    flex:0 0 auto;
    border-top:1px solid var(--border-soft);
  }

  /* cabeçalho fixo enquanto a tabela rola */
  .main-lista .table-astolfi thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
    box-shadow:inset 0 -1px 0 var(--border-soft);
  }
}



/* ---------------------------------------------------------
   Visão Geral (dashmarketing.php)
   --------------------------------------------------------- */
:root{ --dm-teal:#5ea6b0; }

.dm-red{ color:var(--status-cancelado-fg); }
.dm-orange{ color:var(--status-ia-fg); }
.dm-purple{ color:var(--status-retorno-fg); }
.dm-blue{ color:var(--status-atendendo-fg); }
.dm-green{ color:var(--status-confirmado-fg); }
.dm-teal{ color:var(--dm-teal); }

.dm-title{ font-size:1.15rem; font-weight:700; margin:0 0 1.1rem; }
.dm-title-periodo{ font-size:.85rem; font-weight:500; color:var(--ink-600); }
.dm-title-periodo strong{ color:#197b8a; font-weight:700; }

/* Dia / Semana / Mês / Ano */
.dm-period{
  display:inline-flex;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:.5rem;
  overflow:hidden;
}
.dm-period button{
  border:none;
  background:#fff;
  color:var(--ink-900);
  font-size:.8rem;
  padding:.6rem 1rem;
}
.dm-period button.active{ background:var(--dm-teal); color:#fff; }

/* Churn */
.dm-levels{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
  margin-bottom:.9rem;
}
.dm-level{
  background:#f7f8fa;
  border:1px solid var(--border-soft);
  border-radius:.6rem;
  padding:.8rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:120px;
}
.dm-level-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; font-weight:600; }
.dm-level-top strong{ font-size:1.5rem; font-weight:800; }
.dm-level small{ color:var(--ink-600); font-size:.78rem; line-height:1.35; }

.dm-steps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.6rem; }
.dm-step{
  background:#f1f2f4;
  border-radius:.6rem;
  padding:1rem .5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.9rem;
}
.dm-step-label{ font-size:.8rem; font-weight:600; }
.dm-step strong{ font-size:1.6rem; font-weight:800; }

/* Tabela origem/mídia (reaproveita .card-table e .table-astolfi) */
.dm-table .table-responsive{ overflow-y:hidden; max-height:none; }
.table-dm thead th{
  background:#f3f1ef;
  text-transform:none;
  letter-spacing:0;
  font-size:.8rem;
  font-weight:500;
  color:var(--ink-600);
}
.table-dm th, .table-dm td{ border-right:1px solid var(--border-soft); font-size:.85rem; }
.table-dm th:last-child, .table-dm td:last-child{ border-right:none; }
.table-dm tfoot td{ padding:.7rem .9rem; font-weight:600; border-top:1px solid var(--border-soft); }

.dm-dot{
  display:inline-block;
  width:14px; height:14px;
  border-radius:50%;
  margin-right:.6rem;
  vertical-align:middle;
}
.dm-bar-cell{ display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.dm-bar-cell .progress{ width:104px; flex:0 0 104px; }
.dm-bar .progress-bar{ background:var(--dm-teal); }

/* Gráficos */
.dm-chart{ position:relative; height:240px; }
.dm-donut{ display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem 2rem; }
.dm-donut-canvas{ position:relative; width:170px; height:170px; max-width:100%; }
.dm-donut-total{ flex:1; min-width:150px; }
.dm-donut-total strong{ display:block; font-size:1.6rem; font-weight:700; }
.dm-legend{ list-style:none; margin:0; padding:0; font-size:.85rem; color:var(--ink-600); }
.dm-legend li{ display:flex; align-items:center; margin-bottom:.55rem; }

/* Comparativo por praça */
.dm-export{ border:none; background:transparent; font-size:2rem; line-height:1; padding:.25rem; }
.dm-export.pdf{ color:var(--status-cancelado-fg); }
.dm-export.xls{ color:var(--dm-teal); }
.dm-export:hover{ opacity:.75; }

.dm-cond-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.dm-cond-head label{ font-weight:600; white-space:nowrap; }
.dm-cond-head .form-select{ flex:1; }

.dm-praca-title{ text-align:center; font-size:1.1rem; font-weight:700; margin-bottom:.9rem; }
.dm-praca-total{
  background:#f3f1ef;
  border:1px solid var(--border-soft);
  border-radius:.5rem;
  text-align:center;
  padding:.8rem;
  color:var(--ink-600);
  margin-bottom:.75rem;
}
.dm-rank{ list-style:none; margin:0; padding:0; }
.dm-rank li{ display:flex; align-items:center; padding:.4rem .5rem; border-radius:.3rem; }
.dm-rank li.is-top{ background:var(--brand-100); }
.dm-rank b{ width:2rem; font-weight:800; }
.dm-rank li span:last-child{ margin-left:auto; }

/* Calendário de período alinhado à direita (o topo fica no canto direito da tela) */
@media (min-width: 769px){
  .fin-topbar .date-range-calendar{ left:auto; right:0; }
}

@media (max-width: 768px){
  .dm-levels{ grid-template-columns:1fr; }
  .dm-steps{ grid-template-columns:repeat(2, 1fr); }
  .dm-cond-head{ flex-wrap:wrap; }
}


body:has(.fin-main){
  display:flex;
  flex-direction:column;
}
body:has(.fin-main) .app-shell{
  flex:1 1 0;
  min-height:0;
}
.fin-main{
  overflow-y:auto;
}


.arquivo_envia .upload-area {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
}
.arquivo_envia .upload-area:hover,
.arquivo_envia .upload-area.dragover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .05);
}

.arquivo_envia .upload-conteudo i {
    color: var(--bs-primary);
}
.arquivo_envia .upload-arquivo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-align: left;
    overflow-wrap: anywhere;
}
.arquivo_envia .upload-remover {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: #dc3545;
    cursor: pointer;
}


/* ---------------------------------------------------------
   Mensagem com imagem (chat)
   --------------------------------------------------------- */
.msg-bubble.msg-bubble-img{
  max-width:300px;
  padding:.35rem .35rem 1.5rem;
}
.msg-img{
  display:block;
  width:100%;
  border-radius:.5rem;
  cursor:zoom-in;
}
.msg-img-actions{
  position:absolute;
  top:.6rem;
  right:.6rem;
}
.btn-img-actions{
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--brand-600);
  font-size:.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.btn-img-actions:hover{ background:#fff; color:var(--brand-700); }
.msg-img-actions .dropdown-menu{ font-size:.8rem; min-width:180px; }
.msg-img-actions .dropdown-item{ color:var(--ink-900); }
.msg-img-actions .dropdown-item:active{ background:var(--brand-100); color:var(--brand-700); }
.msg-img-actions .dropdown-item:disabled{ color:var(--status-confirmado-fg); opacity:1; }


@media (max-width: 768px){
    
    .btn-chat-back {
        display: inline-flex;
    }
    
    .chat-header-responsavel img, .chat-header-responsavel div {
        display: none;
    }
    
    .fin-topbar{ flex-direction:column; align-items:flex-start; }
    .fin-resultado-valor{ font-size:1.6rem; }
    .fin-posicao-atual{ font-size:1.4rem; }
    .perfil-banner{ flex-direction:column; align-items:flex-start; }
    .perfil-banner-stats{ width:100%; justify-content:space-between; gap:1rem; }
    
    .auth-wrapper {
        flex-direction: column;
    }    

    .pagination-bar {
        flex-wrap: wrap;
    }

    .pagination-info {
        margin-left: 0;
    }

    .pagination-bar nav {
        width: 100%;
    }

    .pagination {
        justify-content: center;
    }
        .date-range {
        min-width: 0;
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }
    
    .page-title {
        font-weight: 800;
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .date-range > i {
        margin-right: 10px;
        font-size: 20px;
    }

    .date-range-text {
        gap: 4px;
    }

    .date-range-calendar {
        width: calc(100vw - 30px);
        left: 50%;
        transform: translateX(-50%);
        padding: 15px;
    }

    .calendar-body {
        grid-template-columns: 1fr;
    }

    .calendar-divider {
        display: none;
    }

    .calendar-month-2 {
        display: none;
    }

    .calendar-months {
        grid-template-columns: 1fr;
    }

    .calendar-months > div:nth-child(2) {
        display: none;
    }
    
    .atendimento-shell:has(.conv-item.active) .conv-list-col {
        display: none;
    }

    .atendimento-shell:has(.conv-item.active) .chat-col {
        display: flex;
    }

    .conv-list-col {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

    .chat-col {
        display: none;
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

.sidebar{
    /*display:none;*/
    width: 60px;
}

.sidebar .nav-icon {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
}

.sidebar .icon-label {
    display: none;
}

.brand-logo img {
    padding: 5px;
}

.table-astolfi tbody td {
    min-width: 200px;
}

.page-subtitle {
    margin-bottom: 20px;
}


.main-content{ padding:1rem; }
  
  
  
  
  
  
  
}