/* Se usar @charset, ele DEVE estar na primeira linha:
@charset "UTF-8";
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@400;500&family=Nunito:wght@400;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

html {
  box-sizing: border-box;
  font-family: "Syne", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {box-sizing: inherit; margin: 0; padding: 0;}

/* ─────────────────────────────────────────────
   VARIÁVEIS PADRÃO
───────────────────────────────────────────── */
:root {
    --accent: #2b80ec;
    --accent-glow: rgba(43, 128, 236, 0.35);
    --accent2: #25bb00;
    --success: #1ecab8;
    --danger: #f5365c; 
    --card-bg: rgba(13, 31, 79, 0.82);
    --card-border: rgba(43, 128, 236, 0.25);
    --input-bg: rgba(5, 13, 40, 0.85);
    --input-border: rgba(43, 128, 236, 0.10);
    --input-focus: #2b80ec;
    --label-color: rgba(255, 255, 255, 0.55);
    --text: #0000ff; /* confirme se quer esse azul puro */
    --txt: #5002a5;
    --radius: 10px;
    --transition: all 0.25s ease;
    --wa-green: #009538;
    --wa-dark: #075e54;
    --wa-light: #dcf8c6;
    --bubble-in: #ffffff;
    --bubble-out: #dcf8c6;
    --chat-bg: #e5ddd5;
    --sidebar-bg: #f8f9fa;
    --void: #f4f6f9;
    --ok: #0ca502;
    --panel: #ffffff;
    --glass: #000000;
    --border-hot: #00a1ff;
    --accent3: #d9843a;
    --red: #ff0000;
    --yellow: #c99a00;
    --muted: #ff9b00;
    --font: 'Space Grotesk', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --bg-primary: #f4f6f9;
    --glass-bg: #ffffff;
    --border-glass: #999999;
    --purple: #7c3aed;
    --purple-glow: #7C3AED;
    --green: #1a9c00;
    --orange: #c07600;
    --text-sec: #333333;
    --shadow: 0 4px 20px rgba(0,0,0,.14);
    --ink: #7847a6;
    --surface: #ffffff;
    --border: #9100ff;
    --bdr: #ff7600;
    --acid: #3c8dbc;
    --glass-hi: rgba(0,0,0,0.35);
    --border-hi: rgba(0,0,0,0.35);
    --accent-lt: #5aa3cc;
    --acc: #8c03fc;
    --cyan: #3c8dbc;
    --warning: #f59e0b;
    --card: #fffff0;
    --border2: #6e00ff82;
    --wa: #25d366;
    --wa2: #128c7e;
    --gold: #c99a00;
    --rose: #d9435f;
    --blue: #0000ff;
    --font-h: 'Clash Display', sans-serif;
    --font-b: 'Cabinet Grotesk', sans-serif;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}


.pt-0 {
  padding-top: 0;
}
.f-right {
  float: right;
}
.mb-10 {
  margin-bottom: 10px;
}
.discount-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  padding: 7px;
}

.discount-badge-small {
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 12px;
  padding: 6px;
}
.product-info-table td, .product-info-table th {
  font-size: 12px;
}
.catalogue {
  max-height: 127px;
  margin: auto;
  margin-bottom: 18px;
}
.catalogue-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.m-4 {
  margin: 4px;
}
.skin-black .main-header, .skin-black-light .main-header {
  color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
  color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
  color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: #999 !important;
}
.mt-0{
  margin-top: 0 !important;
}
.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #2b80ec;
  color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.jquery-top-scrollbar{
    height: 6px !important;
}
.jquery-top-scrollbar div {
    height: 6px !important;
}
.scroll-top-bottom {
  width: 100%; 
  overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
    height: 6px;
}

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px; 
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s; 
  border-radius: 6px;   
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.f-left {
  float: left;
}
.align-left {
 text-align: left;
}
.align-right {
 text-align: right;
}

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

.ws-nowrap {
  white-space:nowrap;
}

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
  margin-top: 5px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
} 
.margin-bottom-20 {
  margin-bottom: 10px;
}

.text-white {
    color: #1200ff !important;
    font-weight: 500;
    text-shadow: 1px 1px 0 #ffffff !important;
}

.text-white:hover {
    color: #0000ff !important;
    font-weight: 600;
    text-shadow: 1px 1px 0 #ff7f00 !important;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  border: 4px solid #0000ff00;
  background: linear-gradient(0deg,
          #0000ff 10%,                
          #1d02ff 35%,                     
          #0352ff 55%,
          #6704a5 60%,
          #7a00ff 65%,          
          #002bff 95%,
          #0007db 100%)!important;
  border-radius: 10px;
  box-shadow: inset 0 0 1em blue, 0 0 1em black !important;
}

legend {
  color: #5600ff;
  margin-bottom: 6px;
  border-bottom: none;
  text-align: center;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.gif); 
  text-align: center;
  background-size: cover;
  background-position: center;
  width: 59%;
}
.left-col-content {
  color: #1A7BF9;
  width: 100%;
}

.login-header {
  font-size: 27px;
  font-weight: 800;
}
.login-header a {
  color: #ff6a00;
}
.form-header {
  font-size: 18px;
  margin: 16px 0;
}
.btn-login {
  padding: 6px 52px !important;
}
.right-col {
  height: auto;
  min-height: 100vh;
  width: 40%;
}
    
.right-col label {
  color: #fff;
}

.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
}

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}
.img-thumbnail>.badge{
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}

.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9; 
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.table>tbody+tbody{
  border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
  padding-left: 12px !important;
}
table tbody td.pl-20-td{
  padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child, 
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
  border-right: 1px solid darkgray;
}
 
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > th:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}
    
table.table-border-center-col > tbody > tr > td:nth-child(2), 
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}

.bg-transparent{
  background-color: transparent !important;
}
.mb-0{
  margin-bottom: 0;
}

.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
    font-size: 12px;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
	color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #3c8dbc;
  color: #ffffff;
  border-color: #3c8dbc;
}
div.pos-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #3c8dbc;
}

div.pos-tab-content{
  background-color: #e8ffe8;
  border-top: 5px solid #ffbc00;
  padding-left: 10px;
  padding-top: 10px;
  color: black;
  font-weight: 600;
  border-radius: 10px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 5px solid #04ff00;
  box-shadow: 0 1px 3px rgb(0 0 0);
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

.add-product-price-table th {
    background-color: #6e00ff;
    color: #ffbf00;
    text-shadow: 0 1px 0 #f70000;
}
.blue-header th {
	background-color: #3c8dbc;
    color: white;
}
.table-th-green th{
	background-color: #6e00ff;
    color: #ffbf00;
    text-shadow: 0 1px 0 #f70000;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.active-cell {
    border: 2px dotted #3c8dbc !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
.pos_product_div{
    min-height: 10vh !important;
    max-height: 60vh !important;
    overflow-y: auto;
    margin-bottom: 5px;
    background: #fffff0;
}
.pos_product_div:hover {
    min-height: 10vh !important;
    max-height: 60vh !important;
    overflow-y: auto;
    margin-bottom: 5px;
    background: #e6f3ff;
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border:1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"]{
    display: none;
}
.option-div-group .icon {
    color: #d33724;
    display: none;
}
.option-div-group .option-div:hover{
    border:1px solid gray;
}
.option-div-group .active .icon{
    display: block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #00c0ef !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #337ab7 !important;
}
ul.dt-button-collection{
    background-color: #00c0ef;
}
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 2px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 0 3px;
}
.icon-link{
  text-align:center;
  display:block;
  margin-bottom: 18px;
}
.icon-link > a {
    display:grid;
}
.icon-link > .badge{
    position: absolute;
    top: 20px;
    right: 67px;
}
.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}

.input-group {
    position: relative;
    display: flex;
    border-collapse: separate;
    border-radius: 7px;
}

.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
    background: #e2fdff;
    border-radius: 0px 0px 10px 10px;
    border-top: 5px solid blue;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffe7e7;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* Custom scroll bar end*/

.product_cell{
    height: 100px;
    padding: 1%;
}
.product_cell_div{
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
    display: none;
}

.input-number {
    background-color: white;
    padding: 1px 5px;
}

.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.width-60{
    width: 60% !important;
}
.width-100{
    width: 100% !important;
}

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 15px;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td{
    border-left: 0px !important;
    border-right: 0px !important;
}
.table-no-side-cell-border th{
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 30px;
    width: 30px;
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 8px;
    padding-right: 8px;
}
.product_box{
  width: 100%;
  /*padding-top: 5px;
  padding-bottom: 2px;*/
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  /*border: 1px solid darkgray;*/
  font-weight: 600;
  background-color: #fff;
  border-radius: 2px;
  padding-top: 3px;
}
.product_box .image-container{
  /*width: 95%;*/
  height: 55px;
  margin: auto;
  /*padding-top: 5px;*/
  
}
.product_box .image-container img{
    height: 45px;
    /*width: 45px*/
}
.eq-height-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.eq-height-col{
    display: flex;
    justify-content: center;
}

.product_box .text_div{
    margin-top: 3px;
	
	background: #f8f9fa!important;
}
.product_box .text{
    width: 100%;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-height: 14px;        /* fallback */
   max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

.text-link:hover{
    text-decoration: underline;
}

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

.fs-10 {
  font-size: 10px;
}

.timeline-lode-more-btn {
  margin-left: 40px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.pa-0 {
  padding: 0px !important;
}

.mt-56{
  margin-top: 56px !important;
}

.m-2{
  margin: 2px !important;
}

.sidebar-menu>li>a>.fa,
.sidebar-menu>li>a>.glyphicon,
.sidebar-menu>li>a>.ion,
.treeview-menu>li>a>.fa,
.treeview-menu>li>a>.glyphicon,
.treeview-menu>li>a>.ion {
    width: 15px !important;
    font-size: 11px !important;
}

.treeview-menu i{
  display: inline-block !important;
  color: #77ff00;
  padding: 0px 5px 0px 0px;
}

.treeview-menu a{
  padding: 3px 3px 3px 5px !important;
  display: inline-block;
  font-size: 12px !important;
}


.treeview-menu a::before{
  content: "\25B6 ";
  transform: translateY(-50%);
  font-size: 10px;
  color: #adb5bd;
  transition: transform 0.2s ease, color 0.2s ease;
  padding-right: 5px;
}

.treeview-menu a:hover::before {
  transform: translateY(-50%) translateX(4px);
  color: #007bff;
}

.mr-8 {
  margin-right: 8px !important;
}


.bg-light-green{
    background-color: #1ecab8 !important;
}


.product_box .image-container{
  height: 85px;
}

.pb-1{
  padding-bottom: 20px !important;
  margin-bottom: 30px;}

#product_list_body {
    max-height: 655px;
}

.nav-tabs>li>a {
	font-size: 14px;
}

/* New*/

.right-col-content {
  padding: 10% 15%;
  margin: 5px;
}

.right-col a, .text-white a {
    font-weight: 600;
    font-size: 14px;
    margin: auto !important;
    border-radius: 10px;
    padding: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	width: 8px;
}

::-webkit-scrollbar {
	height: 8px;
}

.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: none;
}

div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #1b82ec!important;
  border-color: #1b82ec;
}

div.pos-tab-menu div.list-group>a.active:after{
  border-left: 10px solid #1b82ec;
}

.product_box {
    padding-top: 2px;
    padding-left: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    border: 1px solid rgba(0, 0, 0, .125);
    -webkit-box-shadow: 0 0 13px 0 rgb(82 63 105 / 5%);
    border-radius: 6px;
    font-weight: 400;
}
.product_box .text_div{
	background: #f8f9fa!important;
}

/* Sidebar Padding*/
.treeview-menu a {
	padding-left: 5px !important;
}

.warning-input, .warning-input + span.select2 span.select2-selection {
  background-color: #fff478;
}


body.loading {
    overflow: hidden;
}

/* a partir do momento em que o body estiver com a classe loading,  o modal aparecerá */
body.loading .modal-loading {
    display: block;
}

.modal-loading {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.8)
    url("http://i.stack.imgur.com/FhHRx.gif") 50% 50% no-repeat;
}

/* ===== LOADING OVERLAY ===== */
body.loading {
    overflow: hidden;
}
.modal-loading {
    display: none !important;
    position: fixed !important;
    z-index: 99999 !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 2, 107, 0.70) !important;
}
body.loading .modal-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}
.loading-rings { display: none !important; }
.loading-text { display: none !important; }
.modal-loading::after {
    content: "Carregando...";
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    color: #02fa38;
    padding: 0 5px 8px 0;
    background: repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat;
    animation: l3 2s steps(6) infinite;
}

/* ===== SPINNER NOS BOTOES DE SUBMIT ===== */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}
.btn-loading .btn-spinner {
    display: inline-block !important;
}
.btn-spinner {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid #7a00ff00;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-cw 0.65s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}
.btn-default .btn-spinner,
.btn-info .btn-spinner {
    border-color: rgba(0,0,0,0.2);
    border-top-color: #333;
}

/* ── Sidebar fundo preto + texto verde lima ── */
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side {
    background-color: #000000 !important;
}

.skin-blue-light .sidebar-menu > li > a {
    color: #adff2f !important;
}

.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a {
    background: #111111 !important;
    color: #adff2f !important;
}

.skin-blue-light .sidebar-menu > li > a > .fa,
.skin-blue-light .sidebar-menu > li > a > i {
    color: #adff2f !important;
}

.skin-blue-light .treeview-menu > li > a {
    color: #0000ff !important;
}

.skin-blue-light .treeview-menu > li > a:hover,
.skin-blue-light .treeview-menu > li.active > a {
    color: #ffffff !important;
    background: #1a1a1a !important;
}

.skin-blue-light .sidebar a {
    color: #adff2f !important;
}

.skin-blue-light .sidebar-menu li.header {
    color: #7fff00 !important;
    background: #0a0a0a !important;
}


/* ============================================================
   PDV TEMA DARK - APENAS FORMULÁRIOS E CARDS
   Substitui o bloco anterior no aplicativopdv.css
   ============================================================ */

/* ─────────────────────────────────────────────
   CARDS / BOX
───────────────────────────────────────────── */
.card {
    background: #fffff0 !important;
    border-left: 6px solid #ffc800 !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 5px #000, 0 0 0 2px gold !important;
    transition: var(--transition);
    color: #027afb;
    padding: 3px;
}
.card:hover {
    border-left: 2px solid green !important;
}

.box-header,
.box-header.with-border {
    background: #dfffff !important;
    border-bottom: 1px solid rgb(41 0 120) !important;
    padding: 5px 10px !important
}

.box-header {
    color: #000000;
    display: flex;
    position: relative;
    padding: 5px 10px !important;
    align-items: center;
    vertical-align: middle;
}

.box-header h3 {
    color: var(--text) !important;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.box-body:hover {
    text-shadow: 1px 1px 0 #ffffff;
    border-top: 5px solid #249907;
    color: #09a501;
    font-weight: 500;
}
.box-footer {
    background: rgb(255 108 0) !important;
    border-top: 5px solid rgb(0 112 255) !important;
    border-radius: 0 0 var(--radius), #d4264a !important;
}

/* ─────────────────────────────────────────────
   BOTÕES
───────────────────────────────────────────── */

.btn {
    width: auto;
    padding: 3px 5px !important;
    display: inline-block;
    margin-bottom: 0;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.42857143;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 7px !important;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}

.btn-info {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}

.btn-info:hover {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
}

.btn-info.active {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
    color: #ffe000 !important;
}

.btn-success {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #066000, #059b0b) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}

.btn-success:hover {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
}

.btn-success.active {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
    color: #ffe000 !important;
}

.btn-danger {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #d4264a, var(--danger)) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}

.btn-danger:hover {
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
}

.btn-danger.active {
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
   color: #ffe000 !important;
}

.btn-warning {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #d48800, #f4a100) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}
.btn-warning:hover {
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
}

.btn-warning.active {
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
   color: #ffe000 !important;
}

.btn-default {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #000000, #17016a) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #19ff00;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 1px 0 1px 3px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(122 0 255);
}

.btn-default:hover {
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
}

.btn-default.active{
   box-shadow: 0 3px 2px rgb(0 0 0) !important;
   transform: translateY(-1px);
   transition: all 0.4s ease-in-out;
   color: #ffe000 !important;
}

.text-left {
    padding: 0 5px !important;
    color: blue;
    font-size: 12px;
    font-weight: 600;
}

/* ─────────────────────────────────────────────
   ABAS (NAV-TABS)
───────────────────────────────────────────── */
.nav-tabs-custom {
    background: rgb(247 255 243) !important;
    border: 1px solid rgb(161 202 253) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(12px);
    margin-bottom: 5px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 64%);
}
.nav-tabs-custom > .nav-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--card-border) !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
    color: rgba(255,255,255,0.5) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-radius: 0 !important;
    padding: 5px 10px !important;
    transition: var(--transition);
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--accent2) !important;
    background: rgba(43,128,236,0.1) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
    color: #fff !important;
    background: rgba(43,128,236,0.15) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-bottom-color: var(--accent) !important;
}
.nav-tabs-custom > .tab-content {
    background: transparent !important;
    color: var(--text);
    padding: 5px 2px;
}

/* ─────────────────────────────────────────────
   ALERTS & BADGES
───────────────────────────────────────────── */
.alert-info {
    background: #ffffff !important;
    color: #000000 !important;
    border-left: 3px solid var(--accent2) !important;
    border-radius: 10px !important;
    padding: 3px 5px;
    font-size: 11px !important;
    margin-bottom: 14px;
    display: inline-block;
    box-shadow: inset 0 0 4px var(--accent2), 0 0 5px #00000000 !important;
}

.alert-success {
    background: #ffffff !important;
    color: #000000 !important;
    border-left: 3px solid var(--success) !important;
    border-radius: 10px !important;
    padding: 3px 5px;
    font-size: 11px !important;
    margin-bottom: 14px;
    display: inline-block;
    box-shadow: inset 0 0 4px var(--success), 0 0 5px #00000000 !important;
}


.alert-warning {
    background: #ffffff !important;
    color: #000000 !important;
    border-left: 3px solid #f4a100 !important;
    border-radius: 10px !important;
    padding: 3px 5px;
    font-size: 11px !important;
    margin-bottom: 14px;
    display: inline-block;
    box-shadow: inset 0 0 4px #f39c12, 0 0 5px #00000000 !important;
}

/* ─────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(43,128,236,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.box, .modal-content {
    animation: pdvFadeUp 0.3s ease backwards;
}

/* ─────────────────────────────────────────────
   MISC
───────────────────────────────────────────── */
hr { border-color: var(--card-border) !important; }

.text-muted {
    color: #000000 !important;
    text-shadow: 1px 1px 0 #ffffff;
    font-family: monospace;
}

.small-box {
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    transition: var(--transition);
    margin: 3px;
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
}

.small-box h3, .small-box p { color: #ffa700  !important; }

.has-error .form-control {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(245,54,92,0.2) !important;
    border-radius: 10px !important;
}

.has-success .form-control {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(30,202,184,0.2) !important;
}

.content-wrapper-pos {
    margin-left: 0 !important;
    padding: 0;
    min-height: 100vh;
}

/* Estilo para SELECTs - Corrige contraste fundo/texto */
select.form-control option {
    background-color: beige;
    color: var(--text);
}

/* My Custom CSS */
.box {
    position: relative;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 4px solid rgba(0, 0, 0, 0.125);
    border-radius: 10px;
    background: linear-gradient(180deg, #fffff0, #ffffff) !important;
    box-shadow: inset 0 0 1em #fffff0, 0 0 5px #000000 !important;
    width: 99%;
    margin: 3px auto;
}

.box-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 20px;
    border-top: 6px solid #ffa500;
    text-shadow: 1px 1px 0 #ffffff;
    color: #08006c;
    font-weight: 500;
    border-radius: 0 0 10px 10px;
    margin-top: 7px;
    background: linear-gradient(10deg, #ffffff 0%, #fffff0 14%, #fffff0 28%, #fffff0 42%, #fffff0 56%, #fffff0 70%, #fffff0 84%, #ffffff 100%) !important;
}

.box.box-primary {
    border-top-color: #0000ff !important;
}
.box.box-primary:hover {
    border-top-color: #249907 !important;
}

.box.box-warning {
    border-top-color: #f4a100 !important;
}

.box.box-success {
    border-top-color: #1ecab8 !important;
}

.box.box-danger {
    border-top-color: #f5365c !important;
}

.box.box-info {
    border-top-color: #00e5ff !important;
}

.box.box-default {
    border-top-color: #d2d6de
}

.box.box-primary  { border-top: 5px solid !important; }
.box.box-success  { border-top: 5px solid !important; }
.box.box-danger   { border-top: 5px solid !important; }
.box.box-warning  { border-top: 5px solid !important; }
.box.box-info     { border-top: 5px solid !important; }
.box.box-default  { border-top: 5px solid !important; }

.form-group {
    margin-bottom: 2px;
    padding: 1px 0;
    font-size: 13px;
    color: #7c00ff;
}

.checkbox, .radio {
    margin: auto 15px;
}
.main-header {
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
}

.btn.btn-flat {
    border-radius: 7px !important;
    padding: 3px 5px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 0.5px;
    margin-right: 5px !important;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    color: blueviolet;
}

.btn.btn-flat:hover {
    box-shadow: inset 0 0 1em #7a00ffad, 0 0 1em #000000 !important;
    color: #3dff00 !important;
    box-shadow: 0 5px 5px rgb(0 0 0 / 68%) !important;
    background: #230050 !important;
}
.btn:focus {
    -webkit-box-shadow: 0 0 0 3.2px #e9ecef;
    box-shadow: 0 0 0 3.2px #e9ecef;
}

.btn.btn-outline-dashed {
    outline: 1px dashed #ffffff !important;
    outline-offset: -5px;
    -moz-outline-radius: 25px;
    font-size: 10px !important;
}

.btn-ghost {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}

.btn-ghost:hover {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    background: linear-gradient(135deg, #000000 0%, #000000 100%) !important;
    color: #02ff00 !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
    animation: 2.5s blow 0s linear infinite;
}

.btn-print {
    background: linear-gradient(135deg, #000000 0%, #000000 100%) !important;
    color: #02ff00 !important;
    border: 1px solid #00fff3 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .2s !important;
}

.btn-print:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border-color: #4265ff !important;
    color: #fff !important;
}

.btn-primary,
.btn-success,
.btn-secondary,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-pink,
.btn-purple {
    color: #ffffff;
    font-size: 10px !important;
}

.btn-primary {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #7a00ff00 !important;
    display: inline-flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    align-items: center;
    gap: 6px;
}

.btn-primary:hover {
    box-shadow: 0 3px 2px rgb(0 0 0) !important;
    transform: translateY(-1px);
    transition: all 0.4s ease-in-out;
    animation: 2.5s blow 0s linear infinite;
}

.btn-ghost.active,
.btn-ghost.focus,
.btn-ghost:active,
.btn-ghost:focus,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.open>.dropdown-toggle.btn-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-primary:hover,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle,
a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: #1275db;
    border: 1px solid #1275db;
}

.doc-toggle { display:flex; border-radius:10px; overflow:hidden; padding:0 5px; width:fit-content; }
.doc-toggle label {padding: 5px 10px; font-size:10px; font-weight:600; cursor:pointer; background:#fff; color:#1a56db; transition:all 0.2s; margin:0; letter-spacing:0.5px; }
.doc-toggle input[type="radio"]:checked + label {color:#0f9d58; }

.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-primary.focus,
.btn-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(87, 102, 218, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(87, 102, 218, 0.3) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success.disabled,
.btn-success:disabled,
.open>.dropdown-toggle.btn-success,
.btn-outline-success.active,
.btn-outline-success:active,
.show>.btn-outline-success.dropdown-toggle,
.btn-outline-success:hover,
.btn-success.active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show>.btn-outline-success.dropdown-toggle,
.btn-success:active,
.show>.btn-success.dropdown-toggle,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle {
    background-color: #1bb4a4;
    border: 1px solid #1bb4a4;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-success.dropdown-toggle:focus,
.btn-success.focus,
.btn-success:focus,
.btn-outline-success.focus,
.btn-outline-success:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(30, 202, 184, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(30, 202, 184, 0.3) !important;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info,
.btn-outline-info.active,
.btn-outline-info:active,
.btn-info.disabled,
.btn-info:disabled,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle,
.show>.btn-outline-info.dropdown-toggle,
.btn-outline-info:hover,
.btn-info.active,
.btn-info:active,
.show>.btn-info.dropdown-toggle {
    background-color: #00a5bb;
    border: 1px solid #00a5bb;
    margin-right: 2px !important;
    margin-left: 2px !important;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.show>.btn-info.dropdown-toggle:focus,
.btn-info.focus,
.btn-info:focus,
.btn-outline-info.focus,
.btn-outline-info:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.3);
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.3);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open>.dropdown-toggle.btn-warning,
.btn-outline-warning.active,
.btn-outline-warning:active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show>.btn-outline-warning.dropdown-toggle,
.show>.btn-outline-warning.dropdown-toggle,
.btn-outline-warning:hover,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning:disabled,
.btn-warning:active,
.show>.btn-warning.dropdown-toggle {
    background-color: #fbae0b;
    border: 1px solid #fbae0b;
    color: white;
}

.btn-warning:not(:disabled):not(.disabled):active:focus,
.show>.btn-warning.dropdown-toggle:focus,
.btn-warning.focus,
.btn-warning:focus,
.btn-outline-warning.focus,
.btn-outline-warning:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(251, 182, 36, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(251, 182, 36, 0.3) !important;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger.active,
.btn-danger.focus,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open>.dropdown-toggle.btn-danger,
.btn-outline-danger.active,
.btn-outline-danger:active,
.show>.btn-outline-danger.dropdown-toggle,
.btn-outline-danger:hover,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger:disabled,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.show>.btn-outline-danger.dropdown-toggle,
.btn-danger:active,
.show>.btn-danger.dropdown-toggle {
    background-color: #f82269;
    border: 1px solid #f82269;
}

.show>.btn-danger.dropdown-toggle:focus,
.btn-danger.focus,
.btn-danger:focus,
.btn-outline-danger.focus,
.btn-outline-danger:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(249, 59, 122, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(249, 59, 122, 0.3) !important;
}

.btn-secondary {
    background-color: #e2e2f1;
    border: 1px solid #e2e2f1;
    color: #5d5b6f;
    font-size: 10px !important;
}

.btn-secondary.active,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:active,
.show>.btn-outline-secondary.dropdown-toggle,
.btn-outline-secondary:hover,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle,
.show>.btn-outline-secondary.dropdown-toggle,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle,
.btn-secondary.disabled,
.btn-secondary:disabled,
a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
    background-color: #d1d1e9 !important;
    border: 1px solid #d1d1e9;
    color: #5d5b6f;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show>.btn-secondary.dropdown-toggle:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(226, 226, 241, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(226, 226, 241, 0.3) !important;
}

.skin-blue-light .sidebar-menu>li.active>a,
.skin-blue-light .sidebar-menu>li:hover>a {
    background-color: #34046a !important;
    color: #8fff00 !important;
    border-radius: 7px;
    border: 2px solid;
    text-shadow: 1px 1px 0 #ffffff;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #1b82ec;
    border-color: #1b82ec;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.15);
}

.icheckbox_square-blue,
.iradio_square-blue {
    border-radius: 3px;
}

.user-profile {
    position: relative;
    background-size: cover;
}

.user-profile .profile-img {
    width: 90px;
    margin-left: 67px;
    padding: 20px 0;
    border-radius: 100%;
}

.user-profile .profile-img::before {
    -webkit-animation: 2.5s blow 0s linear infinite;
    animation: 2.5s blow 0s linear infinite;
    position: absolute;
    content: "";
    width: 90px;
    height: 90px;
    top: 20px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 0;
}

.user-profile .profile-img img {
    width: 100%;
    border-radius: 100%;
}

.user-profile .profile-text {
    padding: 1px 0px;
    position: relative;
}

.user-profile .profile-text>a {
    color: #fff !important;
    width: 100%;
    padding: 5px 5px;
    background: rgba(0, 0, 0, 0.5);
    display: block;
}

.user-profile .profile-text>a:after {
    position: absolute;
    right: 20px;
    top: 20px;
}

.user-profile .dropdown-menu {
    left: 0;
    right: 0;
    width: 180px;
    margin: 0 auto;
}

.label-pos {
    display: inline;
    padding: 9px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: #1275db;
}

/* For Wizard UI */

.wizard>.steps .current a,
.wizard>.steps .current a:active,
.wizard>.steps .current a:hover {
    background: #014fff;
}

.wizard>.steps .done a,
.wizard>.steps .done a:active,
.wizard>.steps .done a:hover {
    background: #1ecab8;
}

.wizard>.actions a,
.wizard>.actions a:active,
.wizard>.actions a:hover {
    background: #1b82ec;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    background-color: #204d74;
}

.text-green,
.text-success {
    color: #3c763d !important;
    text-shadow: 1px 1px 0 #e4ff00;
}

.daterangepicker .ranges li.active {
    background-color: #fffff0;
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body,
.progress-bar {
    background-color: #2b80ec !important;
}

/* For Button demo in login */
.btn-app {
    border: 0px;
}

/* For Sidebar Menu bold active & SideBar Shadow */
.sidebar-menu li.active>a {
    font-weight: 600 !important;
}
.main-sidebar {
    box-shadow: 1px 0 11px 0 #3f4d67 !important;
}

/* Remove the no border top in box */
.box.box-solid {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* For Chatbox */
.direct-chat-text:after,
.direct-chat-text:before {
    border-right-color: #cfecfe;
}

.direct-chat-text {
    background: #cfecfe;
    border: 1px solid #cfecfe;
}

/* For Notification */
.notifications-menu .unread {
    background: #cfecfe;
    border-radius: 4px;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover {
    border-radius: 4px;
}

/* For notification Message icon */
.notif-icon  {
    border-radius: 10%;
    font-size: 25px;
}

/* For Essential Message spacing */
.post .user-block {
    margin-bottom: 8px
}

/* For Dashboard Widget Disable this if you do not want to use it */
.info-box-text {
    margin-left: 15px;
    margin-bottom: 0;
}
.info-box-number {
    margin-left: 15px
    }
    
/* Base / default */
.info-box-icon, .fn-header-icon, .fn-template-icon, .header-icon {
    border-radius: 8px !important;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-shadow: 1px 1px 0 #000;
    font-size: 14px !important;
    color: #0300ad;
    background: linear-gradient(135deg, #03aeff, #e1da00);
}

/* Success */
.info-box-new-style.success, .info-box-icon.success, .fn-header-icon.success,
.fn-template-icon.success, .header-icon.success {
    background: linear-gradient(135deg, #7a00ff, #00c3b0) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,195,176,0.35) !important;
    text-shadow: 1px 1px 0 #fbae0b;
    font-size: 14px !important;
}
.info-box-new-style.success:hover, .info-box-icon.success:hover, .fn-header-icon.success:hover,
.fn-template-icon.success:hover, .header-icon.success:hover {
    box-shadow: 0 6px 20px rgba(30,202,184,0.55) !important;
    transform: translateY(-1px);
}

/* Danger */
.info-box-new-style.danger, .info-box-icon.danger, .fn-header-icon.danger,
.fn-template-icon.danger, .header-icon.danger {
    background: linear-gradient(135deg, #d4264a, var(--danger)) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(245,54,92,0.35) !important;
    text-shadow: 1px 1px 0 #fbae0b;
    font-size: 14px !important;
}
.info-box-new-style.danger:hover, .info-box-icon.danger:hover, .fn-header-icon.danger:hover,
.fn-template-icon.danger:hover, .header-icon.danger:hover {
    box-shadow: 0 6px 20px rgba(245,54,92,0.55) !important;
    transform: translateY(-1px);
}

/* Warning */
.info-box-new-style.warning, .info-box-icon.warning, .fn-header-icon.warning,
.fn-template-icon.warning, .header-icon.warning {
    background: linear-gradient(135deg, #d48800, #f4a100) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(244,161,0,0.35) !important;
    text-shadow: 1px 1px 0 #fbae0b;
    font-size: 14px !important;
}
.info-box-new-style.warning:hover, .info-box-icon.warning:hover, .fn-header-icon.warning:hover,
.fn-template-icon.warning:hover, .header-icon.warning:hover {
    background-color: #fbae0b;
    border: 1px solid #fbae0b;
    color: #fff;
}

.header-sub { color:#ff0000; font-size:13px; margin-top:2px; }

.progress-description {
    margin-left: 15px;
}

.bg-light-blue, .label-primary, .modal-primary .modal-body, .progress-bar {
    background-color: #11cdef !important;}
.info-box-new-style, .info-box-icon, .fn-header-icon i {
    font-size: 22px;
    }
/* End for Dashboard Widget*/

/* For Project Kanban user avatar fix*/
.meta-tasks .card-tags>:not(:last-child) {
    margin-top: 7px;}
.meta-tasks .kanban-board-header.new {
    background: #f5365c;}
.meta-tasks .kanban-board-header .kanban-title-board {
    text-shadow: none;
    color: white;}
.meta-tasks .kanban-container {
    width: 100% !important;}

.meta-tasks .kanban-item {
    border-radius: 6px;
}
/* End for Project/kanban */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
}

a {
    text-shadow: 1px 1px 0 #000000 ;
    font-size: 12px;
    font-weight: 600;
}
a:hover {
 color: #007bff;
}
a.active.focus {
  color: #ff0000;
}

/* For Nav-Tabs */
.nav-tabs-custom>.nav-tabs>li.active:hover>a, .nav-tabs-custom>.nav-tabs>li.active>a {
    color: #1275db;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
}

.nav-tabs-custom {
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.125);
}
.nav-tabs-custom>.nav-tabs>li.active {
    border-bottom-color: #1275db;
}

.nav-tabs-custom>.nav-tabs>li {
    border-bottom: 3px solid transparent;
    border-top: 0px;
    margin-top: 4px;
}

.nav-tabs-custom>.nav-tabs {
    margin: 6px;
    margin-left: 4px;
    border-bottom-color: #ddd
}

.nav-tabs-custom>.tab-content {
    background: transparent;
}

.nav-tabs.nav-justified {
    width: inherit;
}

.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
    border: 0px;
    }
    
/* For Sidebar padding */
.sidebar-menu>li>a {
    padding: 10px 16px 10px 11px;   
}

/* ══════════════════════════════════════════
   TABLE — GLOBAL (todas as tabelas do sistema)
══════════════════════════════════════════ */
thead {
    background-color: #ffa700;
}

body table.table,
body .table-wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
}

body table.table thead tr, body .table-wrap thead tr {
    background: #ffa700 !important;
    text-shadow: 1px 1px 0 #ffffff !important;
    color: black;
}

body table.table thead th, body .table-wrap thead th {
    background: #ffa700 !important;
    color: #000 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 3px 5px !important;
    text-align: left !important;
    border-bottom: 1px solid #172954 !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    transition: background .15s, color .15s !important;
}

/* Hover no cabeçalho */
body table.table thead th:hover,
body .table-wrap thead th:hover {
  background: #0000ff !important;
  color: #ffffff !important;
}

/* ►►► NOVO BLOCO — DataTables sorting ◄◄◄ */
body table.dataTable thead > tr > th.sorting,
body table.dataTable thead > tr > th.sorting_asc,
body table.dataTable thead > tr > th.sorting_desc,
body table.dataTable thead > tr > td.sorting,
body table.dataTable thead > tr > td.sorting_asc,
body table.dataTable thead > tr > td.sorting_desc {
  cursor: pointer !important;
  position: relative !important;
  padding-right: 22px !important;
}

body table.dataTable thead > tr > th.sorting_asc,
body table.dataTable thead > tr > th.sorting_desc,
body table.dataTable thead > tr > td.sorting_asc,
body table.dataTable thead > tr > td.sorting_desc {
  background-color: #0070ff !important;
  color: #ffffff !important;
}

/* Sobrescrevendo bordas do Bootstrap no cabeçalho */
body table.table.table-bordered thead > tr > th,
body table.table.table-bordered thead > tr > td,
body .table-wrap table.table-bordered thead > tr > th,
body .table-wrap table.table-bordered thead > tr > td {
  border: none !important;
  border-bottom: 1px solid #dbdd70 !important;
}

/* Cantos arredondados do cabeçalho */
body table.table thead tr th:first-child,
body .table-wrap thead tr th:first-child {
  border-top-left-radius: 10px !important;
}
body table.table thead tr th:last-child,
body .table-wrap thead tr th:last-child {
  border-top-right-radius: 10px !important;
}

/* Zebrado global */
body table.table tbody tr:nth-of-type(odd) td,
body .table-wrap tbody tr:nth-of-type(odd) td {
  background-color: #f9ffe5 !important;
}
body table.table tbody tr:nth-of-type(even) td,
body .table-wrap tbody tr:nth-of-type(even) td {
  background-color: #ffffff !important;
}

/* Célula base */
body table.table tbody td,
body .table-wrap tbody td {
  padding: 1px 0 !important;
  border-bottom: 1px solid #c9c9c9 !important;
  color: #0051ff !important;
  vertical-align: middle !important;
  transition: background .15s !important;
}

body table.table tbody tr:last-child td,
body .table-wrap tbody tr:last-child td { 
   border-bottom: 1px solid #c9c9c9 !important;
}

/* Hover por cima do zebrado */
body table.table tbody tr:hover td,
body .table-wrap tbody tr:hover td {
  background-color: #eaf4ff !important;
}

/* Placa highlight */
body td .placa,
body .placa {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: #000000 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 8px rgba(0,229,255,.3) !important;
}

/* DataTables (paginação, filtro, info) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: #172954 !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════════
   SEPARATORS
══════════════════════════════════════════ */
.separator {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 3px 0 5px !important;
  color: #ff0000 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.separator::before,
.separator::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #fff700, #7c3aed, #25d366) !important;
}
.separator::after {
  background: linear-gradient(90deg, #0000ff, #25d366, #fff700) !important;
}

.divider {
    height: 1px !important;
    background: linear-gradient(90deg, #fff700, #7c3aed, #25d366) !important;
    margin: 3px 0 5px !important;
}

/* Remove botoes do wizard jquery-steps no formulario de registro */
#business_register_form .actions.clearfix { display: none !important; }

/* Remove botoes do wizard jquery-steps no formulario de registro */
#business_register_form .actions.clearfix { display: none !important; }












/* ─────────────────────────────────────────────
   CRM / W-API — TEMA CLARO (cores padrão do sistema)
   Sobrescreve o tema escuro definido acima (linhas
   2496-3133) para todas as telas de Atendentes, Chatbots,
   Deals, Instâncias, Templates e Conversas. Mantém a
   mesma estrutura/classes (JS não depende de cor), só
   troca a paleta escura por fundo branco / texto escuro /
   azul padrão AdminLTE (#3c8dbc), igual ao resto do PDV.
───────────────────────────────────────────── */
.at-root,
.funnel-app{
    font-family:'Syne',sans-serif;
    min-height:100vh;
    padding:12px 14px;
    color: #ffffff;
    position:relative;
    overflow:hidden;
}
.at-root canvas,
.cb-root canvas,
.funnel-app canvas{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.cb-root {
    background: #fffff0;
    position: relative;
    min-height: 100vh;
    padding: 12px 14px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

  .cb-root > .cb-wrap { position:relative; z-index:1; }
  .cb-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgb(255 0 0 / 0%);
    color: rgba(226, 232, 240);
    
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.at-wrap, 
.cb-wrap{
    position:relative;
    z-index:1;
    max-width:1100px;
    margin:0 auto;
}

/* ── Header ── */
.at-header, 
.cb-header,
.fn-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px;
    border-bottom: 2px solid #ddd !important;
    background: #effbd8 !important;
    border-radius: 10px;
    border: 2px solid #d3fb85;
    box-shadow: inset 0 0 2px #000000, 0 0 2px #000000;
    justify-content: space-between;
}

.at-brand {display:flex;align-items:center;gap:14px; width: 70%;}

.header-actions{display:flex;gap:12px;align-items:center}

/* Botões maiores */
.edit-btn{display:flex;align-items:center;gap:8px;padding:5px 7px;background:#95cef7;border: 1px solid rgb(27 0 255);border-radius:10px;color:rgba(226,232,240,0.9);font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;transition:all 0.25s}
.edit-btn{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.4);color:#a78bfa}
.edit-btn:hover{background:rgba(139,92,246,0.25);transform:translateY(-2px)}

.btn-test{background:linear-gradient(135deg,#14b8a6,#059669);border:1px solid rgba(20,184,166,.4);color:#fff;box-shadow:0 4px 15px rgba(20,184,166,.2)}
.btn-test:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(20,184,166,.3)}

/* Panel - MAIOR */

.sch-card-header, .fn-card-header {
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #6308ff;
    border-bottom: 2px solid #ffe000;
    border-radius: 10px;
    border-left: 1px solid #c0ff00;
    border-top: 1px solid #e4ff00;
    border-right: 1px solid #c0ff00;
    gap:6px;
    height: 80px;
}

.sch-card-title{font-size:15px;font-weight:600;color:#f8fafc} 
.sch-card-days{font-size:16px;color:rgba(37,255,0,0.8);margin-top:4px;font-weight:500} 

.shift-info-time{font-size:18px;color: #ffbf00;font-weight:600;display:flex;align-items:center;gap:12px} /* ← 13.6px → 25.6px */
.shift-info-time span{color:rgba(226,232,240,0.5);font-size:13px;font-weight:400}

.ph-purple{background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%);}
.ph-orange {
    background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%);
}
.ph-teal{background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%);}
.panel-dot,.fn-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 12px currentColor}
.dot-purple { background:#8b5cf6; box-shadow:0 0 8px #8b5cf6; }
.dot-orange { background:#f97316; box-shadow:0 0 8px #f97316; }
.dot-yellow { background:#fbbf24; box-shadow:0 0 8px #fbbf24; }
.dot-green  { background:#25d366; box-shadow:0 0 8px #25d366; }
.dot-teal   { background:#14b8a6; box-shadow:0 0 8px #14b8a6; }

.ph-main { background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%);}
.ph-prev { background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%); }
.ph-tpl  { background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%); }
.ph-tip  { background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%); }
.ph-wpp  { background: linear-gradient(90deg, rgb(249 115 22 / 46%) 0%, #fff9cb 100%); }

/* ── User cards ── */
.field-label{font-size: 11px;color:rgb(253,177,0);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.user-search-wrap{position:relative;margin-bottom:12px}
.user-search{width:100%;background:rgba(255,255,255,.04);border: 1px solid rgb(27 0 255);border-radius:10px;padding:10px 14px 10px 38px;color: #ffbf00;font-size: 11px;outline:none;transition:all .2s}
.user-search:focus{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.05)}
.user-search::placeholder{color: #999 !important;}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.4;pointer-events:none}

.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:10.4px;max-height:320px;overflow-y:auto;padding-right:4px}
.user-grid::-webkit-scrollbar{width:4px}
.user-grid::-webkit-scrollbar-track{background:transparent}
.user-grid::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:2px}

.user-card{background:rgba(255,255,255,.03);border: 1px solid rgb(27 0 255);border-radius:10px;padding:11px 13px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px}
.user-card:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3)}
.user-card.selected{background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.55);box-shadow:0 0 0 2px rgba(139,92,246,.2)}
.user-card.hidden-card{display:none}

.user-initials{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#1a1f35,#2d1b69);border: 1px solid rgb(27 0 255);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#8b5cf6;flex-shrink:0}
.user-info{min-width:0;flex:1}
.user-name{font-size: 12px;font-weight:600;color: #ffbf00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size: 12px;color: rgb(138 188 255);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.user-chk{width:16px;height:16px;border:2px solid rgba(139,92,246,.4);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;transition:all .2s}
.user-card.selected .user-chk{background:#7c3aed;border-color:#7c3aed}
.user-card.selected .user-chk::after{content:'✓';color:#fff;font-size:10px;font-weight:600}

/* Status badges */
.badge-active, .badge-inactive, .badge-open, .badge-closed, .badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
    border: 1px solid #14b8a6;
    border-radius: 7px;
    
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
    margin-top: 3px;
}

.badge.loading { background:#e8f0fe; color:#1a56db; border: 1px solid #1a56db;}
.badge.success { background:#f0fdf4; color:#0f9d58; border: 1px solid #0f9d58;}
.badge.error   { background:#fff5f5; color:#e53e3e; border: 1px solid #e53e3e;}

/* ── Schedule ── */
.sch-period-block{border: 1px solid rgb(27 0 255);border-radius:14px;margin-bottom:16px;overflow:hidden;transition:all .2s}
.sch-period-block.sactive{border-color: rgb(139 92 246);background:rgba(139,92,246,.035)}
.sch-period-block.sinactive{opacity:.5}
.sch-period-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background: #7d3aff !important;}
.period-name{font-size: 12px;font-weight:600;color: var(--muted);}
.period-days{font-size: 16px;color: var(--muted); margin-top:2px}
.sch-checkbox-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.sch-checkbox{width:18px;height:18px;border:2px solid rgba(139,92,246,.5);border-radius:4px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.sch-checkbox.checked{background:#7c3aed;border-color:#7c3aed}
.sch-checkbox.checked::after{content:'✓';color:#fff;font-size:11px;font-weight:600;line-height:1}
.sch-checkbox-label{font-size: 11px;color:rgba(139,92,246,.75)}

.sch-shifts{padding:12px 16px 16px;
display:flex;
flex-direction:column;
gap:10px; 
background: #c9fff8;
}
.shift-row{display:grid;grid-template-columns:76px 1fr 1fr;gap:10px;align-items:end}
.shift-tag{font-size: 10px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;padding-bottom:10px;white-space:nowrap}
.shift-tag.t2{color:rgba(249,115,22,.65)}
.time-label{font-size: 12px;color:rgba(255,255,255,.28);margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}
.time-input {
    background: #fff;
    border: 1px solid #ff8d00;
    border-radius: 8px;
    padding: 5px 7px;
    color: #0006ff;
    
    font-size: 12px;
    width: 98%;
    outline: none;
    transition: all .2s;
}
.time-input:focus{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.05)}
.shift2-toggle-row{display:flex;align-items:center;gap:8px;padding:6px 0 2px;border-top:1px solid rgba(255,255,255,.05);margin-top:2px}

/* Schedule - MAIOR */
.sch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.sch-card{border-radius:10px;overflow:hidden;border: 1px solid rgb(27 0 255);transition:all 0.3s}
.sch-card.on{border-color:rgba(139,92,246,0.4);background:rgba(139,92,246,0.08);transform:translateY(-4px)}
.sch-card.off{opacity:0.6}

.pill-on,.pill-off{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(20,184,166,0.15);color:#14b8a6;border: 1px solid rgb(27 0 255);border-radius:100px;font-size:12px;font-weight:600;text-transform:uppercase}
.pill-off{background:#95cef7;color:rgba(226,232,240,0.5);border-color:rgba(255,255,255,0.15)}
.sch-card-body,.fn-card-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.shift-info{background:#95cef7;border-radius:14px;padding:16px 20px;border-left:4px solid rgba(139,92,246,0.4)}
.shift-info-lbl{font-size:12px;color:rgba(253,177,0,0.9);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;font-weight:600}

.shift2-info{border-left-color:rgba(249,115,22,0.6)}
.shift2-info .shift-info-lbl{color:rgba(249,115,22,0.9)}
.sch-closed-msg{font-size:12px;color:rgba(226,232,240,0.4);padding:20px 0;text-align:center;font-style:italic}

/* Msg box - MAIOR */
.msg-box{
    background: linear-gradient(135deg, rgb(0 100 122), rgb(109 36 251));
    border: 1px solid rgb(27 0 255);
    border-radius:10px;
    padding: 16px 20px;
    font-family:'Syne',sans-serif;
    font-size:18px;
    color:#fff900;
    line-height:1.7;
    white-space:pre-wrap;
    word-break:break-word;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)
} /* ← 14.08px → 20.8px */

/* selected preview */
.selected-preview {
    display: none;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(139, 92, 246, .08);
    border: 1px solid rgb(114 98 245);
    border-radius: 10px;
    
    font-size: 12px;
    color: rgb(58 195 4);
}
.selected-preview.visible{display:flex;align-items:center;gap:8px}

/* Fallback select */
.cb-select{width:100%;background:rgba(255,255,255,.03);border: 1px solid rgb(27 0 255);border-radius:10px;padding:10px 14px;color: #ffbf00;font-family:'Syne',sans-serif;font-size:16px;outline:none;transition:all .2s}
.cb-select:focus{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.05)}
.cb-select option{background:#1a1f35;color: #ffbf00}
.cb-select.is-invalid{border-color:rgba(239,68,68,.5)!important}

.invalid-feedback{color:#ef4444;font-size:16px;margin-top:5px;display:block}
.mb-field{margin-bottom:19.2px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.cb-input {
    width: 98%;
    background: #03265a !important;
    border: 1px solid #9100ff !important;
    border-radius: 8px !important;
    color: #ffffff;
    padding: 5px 7px !important;
    font-size: 13px !important;
    height: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: none;
}
.cb-title-group h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #edff00;
    text-align: left;
}

.cb-title-group p {
    
    font-size: 11px;
    color: rgb(4 253 255);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
}

.cb-input:focus { border-color:rgba(139,92,246,0.5); background:rgba(139,92,246,0.05); box-shadow:0 0 0 3px rgba(139,92,246,0.1); }
.cb-input::placeholder {color: #999 !important; }
.cb-input.is-invalid { border-color:rgba(239,68,68,0.5) !important; }
.cb-select{width:98%;background:rgba(0, 0, 0, .03);border:1px solid rgba(0, 0, 0, .12);border-radius:16px;padding:16px 20px;color:var(--text);font-family:'Syne',sans-serif;font-size:13px;outline:none;transition:all .3s}
.cb-input::placeholder{color: #999 !important;}
select.cb-input option { background:#fff; color:#333; }  
textarea.cb-input { resize:vertical; min-height:80px; line-height:1.5; }

/* ── Off-hours ── */
.msg-textarea{width:100%;background:rgba(255,255,255,.03);border: 1px solid rgb(27 0 255);border-radius:10px;padding:12px 14px;color: #ffbf00;font-family:'Syne',sans-serif;font-size:12px;outline:none;transition:all .2s;resize:vertical;min-height:135px;line-height:1.5}
.msg-textarea:focus{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.05)}

.restore-btn:hover{background:rgba(255,255,255,.1);color: #ffbf00}
.info-note{display:flex;gap:8px;padding:10px 12px;background:rgba(251,191,36,.06);border: 1px solid rgb(27 0 255);border-radius:8px;margin-top:10px}
.info-note span{font-size:13px;color:rgba(251,191,36);line-height:1.4}

/* ── Notify ── */
.notify-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.notify-chk{width:18px;height:18px;border:2px solid rgba(139,92,246,.5);border-radius:4px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s}
.notify-chk.checked{background:#7c3aed;border-color:#7c3aed}
.notify-chk.checked::after{content:'✓';color:#fff;font-size:11px;font-weight:600}
.notify-text{font-size:13px;color:#fff077;cursor:pointer}

/* ── Botões ── */
.fn-btn-primary {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #0000002e !important;
    display: inline-flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    align-items: center;
    gap: 6px;
}
.fn-btn-primary:hover{transform:translateY(-2px);box-shadow: 0 5px 5px rgb(0 0 0 / 65%);}
.fn-btn-primary:hover {border-color:#a0aec0; color:#e1ff00; background: linear-gradient(135deg, #000000 0%, #220056 100%);
    border: 2px solid #f7fb00; }

.submit-btn {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #0000002e !important;
    display: inline-flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    align-items: center;
    gap: 6px;
}
.submit-btn:active { transform: translateY(0); }
.submit-btn::before { content:''; position:absolute; top:0; left:-100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left .5s; }
.submit-btn:disabled { opacity:.6; transform:none; cursor:not-allowed; }
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px rgb(0 0 0 / 65%);
  border: 2px solid #f7fb00;
  color: #e1ff00;
  background: linear-gradient(135deg, #000000 0%, #220056 100%);
}

.btn-cancel {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #0000002e !important;
    display: inline-flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    align-items: center;
    gap: 6px;
}

.btn-cancel:hover{transform:translateY(-2px);box-shadow: 0 5px 5px rgb(0 0 0 / 65%);}
.btn-cancel:hover {border-color:#a0aec0; color:#e1ff00; background: linear-gradient(135deg, #000000 0%, #220056 100%);
    border: 2px solid #f7fb00;}

.footer-card {
    padding: 10px;
    background: rgb(254 255 227);
    border-top: 1px solid rgb(255 255 255);
    display: flex;
    margin: 10px 0;
    border-left: 4px solid blue;
    border-radius: 10px;
    box-shadow: 0 1px 5px #000, 0 0 0 2px gold !important;
}

.empty-users {
    padding: 5px;
    text-align: center;
    
    font-size: 14px;
    color: #ffa700 !important;
    border: 1px dashed #ccc !important;
    border-radius: 10px;
    text-shadow: 1px 1px 3px #000000;
}

.no-results{display:none;padding:12px;text-align:center;font-size:12px;color:rgba(226,232,240,.3)}
.toggle-track.on {
  background: linear-gradient(90deg,#7c3aed,#8b5cf6);
  border-color: rgba(139,92,246,.7); 
}

/* Cards */
.attendants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.att-card, .fn-card {
    background: #fdf5dc !important;
    border: 1px solid #9100ff;
    border-radius:10px;
    padding: 15px;
    display: block;
    transition: all 0.2s;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.att-card,.fn-card:hover{border-color:rgba(139,92,246,0.3);background:rgba(12,16,32,0.95);transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.att-schedule-preview{display:flex;gap:6px;flex-shrink:0}
.sch-pill{font-size:12px;padding:3px 9px;border-radius:100px;white-space:nowrap}
.pill-on{background:rgba(20,184,166,0.12);color:#14b8a6;border:1px solid rgba(20,184,166,0.25)}
.pill-off{background:rgba(255,255,255,0.04);color:rgba(226,232,240,0.3);border:1px solid #95cef7}

.att-status{flex-shrink:0}

.att-actions{background:#000; color: #00f36e;border:1px solid rgba(255,255,255,0.1);display:flex;gap:8px;flex-shrink:0}
.att-actions:hover{background:#0000ff; color:#fff;border:1px solid rgba(255,255,255,0.1);display:flex;gap:8px;flex-shrink:0}

.btn-del { background: #fdf2f2 !important; border: 1px solid #f2b3b3 !important; color: #d9534f !important; }
.btn-del:hover { background: #f8dede !important; }

/* WhatsApp ENV */
.wpp-icon { font-size:25px; }

.cb-grid { display:grid; grid-template-columns:1fr 320px; gap:24px; max-width:1100px; margin:0 auto; }
.form-row-2     { display:grid; grid-template-columns:1fr auto; gap:16px; margin-bottom:20px; }
.form-row-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field-label { display:flex; align-items:center; gap:6px; font-size:13px; color:rgb(253,177,0); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px; }
.sub-label   { font-size:11px; color:rgba(226,232,240,0.3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px; }

#system_prompt { resize:vertical; min-height:160px !important; line-height:1.5; }
.invalid-feedback { color:#ef4444; font-size:11px; margin-top:4px; display:block; }
.hidden-checkbox { display:none; }

/* Model badge */
.model-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:11px; margin-left:8px; vertical-align:middle; background:rgba(20,184,166,0.15); color:#14b8a6; border:1px solid rgba(20,184,166,0.3); }

/* Preview chat */
.chat-preview-area {
    height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #beedc9;
    padding: 5px;
    border-radius: 10px;
}
.chat-msg { display:flex; align-items:flex-end; gap:8px; }
.chat-msg.user { flex-direction:row-reverse; }

.msg-avatar {
    width: 30px;
    height: 30Px;
    border-radius: 50%;
    font-weight: 600;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid rgb(92 246 118);
    color: #8b5cf6;
    animation: pulse-avatar 3s ease-in-out infinite;
}

.msg-avatar.bot {
    background: linear-gradient(135deg, #9d9d9d, #d6c4ff);
    text-align: center;
    padding: 8px;
}

.msg-avatar.user {
    background: rgb(219 245 190);
    text-align: center;
    padding: 6px;
}


.chat-msg.bot .msg-bubble {
background: #f4efff;
border: 1px solid #eff180;
color: #006dffe6;
border-bottom-left-radius: 3px;
}
.chat-msg.user .msg-bubble {
background: #ffffff;
border: 1px solid rgb(255 159 159);
color: #000000;
border-bottom-right-radius: 3px;
}
.typing-dots span { display:inline-block; width:4px; height:4px; background:rgba(139,92,246,0.7); border-radius:50%; margin:0 1px; animation:bounce 1.2s infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}

/* Tips */
.tip-item { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.tip-item:last-child { border-bottom:none; padding-bottom:0; }
.tip-num { width:20px; height:20px; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.3); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fbbf24; flex-shrink:0; }

.spin-ring { width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }

 /* ── Chat Wrapper Principal ── */
.chat-container {
    height:400px;
    display: grid;
    gap: 0;
    border-radius: 10px;
    overflow:auto;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    background: #beedc9 !important;
    padding:14px;
    border: 1px solid #ddd !important;
    margin-bottom:14px;
}

.chat-header {
    color:#fff;
    border-radius:10px 20px 0 0;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: var(--wa-green);
    background-size:200% 200%;
    box-shadow:inset 0 0 1em #000,0 0 1em #000;
    text-shadow:1px 1px 0 red;
    gap: 6px;
    background-size: 200% 200%;
    margin: 0 0 auto 0;
}
.chat-title{
    display:flex;
    align-items:center;
    gap:10px;
}
.chat-title h6{
    font-size:13px;
    font-weight:800;
    margin:0;
    font-family:'Syne',sans-serif
}
.chat-title small{
    font-size:12px;
    opacity:.9
}

.chat-message{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:15px
}
.chat-message.user{
    flex-direction:row-reverse;
}

.chat-message .msg-avatar{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.chat-message.bot .msg-avatar{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.chat-message.user .msg-avatar{background:#3c8dbc}

.message-bubble {
    display: inline-block;
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px !important;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 2px rgb(0 0 0 / .1);
    background: aliceblue;
}


.message-bubble.bot {
    background: #f1f1f1 !important; 
    color: #333 !important; 
    border: 1px solid #ddd !important;
    }
.message-bubble.user { 
    background: #3c8dbc !important; 
    color: #fff !important;
    }
    
    
.test-input-group input{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;color: #ffbf00;padding:12px 16px;font-size:16px;flex:1}
.test-input-group input:focus{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.05);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.test-input-group input::placeholder{color: #999 !important;}
.test-input-group button{background:linear-gradient(135deg,#14b8a6,#059669);border:1px solid rgba(20,184,166,.4);color:#fff;border-radius:10px;padding:5px 10px;flex-shrink:0;transition:all .2s}
.test-input-group button:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(20,184,166,.3)}

/* ── Chatbots Grid ── */
.chatbots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;margin-top:32px}
.chatbot-card{background:rgba(12,16,32,.85);border:1px solid rgba(255,255,255,.07);border-radius:10px;backdrop-filter:blur(20px);overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.5);transition:all .3s;height:100%;position:relative}
.chatbot-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8b5cf6,#7c3aed)}
.chatbot-card:hover{transform:translateY(-8px);box-shadow:0 35px 70px rgba(0,0,0,.6)}
.chatbot-card.inactive::before{background:linear-gradient(90deg,#ef4444,#dc2626)}

.card-header{padding:5px;border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.card-header::after{content:'';position:absolute;top:50%;right:16px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;}
.card-header.active {
    background: linear-gradient(135deg, rgb(0 0 0), rgb(45 2 118));
    border-bottom-color: #4e00fe;
}
.card-header.active::after{background:#8b5cf6}
.card-header.inactive{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(220,38,38,.08));border-bottom-color:rgba(239,68,68,.15)}
.card-header.inactive::after{background:#ef4444}

.chatbot-title{font-size:18.4px;font-weight:800;letter-spacing:-.02em;color:#f8fafc;margin:0;line-height:1.2}

.card-body{padding: 5px 15px;}

.body-card {
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
}

.desc-text{font-size:12px;color:rgba(226,232,240,.7);line-height:1.5;margin-bottom:24px}
.type-model-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;text-align:center}
.type-model-item{position:relative}
.type-model-label{font-size:11px;color:rgba(226,232,240,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;display:block}
.type-model-value{font-size:16px;font-weight:600;color:#f8fafc;margin:0;line-height:1.2}

.welcome-section{margin-bottom:20px}
.field-label{font-size:11px;color:rgb(253,177,0);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;display:block}

.welcome-preview { background: #f9f9f9 !important; border: 1px solid #ddd !important; color: #333 !important;border-radius:10px;padding:12px 14px;font-size:12px;color: #ffbf00;line-height:1.45;overflow:hidden;position:relative;max-height:60px }
.welcome-preview::after{content:'...';position:absolute;bottom:0;right:0;background:linear-gradient(transparent,rgba(5,8,16,1));width:30px;height:20px;pointer-events:none}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:center}
.stat-item{position:relative}
.stat-number{font-size:20.8px;font-weight:800;color:#f8fafc;margin:0;line-height:1;display:block}
.stat-label{font-size:11px;color:rgba(226,232,240,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

.card-footer {
    padding: 10px;
    background: rgb(254 255 227);
    border-top: 1px solid rgb(255 255 255);
    display: flex;
    border: 1px solid #0000ff00;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 2px #000, 0 0 0 1px gold !important;
    margin: 10px auto 0 auto;
    justify-content: center;
}


/* card de relatório */
.rpt-stat-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e3e6f0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.rpt-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    text-decoration: none;
}
.rpt-stat-top { height: 5px; width: 100%; }
.rpt-top-primary { background: #4e73df; }
.rpt-top-success { background: #1cc88a; }
.rpt-top-info    { background: #36b9cc; }
.rpt-top-warning { background: #f6c23e; }

.rpt-stat-body { padding: 18px 20px 10px; flex: 1; display: flex; flex-direction: column; }
.rpt-stat-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin-bottom: 10px;
}
.rpt-icon-primary { background: rgba(78,115,223,.12); color: #4e73df; }
.rpt-icon-success { background: rgba(28,200,138,.12); color: #1cc88a; }
.rpt-icon-info    { background: rgba(54,185,204,.12); color: #36b9cc; }
.rpt-icon-warning { background: rgba(246,194,62,.12); color: #f6c23e; }

.rpt-stat-title { font-size: 14.72px; font-weight: 600; color: #3a3b45; margin-bottom: 2px; }
.rpt-stat-desc { font-size: 12.16px; color: #9298a8; margin-bottom: 10px; }
.rpt-stat-number { font-size: 25.6px; font-weight: 800; color: #2c2f3a; line-height: 1; }
.rpt-stat-sub { font-size: 12.48px; color: #6b7280; margin-top: 2px; }

.rpt-delta { font-size: 12.16px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; }
.rpt-delta-up { color: #1cc88a; }
.rpt-delta-down { color: #e74a3b; }
.rpt-delta-flat { color: #9298a8; }

.rpt-sparkline { height: 42px; margin-top: auto; padding: 0 4px; }

.rpt-period-btns .btn { font-size: 10px; padding: 5px 10px; }
.rpt-period-btns .btn.active { background: #4e73df; color: #fff; border-color: #4e73df; }

.rpt-filter-btns .btn { font-size: 12.48px; padding: 4px 12px; }
.rpt-filter-btns .btn.active { background: #2c2f3a; color: #fff; border-color: #2c2f3a; }


/* ── My conversations (estilo WhatsApp Web) ── */
.mine-search-wrap{position:relative;margin-bottom:9.6px}
.mine-search-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13.6px;color:#aaa;pointer-events:none}

.mine-search:focus{background:#fff;border-color:rgba(37,211,102,.4)}
.mine-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 14.4px 8px;
    background: #ffd0d0;
    border-radius: 10px;
}
.mine-list::-webkit-scrollbar{width:4px}
.mine-list::-webkit-scrollbar-track{background:transparent}
.mine-list::-webkit-scrollbar-thumb{background:rgba(37,211,102,.3);border-radius:2px}
.mine-card{background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.05);border-radius:0;padding:11px 6px;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:12px}
.mine-card:hover{background:rgba(0,0,0,.03)}
.mine-card.active{background:rgba(37,211,102,.09)}
.mine-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;flex-shrink:0}
.mine-body{flex:1;min-width:0}
.mine-top-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mine-name{font-size:14.72px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-time{font-size:10.88px;color:#aaa;flex-shrink:0}
.mine-bottom-row{display:flex;align-items:center;gap:5px;margin-top:2px}
.mine-channel-icon{font-size:12px;flex-shrink:0}
.mine-preview{font-size:12.8px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-search {
    width: 85%;
    background: #fafcff;
    border: 1px solid #a9ff00;
    border-radius: 10px;
    padding: 8px 14px 8px 32px;
    font-size: 12px;
    color: #000000;
    outline: none;
    transition: all .2s;
}

.at-root, .funnel-app,
.at-wrap, .cb-wrap {
  font-family: inherit !important;
  color: #333 !important;
  background: transparent !important;
}

.at-avatar-lg, .user-initials {
  background: #3c8dbc !important;
  border: 1px solid #367fa9 !important;
  color: #fff !important;
  box-shadow: none !important;
  animation: none !important;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
}

.cb-title-group h1 { color: #333 !important; }
.cb-title-group p { color: #777 !important; }

.panel-body {
    color: aquamarine;
    background: #000000;
    border: 4px solid #beedc9 !important;
    border-radius: 10px;
    backdrop-filter: blur(25px);
    overflow: hidden;
    box-shadow: 0 3px 3px rgb(0 0 0) !important;
    width: 98%;
    padding: 14px;
    margin: 5px auto;
    text-shadow: 1px 1px 0 #000000;
    font-size: 13px;
}

.panel-dot, .fn-dot { box-shadow: none !important; }

.btn-test, .empty-cta {
  background: #3c8dbc !important;
  border: 1px solid #367fa9 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-test:hover, .empty-cta:hover {
  background: #367fa9 !important;
  border-color: #367fa9 !important;
  color: #fff !important;
  transform: none !important;
}

.sub-label { color: #ff8400  !important; }
.info-lbl { color: #ff8400  !important; }
.info-val { color: #333 !important; }
.info-mono { color: #555 !important; }

.user-search, .user-card, .cb-input, .cb-select, .msg-textarea, .test-input-group input {
    background: #fff !important;
    border: 1px solid #ff8d00 !important;
    color: #1b00ff !important;
    box-shadow: none !important;
    padding: 5px 7px;
    width: 98%;
}
.user-search::placeholder, .cb-input::placeholder, .test-input-group input::placeholder { color: #999 !important; }
.user-search:focus, .cb-input:focus, .cb-select:focus, .time-input:focus, .msg-textarea:focus {
  border-color: #3c8dbc !important;
  background: #fffff0 !important;
  box-shadow: 0 0 0 2px rgba(60,141,188,.15) !important;
}
.cb-select option, select.cb-input option { background: #fff !important; color: #333 !important; }
.user-card:hover { background: #f5f9fc !important; border-color: #3c8dbc !important; }
.user-card.selected { background: #eaf3fa !important; border-color: #3c8dbc !important; box-shadow: none !important; }
.user-name { color: #333 !important; }
.user-email { color: #888 !important; }
.user-chk { border-color: #ccc !important; }
.user-card.selected .user-chk { background: #3c8dbc !important; border-color: #3c8dbc !important; }
.selected-preview { background: #eaf3fa !important; border: 1px solid #b8d9ec !important; color: #367fa9 !important; }

.chatbot-card, .sch-card {
  background: #fdf5dc !important;
  border: 1px solid #9100ff !important;
  border-radius:10px;
  padding: 15px;
  display: block;
  transition: all 0.2s;
  backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}

.att-card:hover, .fn-card:hover, .chatbot-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1) !important; transform: none !important; }
.chatbot-card::before, .chatbot-card.inactive::before { display: none !important; }
.card-header, .card-header.active, .card-header.inactive { background: #f4f4f4 !important; border-bottom: 1px solid #ddd !important; }
.card-footer, .footer-card { background: #000 !important; border-top: 1px solid #ddd !important; box-shadow: none !important; }
.chatbot-title, .att-name, .empty-state h3, .empty-title, .type-model-value, .stat-number { color: #000 !important; }
.att-email, .att-tz, .empty-state p, .empty-subtitle, .desc-text, .type-model-label, .stat-label, .no-results { color: #000; }
.att-actions, .att-actions:hover { background: transparent !important; color: inherit !important; }

.sch-period-block { border: 1px solid #ddd !important; }
.sch-period-block.sactive { border-color: #3c8dbc !important; background: #f5f9fc !important; }

.sch-checkbox, .notify-chk, .user-chk { background: #fff !important; border: 2px solid #ccc !important; }
.sch-checkbox.checked, .notify-chk.checked { background: #3c8dbc !important; border-color: #3c8dbc !important; }
.sch-checkbox-label { color: #fff077 !important; }
.shift-tag, .time-label { color: #999 !important; }

.toggle-track { background: #ccc !important; border: none !important; }
.toggle-track.on { background: #3c8dbc !important; border: none !important; }

.toggle-text {  font-size:13px; color:#dc2626; }
.toggle-text.on { color:#16a34a; }

.small, small {
    color: #06d105;
   font-size: 11px;
    text-shadow:1px 1px 0 #000;
}
.info-note { background: #fcf8e3 !important; border: 1px solid #f0e2b6 !important; }
.info-note span { color: #8a6d3b !important; }
.restore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    background: rgb(0 0 0 / 22%);
    border: 1px solid rgb(27 0 255 / 6%);
    border-radius: 8px;
    color: rgb(207 221 241);
    font-size: 10px;
    cursor: pointer;
    transition: all .2s;
}

/* Modal Test */
.test-modal .modal-content {background: #fffff0 !important;border: 1px solid #ddd !important;border-radius:10px;backdrop-filter: none !important;}
.test-modal .modal-header { border-bottom: 1px solid #eee !important; color: #333 !important; }
/* .test-modal .close: segue o padrão dos modais (19/10/2026) */
.test-modal .modal-title{font-weight:600;font-size:19.2px}

/* Templates sidebar */
.tpl-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: rgb(5 64 197);
    border: 1px solid rgb(251 255 1);
    border-radius: 10px;
    color: #ffbf00;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
    text-align: left;
}

.tpl-btn:hover {
    background: rgb(48 44 39);
    border-color: rgb(255 234 234 / 98%);
    transform: translateX(4px);
}
.tpl-btn:last-child { margin-bottom:0; }
.tpl-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.tpl-name { color:#caff00; font-size:12px; }
.tpl-desc { color:#00ff00; font-size:12px; margin-top:1px; }  .tip-num { width:20px; height:20px; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.3); border-radius:6px; display:flex; align-items:center; justify-content:center;  font-size:12px; color:#fbbf24; flex-shrink:0; }
.tip-text {
    font-size: 12px;
    color: #00fdff;
    line-height: 1.4;
    font-weight: 500;
}
.tip-text strong { color: var(--text); display: block; margin-bottom: 1.6px; font-size: 13.6px; }
.mb-field { margin-bottom:20px; }

/* ── FILTRO ── */
.btn-filtro {
  background: #000000 !important;
  color: #caebff !important;
  border: 1px solid #a9ff00 !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}

.btn-filtro:hover {
    color: #d9e5ff !important;
    border-color: #00e5ff !important;
    background: #ff0000 !important;
}
.btn-filtro.active {
  background: blue !important;
  color: #edff00 !important;
  border-color: rgba(0,229,255,.4) !important;
  box-shadow: 0 0 10px rgba(0,229,255,.1) !important;
}

.ac-root{font-family:'Syne',sans-serif;background:#f4f6f9;height:calc(100vh - 50px);min-height:560px;padding:0;color:#333;position:relative;overflow:hidden}
.ac-root canvas{position:absolute;inset:0;pointer-events:none;z-index:0}
.ac-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column}

/* ── Header (estilo barra superior do WhatsApp Web) ── */
.ac-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9.6px 20px;
    border-bottom: 1px solid rgb(0 0 0 / 51%);
    background: #a0edff !important;
    flex-shrink: 0;
    margin-bottom: 10px;
    border-radius: 10px;
}
.ac-brand{display:flex;align-items:center;gap:12px}
.ac-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;font-size:17px}
.ac-title h1{font-size:16.8px;font-weight:600;letter-spacing:-.02em;color:#333;line-height:1.2}
.ac-title p {
    
    font-size: 12px;
    color: #1200ff;
    letter-spacing: .02em;
    margin-top: 1px;
}

.ac-refresh-note {
    
    font-size: 12px;
    color: #1200ff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ac-refresh-dot{width:12px;height:12px;border-radius:50%;background:#25d366;animation:blink 2s ease-in-out infinite}

/* ── Layout (duas colunas ocupando 100% da altura, como o WhatsApp Web) ── */
.ac-grid{display:grid;grid-template-columns:380px 1fr;flex:1;min-height:0}

/* ── Coluna esquerda: lista única de conversas ── */
.ac-sidebar{background:#fff;border-right:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;min-height:0}
.sidebar-scroll{flex:1;overflow-y:auto}
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}

/* ── Panels ── */
.ph-purple,.ph-orange,.ph-green{background:#f8f9fa}
.panel-dot{width:8px;height:8px;border-radius:50%}
.dot-purple{background:#8b5cf6}
.dot-orange{background:#f97316}
.dot-green{background:#25d366}

.panel-count{margin-left:auto;font-size:11.52px;padding:2px 9px;border-radius:100px;background:rgba(249,115,22,.15);color:#f97316;border:1px solid rgba(249,115,22,.3)}

.panel-body.no-pad{padding:0}

/* ── Pending queue ── */
.queue-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding-right:4px}
.queue-list::-webkit-scrollbar{width:4px}
.queue-list::-webkit-scrollbar-track{background:transparent}
.queue-list::-webkit-scrollbar-thumb{background:rgba(249,115,22,.3);border-radius:2px}
.queue-card{background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.2);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:all .2s}
.queue-card:hover{background:rgba(249,115,22,.09);border-color:rgba(249,115,22,.35)}
.queue-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#3d1f0a,#7c2d12);border:1px solid rgba(249,115,22,.4);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#f97316;flex-shrink:0}
.queue-info{flex:1;min-width:0}
.queue-name{font-size:15.2px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-time{font-size:12px;color:#888;margin-top:1px}
.accept-btn{padding:7px 14px;background:linear-gradient(135deg,#14b8a6,#0d9488);border:none;border-radius:8px;color:#fff;font-size:12.48px;font-weight:600;cursor:pointer;transition:all .2s;flex-shrink:0}
.accept-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,184,166,.4)}
.accept-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.empty-mini{padding:28px 16px;text-align:center;font-size:13px;color:#ff0000}

/* ── Chat panel (estilo WhatsApp Web) ── */
.chat-panel{height:100%;display:flex;flex-direction:column;padding:0;min-height:0}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #009bff;
    background: #d4edda;
    position: relative;
    text-align: center;
    padding: 32px;
    border: 1px solid #d4edda;
    border-radius: 10px;
}
.chat-empty::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:#25d366}
.chat-empty-icon{width:110px;height:110px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:52px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chat-empty h2{font-size:22.4px;font-weight:400;color:#41525d;margin:0}

.chat-empty p {
    font-size: 13px;
    color: #ff8400;
    max-width: 360px;
    line-height: 1.5;
    margin: 0;
}
.chat-empty-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #0477bf;
    margin-top: 24px;
}

.chat-active{flex:1;display:none;flex-direction:column;min-height:0}
.chat-active.visible{display:flex}

.chat-head{padding:9.6px 17.6px;display:flex;align-items:center;gap:12px;color:#fff;border-radius:0;background:linear-gradient(60deg,#1b00ff 5%,#d8ff01 15%,#016712 40%,#0014ff 70%,#ffc800 90%,#fff900 100%);background-size:200% 200%;box-shadow:inset 0 0 1em #000,0 0 1em #000;text-shadow:1px 1px 0 red}
.chat-head-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff}
.chat-head-name{font-size:16px;font-weight:800}
.chat-head-sub{font-size:12px;opacity:.9;margin-top:1px}
.chat-close-btn{margin-left:auto;height:28px;padding:0;background:rgba(255,255,255,.2);border:none;border-radius:50%;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center}
.chat-close-btn:hover{background:rgba(255,255,255,.35)}

.chat-msgs{flex:1;overflow-y:auto;padding:20px 4%;display:flex;flex-direction:column;gap:6.4px;background:#d4edda;border:3px solid #c8e6c9;border-radius:10px;margin:4px}
.chat-msgs::-webkit-scrollbar{width:6px}
.chat-msgs::-webkit-scrollbar-track{background:#f0f0f0;border-radius:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:#25d366;border-radius:3px}
.chat-msgs::-webkit-scrollbar-thumb:hover{background:#128c7e}

.msg-row{display:flex;max-width:100%;gap:6px;align-items:flex-end}
.msg-row.client{align-self:flex-start}
.msg-row.attendant,.msg-row.bot{align-self:flex-end}

.msg-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;position:relative;overflow:hidden}

.msg-row.client .msg-bubble{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#1b5e20;border-radius:18px 18px 18px 4px}
.msg-row.attendant .msg-bubble{background:#f3f4f6;color:#1f2937;border-radius:18px 18px 4px 18px}
.msg-row.bot .msg-bubble{background:#f3f4f6;color:#1f2937;border-radius:18px 18px 4px 18px}
.msg-time{font-size:10.88px;color:rgba(0,0,0,.4);margin-top:2px;display:block;text-align:right}

.chat-input-row{padding:8px 10px 4px;border-top:1px solid #e2e5ea;display:flex;align-items:center;gap:8px;position:relative;background:#fffff0}
.chat-input-pill{flex:1;min-width:0;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #e2e5ea;border-radius:10px;padding:4px 6px 4px 4px;transition:all .2s}
.chat-input-pill:focus-within{border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.chat-input{flex:1;min-width:0;background:transparent;border:none;padding:8px 6px;color:#111;font-family:'Nunito',sans-serif;font-size:14.72px;outline:none}
.send-btn{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#25d366;border:none;color:#fff;font-size:16px;cursor:pointer;transition:opacity .2s,transform .15s;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:inset 0 0 8px rgba(0,0,0,.2),0 0 6px rgba(0,0,0,.15)}
.send-btn:hover{opacity:.88;transform:scale(1.06)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Botões auxiliares (anexo / emoji / respostas rápidas) — dourados, como no widget do site ── */
.tool-btn{width:36px;height:36px;flex-shrink:0;background:#f5c518;border:none;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;border-radius:10px;box-shadow:inset 0 0 8px rgba(0,0,0,.2),0 0 6px rgba(0,0,0,.15)}
.tool-btn:hover{background:#d4a800}
.tool-btn.active{background:#d4a800}

/* ── Painel único (emoji por categoria + respostas rápidas em aba), estilo WhatsApp ── */
.tool-panel, .tool-panel *{box-sizing:border-box}
.tool-panel{position:fixed;width:360px;height:420px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden;z-index:1050}
.tool-panel.open{display:flex}

.tool-panel-search{flex-shrink:0;padding:10px 12px 6px}
.tool-panel-search input{display:block;width:100%;background:#f0f2f5;border:1px solid transparent;border-radius:10px;padding:8px 14px;font-size:13.6px;color:#333;outline:none;font-family:'Syne',sans-serif}
.tool-panel-search input:focus{background:#fff;border-color:rgba(37,211,102,.4)}

.tool-panel-tabs{flex-shrink:0;display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid rgba(0,0,0,.08);overflow-x:auto}
.tool-panel-tab{flex-shrink:0;padding:6px 10px;font-size:16.8px;color:#888;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;line-height:1}
.tool-panel-tab.active{color:#25d366;border-bottom-color:#25d366}

.tool-panel-heading{flex-shrink:0;padding:8px 14px 0;font-size:12.48px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.04em}

.emoji-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px 10px 10px;overflow-y:auto;align-content:start}
.emoji-item{font-size:21.6px;text-align:center;padding:5px 0;border-radius:8px;cursor:pointer;transition:background .15s;line-height:1}
.emoji-item:hover{background:rgba(37,211,102,.15)}
.emoji-empty{grid-column:1/-1;padding:20px;text-align:center;font-size:13.6px;color:#888}

.qr-list{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 8px}
.qr-item{padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s;margin-bottom:4px}
.qr-item:hover{background:rgba(37,211,102,.1)}
.qr-item-title{font-family:'Syne',sans-serif;font-size:13.6px;font-weight:600;color:#333}
.qr-item-msg{font-size:11.52px;color:#888;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-empty{padding:20px;text-align:center;font-size:12.8px;color:#888}

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 10px;
  
  font-size: 13.6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(-10px);
  transition: all .3s;
}

.toast.sucess {
  background: #1b8500;
  border: 1px solid rgba(20,184,166,.35);
  color: #fff;
}

.toast.show { opacity: 1; transform: translateY(0); }

.toast.ok {
  background: rgba(20,184,166,.15);
  border: 1px solid rgba(20,184,166,.35);
  color: #0f766e;
}
.toast.err {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
}

.auto-page{padding:24px 0;font-family:inherit}
.auto-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.auto-header-left{display:flex;align-items:center;gap:12px}
.auto-header-icon{width:40px;height:40px;border-radius:10px;background:#E6F1FB;display:flex;align-items:center;justify-content:center}
.auto-header-icon svg{width:20px;height:20px;stroke:#185FA5;fill:none;stroke-width:2}
.auto-header h1{font-size:20px;font-weight:500;color:#1a1a1a;margin:0}
.auto-header p{font-size:13px;color:#888;margin:2px 0 0}

.progress-bar{display:flex;align-items:center;gap:6px;margin-bottom:24px}
.prog-step{display:flex;align-items:center;gap:5px}
.prog-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500}
.prog-num.done{background:#E6F1FB;color:#185FA5}
.prog-num.todo{background:#f0f0f0;color:#aaa}
.prog-label{font-size:12px;color:#888}
.prog-line{flex:1;height:0.5px;background:#ddd}
.auto-main-grid{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.auto-card{background:#fff;border:0.5px solid #e5e5e5;border-radius:10px;overflow:hidden;margin-bottom:16px}
.auto-card:last-child{margin-bottom:0}
.auto-card-head{padding:16px 20px;border-bottom:0.5px solid #e5e5e5;display:flex;align-items:center;gap:8px}
.auto-card-head span{font-size:14px;font-weight:500;color:#1a1a1a}
.step-dot{width:22px;height:22px;border-radius:50%;background:#E6F1FB;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#185FA5;flex-shrink:0}
.auto-card-body{padding:20px}
.field-label{font-size:12px;font-weight:500;color:#888;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;display:block}
.auto-section{margin-bottom:20px}
.auto-section:last-child{margin-bottom:0}
.auto-card-body input[type=text],
.auto-card-body input[type=number],
.auto-card-body textarea,
.auto-card-body select{width:100%;padding:9px 12px;border:0.5px solid #ccc;border-radius:8px;background:#f8f8f8;font-size:14px;color:#1a1a1a;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.auto-card-body input:focus,
.auto-card-body textarea:focus,
.auto-card-body select:focus{border-color:#378ADD;box-shadow:0 0 0 3px rgba(55,138,221,0.12)}
.auto-card-body textarea{resize:vertical;min-height:60px}
.auto-card-body select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-color:#f8f8f8}
.trigger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trigger-btn{padding:10px 8px;border:0.5px solid #ddd;border-radius:8px;background:#f8f8f8;cursor:pointer;text-align:center;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:5px}
.trigger-btn:hover{border-color:#378ADD;background:#E6F1FB}
.trigger-btn.active{border-color:#378ADD;background:#E6F1FB}
.trigger-btn.active .trigger-label{color:#185FA5}
.trigger-icon{font-size:16px}
.trigger-label{font-size:11px;color:#888;font-weight:500}
.actions-list{display:flex;flex-direction:column;gap:10px}
.action-card{border:0.5px solid #e5e5e5;border-radius:8px;overflow:hidden;background:#f8f8f8}
.action-card-head{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid #e5e5e5;background:#fff}
.action-type-row{display:flex;align-items:center;gap:8px;flex:1}
.action-num{width:20px;height:20px;border-radius:50%;background:#E6F1FB;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#185FA5;flex-shrink:0}
.action-card select{border:none;background:transparent;padding:0;font-size:13px;font-weight:500;color:#1a1a1a;outline:none;appearance:none}
.action-config-area{padding:10px 12px}
.action-config-area textarea{font-family:monospace;font-size:12px;background:#fff;min-height:52px;width:100%;padding:8px 10px;border:0.5px solid #ddd;border-radius:6px;outline:none}
.action-config-area textarea:focus{border-color:#378ADD;box-shadow:0 0 0 3px rgba(55,138,221,0.12)}
.btn-remove{width:26px;height:26px;border-radius:6px;border:0.5px solid #f5c1c1;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#E24B4A;flex-shrink:0}
.btn-remove:hover{background:#FCEBEB}
.btn-remove svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.btn-add-action{display:flex;align-items:center;gap:6px;padding:8px 14px;border:0.5px dashed #ccc;border-radius:8px;background:transparent;font-size:13px;color:#888;cursor:pointer;width:100%;justify-content:center;margin-top:8px}
.btn-add-action:hover{border-color:#378ADD;color:#185FA5;background:#E6F1FB}
.btn-add-action svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.toggle-info p{font-size:13px;font-weight:500;color:#1a1a1a;margin:0}
.toggle-info span{font-size:12px;color:#888}
.auto-toggle{width:36px;height:20px;border-radius:10px;background:#1D9E75;position:relative;cursor:pointer;flex-shrink:0;border:none;transition:background .2s}
.auto-toggle::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;right:3px;transition:transform .2s}
.auto-toggle.off{background:#ddd}
.auto-toggle.off::after{transform:translateX(-16px)}
.auto-card-footer{padding:16px 20px;border-top:0.5px solid #e5e5e5;display:flex;align-items:center;gap:10px}
.btn-primary-auto{padding:9px 20px;border-radius:8px;background:#185FA5;border:none;font-size:14px;font-weight:500;color:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;text-decoration:none}
.btn-primary-auto:hover{background:#0C447C;color:#fff}
.btn-primary-auto svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
.btn-cancel-auto{padding:9px 16px;border-radius:8px;border:0.5px solid #ccc;background:transparent;font-size:14px;color:#888;cursor:pointer;text-decoration:none}
.btn-cancel-auto:hover{background:#f5f5f5;color:#333}

.template-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:0.5px solid #e5e5e5;cursor:pointer;margin-bottom:6px;background:#f8f8f8;transition:all .15s}
.template-item:last-child{margin-bottom:0}
.template-item:hover{border-color:#378ADD;background:#E6F1FB}
.t-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.t-name{font-size:13px;font-weight:500;color:#1a1a1a;margin:0}

.tip-list{list-style:none;padding:0;margin:0}
.tip-list li{font-size:12px;color:#888;padding:4px 0;border-bottom:0.5px solid #f0f0f0;display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.tip-list li:last-child{border-bottom:none}
.tip-dot{width:5px;height:5px;border-radius:50%;background:#E6F1FB;border:1.5px solid #378ADD;margin-top:5px;flex-shrink:0}
.hint{font-size:11px;color:#aaa;margin-top:4px}
.preview-card{display:none}
.preview-card.visible{display:block}

    
.at-root{font-family:'Syne',sans-serif;background:#f4f6f9;min-height:100vh;padding:32px 24px;color:#333;position:relative;overflow:hidden}
.at-root canvas{position:absolute;inset:0;pointer-events:none;z-index:0}
.at-wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto}

/* ── Cards de Resumo ── */
.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px}
.summary-card{background:rgba(12,16,32,.85);border:1px solid rgba(0, 0, 0, .07);border-radius:10px;backdrop-filter:blur(20px);padding:24px;transition:all .3s;position:relative;overflow:hidden}
.summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--card-accent,#8b5cf6),var(--card-accent,#7c3aed))}
.summary-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.summary-card .card-icon{font-size:35.2px;opacity:.7;transition:all .3s}
.summary-card:hover .card-icon{opacity:1;transform:scale(1.1)}
.summary-label{font-size:13.6px;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.summary-value{font-size:32px;font-weight:800;color:#333;line-height:1}

.reset-btn{background:rgba(0, 0, 0, .04);border:1px solid rgba(0, 0, 0, .15);color:#555;border-radius:10px;padding:12px;transition:all .2s;font-size:15.2px}
.reset-btn:hover{background:rgba(0, 0, 0, .12);color:#333;transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,.3)}

/* ── Table Container ── */
.table-container{background:rgba(12,16,32,.85);border:1px solid rgba(0, 0, 0, .07);border-radius:10px;backdrop-filter:blur(20px);overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.table-header{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(124,58,237,.08));border-bottom:1px solid rgba(139,92,246,.15);padding:20px}

/* ── Custom Table ── */
.conversations-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:15.2px}
.conversations-table thead th{padding:20px 24px;font-size:13.6px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.08em;text-align:left;border-bottom:1px solid rgba(0, 0, 0, .06)}
.conversations-table tbody tr{transition:all .2s;border-bottom:1px solid rgba(0, 0, 0, .03)}
.conversations-table tbody tr:hover{background:rgba(0, 0, 0, .03);transform:translateX(4px)}
.conversations-table tbody td{padding:20px 24px;vertical-align:middle;position:relative}
.conversations-table tbody td:first-child{padding-left:32px}

.phone-cell{position:relative}
.phone-cell::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 0 12px rgba(139,92,246,.4)}
.phone-cell strong{font-weight:600;color:#333;font-size:16.8px}

.badge-pending{background:rgba(253,177,0,.15);color:#f59e0b;border:1px solid rgba(253,177,0,.3)}

.contact-link{color:#333;text-decoration:none;font-weight:600;transition:all .2s}
.contact-link:hover{color:#8b5cf6;text-decoration:underline}

.time-cell{font-size:13.6px;color:#888}

.assigned-cell{font-weight:600;color:#333}

.instance-cell{font-size:13.6px;color:#888;background:rgba(0, 0, 0, .02);padding:6px 12px;border-radius:8px;border:1px solid rgba(0, 0, 0, .08);display:inline-block}

/* ── Actions ── */
.actions-cell .btn-group{display:flex;gap:4px}
.btn-open{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.4);color:#22c55e}
.btn-open:hover{background:rgba(34,197,94,.3);transform:translateY(-2px)}
.btn-assign{background:rgba(139,92,246,.2);border:1px solid var(--purple-glow);color:var(--purple)}
.btn-assign:hover{background:rgba(139,92,246,.3);transform:translateY(-2px)}
.btn-close{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.4);color:#ef4444}
.btn-close:hover{background:rgba(239,68,68,.3);transform:translateY(-2px)}
  
  .cb-title-group h1 { font-size:24px; font-weight:800; letter-spacing:-0.03em; color:#333; }
  .cb-title-group p  { font-size:13.6px; color:rgba(139,92,246,0.8); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
  
  .cb-back-btn { 
        display:inline-flex; 
        align-items:center; 
        gap:8px; 
        background: var(--glass);
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius:7px;
        font-size:10px;
        font-weight:600; 
        text-decoration:none; 
        transition: all 0.2s ease;
        backdrop-filter: blur(10px);
        padding: 3px 5px !important;
    }
    
   .cb-back-btn:hover { border-color: var(--accent); color: #00ff0a; text-decoration: none; }
  .ph-main   { background:linear-gradient(90deg,rgba(139,92,246,0.12) 0%,transparent 100%); }
  .ph-prev   { background:linear-gradient(90deg,rgba(20,184,166,0.12) 0%,transparent 100%); }
  .ph-tip    { background:linear-gradient(90deg,rgba(251,191,36,0.12) 0%,transparent 100%); }
  .ph-danger { background:linear-gradient(90deg,rgba(239,68,68,0.12)  0%,transparent 100%); }
  .ph-wpp    { background:linear-gradient(90deg,rgba(37,211,102,0.12) 0%,transparent 100%); }
  .panel-dot { width:8px; height:8px; border-radius:50%; }
  .dot-purple { background:#8b5cf6; box-shadow:0 0 8px #8b5cf6; }  .dot-red    { background:#ef4444; box-shadow:0 0 8px #ef4444; }
  .dot-green  { background:#25d366; box-shadow:0 0 8px #25d366; }
  .panel-header span{font-size:12.48px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color: #444 !important;}
  
  .form-row-2     { display:grid; grid-template-columns:1fr auto; gap:16px; margin-bottom:20px; }  .field-label { display:flex; align-items:center; gap:6px; font-size:13px; color:rgb(253,177,0); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px; }
  .sub-label   {  font-size:10.88px; color:rgba(226,232,240,0.3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px; }
  .invalid-feedback { color:#ef4444; font-size:12px;  margin-top:4px; display:block; }
  
  /* ── Toggle status ── */
  .toggle-label { display:flex; align-items:center; gap:6px; cursor:pointer; }
  .toggle-wrap  { display:flex; align-items:center;cursor:pointer;padding-top:5px}  
  .toggle-track { width:42px; height:22px; background:rgba(139,92,246,0.4); border-radius:100px; position:relative; transition:background 0.2s; border:1px solid rgba(139,92,246,0.6); }
  .toggle-thumb {position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
  .toggle-track.on { background:linear-gradient(90deg,#7c3aed,#8b5cf6); }
  .toggle-track.on .toggle-thumb { transform:translateX(20px); }
  
  .wpp-box { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#300054; border:1px solid rgba(37,211,102); border-radius:10px; }
  .wpp-num  {  font-size:16px; color:#4ade80; font-weight:600; }
  .wpp-sub {
    font-size: 10.88px;
    color: rgb(0 255 95);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
    
}
  .wpp-warn { margin-top:8px; padding:8px 12px; background:rgba(239,68,68); border:1px solid rgba(239,68,68); border-radius:8px; font-size:12px; color:#f87171;  }
  .model-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:11.52px;  margin-left:8px; vertical-align:middle; background:rgba(20,184,166,0.15); color:#14b8a6; border:1px solid rgba(20,184,166,0.3); }
  .danger-btn {
    padding: 3px 5px !important;
    background: #ff0000;
    border: 1px solid rgba(239, 68, 68);
    border-radius: 7px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
}
  .danger-btn:hover {
        background: rgb(120 4 4);
        border-color: rgb(255 3 3);
    }
   
  .typing-dots span { display:inline-block; width:4px; height:4px; background:rgba(139,92,246,0.7); border-radius:50%; margin:0 1px; animation:bounce 1.2s infinite; }
  .typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
  .meta-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
  .meta-row:last-child { border-bottom:none; }
  .meta-key {  font-size:12px; color:#ffbf00; }
  .meta-val { font-size:13px; color:#00f1ff; }
   
   /* ── Typing dots animation ── */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.typing-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

  .spin-ring { width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
  
  .sh-root {
    background: #f4f6f9;
    min-height: 100vh;
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    color: #333;
  }

  .sh-root canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .sh-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

  /* ── HEADER ── */
  .sh-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 32px; padding-bottom: 24px;
    border-bottom: 1px solid rgba(139,92,246,0.15);
    flex-wrap: wrap; gap: 16px;
  }
  .sh-brand { display: flex; align-items: center; gap: 16px; }
  .sh-avatar {
    width: 60px; height: 60px; border-radius: 16px;
    background: linear-gradient(135deg, #1a1f35, #2d1b69);
    border: 1px solid rgba(139,92,246,0.5);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    box-shadow: 0 0 30px rgba(139,92,246,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    animation: pulse-glow 3s ease-in-out infinite;
  }

  .sh-title h1 { font-size: 25.6px; font-weight: 800; letter-spacing: -0.03em; color: #333; }
  .sh-title p  {  font-size: 13.6px; color: rgba(139,92,246,0.8); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }

  .sh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn-action {
    display: flex; 
    align-items: center;
    gap: 8px; 
    background: linear-gradient(135deg, var(--accent), #6d28d9);
    padding: 3px 5px !important;
    border-radius: 7px; 
    color: #fff;
     
    font-size: 10px;
    font-weight: 600;
    cursor: pointer; 
    transition: all 0.2s; 
    text-decoration: none; 
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
    border: none;
  }
  
  .act-btn {
    width: auto; 
    border-radius: 7px; 
    border: 1px solid var(--border2);
    background: transparent; 
    color: var(--muted); 
    font-size: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: all .18s; 
    text-decoration: none;
    padding: 3px 5px !important;
}
  
  .btn-toggle-on  { 
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.3);
      color: #f87171;
      }
  .btn-toggle-on:hover {
      background: rgba(239,68,68,0.2);
      transform: translateY(-2px);
      }
  .btn-toggle-off {
    background: #00501e;
    border: 1px solid rgb(255 200 0);
    color: #00f1ff;
   }
  .btn-toggle-off:hover { background: #000; transform: translateY(-2px); }

  /* ── STATUS BADGE ── */
  .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 100px;
     font-size: 12.8px; font-weight: 500;
  }
  .status-pill.on  { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #4ade80; }
 
  .status-pill.off {
    background: rgb(0 0 0);
    border: 1px solid rgb(255 0 0);
    color: #ff0000;
}
   .status-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 6px;
      border-radius: 50%;
      animation: blink 1.5s ease-in-out infinite;
    }
    .status-dot  { background: #00ff5d; box-shadow: 0 0 8px #00742a; }
    .status-dot.on  { background: #00ff5d; box-shadow: 0 0 8px #00742a; }
    .status-dot.off { background: #f87171; box-shadow: 0 0 8px #000; }
    
    #statusText {color: #00ffe3;}
    
.department-info {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: chartreuse;
} 

.department-info:hover {
    color: #fff;
}   
 
  /* ── GLASS PANEL ── */
.glass-panel{ 
    background: #beedc9 !important;
    border: 1px solid #ddd !important;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 55%) !important;
}

.panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgb(0 0 0) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgb(246 156 92), #ffdb00);
}

.panel-header-left { display: flex; align-items: center; gap: 10px; }
.panel-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-purple { background: #8b5cf6; box-shadow: 0 0 8px #8b5cf6; }  .dot-blue   { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.dot-green  { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.panel-title { font-size: 13.6px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226,232,240,0.6); }

/* ── TWO COL LAYOUT ── */
.main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; margin-bottom: 24px; }

/* ── CHANNEL BADGE ── */
.channel-badge {
  background:rgba(0, 0, 0, .08);
  border:1px solid rgba(0, 0, 0, .15);
  color:#00ff00;
  padding:6px 12px;
  border-radius:10px;
  font-size:12.8px;
  display:flex;
  align-items:center;
  gap:6px;
  transition:all .2s;
  text-shadow: 1px 1px 0 #000000;
}

.channel-badge:hover {
color: #ffc800;
transform: translateY(-1px);
}

.badge-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 100px;  font-size: 12px;
}

.badge-resolved { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.badge-transferred { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }

.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
background: rgba(99,179,237,0.1); border: 1px solid rgba(99,179,237,0.25);
color: #60a5fa; text-decoration: none; transition: all 0.2s; font-size: 12.8px;
}
.btn-icon:hover { background: rgba(99,179,237,0.2); transform: scale(1.1); }

/* ── CHAT TEST ── */
.chat-box {
height: 340px;
border: 1px solid #ffffff;
border-radius: 14px;
overflow-y: auto;
padding: 16px;
background: #beedc9;
display: flex;
flex-direction: column;
gap: 10px;
}

.msg-av { 
width: 30px;
height: 30Px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:13px;
font-weight: 600;
flex-shrink: 0;
position: relative;
text-transform: uppercase;
letter-spacing: .05em;
background:linear-gradient(135deg,#1a1f35,#2d1b69);
border: 1px solid rgb(92 246 118);
color:#8b5cf6;
animation:pulse-avatar 3s ease-in-out infinite; 
}

.msg-av.bot  { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.msg-av.user { background: rgba(255,255,255,0.08); }

.typing-dots span { display: inline-block; width: 5px; height: 5px; background: rgba(139,92,246,0.7); border-radius: 50%; margin: 0 2px; animation: bounce 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

.chat-input-row { display: flex; gap: 10px; margin-top: 16px; }
.chat-input {
flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px; padding: 10px 14px; color: #333;
font-size: 12px; outline: none; transition: all 0.2s;
}
.chat-input:focus { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.05); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
.chat-input::placeholder { color: #999 !important; }
.chat-send {
padding: 10px 20px; background: linear-gradient(135deg,#7c3aed,#5b21b6);
border: 1px solid rgba(139,92,246,0.4); border-radius: 10px; color: white;
font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.chat-send:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139,92,246,0.4); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.spin-ring { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; }

.ph-text {  font-size: 13.12px; color: rgba(226,232,240,0.25); text-align: center; margin: auto; }

.at-root{font-family:'Syne',sans-serif;background:#f4f6f9;min-height:100vh;padding:32px 24px;color:#333;position:relative;overflow:hidden}

.clear-btn{background:#440eaf;border:none;color:#fff;border-radius:10px;padding:5px 7px;font-size:13.6px;transition:all .2s}
.clear-btn:hover{background:#000}

.messages-container {
    flex: 1;
    overflow-y: scroll;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #d4edda;
    border: 3px solid #c8e6c9;
    border-radius: 10px;
    margin: 4px;
    scrollbar-width: thin;
    scrollbar-color: #f0f0f0;
    max-height: 400px;
    height: 380px;
}

.messages-container::-webkit-scrollbar{width:6px}
.messages-container::-webkit-scrollbar-track{background:#f0f0f0;border-radius:3px}
.messages-container::-webkit-scrollbar-thumb{background:#25d366;border-radius:3px}
.messages-container::-webkit-scrollbar-thumb:hover{background:#128c7e}

.message-bot,.message-user{
    display:flex;
    align-items:flex-end;
    gap:8px;
}

.message-user{
    flex-direction:row-reverse;
}

.message-bot .msg-avatar,.message-user .msg-avatar{display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.message-bot .msg-avatar{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.message-user .msg-avatar{background:#3c8dbc}

.message-user .message-bubble{display:inline-block;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-radius:18px 18px 4px 18px;color:#1b5e20;padding:9px 13px;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.message-bot .message-bubble{display:inline-block;background:#f3f4f6;border-radius:18px 18px 18px 4px;color:#1f2937;padding:9px 13px;box-shadow:0 1px 3px rgba(0,0,0,.1);}

.message-time{font-size:12px;color:#888;margin-top:6px;display:block}

.message-input-container{background:#fffff0;border-top:1px solid #e2e5ea;border-radius:0 0 20px 20px;padding:16px 20px}
.message-form{display:flex;gap:12px;align-items:center}
.message-input-pill{flex-grow:1;min-width:0;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #e2e5ea;border-radius:10px;padding:4px 8px 4px 6px;transition:all .2s}
.message-input-pill:focus-within{border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.message-input{flex:1;min-width:0;background:transparent;border:none;color:#111;padding:10px 6px;font-size:15.2px;outline:none;font-family:'Nunito',sans-serif}
.message-input::placeholder{color: #999 !important;}
.send-btn{background:#25d366;border:none;border-radius:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:opacity .2s,transform .15s;box-shadow:inset 0 0 8px rgba(0,0,0,.2),0 0 6px rgba(0,0,0,.15)}
.send-btn:hover{opacity:.88;transform:scale(1.06)}


/* ── Botões auxiliares (anexo / emoji / respostas rápidas) — dourados, como no widget do site ── */
.tool-btn{width:36px;height:36px;flex-shrink:0;background:#f5c518;border:none;color:#fff;font-size:16.8px;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;border-radius:10px;box-shadow:inset 0 0 8px rgba(0,0,0,.2),0 0 6px rgba(0,0,0,.15)}.tool-panel-search input{display:block;width:100%;background:#f4f6f9;border:1px solid transparent;border-radius:10px;padding:8px 14px;font-size:13.6px;color:#333;outline:none;font-family:'Syne',sans-serif}
.tool-panel-search input:focus{background:#fff;border-color:rgba(139,92,246,.4)}.tool-panel-tab.active{color:#8b5cf6;border-bottom-color:#8b5cf6}.emoji-item:hover{background:rgba(139,92,246,.2)}.qr-item:hover{background:rgba(139,92,246,.14)}
.qr-item-title{font-family:'Syne',sans-serif;font-size:13.6px;font-weight:600;color:#333}
.qr-item-msg{font-size:11.52px;color:#888;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-empty{padding:20px;text-align:center;font-size:12.8px;color:#888}

/* ── CONFIG FIELDS ── */
.config-field { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.config-field:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.config-value.mono {  color: #a78bfa; }
.config-value.prompt {
    background: rgb(6 76 1);
    border: 1px solid rgb(139 92 246);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    color: rgb(255 214 0);
    line-height: 1.7;
    max-height: 120px;
    overflow-y: auto;
    text-shadow: 1px 1px 0 #000000;
}

.config-item{margin-bottom:16px}
.config-label{font-size:13px;color:#ff0000;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;display:inline-flex}

.config-value {
    font-weight: 600;
    color: #000;
    font-size: 14px;
    background: antiquewhite;
    padding: 5px;
    border-radius: 10px;
    line-height: 1.4;
}
.badge-modern{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;font-size:12.8px;font-weight:600;border:1px solid rgba(0, 0, 0, .1)}
.badge-primary{background:rgba(139,92,246,.15);color:#8b5cf6;border-color:rgba(139,92,246,.3)}
.badge-success{background:rgba(20,184,166,.15);color:#14b8a6;border-color:rgba(20,184,166,.3)}
.badge-info{background:rgba(59,130,246,.15);color:#3b82f6;border-color:rgba(59,130,246,.3)}

.system-prompt {
    max-height: 200px;
    overflow-y: auto;
    background: rgb(255 223 223);
    border: 1px solid rgb(255 235 0);
    border-radius: 10px;
    padding: 16px;
    
    font-size: 13px;
    color: #000000;
    line-height: 1.5;
}
.channels-grid{display:flex;flex-wrap:wrap;gap:8px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-number{font-size:20.8px;font-weight:800;color:#8b5cf6}

.action-btn{width:auto;background:linear-gradient(135deg,var(--wa2),var(--wa));color:#fff;height:36px;border-radius:10px;padding:5px 7px;font-size:13px;font-weight:600;transition:all .2s;border:none;box-shadow:0 4px 15px rgba(0,0,0,.2); display: inline-flex;justify-content: space-around;align-items: center; gap: 6px;}
.action-btn:hover {transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.35);}
.action-btn-modern{background:linear-gradient(135deg,#4506d6,#0079eb);color:#fff;height:36px;border-radius:10px;padding:5px 7px;font-size:13px;font-weight:600;transition:all .2s;border:none;box-shadow:0 4px 15px rgba(0,0,0,.2); display: inline-flex;justify-content: space-around;align-items: center; gap: 6px;}
.action-btn-modern:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.3)}
.btn-primary-modern{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;height:36px;border-radius:10px;padding:5px 7px;font-size:13px;font-weight:600;transition:all .2s;border:none;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.btn-primary-modern:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.3);color: #00ffff;}
.btn-warning-modern{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;height:36px;border-radius:10px;padding:5px 7px;font-size:13px;font-weight:600;transition:all .2s;border:none;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.btn-warning-modern:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,.3);color: #000000;}
.btn-info-modern{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;height:36px;border-radius:10px;padding:5px 7px;font-size:13px;font-weight:600;transition:all .2s;border:none;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.btn-info-modern:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.3);color: #ffbf00;}

/* ── Suggestions ── */
.suggestions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:14px}
.suggestion-btn{background: rgb(139 92 246); color: #ffffff;border:1px solid rgba(0, 0, 0, .1);border-radius:10px;padding:12px;font-size:14.4px;transition:all .2s;text-align:left}
.suggestion-btn:hover{background:rgba(139,92,246,.15);color:#333;border-color:rgba(139,92,246,.4);transform:translateY(-1px);box-shadow:0 4px 15px rgba(139,92,246,.2)}

.text-center {
    text-align: left;
}
.text-right {
    text-align: right !important;
}

*{box-sizing:border-box;}
body, .content-wrapper, #app { background: var(--bg) !important; }

.cf-page { background:var(--bg); color:var(--txt); font-family:'Segoe UI',system-ui,sans-serif; font-size:13px; padding: 24px; min-height: 100vh; }

/* Header */
.cf-page-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--bdr); }
.cf-page-hdr h1 { font-size:22px; font-weight:600; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin:0; }

/* Layout */
.cf-layout { display:flex; gap:20px; align-items:flex-start; }
.cf-main { flex:1; min-width:0; }
.cf-aside { width:100%; flex-shrink:0; }

/* Tabs */
.doc-tabs { display:flex; gap:8px; margin-bottom:16px; }
.doc-tab { flex:1; padding:10px 14px; border:2px solid var(--bdr); border-radius:10px; background:var(--surf); color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; text-align:center; transition:all .25s; }
.doc-tab.active { border-color:var(--acc); color:var(--acc); background:rgba(0,198,255,.08); box-shadow:0 0 16px rgba(0,198,255,.15); }

/* Section */
.cf-sec { background:var(--surf); border:1px solid var(--bdr); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.cf-sh { background:var(--card); padding:9px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--bdr); font-weight:600; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--acc); cursor:pointer; }
.cf-sh .tog { margin-left:auto; transition:transform .25s; color:var(--muted); }
.cf-sec.col .tog { transform:rotate(-90deg); }
.cf-sec.col .cf-sb { display:none; }
.cf-sb { padding:14px 16px; }

/* Grid */
.cf-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.cf-row:last-child { margin-bottom:0; }
.cf-g { display:flex; flex-direction:column; flex:1; min-width:120px; }
.cf-g.w1{flex:0 0 calc(8.33% - 9px);}
.cf-g.w2{flex:0 0 calc(16.66% - 6px);}
.cf-g.w3{flex:0 0 calc(25% - 8px);}
.cf-g.w4{flex:0 0 calc(33.33% - 7px);}
.cf-g.w5{flex:0 0 calc(41.66% - 6px);}
.cf-g.w6{flex:0 0 calc(50% - 5px);}
.cf-g.w8{flex:0 0 calc(66.66% - 4px);}
.cf-g.w12{flex:0 0 100%;}

label { font-size:10px; font-weight:600; letter-spacing:.2px; text-transform:uppercase; margin-bottom:3px; display:inline-block; }
.req { color:var(--acc); margin-left:2px; }

.btn-group, .btn-group-vertical {
    margin-top: 7px !important;
}

.required { color:var(--acc); margin-left:2px; }

input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
    background: var(--card);
    border: 1.5px solid var(--bdr);
    border-radius: 8px;
    color: var(--txt);
    padding: 5px 7px;
    font-size: 12px;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    margin: auto;
}

input:focus, select:focus, textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,198,255,.1); background:#fff; }
input.valid { border-color:var(--ok) !important; }
input.invalid { border-color:var(--err) !important; }
select option { background:#e2f0ff; }

.iw { position:relative; display:flex; align-items:center; }
.iw input, .iw select { padding-left:36px; }
.iw .ico { position:absolute; left:11px; color:var(--muted); font-size:13px; pointer-events:none; z-index:1; transition:color .2s; }
.iw:focus-within .ico { color:var(--acc); }
.iw .suf { position:absolute; right:5px; background:var(--grad); border:none; border-radius:6px; color:#fff; font-size:11px; font-weight:600; padding:4px 9px; cursor:pointer; transition:opacity .2s; }
.iw .suf:hover { opacity:.85; }

.doc-st { font-size:11px; margin-top:3px; min-height:15px; display:flex; align-items:center; gap:4px; }
.doc-st.ok { color:var(--ok); }
.doc-st.err { color:var(--err); }
.doc-st.loading { color:var(--acc); }
.cep-st { font-size:11px; margin-top:3px; min-height:15px; color:var(--muted); }

.pills { display:flex; gap:7px; flex-wrap:wrap; }
.pill { padding:5px 13px; border-radius:10px; border:1.5px solid var(--bdr); background:var(--card); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.pill.active { border-color:var(--acc); color:var(--acc); background:rgba(0,198,255,.1); }

.chk-wrap { display:flex; align-items:center; gap:10px; background:rgba(0,198,255,.06); border:1.5px solid rgba(0,198,255,.2); border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .2s; user-select:none; }
.chk-wrap:hover { border-color:var(--acc); }
.chk-wrap input[type=checkbox] { width:17px; height:17px; accent-color:var(--acc); cursor:pointer; min-width:17px; margin:0; }
.chk-wrap span { font-size:12px; font-weight:600; color:var(--acc); }

/* Footer */
.cf-ftr { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--bdr); }
.btn-c { background:transparent; border:1.5px solid var(--bdr); color:var(--muted); border-radius:9px; padding:10px 24px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn-c:hover { border-color:var(--err); color:var(--err); text-decoration:none; }
.btn-s { background:var(--grad); border:none; border-radius:9px; color:#fff; padding:10px 28px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s; display:inline-flex; align-items:center; gap:8px; }
.btn-s:hover { opacity:.88; }

/* Aside card */
.aside-card { background:var(--surf); border:1px solid var(--bdr); border-radius:10px; overflow:hidden; margin-bottom:16px; position:sticky; top:20px; }
.aside-card-hdr { background:var(--card); padding:10px 16px; border-bottom:1px solid var(--bdr); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:8px; }
.aside-card-body { padding:16px; }
.type-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.type-item:last-child { margin-bottom:0; }
.type-dot { width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.type-label { font-size:12px; font-weight:600; color:var(--txt); margin-bottom:2px; }
.type-desc { font-size:11px; color:var(--muted); line-height:1.4; }

#map_link_entrega { display:none; margin-left:auto; font-size:12px; font-weight:600; color:var(--acc); text-decoration:none; white-space:nowrap; border:1px solid var(--acc); border-radius:6px; padding:3px 10px; transition:background .2s, color .2s; }
#map_link_entrega:hover { background:var(--acc); color:#0f1923; }
#del_fields { display:block !important; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; }


.at-root {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ── */
.at-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.at-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:18px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: linear-gradient(135deg, #00e7ff, #b29bff);
    border: 1px solid rgb(92 246 118);
    color:#8b5cf6;
    animation: pulse-av 3s ease-in-out infinite;
}

.at-title h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    background:linear-gradient(135deg,var(--text),var(--purple));
    -webkit-background-clip:text;
    -webkit-text-fill-color:#b400ff;
    background-clip:text;
    line-height:1.1;
    margin: 0;
}

.at-title p {
    
    font-size: 14px;
    color: #2900ff;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 2px;
}

.filters-stack{display:block !important}
.filters-stack .filters-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-areas:
        "search search search search"
        "status sentiment resolved reset";
}
.filters-stack #searchConversations{grid-area:search;padding:5px 10px;font-size:16px}
.filters-stack #statusFilter{grid-area:status}
.filters-stack #sentimentFilter{grid-area:sentiment}
.filters-stack #resolvedFilter{grid-area:resolved}
.filters-stack #resetFilters{grid-area:reset}
@media(max-width:768px){
    .filters-stack .filters-grid{
        grid-template-columns:1fr;
        grid-template-areas:"search" "status" "sentiment" "resolved" "reset";
    }
}


/* ── Table Container ── */
.table-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
    border-top: 4px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(90deg, #8b5cf6, #7c3aed);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* ── Custom Table ── */
.custom-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    font-size: 15.2px;
}

.custom-table thead th {
    background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(124, 58, 237, .08));
    color: #333;
    font-weight: 600;
    padding: 20px 24px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13.6px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.custom-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    transition: all .2s;
}

.custom-table tbody tr:hover {
    background: rgba(139, 92, 246, .05);
    transform: scale(1.01);
}

.custom-table td {
    padding: 20px 24px;
    vertical-align: middle;
    color: #333;
}

/* ── Status Badges ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 100px;
    
    font-size: 13px;
    font-weight: 600;
}

.badge-success {
    background: rgba(20, 184, 166, .15);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, .3);
}

.badge-warning {
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, .3);
}

.badge-danger {
    background: rgba(239, 68, 68, .15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .3);
}

.badge-secondary {
    background: rgba(107, 114, 128, .15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, .3);
}

.badge-light {
    background: rgb(0 0 0 / 7%);
    color: #000000;
    border: 1px solid rgba(161, 141, 125, 0.15);
}

/* ── Progress Bar ── */
.custom-progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
    min-width: 70px;
}

.custom-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .3s ease;
    position: relative;
    overflow: hidden;
}

.custom-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3), transparent);
    animation: shimmer 2s infinite;
}

/* ── Action Buttons ── */
.action-group {
    display: flex;
    gap: 8px;
}

.actions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.btn-info-custom {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 15px rgba(139, 92, 246, .3);
}

.btn-info-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, .4);
}

.btn-warning-custom {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, .3);
}

.btn-warning-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, .4);
}

.btn-danger-custom {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, .3);
}

.btn-danger-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, .4);
}

/* ── Empty ── */
.empty-state {
    padding: 24px 22px;
    text-align: center;
    background: #ffffff;
    border: 2px dashed rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin: 3px 0;
}

.empty-icon {
    font-size: 44px;
    color: #8403fc;
    margin-bottom: 24px;
    display: block;
}

.empty-title {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    margin-bottom: 16px;
}

.empty-subtitle{font-size:13px;color:#888;margin-bottom:20px}
 
.empty-cta{display:inline-flex;padding:14px 28px;background:linear-gradient(135deg,#7c3aed,#5b21b6);border:1px solid rgba(139,92,246,.4);border-radius:10px;color:#fff;font-family:'Syne',sans-serif;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s}
.empty-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(139,92,246,.4)}
.empty-sub { font-size: 13.6px; color: var(--muted); }
.empty-sub a { color: var(--accent-lt); text-decoration: none; }
.empty-sub a:hover { text-decoration: underline; }
.empty-text {  font-size: 13.6px; color: rgba(226,232,240,0.3); }

/* ── Pagination ── */
.custom-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    padding: 24px;
}

.custom-pagination a, .custom-pagination span {
    padding: 10px 16px;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    
    font-size: 14.4px;
    transition: all .2s;
}

.custom-pagination a:hover {
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .3);
    color: #8b5cf6;
    transform: translateY(-1px);
}

.custom-pagination .active a {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: rgba(139, 92, 246, .5);
    color: #fff;
}

.pagination{display:flex;justify-content:center;gap:6px;list-style:none;padding:0}
.pagination li a,.pagination li span{padding: 3px 5px;background: rgb(70 0 207);border: 1px solid rgb(181 158 0) !important;border-radius: 10px;color: #f6f2ff;text-decoration:none;font-size: 13px;transition:all .2s;display:flex;align-items:center;justify-content:center;min-width: 26px;height: 26px;}
.pagination li a:hover{background:rgba(0, 0, 0, .12);color:#333;border-color:rgba(139,92,246,.4);transform:translateY(-1px)}
.pagination li.active a{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:rgba(139,92,246,.5);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.3)}

.pagination-container { display: flex; justify-content: center; padding: 24px; margin-top:22px;}
.pagination-container .pagination { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pagination-container .pagination li a,
.pagination-container .pagination li span {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--glass); border: 1px solid var(--border);
    color: var(--muted); font-family: var(--mono); font-size: 14.08px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .18s;
}
.pagination-container .pagination li a:hover,
.pagination-container .pagination li.active span {
    background: rgba(0, 255, 136, .08);
    border-color: rgba(0, 255, 136, .3);
    color: var(--accent);
}


/* ── Sidebar (Informações) ── */
.chat-sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--sidebar-bg);
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.contact-header {
    background: var(--wa-dark);
    color: #fff;
    padding: 20px 16px;
    text-align: center;
}

.sidebar-section {
    padding: 12px 10px;
    border-bottom: 1px solid #007fff;
}

.sidebar-section h6 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    margin-bottom: 8px;
}

/* ── Chat Main ── */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msg-row {
    display: flex;
    margin-bottom: 18px;
    align-items: flex-end;
}

.msg-row.outgoing {
    justify-content: end;
}

.msg-bubble {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.msg-row.incoming .msg-bubble {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #1b5e20;
    border-radius: 10px 10px 10px 4px;
}

.msg-row.outgoing .msg-bubble {
    background: #f3f4f6;
    color: #1f2937;
    border-radius: 10px 10px 4px 10px;
}

.msg-time {
    font-size: 12px;
    color: #999;
    margin-left: 8px;
    margin-bottom: 2px;
    font-weight: 500;
}

.msg-status {
    font-size: 12px;
    margin-left: 4px;
}

.msg-status.read {
    color: #53bdeb;
}

/* Data separator */
.date-sep {
    text-align: center;
    margin: 24px 0;
}

.date-sep span {
    background: rgba(255,255,255,.75);
    padding: 4px 12px;
    border-radius:10px;
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

/* ── Input estilo widget do site ── */
.chat-input-area {
    background: #fffff0;
    padding: 8px 10px 4px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border-top: 1px solid #e2e5ea;
}

.chat-input-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 4px 8px 4px 4px;
}

.chat-input-pill:focus-within {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(37,211,102,.15);
}

.chat-input-box {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 10px 6px;
    font-size: 13px;
    resize: none;
    outline: none;
    max-height: 120px;
    overflow-y: auto;
    font-family: 'Nunito', sans-serif;
}

.send-btn {
    width: auto;
    padding: 3px 5px !important;
    border-radius: 7px;
    background: var(--wa-green);
    border: none;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .2s, transform .15s;
    box-shadow: inset 0 0 8px rgba(0,0,0,.2), 0 0 6px rgba(0,0,0,.15);
}

.send-btn:hover {
    opacity: .88;
    transform: scale(1.06);
}

/* ── Botões auxiliares (anexo / emoji / respostas rápidas) — dourados, como no widget do site ── */
.tool-btn{width:36px;height:36px;flex-shrink:0;background:#f5c518;border:none;color:#fff;font-size:16px;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:2px;box-shadow:inset 0 0 8px rgba(0,0,0,.2),0 0 6px rgba(0,0,0,.15)}    .tool-panel-search input{display:block;width:100%;background:#f0f2f5;border:1px solid transparent;border-radius:10px;padding:8px 14px;font-size:13.6px;color:#333;outline:none}
.tool-panel-search input:focus{background:#fff;border-color:rgba(37,211,102,.4)}    .tool-panel-tab.active{color:var(--wa-dark);border-bottom-color:var(--wa-green)}    .emoji-item:hover{background:rgba(37,211,102,.15)}    .qr-item:hover{background:rgba(37,211,102,.1)}
.qr-item-title{font-size:13.6px;font-weight:600;color:#333}
.qr-item-msg{font-size:11.52px;color:#888;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-empty{padding:20px;text-align:center;font-size:12.8px;color:#888}

/* Status badges */
.status-active {
    background: rgba(37,211,102,.15);
    color: var(--wa-dark);
}

.status-closed {
    background: #f8d7da;
    color: #721c24;
}

/* Cards da sidebar com estilo WhatsApp */
.sidebar-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    overflow: hidden;
    margin-bottom: 12px;
    background:#fff;
    border:0.5px solid #e5e5e5;
    border-radius:10px;
}

.sidebar-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 16px;
    font-weight: 600;
    color: #495057;
    font-size: 15.2px;
}

.sidebar-card:last-child{margin-bottom:0}
.sidebar-head{padding:12px 16px;border-bottom:0.5px solid #e5e5e5;font-size:13px;font-weight:500;color:#1a1a1a;display:flex;align-items:center;gap:6px}
.sidebar-head svg{width:14px;height:14px;stroke:#888;fill:none;stroke-width:2}
.sidebar-body{padding:12px}


.sidebar-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 16px;
}

.sidebar-card .card-body {
    padding: 16px;
}

.sidebar-card .btn {
    border-radius: 8px;
    font-weight: 500;
}
.sidebar-card-header{background:#f8f9fa;border-bottom:1px solid rgba(0, 0, 0, .08);padding:20px 24px}
.sidebar-card-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:#333;margin:0;font-family:'Syne',sans-serif}
.sidebar-card-body{padding:24px}

.crm-root {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
    position: relative;
    z-index: 1;
}

/* ── Header ── */
.crm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.crm-brand { display: flex; align-items: center; gap: 20px; }

.crm-avatar {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 255, 136, .15), rgba(0, 184, 255, .08));
    border: 1px solid var(--border-hot);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    animation: avatar-pulse 3s ease-in-out infinite;
}

.crm-title h1 {
    font-size: 32px; font-weight: 600;
    letter-spacing: -.04em; color: #333; line-height: 1;
}

.crm-subtitle {
    font-family: var(--mono); font-size: 12.48px; color: var(--accent);
    letter-spacing: .12em; text-transform: uppercase; margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
}

.pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    animation: blink 1.4s ease-in-out infinite;
}

.back-btn {
    width: auto;
    display: flex; align-items: center; 
    gap: 8px;
    background: var(--glass); 
    border: 1px solid var(--border);
    border-radius:7px; 
    padding: 3px 5px !important;
    color: var(--muted); 
    font-size: 10px; 
    font-weight: 600;
    font-family: var(--mono); 
    text-decoration: none; 
    transition: all .2s;
}

.back-btn:hover {
    background:#ffb100;
    border-color: var(--border-hot);
    color: var(--accent);
}

/* ── Stats ── */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px 20px;
    position: relative; overflow: hidden; transition: border-color .2s;
}

.stat-card:hover { border-color: rgba(0, 0, 0, .12); }

.stat-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    border-radius: 2px 2px 0 0;
}

.stat-card.s-green::before  { background: linear-gradient(90deg, var(--accent), transparent); }
.stat-card.s-yellow::before { background: linear-gradient(90deg, var(--yellow), transparent); }
.stat-card.s-blue::before   { background: linear-gradient(90deg, var(--accent2), transparent); }
.stat-card.s-red::before    { background: linear-gradient(90deg, var(--red), transparent); }

.stat-label {
    font-family: var(--mono); font-size: 11.52px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}

.stat-val {
    font-size: 28px; font-weight: 600;
    letter-spacing: -.03em; color: #333; line-height: 1;
}

.stat-sub { font-size: 12.8px; color: var(--muted); margin-top: 4px; }

.filters-title{font-size:18.4px;font-weight:800;color:#333;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}

/* ── Filters Section ── */
.filters-section {
    background: var(--panel); 
    border: 1px solid var(--border);
    border-radius: 10px; 
    padding: 20px; 
    margin-bottom: 14px;
    display: flex; 
    align-items: center; 
    gap: 6px; 
    flex-wrap: wrap;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.filter-input, .filter-select {
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius:10px;
    color: #333;
    padding: 3px 7px;
    font-size: 14px;
    transition: all .2s;
    appearance: none; -webkit-appearance: none;
}

.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, .5);
    background: rgba(139, 92, 246, .05);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
}

.filter-input::placeholder {
    color: #999 !important;
}

.filter-select option { background: #fff; color: #333; }
.filter-btn {
    width: auto;
    padding: 3px 5px !important;
    border: 1px solid rgba(0, 0, 0);
    border-radius:7px;
    color: #00ff00;
    
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s;
    border: none;
    cursor: pointer;
    background: #000;
}

.filter-btn:hover {
    background: #0000ff; 
    color: #fff;
    transform: translateY(-1px);
}

/* ── Filter bar ──────────────────────────────── */
.filter-card {
    background: var(--glass); border: 1px solid var(--border);
    border-radius: 16px; padding: 16px 22.4px;
    margin-bottom: 24px; backdrop-filter: blur(12px);
}
.filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 12px; align-items: center;
}
/* ── Filters ── */
.filter-tag {
    font-family: var(--mono); font-size: 11.52px; color: var(--accent);
    text-transform: uppercase; letter-spacing: .08em;
    margin-right: 4px; white-space: nowrap;
}

.reset-btn {
    background: rgba(255, 51, 85); 
    border: 1px solid rgba(255, 51, 85, .2);
    border-radius: 10px; padding: 9px 16px; color: var(--red);
    font-family: var(--mono); font-size: 12.48px;
    cursor: pointer; white-space: nowrap; transition: all .2s;
}

.reset-btn:hover { background: rgba(255, 51, 85, .15); border-color: rgba(255, 51, 85, .4); }

/* ── Table Container ── */
.table-container {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
}

.table-container.table-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.table-container.table-scroll .custom-table{min-width:900px}

.table-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: rgba(0, 255, 136, .02);
}

.table-header-left { display: flex; align-items: center; gap: 12px; }
.table-title { font-size: 16px; font-weight: 600; color: #333; }

.count-badge {
    background: rgba(0, 255, 136, .1); border: 1px solid rgba(0, 255, 136, .2);
    color: var(--accent); font-family: var(--mono); font-size: 12.48px;
    padding: 3px 10px; border-radius: 100px;
}

/* ── Table ── */
.custom-table { width: 100%; border-collapse: collapse; font-size: 14.72px; margin: 0; }

.custom-table thead th {
    padding: 16px 20px; font-family: var(--mono); font-size: 11.52px;
    text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
    font-weight: 500; border-bottom: 1px solid var(--border);
    text-align: left; white-space: nowrap; background: transparent;
}

.custom-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    transition: all .18s; cursor: pointer;
}

.custom-table tbody tr:hover { background: rgba(0, 255, 136, .03); }
.custom-table tbody tr:hover .phone-val { color: var(--accent); }
.custom-table tbody tr:last-child { border-bottom: none; }

.custom-table td { padding: 15.2px 20px; vertical-align: middle; color: var(--text); border: none; }

.phone-val { font-family: var(--mono); font-weight: 500; font-size: 14.72px; color: var(--text); transition: color .15s; }
.contact-link { color: var(--accent2); text-decoration: none; font-weight: 500; font-size: 14.4px; transition: color .15s; }
.contact-link:hover { color: #3c8dbc; }
.contact-none { color: var(--muted); font-size: 14.08px; }
.time-val { font-family: var(--mono); font-size: 13.12px; color: var(--muted); }
.instance-val { font-family: var(--mono); font-size: 12.8px; color: rgba(0, 184, 255, .8); }
.user-val { font-size: 14.08px; color: var(--muted); }

/* ── Status Badges ── */
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }

.badge-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.badge-pending { background: rgba(255, 215, 0, .1); color: var(--yellow); border: 1px solid rgba(255, 215, 0, .25); }
.badge-pending .badge-dot { background: var(--yellow); animation: blink 1.2s infinite; }

/* ════════════════════════════════════════════════════
   MODAL — ATRIBUIÇÃO DE ATENDENTE
   ════════════════════════════════════════════════════ */
.assign-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.assign-overlay.open { display: flex; }

.assign-modal {
    background: #ffffff;
    border: 1px solid rgba(255, 215, 0, .18);
    border-radius: 22px;
    width: 100%; max-width: 560px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .85), 0 0 60px rgba(255, 215, 0, .04);
    animation: modal-in .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* Modal header */
.modal-hdr {
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: linear-gradient(135deg, rgba(255, 215, 0, .05), rgba(255, 163, 0, .02));
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}

.modal-hdr-left { display: flex; align-items: center; gap: 14px; }

.modal-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: rgba(255, 215, 0, .1);
    border: 1px solid rgba(255, 215, 0, .22);
    display: flex; align-items: center; justify-content: center;
    font-size: 20.8px; flex-shrink: 0;
    animation: icon-glow 3s ease-in-out infinite;
}

.modal-hdr-text h3 { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }

.modal-hdr-text p {
    font-family: var(--mono); font-size: 14.4px;
    color: var(--muted); letter-spacing: .05em;
}

.modal-close {
    background: rgba(0, 0, 0, .04);
    border: 1px solid var(--border); border-radius: 9px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12px;
    cursor: pointer; transition: all .18s; flex-shrink: 0;
}

.modal-close:hover { background: rgba(255, 51, 85, .1); border-color: rgba(255, 51, 85, .3); color: var(--red); }

/* Busca */
.modal-search-wrap {
    padding: 17.6px 28px 12.8px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    position: relative;
}

.modal-search-wrap::before {
    content: '\f002';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: calc(28px + 13px);
    top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 13px;
    pointer-events: none;
}

.modal-search {
    width: 100%;
    background: rgba(0, 0, 0, .04);
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); padding: 10px 14px 10px 36px;
    font-size: 12px; font-family: var(--font);
    outline: none; transition: all .2s;
}

.modal-search:focus {
    border-color: rgba(255, 215, 0, .3);
    background: rgba(255, 215, 0, .03);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, .06);
}

.modal-search::placeholder { color: #999 !important; }

/* Legenda */
.modal-legend {
    padding: 9.6px 28px;
    display: flex; align-items: center; gap: 24px;
    font-family: var(--mono); font-size: 14.4px;
    color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    background: rgba(0, 0, 0, .01);
}

.legend-item { display: flex; align-items: center; gap: 6px; }

.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-dot.is-open   { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.legend-dot.is-closed { background: #4b5563; }

/* Lista */
.modal-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, .18) transparent;
}

.modal-list::-webkit-scrollbar { width: 4px; }
.modal-list::-webkit-scrollbar-track { background: transparent; }
.modal-list::-webkit-scrollbar-thumb { background: rgba(255, 215, 0, .18); border-radius: 4px; }

/* Separador */
.att-separator {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(232, 244, 248, .22);
    margin: 4px 0;
}

.att-separator::before,
.att-separator::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(0, 0, 0, .05);
}

/* Card do atendente */
.attendant-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 13px;
    border: 1px solid transparent;
    cursor: pointer; transition: all .18s;
    margin-bottom: 4px;
}

.attendant-card:last-child { margin-bottom: 0; }

.attendant-card.is-open {
    background: rgba(0, 255, 136, .03);
    border-color: rgba(0, 255, 136, .1);
}

.attendant-card.is-open:hover {
    background: rgba(0, 255, 136, .07);
    border-color: rgba(0, 255, 136, .28);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 255, 136, .08);
}

.attendant-card.is-closed {
    background: rgba(0, 0, 0, .015);
    border-color: rgba(0, 0, 0, .05);
    opacity: .65;
}

.attendant-card.is-closed:hover {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .1);
    opacity: .85;
    transform: translateX(5px);
}

/* Avatar */
.att-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:18px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .05em;
    background:linear-gradient(135deg,#1a1f35,#2d1b69);
    border: 1px solid rgb(92 246 118);
    color:#8b5cf6;
    animation:pulse-avatar 3s ease-in-out infinite; 
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:18px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .05em;
    background:linear-gradient(135deg,#1a1f35,#2d1b69);
    border: 1px solid rgb(92 246 118);
    color:#8b5cf6;
    animation:pulse-avatar 3s ease-in-out infinite; 
}


.cb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:18px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .05em;
    background:linear-gradient(135deg,#1a1f35,#2d1b69);
    border: 1px solid rgb(92 246 118);
    color:#8b5cf6;
    animation:pulse-avatar 3s ease-in-out infinite; 
}

.att-avatar.is-open {
    background: rgba(0, 255, 136, .1); color: var(--accent);
    border: 1px solid rgba(0, 255, 136, .22);
}

.att-avatar.is-closed {
    background: rgba(107, 114, 128, .1); color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, .18);
}

.att-avatar::after {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 11px; height: 11px;
    border-radius: 50%; border: 2px solid #07091a;
}

.att-avatar.is-open::after  { background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.att-avatar.is-closed::after { background: #4b5563; }

/* Info */
.att-info {
    flex: 1;
    min-width: 0;
    padding: 5px;
}

.att-name {
    font-size: 12px; font-weight: 600; color: #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}

.att-email {font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right side */
.att-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }

.att-status-badge {
    font-family: var(--mono); font-size: 10.88px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 9px; border-radius: 100px;
}

.att-status-badge.open   { background: rgba(0, 255, 136, .1); color: var(--accent); border: 1px solid rgba(0, 255, 136, .22); }
.att-status-badge.closed { background: rgba(107, 114, 128, .1); color: #9ca3af; border: 1px solid rgba(107, 114, 128, .18); }

.att-tz{font-size: 12px;margin-top:3px}

/* Empty */
.modal-empty {
    padding: 40px 16px; text-align: center;
    color: var(--muted); font-size: 14.4px;
}

.modal-empty i { display: block; font-size: 35.2px; margin-bottom: 12px; opacity: .25; }

/* Loading */
.modal-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 16px; gap: 12px;
    color: var(--muted); font-family: var(--mono); font-size: 13.6px;
}

.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255, 215, 0, .15);
    border-top-color: var(--yellow);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* Footer */
.modal-footer {
    padding: 16px 28px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: rgba(0, 0, 0, .01);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.modal-footer-info { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.modal-footer-info .open-num { color: var(--accent); font-weight: 600; }

.modal-cancel {
    background: rgba(0, 0, 0, .05); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 18px;
    color: var(--muted); font-family: var(--mono); font-size: 13px;
    cursor: pointer; transition: all .2s;
}

.modal-cancel:hover { background: rgba(0, 0, 0, .09); color: var(--text); }

.chat-wrapper { height: calc(100vh - 160px); display: flex; gap: 0; border-radius:10px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.12); }

/* ── Sidebar ── */
.chat-sidebar { 
    width: 300px;
    min-width: 300px;
    background: var(--sidebar-bg);
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
    
.chat-sidebar .contact-header { 
    color:#fff;
    border-radius:10px 20px 0 0;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: var(--wa-dark);
    background-size:200% 200%;
    box-shadow:inset 0 0 1em #000,0 0 1em #000;
    text-shadow:1px 1px 0 red;
    gap: 10px;
    background-size: 200% 200%;
}

/* Info rows */
 .info-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e8eaf0 !important;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 5px;
    gap: 10px;
    padding: 10px;
    height: 40px;
}

.info-row span:first-child {
    color: #6c757d;
}

.info-row:last-child{
    border-bottom:none;
    padding-bottom:0
}

.info-lbl {
    
    font-size: 12px;
    color: rgba(253, 177, 0, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 130px;
    padding-top: 4px;
    font-weight: 600;
    height: 36px;
}
.info-val{font-size:15px;color:#f8fafc;font-weight:600;line-height:1.4}
.info-mono{font-size:13px;color:rgba(226,232,240,0.85);font-weight:500}
 
/* Mensagens */
.msg-row { display: flex; margin-bottom: 6px; }    

.msg-row.incoming .msg-bubble { background: var(--bubble-in); border-top-left-radius: 2px; }
.msg-row.outgoing .msg-bubble { background: var(--bubble-out); border-top-right-radius: 2px; }
.msg-time { font-size: 12px; color: #999; margin-top: 2px; text-align: right; }
.msg-status { font-size: 12px; margin-left: 4px; }
/* Data separator */
.date-sep { text-align: center; margin: 12px 0; }
.date-sep span { background: rgba(255,255,255,.75); padding: 3px 10px; border-radius: 8px; font-size: 13px; color: #555; }

/* Input */
.chat-input-area { background: #f0f0f0; padding: 10px 16px; display: flex; align-items: flex-end; gap: 10px; border-top: 1px solid #dee2e6; }
.chat-input-box { flex: 1; background: #fff; border: none; border-radius: 24px; padding: 10px 16px; font-size: 13px; resize: none; outline: none; max-height: 120px; overflow-y: auto; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--wa-green); border: none; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.send-btn:hover { background: var(--wa-dark); }
.attach-btn { width: auto; padding: 3px 5px !important; border-radius: 50%; background: none; border: none; color: #6c757d; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.attach-btn:hover { color: var(--wa-dark); }

/* Typing indicator */
.typing { display: none; padding: 6px 16px; font-size: 16px; color: #6c757d; }
.typing.show { display: block; }

.at-root{max-width:1400px;margin:0 auto}

/* Canvas */
#bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Header */
.instance-filter{max-width:300px}

/* Glass Panels */
.panel-dot{width:10px;height:10px;border-radius:50%;background:var(--purple);box-shadow:0 0 15px var(--purple);animation:pulse-dot 2s infinite}

/* Form Elements */

.search-wrap{position:relative}
.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--purple-glow);font-size:13px;pointer-events:none}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}

/* Conversation Cards */
.conversation-card{background:rgba(0, 0, 0, .02);border:1px solid rgba(0, 0, 0, .08);border-radius:10px;padding:32px;cursor:pointer;transition:all .4s;display:flex;flex-direction:column;gap:24px;margin-bottom:24px;overflow:hidden;position:relative}
.conversation-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),transparent)}
.conversation-card:hover{background:rgba(139,92,246,.12);border-color:var(--purple);transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 40px var(--purple-glow)}
.conv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.conv-phone{font-size:24.8px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.conv-contact{font-size:13px;color:var(--text-sec);margin-top:4px;font-family:'DM Mono',monospace}
.conv-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:15.2px;color:var(--text-sec)}

.badge-pending{background:rgba(253,177,0,.2);color:var(--orange);border:1px solid rgba(253,177,0,.4)}
.conv-actions{display:flex;gap:12px;align-items:center;margin-top:auto}

/* Container principal */
.whatsapp-chat-container {
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    border-radius:10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    background: var(--chat-bg);
}

/* ── Header da página ── */
.chat-page-header {
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
}

/* ── Chat Wrapper ── */
.chat-wrapper { 
    height: calc(100vh - 200px); 
    display: flex; 
    gap: 0; 
    border-radius:10px; 
    overflow: hidden; 
    box-shadow: 0 4px 24px rgba(0,0,0,.12); 
}

/* ── Sidebar ── */
.chat-sidebar { 
    width: 320px; 
    min-width: 320px; 
    background: var(--sidebar-bg); 
    border-right: 1px solid #dee2e6; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
}    

.action-btn i { 
    width: 20px; 
    margin-right: 8px;
}    

/* Mensagens */
.chat-messages { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px; 
    background: #d4edda url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e9ebee' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM0 24v-2h4v2h2v4H4v-4H0zm0 10v-4h2v4h4v2H2v-2H0zm14 0v-4h2v4h4v2h-4v-2h-2zm-4-10v-2h4v2h2v4h-2v-2h-4v-4h-2zm14 10v-4h2v4h4v2h-4v-2h-2zM14 14l1.1 4.7H9.9L11 14H9l-1.5 6.4h3.4L14 24h2l-1.5-6.4h3.4L19 14h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
    background-size: 60px 60px;
}

.chat-messages {
    border: 3px solid #c8e6c9;
    border-radius: 10px;
    margin: 4px;
}

/* Scrollbar customizada */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.3);
}


.msg-row { 
    display: flex; 
    margin-bottom: 16px; 
}    
.msg-bubble { 
    max-width: 68%; 
    padding: 9px 13px;
    border-radius: 8px; 
    font-size: 13px; 
    line-height: 1.4; 
    position: relative; 
    word-break: break-word; 
    box-shadow: 0 1px 2px rgba(0,0,0,.13); 
}

.msg-row.incoming .msg-bubble { 
    background: var(--bubble-in); 
    border-top-left-radius: 2px; 
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
}

.msg-row.outgoing .msg-bubble { 
    background: var(--bubble-out); 
    border-top-right-radius: 2px; 
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.msg-time { 
    font-size: 13.6px; 
    color: #999; 
    margin-top: 2px; 
    text-align: right; 
}

.msg-status { 
    font-size: 13.6px; 
    margin-left: 4px; 
}
/* Data separator */
.date-sep { 
    text-align: center; 
    margin: 24px 0; 
}

.date-sep span { 
    background: rgba(255,255,255,.75); 
    padding: 4px 12px; 
    border-radius:10px; 
    font-size: 14.4px; 
    color: #555; 
}

/* Input */
.chat-input-area { 
    background: #f0f0f0; 
    padding: 12px 16px; 
    display: flex; 
    align-items: flex-end; 
    gap: 10px; 
    border-top: 1px solid #dee2e6; 
}

.chat-input-box { 
    flex: 1; 
    background: #fff; 
    border: none; 
    border-radius: 24px; 
    padding: 12px 20px; 
    font-size: 16px; 
    resize: none; 
    outline: none; 
    max-height: 120px; 
    overflow-y: auto; 
    box-shadow: 0 1px 3px rgba(0,0,0,.1); 
}

.send-btn { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    background: var(--wa-green); 
    border: none; 
    color: #fff; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    flex-shrink: 0; 
    transition: background .2s; 
}

.send-btn:hover { 
    background: var(--wa-dark); 
}

.deal-bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.deal-bg::before {
    content: '';
    position: absolute;
    top: -200px; left: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
    animation: drift1 12s ease-in-out infinite alternate;
}
.deal-bg::after {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
    animation: drift2 15s ease-in-out infinite alternate;
}

.page-wrapper {
    position: relative; z-index: 1;
    padding: 40px 32px;
    max-width: 1200px; margin: 0 auto;
    animation: fadeUp 0.6s ease both;
}

 /* ── Page header ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 10px;
    position: relative;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-top: 5px solid !important;
    border: 4px solid rgba(0, 0, 0, 0.125);
    border-radius: 10px;
    background: linear-gradient(180deg, #fffff0, #ffffff) !important;
    box-shadow: inset 0 0 1em #fffff0, 0 0 5px #000000 !important;
    width: 99%;
    margin: 3px auto;
    gap: 14px;
    animation: heroIn .7s cubic-bezier(.16, 1, .3, 1) both;
    flex-wrap: wrap;
}

.page-header:hover { border-top-color: #249907 !important; }
.page-title-group { display: flex; align-items: center; gap: 20px; }
.page-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22.4px; color: #fff;
    box-shadow: 0 8px 32px rgba(124,58,237,0.4);
}
.page-title {
    font-size: 28.8px; font-weight: 800;
    color: #fff; margin: 0;
    letter-spacing: -0.03em;
}
.page-title span { color: var(--accent2); }
.page-subtitle { color: var(--muted); font-size: 13.6px; margin: 3.2px 0 0; }

.btn-back { 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius:7px;
    padding: 3px 5px !important;
    font-size:10px;
    font-weight:600; 
    text-decoration:none; 
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.btn-back:hover { border-color: var(--accent); color: #00ff0a; text-decoration: none; }

/* Layout */
.form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

/* Cards */
.glass-card {
    background: #7100d5;
    border: 1px solid rgb(197 0 0);
    border-radius: 10px;
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.glass-card:hover { border-color: rgba(124,58,237,0.25); }

 .glass-card { background: var(--glass); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; animation: fadeUp 0.5s ease both; }

.card-head {
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.card-head-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.8px; color: #fff;
}
.card-head-title {
    font-weight: 600; font-size: 15.2px; color: #fff; margin: 0;
}
.card-body-inner { padding: 28px; }

/* Form Fields */
.field-group { margin-bottom: 24px; position: relative; }
.field-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.8px; font-weight: 500; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin-bottom: 9.6px;
}

.field-input {
    font-family: 'DM Sans', sans-serif !important;
    transition: all 0.2s ease !important;
    -webkit-appearance: none;
    width: 98%;
    background: #03265a !important;
    border: 1px solid #9100ff !important;
    border-radius: 8px !important;
    color: #ffffff;
    padding: 5px 7px !important;
    font-size: 13px !important;
    height: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: none;
}
.field-input::placeholder { color: #999 !important; }
.field-input:focus {
    border-color: var(--accent) !important;
    background: #03265a !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}
.field-input option { background: #1a1a2e; color: var(--text); }
.field-input.is-invalid { border-color: #ef4444 !important; }
.invalid-feedback { color: #ef4444; font-size: 12.8px; margin-top: 6.4px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

textarea.field-input { resize: vertical; min-height: 90px; }

/* Sidebar tips */
.tips-list { list-style: none; padding: 0; margin: 0; }
.tips-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13.6px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeUp 0.5s ease both;
}
.tips-list li:last-child { border-bottom: none; }
.tips-list li:nth-child(1) { animation-delay: 0.1s; }
.tips-list li:nth-child(2) { animation-delay: 0.2s; }
.tips-list li:nth-child(3) { animation-delay: 0.3s; }
.tips-list li:nth-child(4) { animation-delay: 0.4s; }
.tips-list li:nth-child(5) { animation-delay: 0.5s; }
.tip-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acid); margin-top: 5px; flex-shrink: 0;
    box-shadow: 0 0 8px var(--acid);
}

/* Animated number label */
.field-range-track {
    position: relative; margin-top: 8px;
}
input[type=number].field-input::-webkit-inner-spin-button { opacity: 0.3; }

/* Decorative line */
.section-divider {
    height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: 24px 0;
}

/* ── Ambient background ─────────────────────── */
.idx-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.idx-bg-blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: .45;
    animation: blobFloat 20s ease-in-out infinite alternate;
}
.idx-bg-blob:nth-child(1) {
    width: 700px; height: 700px; top: -200px; left: -150px;
    background: radial-gradient(circle, rgba(109,40,217,.35), transparent 70%);
    animation-duration: 18s;
}
.idx-bg-blob:nth-child(2) {
    width: 500px; height: 500px; top: 40%; right: -100px;
    background: radial-gradient(circle, rgba(6,182,212,.2), transparent 70%);
    animation-duration: 24s; animation-direction: alternate-reverse;
}
.idx-bg-blob:nth-child(3) {
    width: 400px; height: 400px; bottom: -100px; left: 40%;
    background: radial-gradient(circle, rgba(163,230,53,.12), transparent 70%);
    animation-duration: 28s;
}
.idx-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, transparent 55%);
}

/* ── Wrapper ────────────────────────────────── */
.idx-wrap {
    position: relative; z-index: 1;
    padding: 36px 32px 48px;
    max-width: 1400px; margin: 0 auto;
}

/* ── Animations ─────────────────────────────── */
.au  { animation: fadeUp .5s ease both; }
.au1 { animation-delay: .05s; }
.au2 { animation-delay: .1s; }
.au3 { animation-delay: .15s; }
.au4 { animation-delay: .2s; }
.au5 { animation-delay: .25s; }
.au6 { animation-delay: .3s; }

/* ── Top bar ─────────────────────────────────── */
.idx-topbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.idx-title-eyebrow {
    font-size: 11.2px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--cyan); display: flex; align-items: center; gap: 8px;
    margin-bottom: 7.2px;
}
.idx-title-eyebrow::before {
    content: ''; width: 28px; height: 1.5px;
    background: var(--cyan); display: inline-block;
}
.idx-title {
    font-size: 32px; font-weight: 800;
    letter-spacing: -.04em; line-height: 1;
}
.idx-title span { color: var(--accent-lt); }
.topbar-actions { display: flex; gap: 10.4px; align-items: center; }

.btn-primary-x {
    width: auto;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: 2px solid #0000002e !important;
    display: inline-block;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
}
.btn-primary-x:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(109,40,217,.55); color: #fff; text-decoration: none; }

.f-input {
    background: #ffffff !important;
    border: 1px solid rgb(86 0 255) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    outline: none !important;
    width: 100%;
    -webkit-appearance: none;
}
.f-input::placeholder { color: #999 !important; }
.f-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,.14) !important;
    background: rgba(109,40,217,.05) !important;
}
.f-input option { background: #1a1a2e; color: var(--text); }

.filter-actions { display: flex; gap: 8px; }

.btn-filter {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), #5b21b6);
    border: 2px solid #0000002e !important;
    border-radius: 7px;
    color: #fff;
    font-weight: 600;
    font-size: 10px !important;
    width: auto;
    padding: 3px 5px !important;
    cursor: pointer;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    white-space: nowrap;
}
.btn-filter:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(109,40,217,.45); }

.btn-clear {
    display: inline-flex; 
    align-items: center; 
    gap: 6px;
    background: linear-gradient(135deg, var(--accent), #5b21b6); 
    border: 1px solid var(--border);
    border-radius: 7px; 
    color: var(--muted);
    font-size: 10px; 
    padding: 3px 5px !important;; 
    cursor: pointer;
    text-decoration: none; 
    transition: all .2s;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    white-space: nowrap;
}
.btn-clear:hover { border-color: var(--border-hi); color: var(--text); text-decoration: none; }

/* ── Table card ──────────────────────────────── */
.table-card {
    background: var(--glass); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    backdrop-filter: blur(12px);
}

.table-card-head {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.table-card-title {
    font-weight: 600;
    font-size: 14.4px; color: #ff0000;
    display: flex; align-items: center; gap: 9.6px;
}
.table-card-title .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-lt);
    box-shadow: 0 0 8px var(--accent-lt);
    animation: pulse 2s ease infinite;
}

.table-total-badge {
    background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22);
    color: var(--accent-lt); border-radius: 8px;
    padding: 2.4px 10.4px; font-size: 12px; font-weight: 600;
}

/* ID cell */
.cell-id { color: var(--muted); font-size: 11.52px; font-family: monospace; }

/* Title cell */
.cell-title-main {
    font-weight: 600; color: #fff;
    text-decoration: none; transition: color .2s;
    display: block; font-size: 14.08px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.cell-title-main:hover { color: var(--accent-lt); text-decoration: none; }
.cell-title-desc { color: var(--muted); font-size: 12px; margin-top: 1.6px; }

/* Contact cell */
.cell-contact {
    display: inline-flex; align-items: center; gap: 7.2px;
    color: var(--cyan); text-decoration: none; font-size: 13.28px;
    transition: color .2s;
}
.cell-contact:hover { color: #fff; text-decoration: none; }
.cell-contact-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    font-size: 9.6px; font-weight: 600; color: #fff; flex-shrink: 0;
}

/* Funnel cell */
.cell-funnel-name { font-size: 12.48px; color: var(--muted); }
.cell-stage-badge {
    display: inline-flex; align-items: center; gap: 4.8px;
    background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.18);
    color: var(--cyan); border-radius: 6px;
    padding: 2.4px 8.8px; font-size: 11.52px; font-weight: 500;
    margin-top: 4px;
}

/* Value cell */
.cell-value {
    font-weight: 600;
    font-size: 14.4px; color: var(--success);
    white-space: nowrap;
}

/* Probability cell */
.prob-bar-wrap { min-width: 70px; }
.prob-bar-track {
    height: 4px; border-radius: 99px;
    background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 4px;
}
.prob-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.prob-val { font-size: 11.52px; color: var(--muted); }

/* Assignee cell */
.cell-user {
    display: flex; align-items: center; gap: 7.2px;
    font-size: 13.12px; color: var(--text);
}
.user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #4c1d95);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.92px; font-weight: 600; color: #fff; flex-shrink: 0;
}

/* Date cell */
.cell-date { font-size: 12.8px; color: var(--muted); white-space: nowrap; }
.cell-date.overdue { color: var(--danger); font-weight: 600; }
.badge-overdue {
    display: inline-flex; align-items: center; gap: 4.8px;
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.22);
    color: #f87171; border-radius: 6px;
    padding: 1.6px 8px; font-size: 10.88px; font-weight: 600;
    margin-top: 3.2px;
}

/* Status badges */
.status-pill {
    display: inline-flex; align-items: center; gap: 5.6px;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-pill .pip { width: 6px; height: 6px; border-radius: 50%; }
.sp-open        { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.22); }
.sp-open        .pip { background: #818cf8; box-shadow: 0 0 5px #818cf8; }
.sp-won         { background: rgba(16,185,129,.1);  color: #34d399; border: 1px solid rgba(16,185,129,.2); }
.sp-won         .pip { background: #34d399; box-shadow: 0 0 5px #34d399; }
.sp-lost        { background: rgba(239,68,68,.1);   color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.sp-lost        .pip { background: #f87171; }
.sp-on_hold     { background: rgba(245,158,11,.1);  color: #fbbf24; border: 1px solid rgba(245,158,11,.2); }
.sp-on_hold     .pip { background: #fbbf24; }
.sp-negotiating { background: rgba(6,182,212,.1);   color: var(--cyan); border: 1px solid rgba(6,182,212,.2); }
.sp-negotiating .pip { background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }

/* Actions */
.act-btn.view   { background: rgba(6,182,212,.1);  color: var(--cyan);    border: 1px solid rgba(6,182,212,.18); }
.act-btn.edit   { background: rgba(245,158,11,.1); color: var(--warning); border: 1px solid rgba(245,158,11,.18); }
.act-btn.delete { background: rgba(239,68,68,.08); color: #f87171;        border: 1px solid rgba(239,68,68,.15); }
.act-btn.view:hover   { background: rgba(6,182,212,.22);  color: #fff; transform: scale(1.12); }
.act-btn.edit:hover   { background: rgba(245,158,11,.22); color: #fff; transform: scale(1.12); }
.act-btn.delete:hover { background: rgba(239,68,68,.22);  color: #fff; transform: scale(1.12); }

/* Pagination */
.pagination-wrap .pagination { margin: 0; }
.pagination-wrap{margin-top:28px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.page-btn{padding:12px 20px;border:1px solid rgba(0, 0, 0, .12);background:rgba(0, 0, 0, .03);border-radius:14px;color:var(--text-sec);font-size:16px;cursor:pointer;transition:all .3s}
.page-btn:hover{background:rgba(139,92,246,.2);border-color:var(--purple);color:var(--text);transform:translateY(-2px)}
.page-btn.active{background:linear-gradient(135deg,var(--purple),#7c3aed);border-color:var(--purple);color:#fff;box-shadow:0 0 20px var(--purple-glow)}

.page-item .page-link {
    background: var(--glass) !important; border: 1px solid var(--border) !important;
    color: var(--muted) !important; border-radius: 8px !important;
    margin: 0 2px; font-size: 12.8px; padding: 6.4px 12px;
    transition: all .2s !important;
}
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.page-item .page-link:hover  { background: var(--glass-hi) !important; color: var(--text) !important; border-color: var(--border-hi) !important; }

/* Modal */
.del-modal .modal-content {
    background: #12121f !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; overflow: hidden;
}
.del-modal .modal-header {
    background: rgba(239,68,68,.08) !important; border-bottom: 1px solid rgba(239,68,68,.15) !important;
    padding: 17.6px 24px !important;
}
.del-modal .modal-title { font-weight: 600; color: #f87171; font-size: 15.2px; }
.del-modal .close { color: var(--muted) !important; opacity: 1 !important; text-shadow: none !important; font-size: 13px; }
.del-modal .modal-body { padding: 24px !important; color: var(--text); font-size: 14.08px; line-height: 1.6; }
.del-modal .modal-body strong { color: #fff; }
.del-modal .modal-footer { border-top: 1px solid var(--border) !important; padding: 16px 24px !important; background: transparent !important; }
.btn-cancel-modal {
    background: transparent; border: 1px solid var(--border); border-radius: 10px;
    color: var(--muted); font-size: 13.44px; padding: 8.8px 17.6px; cursor: pointer;
    transition: all .2s;
}
.btn-cancel-modal:hover { border-color: var(--border-hi); color: var(--text); }
.btn-confirm-del {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: none; border-radius: 10px; color: #fff;
    font-weight: 600; font-size: 10px;
    padding: 5px 10px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(239,68,68,.3);
    transition: all .2s;
}
.btn-confirm-del:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(239,68,68,.5); }

/* WRAPPER principal com fundo próprio */
.board-wrapper {
    position: relative;
    z-index: 1;
    padding: 32px;
    min-height: 100vh;
    background: #f4f6f9;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
}

/* Radial glow no topo */
.board-wrapper::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 600px;
    background: radial-gradient(ellipse, rgba(124,58,237,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Grid animado */
.board-bg {
    position: absolute;
    inset: 0; z-index: 0; pointer-events: none;
}
.grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,182,212,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridShift 18s linear infinite;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 60%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 60%);
}

/* ── TOP BAR ── */
.board-topbar {
    position: relative; z-index: 2;
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
    animation: fadeUp 0.5s ease both;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.board-title {
    font-size: 25.6px; font-weight: 800;
    color: #333; margin: 0; letter-spacing: -0.04em;
}
.board-title span {
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ff0000;
    background-clip: text;
}

.board-badge {
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3);
    color: #a78bfa; border-radius: 8px;
    padding: 3.2px 11.2px; font-size: 11.68px;
    font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* SELECT */
.funnel-selector {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius:10px !important;
    padding: 9.6px 40px 9.6px 16px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13.92px !important;
    outline: none !important; cursor: pointer;
    min-width: 200px;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235a5a72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.funnel-selector:hover { border-color: rgba(60,141,188,0.4) !important; }
.funnel-selector:focus { border-color: var(--accent) !important; }
.funnel-selector option { background: #fff; color: #333; }

/* BTN NOVO DEAL */
.btn-new {
    width: 150px;
    padding: 3px 5px !important;
    background: linear-gradient(135deg, var(--accent), #6d28d9);
    border: 2px solid #0000002e !important;
    display: flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
}

.btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(124,58,237,0.6);
    color: #fff; text-decoration: none;
}
.btn-new:active { transform: translateY(0); }

/* ── KANBAN BOARD ── */
.kanban-board {
    position: relative; z-index: 2;
    display: flex; gap: 17.6px;
    overflow-x: auto; padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.3) transparent;
    border-radius: 10px;
}
.kanban-board::-webkit-scrollbar { height: 4px; }
.kanban-board::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.3); border-radius: 10px;
}

/* ── COLUNA ── */
.kanban-col {
    min-width: 295px; flex-shrink: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    animation: colIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.kanban-col:nth-child(1) { animation-delay: 0.04s; }
.kanban-col:nth-child(2) { animation-delay: 0.10s; }
.kanban-col:nth-child(3) { animation-delay: 0.16s; }
.kanban-col:nth-child(4) { animation-delay: 0.22s; }
.kanban-col:nth-child(5) { animation-delay: 0.28s; }

.kanban-col.drag-over {
    border-color: var(--accent);
    background: rgba(124,58,237,0.08);
    box-shadow: 0 0 0 1px rgba(124,58,237,0.3),
                0 0 40px rgba(124,58,237,0.1);
}

/* Stripe animada */
.col-stripe {
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
    background-size: 200% 100%;
    animation: stripeFlow 3.5s linear infinite;
}

.show-wrapper { position: relative; z-index: 1; padding: 40px 32px; max-width: 1280px; margin: 0 auto; }

.col-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.col-title {
    font-weight: 600;
    font-size: 13.76px; color: #333;
}
.col-count {
    background: #f4f6f9;
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--muted); border-radius: 6px;
    padding: 1.6px 8px; font-size: 11.52px; font-weight: 600;
}

.col-body {
    padding: 11.2px; min-height: 500px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
}

/* ── DEAL CARD ── */
.deal-card {
    background: #fbfbfc;
    border: 1px solid var(--border);
    border-radius: 14px; padding: 16px;
    margin-bottom: 11.2px; cursor: grab;
    transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
                border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative; overflow: hidden;
}
/* Linha top animada no hover */
.deal-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.deal-card:hover::before { transform: scaleX(1); }
.deal-card:hover {
    border-color: rgba(60,141,188,0.35);
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1),
                0 0 0 1px rgba(60,141,188,0.1);
}
.deal-card:active { cursor: grabbing; transform: scale(0.96) rotate(1.5deg); opacity: 0.75; }
.deal-card.dragging { opacity: 0.35; transform: scale(0.93) rotate(2deg); }

.deal-title {
    font-weight: 600; font-size: 14.08px;
    color: #333; margin-bottom: 4.8px;
    line-height: 1.35; padding-right: 24px;
}
.deal-contact {
    font-size: 12.16px; color: var(--muted);
    margin-bottom: 10.4px;
    display: flex; align-items: center; gap: 6.4px;
}
.deal-contact i { font-size: 9.92px; color: rgba(124,58,237,0.5); }

.deal-footer { display: flex; align-items: center; justify-content: space-between; }
.deal-value {
    font-weight: 800;
    font-size: 14.4px; color: var(--success);
    letter-spacing: -0.02em;
    text-shadow: 0 0 16px rgba(16,185,129,0.35);
}
.deal-meta { display: flex; align-items: center; gap: 8.8px; }
.deal-prob {
    font-size: 11.2px; color: var(--muted);
    background: #f4f6f9;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px; padding: 1.92px 7.2px; font-weight: 600;
}
.deal-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(124,58,237,0.4);
    font-size: 9.28px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff; font-weight: 800;
    box-shadow: 0 0 8px rgba(124,58,237,0.3);
}

/* ── DEAL ACTIONS ── */
.deal-actions { position: absolute; top: 9.6px; right: 9.6px; }
.deal-menu-btn {
    background: transparent; border: none; color: var(--muted);
    padding: 4px 5.6px; cursor: pointer;
    border-radius: 7px; font-size: 12.48px;
    transition: background 0.15s, color 0.15s;
}
.deal-menu-btn:hover { background: #f4f6f9; color: #333; }

.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 14px !important; min-width: 158px !important;
    padding: 6.4px !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.15),
                0 0 0 1px rgba(60,141,188,0.08) !important;
}
.dropdown-item {
    color: var(--text) !important; border-radius: 9px !important;
    font-size: 13.28px !important; padding: 8px 12.8px !important;
    transition: background 0.15s !important;
}
.dropdown-item:hover {
    background: rgba(60,141,188,0.12) !important; color: #333 !important;
}

.col-empty {
    text-align: center; padding: 32px 16px; color: var(--muted);
    font-size: 12.8px;
    border: 1px dashed rgba(0,0,0,0.12);
    border-radius:10px; margin: 3.2px;
}
.col-empty i { font-size: 22.4px; display: block; margin-bottom: 8px; opacity: 0.2; }

    
    /* Ambient BG */
    .show-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
    .show-bg-circle1 {
        position: absolute; top: -150px; left: 30%;
        width: 700px; height: 700px;
        background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 65%);
        animation: float1 16s ease-in-out infinite alternate;
    }
    .show-bg-circle2 {
        position: absolute; bottom: 0; right: -100px;
        width: 500px; height: 500px;
        background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 65%);
        animation: float2 20s ease-in-out infinite alternate;
    }
   
    /* Header */
    .show-header {
        display: flex; align-items: flex-start; justify-content: space-between;
        margin-bottom: 40px; flex-wrap: wrap; gap: 16px;
        animation: fadeUp 0.5s ease both;
    }
    .deal-title-area {}
    .deal-eyebrow { font-size: 11.52px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .deal-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--accent2); display: inline-block; }
    .deal-main-title { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -0.04em; line-height: 1.1; }
    .deal-desc { color: var(--muted); font-size: 14.4px; max-width: 600px; font-style: italic; }
    .header-actions { display: flex; gap: 12px; flex-shrink: 0; }

    .btn-edit {
        width: auto;
        display: flex; 
        align-items: center; 
        gap: 8px;
        background: linear-gradient(135deg, var(--accent), #6d28d9);
        border: none; 
        border-radius:7px; 
        color: #fff;
        font-weight: 600; 
        font-size: 10px;
        padding: 3px 5px !important; 
        text-decoration: none;
        box-shadow: 0 4px 20px rgba(124,58,237,0.3); 
        transition: all 0.2s;
    }
    .btn-edit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,0.5); color: #fff; text-decoration: none; }
    
    .new-btn {
        width: 150px;
        padding: 3px 5px !important;
        background: linear-gradient(135deg, var(--accent), #6d28d9);
        border: 2px solid #0000002e !important;
        display: flex;
        border-radius: 7px !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 600;
        cursor: pointer;
        position: inherit;
        overflow: hidden;
        transition: all .3s;
        margin: 0 5px;
        text-align: center;
        box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
        align-content: center;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: baseline;
    }
    
    .new-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 36px rgba(124,58,237,0.6);
        color: #fff; text-decoration: none;
    }
    .new-btn:active { transform: translateY(0); }
    
   /* KPI Row  ── KPI GRID ── */
  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
   .kpi-row { 
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        background: #fff;
        border-bottom: 1px solid #e8eaf0;
        padding: 5px;
        border-radius: 10px;
        margin-bottom: 10px;
   }
  .kpi-card {
        display: grid;
        justify-content: center;
        background: var(--glass); 
        border: 1px solid var(--border);
        border-radius: 12px;
        border-right: 1px solid #e8eaf0;
        padding: 14px 20px;
        position: relative; overflow: hidden;
        transition: transform 0.2s, border-color 0.2s;
        animation: fadeUp 0.5s ease both;
  }
  .kpi-card:last-child { border-right:none; }
  
  .kpi-card:hover { transform: translateY(-3px);}
  .kpi-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;  }
  .kpi-card.purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
  .kpi-card.teal::before   { background: linear-gradient(90deg, #0d9488, #14b8a6); }
  .kpi-card.blue::before   { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
  .kpi-card.green::before  { background: linear-gradient(90deg, #15803d, #4ade80); }
  .kpi-card.red::before    { background: linear-gradient(90deg, #dc2626, #f87171); }
  .kpi-card::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;}
  .kpi-card.purple::after { background: linear-gradient(90deg, var(--accent), transparent); }
  .kpi-card.cyan::after { background: linear-gradient(90deg, var(--accent2), transparent); }
  .kpi-card.green::after { background: linear-gradient(90deg, var(--success), transparent); }
  .kpi-card.yellow::after { background: linear-gradient(90deg, var(--warning), transparent); }
  .kpi-num  { font-size: 35.2px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
  .kpi-num.purple { color: #a78bfa; text-shadow: 0 0 20px rgba(167,139,250,0.4); }
  .kpi-num.teal   { color: #2dd4bf; text-shadow: 0 0 20px rgba(45,212,191,0.4); }
  .kpi-num.blue   { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,0.4); }
  .kpi-num.green  { color: #4ade80; text-shadow: 0 0 20px rgba(74,222,128,0.4); }
  
  .kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; margin-top:2px;}
  .kpi-icon { position: absolute; top: 16px; right: 20px; font-size: 13px; opacity: 0.1; }
  .kpi-card:nth-child(1) { animation-delay: 0.05s; }
  .kpi-card:nth-child(2) { animation-delay: 0.1s; }
  .kpi-card:nth-child(3) { animation-delay: 0.15s; }
  .kpi-card:nth-child(4) { animation-delay: 0.2s; }
  
    .kpi {
        background: rgb(247 255 231);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 20px 24px;
        position: relative;
        overflow: hidden;
        transition: transform .2s, border-color .25s;
        cursor: default;
        width: 98%;
        text-align: center;
    }
    
    .kpi:hover { transform: translateY(-3px); border-color: var(--border-hi); }
    .kpi::after {
        content: ''; position: absolute;
        bottom: 0; left: 0; right: 0; height: 2px;
        opacity: .9;
    }
    .kpi.k1::after { background: linear-gradient(90deg, var(--accent-lt), transparent); }
    .kpi.k2::after { background: linear-gradient(90deg, var(--success), transparent); }
    .kpi.k3::after { background: linear-gradient(90deg, var(--warning), transparent); }
    .kpi.k4::after { background: linear-gradient(90deg, var(--cyan), transparent); }
    .kpi.k1 .kpi-icon { background: rgba(139,92,246,.15); color: var(--accent-lt); }
    .kpi.k2 .kpi-icon { background: rgba(16,185,129,.15); color: var(--success); }
    .kpi.k3 .kpi-icon { background: rgba(245,158,11,.12); color: var(--warning); }
    .kpi.k4 .kpi-icon { background: rgba(6,182,212,.12); color: var(--cyan); }
    
    .kpi-val {
        font-size: 24.8px;
        font-weight: 800; line-height: 1; margin-bottom: 4.8px;
    }
    .kpi.k1 .kpi-val { color: var(--accent-lt); }
    .kpi.k2 .kpi-val { color: var(--success); }
    .kpi.k3 .kpi-val { color: var(--warning); }
    .kpi.k4 .kpi-val { color: var(--cyan); }
    
    .kpi-lbl { font-size: 11.52px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
    
    .kpi-value {
        font-size: 22px;
        font-weight: 800;
        color: #27ff00;
        line-height: 1.1;
        text-align: center;
    }
   .kpi-value.v-purple { color: #a78bfa; }
   .kpi-value.v-cyan { color: var(--accent2); }
   .kpi-value.v-green { color: var(--success); }
   .kpi-value.v-yellow { color: var(--warning); }
 
   .kpi-badge { display:inline-block; font-size:11px; font-weight:600; border-radius:10px; padding:2px 10px; margin-top:4px; }
   .kpi-badge.green { background:#e6f9f0; color:#1bb96b; }
   .kpi-badge.blue { background:#e8eeff; color:#4361ee; } 

    /* Main grid */
    .show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    
    /* Cards */
    .card-head { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
    .card-head-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
    .card-head-icon.purple { background: linear-gradient(135deg, var(--accent), #6d28d9); }
    .card-head-icon.cyan { background: linear-gradient(135deg, #0891b2, #0e7490); }
    .card-head-icon.orange { background: linear-gradient(135deg, #f97316, #c2410c); }
    .card-head-icon.blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
    .card-head-title { font-weight: 600; font-size: 14.4px; color: #fff; margin: 0; }

    .card-body-inner { padding: 24px; }

    /* Info rows */
    .info-item { margin-bottom: 17.6px; padding-bottom: 17.6px; border-bottom: 1px solid var(--border); }
    .info-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .info-key { font-size: 11.52px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 4.8px; }
    .info-val { font-size: 14.72px; color: var(--text); font-weight: 500; }
    .info-val a { color: var(--accent2); text-decoration: none; transition: color 0.2s; }
    .info-val a:hover { color: #fff; }

    /* Badge */
    .badge-custom { display: inline-flex; align-items: center; gap: 5.6px; padding: 4px 12px; border-radius: 8px; font-size: 12.48px; font-weight: 600; }
    
    .badge-negotiating { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
    .badge-won { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
    .badge-lost { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
    .badge-stage { background: rgba(6,182,212,0.12); color: var(--accent2); border: 1px solid rgba(6,182,212,0.2); }

    /* Days remaining */
    .days-badge { display: inline-flex; align-items: center; gap: 6.4px; padding: 4.8px 12.8px; border-radius: 10px; font-weight: 600; font-size: 13.6px; }
    .days-ok { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
    .days-today { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
    .days-late { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

    /* Timeline */
    .timeline { position: relative; }
    .timeline::before {
        content: ''; position: absolute; left: 11px; top: 6px; bottom: 0;
        width: 1px; background: linear-gradient(to bottom, var(--accent), transparent);
    }
    .tl-item { display: flex; gap: 16px; margin-bottom: 20px; position: relative; }
    .tl-dot {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        display: flex; align-items: center; justify-content: center;
        font-size: 8.8px; color: #fff;
        box-shadow: 0 0 12px rgba(124,58,237,0.4);
        margin-top: 2px; z-index: 1;
    }
    .tl-content {}
    .tl-text { font-size: 14.88px; color: var(--text); line-height: 1.4; font-weight: 500; }
   
    .tl-time { font-size: 11.52px; color: var(--muted); margin-top: 3.2px; }
    .tl-empty { text-align: center; padding: 32px; color: var(--muted); font-size: 13.6px; }
    .tl-empty i { font-size: 24px; display: block; margin-bottom: 8px; opacity: 0.3; }

    /* Table */
    .show-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .show-table thead tr th { padding: 12px 20px; font-size: 11.2px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 600; }
    .show-table tbody tr td { padding: 14.4px 20px; font-size: 14.08px; border-bottom: 1px solid var(--border); vertical-align: middle; transition: background 0.15s; }
    .show-table tbody tr:last-child td { border-bottom: none; }
    .show-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

    .channel-tag { display: inline-flex; align-items: center; gap: 6.4px; font-size: 13.12px; font-weight: 500; }
    .channel-tag.wa { color: #25d366; }
    .channel-tag.email { color: #60a5fa; }
    .channel-tag.tg { color: #0088cc; }
    
    .btn-view {
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 5.6px;
        background: rgb(95 6 212);
        border: 1px solid rgb(6 182 212);
        color: var(--accent2);
        border-radius: 7px;
        padding: 3px 5px !important;
        font-size: 10px;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-view-sm {
        width: auto;
        display: inline-flex; align-items: center; gap: 5.6px;
        background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2);
        color: var(--accent2); border-radius: 7px; padding: 3px 5px !important;
        font-size: 10px; text-decoration: none; transition: all 0.2s;
    }
    .btn-view-sm:hover { background: rgba(6,182,212,0.2); color: #fff; text-decoration: none; }

    .empty-table { text-align: center; padding: 48px; color: var(--muted); }
    .empty-table i { font-size: 32px; display: block; margin-bottom: 8px; opacity: 0.2; }
    .empty-table p { margin: 0; font-size: 13.6px; }
    

.header { background: #2D6A4F; color: #fff; padding: 14px 20px; margin-bottom: 18px; }
.header h1 { font-size: 16px; }
.header p  { font-size: 10px; margin-top: 4px; opacity: .85; }

h2 { font-size: 12px; color: #2D6A4F; border-bottom: 2px solid #2D6A4F;
     padding-bottom: 4px; margin: 18px 0 8px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
thead tr { background: #2D6A4F; color: #fff; }
thead th { padding: 6px 8px; text-align: left; font-size: 10px; }
tbody tr:nth-child(even) { background: #f4f9f6; }
tbody td { padding: 5px 8px; border-bottom: 1px solid #dde; }

.badge-waiting  { background: #fff3cd; color: #856404; }
.badge-assigned { background: #cce5ff; color: #004085; }

.footer { margin-top: 20px; font-size: 9px; color: #999; text-align: right; }

.summary-grid { display: table; width: 100%; margin-bottom: 14px; }
.summary-box  { display: table-cell; width: 25%; background: #f4f9f6;
                border: 1px solid #c8e6c9; border-radius: 4px; padding: 8px 12px;
                text-align: center; }
.summary-box .num  { font-size: 20px; font-weight: bold; color: #2D6A4F; }
.summary-box .lbl  { font-size: 9px; color: #555; margin-top: 2px; }
        
.funnel-app * { box-sizing: border-box; }
    .funnel-app::before {
        content: '';
        position: absolute;
        top: -200px; left: -200px;
        width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(99,64,255,0.12) 0%, transparent 70%);
        pointer-events: none;
    }
    .funnel-app::after {
        content: '';
        position: absolute;
        bottom: -100px; right: -100px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(0,200,140,0.08) 0%, transparent 70%);
        pointer-events: none;
    }
    .fn-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .fn-header-title {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #0dff00 !important;
        margin: 0;
        line-height: 1.2;
        font-size: 26px;
        letter-spacing: -0.5px;
        background: linear-gradient(135deg, #00ffa1 40%, #ffd600);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .fn-header-sub {
        font-size: 12px;
        color: #8e87ff;
        font-family: 'JetBrains Mono', monospace;
        margin-top: 2px;
    }

    .fn-btn-back {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #a0a0b8;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .fn-btn-back:hover {
        background: rgba(255,255,255,0.1);
        color: #e0e0f0;
        border-color: rgba(255,255,255,0.2);
        text-decoration: none;
    }

    .fn-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 24px;
        align-items: start;
        position: relative;
        z-index: 1;
    }

    .fn-card-header,
    .fn-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #6340ff;
        box-shadow: 0 0 8px rgba(99,64,255,0.6);
    }
    
    .fn-form-group {
        margin-bottom: 14px;
        animation: fn-fadeUp 0.4s ease both;
    }

    .fn-form-group:nth-child(1) { animation-delay: 0.05s; }
    .fn-form-group:nth-child(2) { animation-delay: 0.10s; }
    .fn-form-group:nth-child(3) { animation-delay: 0.15s; }
    .fn-form-group:nth-child(4) { animation-delay: 0.20s; }
    .fn-form-group:nth-child(5) { animation-delay: 0.25s; }
    .fn-form-group:nth-child(6) { animation-delay: 0.30s; }

    .fn-form-group label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #ff874b;
        margin-bottom: 8px;
    }

    .fn-form-group input[type="text"],
    .fn-form-group textarea,
    .fn-form-group select {
            width: 100%;
            background: rgb(0 15 92);
            border: 1px solid rgb(122 0 255);
            border-radius:10px;
            padding: 7px 10px;
            color: #25ff00;
            font-size: 14px;
            outline: none;
            transition: all 0.25s;
    }
    .fn-form-group input[type="text"]:focus,
    .fn-form-group textarea:focus,
    .fn-form-group select:focus {
        border-color: rgba(99,64,255,0.5);
        background: rgba(99,64,255,0.06);
        box-shadow: 0 0 0 3px rgba(99,64,255,0.15);
    }

    .fn-form-group input.is-invalid,
    .fn-form-group textarea.is-invalid,
    .fn-form-group select.is-invalid {
        border-color: rgba(239,68,68,0.5);
        background: rgba(239,68,68,0.05);
    }

    .fn-form-group .invalid-feedback {
        display: block;
        font-size: 12px;
        color: #ef4444;
        margin-top: 6px;
        font-family: 'JetBrains Mono', monospace;
    }

    .fn-form-group textarea { resize: vertical; min-height: 85px; }
    .fn-form-group select option { background: #1a1825; }

    .fn-stages-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .fn-stages-label-row label { margin-bottom: 0; }

    .fn-btn-add-stage {
        background: rgba(99,64,255,0.15);
        border: 1px solid rgba(99,64,255,0.3);
        color: #a78bfa;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .fn-btn-add-stage:hover {
        background: rgba(99,64,255,0.25);
        border-color: rgba(99,64,255,0.5);
        color: #c4b5fd;
    }

    #fn-stagesContainer { display: flex; flex-direction: column; gap: 10px; }

    .fn-stage-item {
        display: grid;
        grid-template-columns: 1fr 80px 36px;
        gap: 8px;
        align-items: center;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius:10px;
        padding: 10px 14px;
        transition: all 0.2s;
        animation: fn-stageIn 0.3s ease;
    }

    .fn-stage-item:hover { border-color: rgba(99,64,255,0.3); background: rgba(99,64,255,0.04); }

    .fn-stage-name-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fn-stage-badge {
        width: 22px; height: 22px;
        background: linear-gradient(135deg, #6340ff, #a855f7);
        border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
    }

    .fn-stage-item input[type="number"] {
        background: #03006c !important;
        border: 1px solid #6b6b6c !important;
        padding: 6px 8px !important;
        font-size: 14px !important;
        color: #ffffff !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        text-align: center;
        width: 100%;
        outline: none;
        transition: border-color 0.2s;
    }
    
     .fn-stage-item input[type="text"] {
        background: #03006c !important;
        border: 1px solid #6b6b6c !important;
        padding: 6px 8px !important;
        font-size: 14px !important;
        color: #ffffff !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        outline: none !important;
        width: 100%;
    }
    
    .fn-stage-item input[type="number"]:focus {
        border-color: rgba(99,64,255,0.4);
    }

    .fn-btn-remove-stage {
        width: auto; 
        height: 36px;
        background: rgba(239,68,68,0.1);
        border: 1px solid rgba(239,68,68,0.2);
        border-radius: 8px;
        color: #ef4444;
        cursor: pointer;
        font-size: 14px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }
    .fn-btn-remove-stage:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }

    .fn-color-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .fn-color-row input[type="color"] {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius:10px;
        cursor: pointer;
        padding: 4px;
        background: rgba(255, 255, 255, 0.06);
        outline: none;
        content: '';
    }

    .fn-color-presets { display: flex; gap: 8px; flex-wrap: wrap; }

    .fn-color-dot {
        width: 28px; height: 28px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 2px solid transparent;
    }
    .fn-color-dot:hover { transform: scale(1.2); }
    .fn-color-dot.active { border-color: white; box-shadow: 0 0 10px rgba(255,255,255,0.3); }

    .fn-toggle-row {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .fn-toggle { position: relative; width: 48px; height: 26px; }
    .fn-toggle input { opacity: 0; width: 0; height: 0; }
    .fn-toggle-slider {
        position: absolute; inset: 0;
        background: rgba(255,255,255,0.1);
        border-radius: 13px;
        cursor: pointer;
        transition: 0.3s;
    }
    .fn-toggle-slider::before {
        content: '';
        position: absolute;
        width: 20px; height: 20px;
        left: 3px; top: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }
    .fn-toggle input:checked + .fn-toggle-slider { background: linear-gradient(135deg, #6340ff, #a855f7); }
    .fn-toggle input:checked + .fn-toggle-slider::before { transform: translateX(22px); }
    .fn-toggle-label { font-size: 14px; color: #b0adca; }

    .fn-card-footer {
        padding: 20px 28px;
        border-top: 1px solid rgba(255,255,255,0.06);
        display: flex;
        gap: 12px;
        align-items: center;
    }
    
   .fn-btn-secondary {
        width: auto;
        padding: 14px;
        background: linear-gradient(135deg, #4000af 0%, #6400fd 100%);
        border: 1px solid rgb(88 88 88);
        border-radius:10px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all .3s;
        display: block;
        margin: auto;
        text-align: center;
    }
    .fn-btn-secondary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}
    .fn-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(139,92,246,.4)}
    .fn-btn-secondary:hover::before{left:100%}
    .fn-btn-secondary:disabled { opacity:0.6; transform:none; cursor:not-allowed; }


    /* Side card */
    .fn-side { animation: fn-fadeUp 0.5s ease 0.15s both; }

    .fn-template-btn {
        width: auto;
        background: rgb(3 0 94);
        border: 1px solid rgb(255 224 0);
        border-radius:10px;
        padding: 14px 16px;
        cursor: pointer;
        font-size: 13px;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.2s;
        margin-bottom: 8px;
        text-align: left;
    }
    .fn-template-btn:hover {
        background: rgb(0 0 0);
        border-color: rgb(99 64 255);
        color: #48ff00;
        transform: translateX(4px);
    }
    .fn-template-text-name { font-weight: 600; color: #00ffc6; }
    .fn-template-text-sub {
        font-size: 12px;
        color: #f9ff00;
        margin-top: 2px;
    }

    .fn-tip-box {
        margin-top: 20px;
        background: rgb(99 64 255);
        border: 1px solid rgb(99 64 255);
        border-radius:10px;
        padding: 14px;
        font-size: 12px;
        color: #f7f5ff;
        line-height: 1.6;
    }

    .fn-preview {
        margin-top: 16px;
        padding: 16px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius:10px;
    }

    .fn-preview-title {
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #c8c1ff;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .fn-preview-stages { display: flex; flex-direction: column; gap: 6px; }

    .fn-preview-stage {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #ffffff;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgb(255 155 0);
    }
    .fn-preview-num {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        color: #6340ff;
        min-width: 16px;
    }
    
.fne-app * { box-sizing: border-box; }

    .fne-app {
        background: #070710;
        min-height: 100vh;
        color: #e8e4f0;
        padding: 32px;
        position: relative;
        overflow: hidden;
        margin: -20px;
    }

    .fne-app::before {
        content: '';
        position: absolute;
        top: -150px; right: -100px;
        width: 500px; height: 500px;
        background: radial-gradient(circle, rgba(168,85,247,0.10) 0%, transparent 70%);
        pointer-events: none;
    }

    .fne-app::after {
        content: '';
        position: absolute;
        bottom: -120px; left: -80px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(99,64,255,0.07) 0%, transparent 70%);
        pointer-events: none;
    }

    /* ── Topbar ── */
    .fne-topbar {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 40px;
        animation: fne-fd 0.4s ease;
    }

    .fne-topbar-left { display: flex; align-items: center; gap: 14px; }

    .fne-live-dot {
        width: 14px; height: 14px; border-radius: 50%;
        background: #a855f7;
        box-shadow: 0 0 14px rgba(168,85,247,0.6);
        animation: fne-pulse 2s infinite;
        flex-shrink: 0;
    }

    .fne-topbar-title {
        font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
        background: linear-gradient(135deg, #fff 30%, #c4b5fd);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .fne-topbar-sub {
        font-size: 12px; color: #5a587a;
        font-family: 'JetBrains Mono', monospace;
        margin-top: 2px;
    }

    .fne-topbar-actions { display: flex; gap: 10px; }

    .fne-btn-sm {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.09);
        color: #9090b0;
        padding: 9px 18px;
        border-radius: 10px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-flex; align-items: center; gap: 7px;
    }
    .fne-btn-sm:hover { background: rgba(255,255,255,0.09); color: #d0ccea; text-decoration: none; }

    /* ── Layout ── */
    .fne-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 20px;
        align-items: start;
        position: relative; z-index: 1;
    }

    /* ── Card ── */
    .fne-card {
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 10px;
        overflow: hidden;
        animation: fne-fu 0.45s ease;
    }

    .fne-card-header {
        padding: 18px 26px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 12px; font-weight: 600;
        letter-spacing: 0.8px; text-transform: uppercase;
        color: #6b6888;
        display: flex; align-items: center; gap: 10px;
    }

    .fne-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #a855f7;
        box-shadow: 0 0 8px rgba(168,85,247,0.6);
    }

    .fne-card-body { padding: 26px; }

    /* ── Form groups ── */
    .fne-form-group {
        margin-bottom: 22px;
        animation: fne-fu 0.4s ease both;
    }
    .fne-form-group:nth-child(1) { animation-delay: 0.04s; }
    .fne-form-group:nth-child(2) { animation-delay: 0.08s; }
    .fne-form-group:nth-child(3) { animation-delay: 0.12s; }
    .fne-form-group:nth-child(4) { animation-delay: 0.16s; }
    .fne-form-group:nth-child(5) { animation-delay: 0.20s; }
    .fne-form-group:nth-child(6) { animation-delay: 0.24s; }

    .fne-form-group label {
        display: block;
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.8px; text-transform: uppercase;
        color: #6b6888; margin-bottom: 7px;
    }

    .fne-form-group input[type="text"],
    .fne-form-group textarea,
    .fne-form-group select {
        width: 100%;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 11px;
        padding: 12px 15px;
        color: #e0dcf0;
        font-size: 14px;
        outline: none;
        transition: all 0.25s;
    }

    .fne-form-group input[type="text"]:focus,
    .fne-form-group textarea:focus,
    .fne-form-group select:focus {
        border-color: rgba(168,85,247,0.5);
        background: rgba(168,85,247,0.06);
        box-shadow: 0 0 0 3px rgba(168,85,247,0.12);
    }

    .fne-form-group input.is-invalid,
    .fne-form-group textarea.is-invalid,
    .fne-form-group select.is-invalid {
        border-color: rgba(239,68,68,0.5);
        background: rgba(239,68,68,0.05);
    }

    .fne-form-group .invalid-feedback {
        display: block;
        font-size: 12px; color: #ef4444;
        margin-top: 6px;
        font-family: 'JetBrains Mono', monospace;
    }

    .fne-form-group textarea { resize: vertical; min-height: 80px; }
    .fne-form-group select option { background: #1a1825; }

    /* ── Stages ── */
    .fne-stages-label-row {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 11px;
    }
    .fne-stages-label-row label { margin-bottom: 0; }

    .fne-btn-add-stage {
        background: rgba(168,85,247,0.15);
        border: 1px solid rgba(168,85,247,0.28);
        color: #c4b5fd;
        padding: 6px 13px;
        border-radius: 8px;
        font-size: 12px; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
    }
    .fne-btn-add-stage:hover { background: rgba(168,85,247,0.22); border-color: rgba(168,85,247,0.45); }

    #fne-stagesContainer { display: flex; flex-direction: column; gap: 8px; }

    .fne-stage-item {
        display: grid;
        grid-template-columns: 1fr 72px 34px;
        gap: 7px;
        align-items: center;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.065);
        border-radius: 11px;
        padding: 9px 13px;
        transition: border-color 0.2s;
        animation: fne-sli 0.3s ease;
    }
    .fne-stage-item:hover { border-color: rgba(168,85,247,0.28); }

    .fne-stage-name-wrap { display: flex; align-items: center; gap: 8px; }

    .fne-stage-badge {
        width: 20px; height: 20px;
        background: linear-gradient(135deg, #6340ff, #a855f7);
        border-radius: 5px;
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 600; color: #fff;
        flex-shrink: 0;
    }

    .fne-stage-item input[type="text"] {
        background: transparent !important;
        border: none !important;
        padding: 5px 0 !important;
        font-size: 13px !important;
        color: #e0ddf0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        width: 100%;
    }

    .fne-stage-item input[type="number"] {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 7px;
        padding: 5px 8px;
        color: #c4b5fd;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px; text-align: center;
        width: 100%; outline: none;
        transition: border-color 0.2s;
    }
    .fne-stage-item input[type="number"]:focus { border-color: rgba(168,85,247,0.4); }

    .fne-btn-remove-stage {
        width: 30px; height: 30px;
        background: rgba(239,68,68,0.09);
        border: 1px solid rgba(239,68,68,0.18);
        border-radius: 7px; color: #ef4444;
        cursor: pointer; font-size: 13px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }
    .fne-btn-remove-stage:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.35); }

    /* ── Color picker ── */
    .fne-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    .fne-color-row input[type="color"] {
        width: 48px; height: 48px;
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 11px; cursor: pointer;
        padding: 4px; background: rgba(255,255,255,0.05);
        outline: none;
    }

    .fne-color-presets { display: flex; gap: 7px; flex-wrap: wrap; }

    .fne-color-dot {
        width: 26px; height: 26px; border-radius: 50%;
        cursor: pointer; transition: transform 0.2s;
        border: 2px solid transparent;
    }
    .fne-color-dot:hover { transform: scale(1.2); }
    .fne-color-dot.active { border-color: white; box-shadow: 0 0 8px rgba(255,255,255,0.25); }

    /* ── Toggle ── */
    .fne-toggle-row { display: flex; align-items: center; gap: 12px; }
    .fne-toggle { position: relative; width: 44px; height: 24px; }
    .fne-toggle input { opacity: 0; width: 0; height: 0; }
    .fne-toggle-slider {
        position: absolute; inset: 0;
        background: rgba(255,255,255,0.1);
        border-radius:10px; cursor: pointer; transition: 0.3s;
    }
    .fne-toggle-slider::before {
        content: ''; position: absolute;
        width: 18px; height: 18px;
        left: 3px; top: 3px;
        background: white; border-radius: 50%; transition: 0.3s;
    }
    .fne-toggle input:checked + .fne-toggle-slider { background: linear-gradient(135deg, #6340ff, #a855f7); }
    .fne-toggle input:checked + .fne-toggle-slider::before { transform: translateX(20px); }
    .fne-toggle-label { font-size: 13px; color: #9090b0; }

    /* ── Card footer ── */
    .fne-card-footer {
        padding: 18px 26px;
        border-top: 1px solid rgba(255,255,255,0.06);
        display: flex; gap: 10px; align-items: center;
    }

    .fne-btn-save {
        background: linear-gradient(135deg, #6340ff, #a855f7);
        border: none; color: white;
        padding: 12px 26px;
        border-radius: 11px;
        font-size: 14px; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
        box-shadow: 0 4px 18px rgba(99,64,255,0.38);
        display: inline-flex; align-items: center; gap: 7px;
    }
    .fne-btn-save:hover { transform: translateY(-2px); box-shadow: 0 7px 26px rgba(99,64,255,0.48); }
    .fne-btn-save:active { transform: translateY(0); }

    .fne-btn-cancel {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.09);
        color: #7c7a9a;
        padding: 12px 18px;
        border-radius: 11px;
        font-size: 14px; cursor: pointer; transition: 0.2s;
        text-decoration: none;
        display: inline-flex; align-items: center; gap: 7px;
    }
    .fne-btn-cancel:hover { background: rgba(255,255,255,0.07); color: #b0adc8; text-decoration: none; }

    /* ── Side info card ── */
    .fne-side { animation: fne-fu 0.5s ease 0.1s both; }

    .fne-info-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .fne-info-item:last-child { border-bottom: none; }

    .fne-info-key {
        font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px;
        color: #6b6888;
    }

    .fne-info-val {
        font-size: 13px; color: #c0bcdc;
        font-family: 'JetBrains Mono', monospace;
    }

    .fne-deals-badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(99,64,255,0.15);
        border: 1px solid rgba(99,64,255,0.3);
        padding: 4px 12px; border-radius: 10px;
        font-size: 13px; color: #c4b5fd; font-weight: 600;
    }

    /* ── Danger zone ── */
    .fne-danger-zone {
        margin-top: 16px;
        background: rgba(239,68,68,0.05);
        border: 1px solid rgba(239,68,68,0.18);
        border-radius: 14px;
        padding: 18px;
    }

    .fne-danger-title {
        font-size: 12px; font-weight: 600;
        letter-spacing: 0.8px; text-transform: uppercase;
        color: #ef4444;
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 10px;
    }

    .fne-danger-text {
        font-size: 12px; color: #7a5a5a;
        line-height: 1.5; margin-bottom: 14px;
    }

    .fne-btn-danger {
        width: auto;
        background: rgba(239,68,68,0.12);
        border: 1px solid rgba(239,68,68,0.3);
        color: #ef4444;
        padding: 11px;
        border-radius: 10px;
        font-size: 13px; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .fne-btn-danger:hover {
        background: rgba(239,68,68,0.22);
        border-color: rgba(239,68,68,0.5);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(239,68,68,0.2);
    }

    /* ── Confirm modal ── */
    .fne-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.75);
        display: none;
        align-items: center; justify-content: center;
        z-index: 9999;
        animation: fne-fade 0.2s;
    }
    .fne-overlay.show { display: flex; }

    .fne-confirm-box {
        background: #1a1825;
        border: 1px solid rgba(239,68,68,0.3);
        border-radius: 10px; padding: 30px;
        max-width: 380px; width: 90%;
        animation: fne-fu 0.25s ease;
    }

    .fne-confirm-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
    .fne-confirm-sub { font-size: 13px; color: #7a7898; line-height: 1.5; margin-bottom: 24px; }
    .fne-confirm-sub strong { color: #e0dcf0; }

    .fne-confirm-btns { display: flex; gap: 10px; }

    .fne-confirm-yes {
        flex: 1;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        border: none; color: #fff;
        padding: 12px; border-radius: 10px;
        font-weight: 600;
        cursor: pointer; transition: 0.2s;
    }
    .fne-confirm-yes:hover { opacity: 0.85; }

    .fne-confirm-no {
        flex: 1;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #9090b0;
        padding: 12px; border-radius: 10px;
        cursor: pointer; transition: 0.2s;
    }
    .fne-confirm-no:hover { background: rgba(255,255,255,0.09); color: #c0bdda; }

 
  .btn-outline-gray { background:#fff; border:1px solid #d9dde8; color:#444; border-radius:7px; padding:5px 16px; font-size:12px; font-weight:600; cursor:pointer; }
  .btn-outline-gray:hover { background:#f4f6fb; }
  .btn-primary-sm { background:#4361ee; border:none; color:#fff; border-radius:7px; padding:5px 16px; font-size:12px; font-weight:600; cursor:pointer; }
  .btn-primary-sm:hover { background:#3451d1; }

  /* ── Quick actions ── */
  .quick-actions { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; padding:16px 10px; background:#fff; border-bottom:1px solid #e8eaf0; margin-bottom: 10px;  border-radius: 10px;}
  .action-card { border:1px solid #e8eaf0; border-radius:10px; padding:12px 14px; cursor:pointer; background:#fff; transition: box-shadow .15s, border-color .15s; }
  .action-card:hover { border-color:#4361ee44; box-shadow:0 2px 10px #4361ee15; }
  .action-card .ac-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; font-size:16px; }
  .action-card .ac-title { font-size:12px; font-weight:600; color:#23262f; }
  .action-card .ac-sub { font-size:11px; color:#8b8fa8; margin-top:1px; }
  .action-card .progress { height:2px; border-radius:2px; background:#eee; margin-top:8px; overflow:hidden; }
  .action-card .progress-bar { height:100%; width:0%; transition:width .4s; border-radius:2px; }
  .icon-blue { background:#e8eeff; color:#4361ee; }
  .icon-green { background:#e6f9f0; color:#1bb96b; }
  .icon-orange { background:#fff4e5; color:#f59e0b; }
  .icon-gray { background:#f4f6fb; color:#6b7280; }

  /* ── Charts row ── */
  .charts-row { display:grid; grid-template-columns:1fr 200px; gap:0; background:#fff; border-bottom:1px solid #e8eaf0; padding:16px 10px; border-radius: 10px;
    margin-bottom: 10px; }
  .chart-block { min-width:0; }
  .chart-wrap { position:relative; height:140px; width:100%; }
  .chart-block .chart-title { font-size:11px; font-weight:600; color:#8b8fa8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
  .chart-toggle { display:flex; gap:14px; margin-bottom:10px; }
  .chart-toggle span { font-size:11px; color:#8b8fa8; cursor:pointer; display:flex; align-items:center; gap:5px; }
  .chart-toggle span .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

  /* ── Info + Config row ── */
  
  .info-col { padding:16px 20px; border-right:1px solid #e8eaf0; }
  .info-col:last-child { border-right:none; }
  .section-title { font-size:11px; font-weight:600; color:#8b8fa8; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
  .info-row-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #f0f2f7; font-size:12px; }
  .info-row-item:last-child { border-bottom:none; }
  .info-label { color:#8b8fa8; }
  .info-value { font-weight:600; color:#23262f; display:flex; align-items:center; gap:6px; }
  .info-value a { color:#4361ee; text-decoration:none; }
  .info-value code { background:#f4f6fb; padding:2px 7px; border-radius:5px; font-size:11px; color:#4361ee; }
  .copy-btn { background:none; border:1px solid #e8eaf0; border-radius:5px; padding:2px 6px; font-size:10px; cursor:pointer; color:#8b8fa8; }
  .badge-sm { font-size:10px; font-weight:600; border-radius:10px; padding:2px 9px; }
  .badge-success { background:#e6f9f0; color:#1bb96b; }
  .badge-danger { background:#ffeef0; color:#e53e3e; }
  .badge-warning { background:#fff4e5; color:#f59e0b; }
  .badge-info { background:#e8eeff; color:#4361ee; }

  /* ── Webhooks ── */
  .webhooks-row { background:#fff; border-bottom:1px solid #e8eaf0; padding:14px 10px; border-radius: 10px; margin-bottom: 10px;  }
  .webhook-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .webhook-tag { background:#f4f6fb; border:1px solid #e8eaf0; border-radius:10px; padding:3px 11px; font-size:11px; font-weight:600; color:#444; }

  /* ── Conversations table ── */
  .table-row { background:#fff; padding:0 0 16px; border-radius: 10px; margin-bottom: 10px; }
  .table-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px 10px; }
  .table-header .section-title { margin:0; }
  .ver-tudo { font-size:11px; color:#4361ee; font-weight:600; text-decoration:none; }
  table.data-table { width:100%; border-collapse:collapse; }
  table.data-table th { font-size:11px; font-weight:600; color:#8b8fa8; text-transform:uppercase; letter-spacing:.05em; padding:8px 20px; border-bottom:2px solid #f0f2f7; background:#fafbfd; }
  table.data-table td { font-size:12px; padding:9px 20px; border-bottom:1px solid #f0f2f7; color:#23262f; vertical-align:middle; }
  table.data-table tr:last-child td { border-bottom:none; }
  table.data-table tr:hover td { background:#fafbfd; }
  .td-contact { font-weight:600; color:#23262f; }
  .td-msg { color:#6b7280; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .btn-eye { background:#e8eeff; border:none; color:#4361ee; border-radius:6px; padding:4px 9px; cursor:pointer; font-size:12px; }
  .btn-eye:hover { background:#4361ee; color:#fff; }
  
  /* ── Log panel ── */
  #log-panel { margin:0 20px 14px; }
  #log-body { background:#1a1d27; color:#a0aec0; border-radius:8px; padding:10px 14px; font-size:11px; font-family:monospace; max-height:140px; overflow-y:auto; }


  
.rp-page * { box-sizing: border-box; }
.rp-page { padding: 24px; font-family: inherit; }
.rp-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.rp-hdr-left h1 { font-size: 20px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 10px; }
.rp-hdr-left p { font-size: 13px; color: #6b7280; margin-top: 4px; }
.rp-hdr-icon { width: 34px; height: 34px; background: #185FA5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-btn-row { display: flex; gap: 8px; }
.rp-btn { padding: 5px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background 0.15s; }
.rp-btn:hover { background: #f3f4f6; }
.rp-btn-pdf { background: #A32D2D !important; color: #F7C1C1 !important; border-color: #A32D2D !important; }
.rp-btn-pdf:hover { background: #791F1F !important; }
.rp-btn-xls { background: #3B6D11 !important; color: #C0DD97 !important; border-color: #3B6D11 !important; }
.rp-btn-xls:hover { background: #27500A !important; }

.rp-filter-bar { background: #fff; border: 1px solid #e5e7eb; border-radius:10px; padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-filter-bar label { font-size: 13px; color: #6b7280; font-weight: 500; }
.rp-pill-group { display: flex; gap: 4px; }
.rp-pill { padding: 5px 13px; border-radius: 10px; font-size: 12px; font-weight: 500; border: 1px solid #d1d5db; background: #f9fafb; color: #6b7280; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.rp-pill:hover { background: #fff; border-color: #9ca3af; color: #374151; }
.rp-pill.active { background: #185FA5; color: #B5D4F4; border-color: #185FA5; }
.rp-filter-sep { width: 1px; height: 28px; background: #e5e7eb; }
.rp-date-range { display: none; gap: 8px; align-items: center; }
.rp-date-range.show { display: flex; }
.rp-date-input { font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: #f9fafb; color: #374151; }
.rp-date-label { font-size: 12px; color: #9ca3af; }

.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.rp-kpi { background: #f9fafb; border-radius: 10px; padding: 16px 20px; position: relative; overflow: hidden; border: 1px solid #f3f4f6; }
.rp-kpi-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; }
.rp-kpi-val { font-size: 26px; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.rp-kpi-label { font-size: 12px; color: #9ca3af; }
.rp-kpi-change { font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 3px; }
.rp-up { color: #3B6D11; } .rp-down { color: #A32D2D; }

.rp-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.rp-card { background: #fff; border: 1px solid #e5e7eb; border-radius:10px; overflow: hidden; }
.rp-card-hdr { padding: 12px 20px; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
.rp-card-hdr-title { font-size: 13px; font-weight: 500; color: #1a1a1a; }
.rp-badge { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #E6F1FB; color: #0C447C; }
.rp-card-body { padding: 16px 20px; }
.rp-legend { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rp-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }
.rp-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.rp-tbl-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius:10px; overflow: hidden; }
.rp-tbl-hdr { padding: 12px 20px; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
.rp-tbl-title { font-size: 13px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }
.rp-tbl-sub { font-size: 12px; color: #9ca3af; }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table thead tr { background: #f9fafb; }
.rp-table th { padding: 10px 16px; font-size: 11px; font-weight: 500; color: #9ca3af; text-align: left; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #f3f4f6; }
.rp-table td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #f9fafb; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tbody tr:hover td { background: #fafafa; }

/* ── Relatórios: Formulário de Geração (Vendas/Performance) ── */
.rp-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.rp-layout > div:nth-child(2){display:flex;flex-direction:column;gap:16px}
@media(max-width:900px){.rp-layout{grid-template-columns:1fr}}

.rp-card-hdr-green{background:#F0FDF4}
.rp-card-hdr-blue{background:#EBF4FF}

.rp-section{margin-bottom:20px}
.rp-section:last-child{margin-bottom:0}
.rp-section-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}

.rp-seg{display:flex;flex-wrap:wrap;gap:6px;background:#f3f4f6;padding:4px;border-radius:10px}
.rp-seg-item{flex:1;min-width:70px;text-align:center;padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;user-select:none}
.rp-seg-item:hover{color:#374151}
.rp-seg-item.active{background:#fff;color:#185FA5;box-shadow:0 1px 3px rgba(0,0,0,.12)}

.rp-custom-dates{display:none;margin-top:12px}
.rp-custom-dates.show{display:block}
.rp-date-row{display:flex;gap:12px;flex-wrap:wrap}
.rp-form-group{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px}
.rp-form-group label{font-size:11.5px;color:#6b7280;font-weight:500}
.rp-form-group input[type="date"],
.rp-form-group input[type="number"],
.rp-form-group select{border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;font-size:13px;color:#374151;background:#fff}
.rp-form-group input:focus,.rp-form-group select:focus{outline:none;border-color:#185FA5;box-shadow:0 0 0 3px rgba(24,95,165,.12)}

.rp-status-pills{display:flex;gap:10px;flex-wrap:wrap}
.rp-status-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #e5e7eb;border-radius:20px;font-size:12.5px;color:#9ca3af;cursor:pointer;transition:all .15s;user-select:none;background:#fafafa}
.rp-status-dot-pill{width:8px;height:8px;border-radius:50%;opacity:.35;transition:opacity .15s}
.rp-status-pill.active-open,.rp-status-pill.active-won,.rp-status-pill.active-lost,.rp-status-pill.active-closed{color:#374151;border-color:#d1d5db;background:#fff}
.rp-status-pill.active-open .rp-status-dot-pill,
.rp-status-pill.active-won .rp-status-dot-pill,
.rp-status-pill.active-lost .rp-status-dot-pill,
.rp-status-pill.active-closed .rp-status-dot-pill{opacity:1}

.rp-min-value-wrap{display:flex;align-items:center;gap:8px;border:1px solid #d1d5db;border-radius:8px;padding:0 12px;max-width:220px;background:#fff}
.rp-currency{font-size:13px;color:#9ca3af;font-weight:500}
.rp-min-value-wrap input{border:none;padding:9px 0;font-size:13px;color:#374151;flex:1;min-width:0}
.rp-min-value-wrap input:focus{outline:none}

.rp-checks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.rp-check-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s;user-select:none}
.rp-check-item:hover{border-color:#d1d5db;background:#fafafa}
.rp-check-item.checked{border-color:#185FA5;background:#EBF4FF}
.rp-check-box{width:16px;height:16px;border:1.5px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;transition:all .15s}
.rp-check-item.checked .rp-check-box{background:#185FA5;border-color:#185FA5}
.rp-check-label{font-size:12.5px;color:#374151}

.rp-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.rp-metric-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:20px;cursor:pointer;transition:all .15s;user-select:none;background:#fff}
.rp-metric-chip:hover{border-color:#d1d5db}
.rp-metric-chip.checked{border-color:#185FA5;background:#EBF4FF}
.rp-metric-chip .rp-check-box{width:14px;height:14px}
.rp-metric-chip.checked .rp-check-box{background:#185FA5;border-color:#185FA5}

.rp-compare-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .15s}
.rp-compare-toggle.on{border-color:#185FA5;background:#EBF4FF}
.rp-toggle-label{font-size:13px;font-weight:500;color:#374151}
.rp-toggle-sub{font-size:11px;color:#9ca3af;margin-top:2px}
.rp-toggle-switch{width:38px;height:22px;border-radius:20px;background:#d1d5db;position:relative;flex-shrink:0;transition:background .15s}
.rp-toggle-switch.on{background:#185FA5}
.rp-toggle-knob{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rp-toggle-switch.on .rp-toggle-knob{left:19px}

.rp-format-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rp-format-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .15s;background:#fff}
.rp-format-card:hover{border-color:#d1d5db}
.rp-format-card.active{border-color:#185FA5;background:#EBF4FF;box-shadow:0 0 0 3px rgba(24,95,165,.1)}
.rp-fmt-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.rp-fmt-label{font-size:12.5px;font-weight:600;color:#374151}
.rp-fmt-sub{font-size:10.5px;color:#9ca3af}

.rp-card-footer{padding:14px 20px;border-top:1px solid #f3f4f6;display:flex;gap:10px;justify-content:flex-end}
.rp-btn-submit{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:#185FA5;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
.rp-btn-submit:hover{background:#124a82}
.rp-btn-cancel{display:inline-flex;align-items:center;padding:9px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s}
.rp-btn-cancel:hover{background:#f3f4f6}

.rp-info-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151;margin-bottom:8px}
.rp-info-item:last-child{margin-bottom:0}
.rp-info-dot{width:6px;height:6px;border-radius:50%;background:#185FA5;flex-shrink:0}

.rp-funnel-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rp-funnel-bar:last-child{margin-bottom:0}
.rp-funnel-label{font-size:11.5px;color:#6b7280;min-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-funnel-track{flex:1;height:8px;background:#f3f4f6;border-radius:6px;overflow:hidden}
.rp-funnel-fill{height:100%;border-radius:6px}
.rp-funnel-pct{font-size:11.5px;font-weight:600;color:#374151;min-width:32px;text-align:right}
.rp-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.rp-td-name { display: flex; align-items: center; gap: 10px; }
.rp-prog { height: 6px; background: #f3f4f6; border-radius: 3px; overflow: hidden; flex: 1; }
.rp-prog-inner { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.rp-prog-wrap { display: flex; align-items: center; gap: 8px; }
.rp-prog-val { font-size: 12px; color: #6b7280; min-width: 34px; text-align: right; }
.rp-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }

.form-page {
    padding: 22px 18px 80px;
    max-width: 1400px;
    margin: 0 auto;
    background: transparent;
    border-radius: 10px;
}

.page-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#23262f; }
.badge-status { font-size:11px; font-weight:600; background:#e6f9f0; color:#1bb96b; border-radius:10px; padding:2px 10px; }
.page-subtitle { font-size:11px; color:#8b8fa8; margin-top:1px; }
.header-actions { display:flex; gap:8px; }
.page-sub {
    font-size: 10px;
    color: #888 !important;
    margin-top: 2px;
}

.form-grid{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start;}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px;}

.form-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: #eef5fb;
}
.form-card-title {
    font-family: var(--font-h);
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.field {margin-bottom:5px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-shadow:none;}
.field label .req{color:var(--rose);margin-left:3px;}
.field input, .field textarea, .field select {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--border2);
    border-radius: 10px;
    color: #333;
    font-family: var(--font-b);
    font-size: 12px;
    padding: 5px 7px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.1);}
.field input::placeholder,.field textarea::placeholder{color: #999 !important;}
.field textarea{resize:vertical;min-height:160px;line-height:1.6;}
.field select option{background:#fff;color:var(--text);}
.field-hint{font-size:11px;color:var(--muted);margin-top:6px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.var-bank{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;padding:14px;background:rgba(155,109,255,.05);border:1px solid rgba(155,109,255,.12);border-radius:10px;}

.var-bank-title {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 4px;
}
.var-chip {
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
    padding: 3px 8px;
    border-radius: 6px;
    background: #eef5fb;
    color: #3c8dbc;
    border: 1px solid #cfe3ef;
}

.form-card-body {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
    border-top: 4px solid #25d366;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 10px 10px 10px 10px;
    background: #f9f9f9;
    min-height: 100px;
    margin: 10px 0 14px 0;
}

.card-footer {
    margin: 30px 0 0 0;
}
.var-chip:hover{background:rgba(155,109,255,.25);transform:translateY(-1px);}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius:10px;
    margin-bottom: 12px;
    transition: border-color .2s;
}

.toggle-row.on{
    border-color: var(--wa);
    background: rgba(37,211,102,.06);
}

.toggle-info .t-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.toggle-desc {
    font-size: 12px;
    color: var(--muted);
}

.toggle-info .t-desc {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    text-shadow: none;
}
.tgl{position:relative;width:40px;height:22px;flex-shrink:0;}
.tgl input{display:none;}
.tgl-track{position:absolute;inset:0;border-radius:999px;background:#ddd;border:1.5px solid var(--border2);cursor:pointer;transition:all .2s;}
.tgl input:checked+.tgl-track{background:var(--wa);border-color:var(--wa);}
.tgl-track::after{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 2px 4px rgba(0,0,0,.3);}
.tgl input:checked+.tgl-track::after{left:calc(100% - 18px);}
/* Preview panel */
.preview-panel{position:sticky;top:20px;}
.phone-frame{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.phone-bar{background:linear-gradient(135deg,var(--wa2),var(--wa));padding:14px 18px;display:flex;align-items:center;gap:12px;}
.phone-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;}
.phone-name{font-weight:600;color:#fff;font-size:12px;}
.phone-status{font-size:11px;color:rgba(255,255,255,.7);}
.phone-chat{padding:20px;background:#e5ddd5;min-height:220px;}

.chat-bubble strong{color:#075e54;}
.chat-bubble {
    background: #fff;
    border-radius: 4px 16px 16px 16px;
    padding: 12px 14px 8px;
    max-width: 99%;
    font-size: 13px;
    color: #111;
    line-height: 1.55;
    white-space: pre-wrap;
    box-shadow: 0 1px 4px rgb(0 0 0 / 87%);
    word-break: break-word;
}

.chat-time{font-size:10px;color:#999;text-align:right;margin-top:4px;}
.char-bar{height:3px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:8px;}
.char-fill{height:100%;border-radius:99px;background:var(--wa);width:0;transition:width .2s,background .2s;}
.char-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.btn-submit {
    width: auto;
    padding: 3px 5px !important;
    background:linear-gradient(135deg,var(--wa2),var(--wa))!important;
    border: 2px solid #0000002e !important;
    display: inline-flex;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600;
    cursor: pointer;
    position: inherit;
    overflow: hidden;
    transition: all .3s;
    margin: 0 5px;
    text-align: center;
    box-shadow: 0 2px 3px rgb(0 0 0), 0 2px 5px rgb(0 0 0 / 31%);
    align-content: center;
    align-items: center;
    gap: 6px;
}
.btn-submit:active { transform: translateY(0); }
.btn-submit::before { content:''; position:absolute; top:0; left:-100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left .5s; }
.btn-submit:disabled { opacity:.6; transform:none; cursor:not-allowed; }
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px rgb(0 0 0 / 65%);
  border: 2px solid #f7fb00;
  color: #e1ff00;
  background: linear-gradient(135deg, #000000 0%, #220056 100%);
}

.err-list{background:rgba(255,79,123,.08);border:1px solid rgba(255,79,123,.2);border-radius:10px;padding:14px 18px;margin-bottom:24px;font-size:12px;color:var(--rose);}

.tpl-page {
    padding: 22px 18px 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: transparent;
    border-radius: 10px;
}

/* ── Hero header ── */
.tpl-hero {
    display: flex;
    align-items: flex-end;
    margin-bottom: 22px;
    gap: 24px;
    animation: heroIn .7s cubic-bezier(.16, 1, .3, 1) both;
    justify-content: space-between;
    flex-wrap: wrap;
}

hero-left {
    display: flex;
    gap: 6px;
    align-content: space-between;
    align-items: baseline;
    justify-content: center;
}

.hero-eyebrow {
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wa);
    text-align: center;
    margin: 0 auto 0 auto;
    width: 100%;
}
.hero-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--wa); border-radius: 2px; }

.hero-title {
    font-family: var(--font-h);
    font-size: clamp(32px,4vw,48px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #333;
    text-align: center;
}

.hero-title span { color: var(--wa); }

.hero-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.btn-new::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    opacity: 0; transition: opacity .2s;
}
.btn-new:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); color: #fff; text-decoration: none; }
.btn-new:hover::before { opacity: 1; }

/* ── Stats bar ── */
.stats-bar {
    display: flex;
    gap: 1px;
    margin-bottom: 12px;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    animation: fadeUp .6s .1s both;
}



.stat-item {
    flex: 1;
    padding: 10px 24px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background .2s;
    border-left: 4px solid #3c8dbc;
    border-radius: 10px;
    margin: 0 5px;
}
.stat-item:hover { background: #f4f6f9; }
.stat-num { font-family: var(--font-h); font-size: 28.8px; font-weight: 600; color: #333; line-height: 1; }
.stat-lbl {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.stat-dot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 8px; }

/* ── Section ── */
.section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    background: transparent;
    border-radius: 10px;
}
.section-icon {
    width: 44px; height: 44px; border-radius:10px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    flex-shrink: 0;
}
.section-title { font-family: var(--font-h); font-size: 12px; font-weight: 600; color: #333; }
.section-count {
    margin-left: auto; font-size: 11px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px; letter-spacing: .06em;
}

/* ── Cards grid ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* ── Template card ── */
.tpl-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; position: relative;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
}
.tpl-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.tpl-card:hover {
    border-color: var(--border2); transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.tpl-card.inactive { opacity: .5; filter: grayscale(.4); }

/* Card accent line */
.card-accent { height: 3px; width: 100%; }

.card-top { padding: 15px 12px 20px 12px;flex: 1; }

.card-name {
    font-family: var(--font-h);
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.badge-auto { background: rgba(79,142,247,.15); color: var(--blue); border: 1px solid rgba(79,142,247,.2); }
.badge-manual { background: rgba(90,90,122,.15); color: var(--muted); border: 1px solid rgba(90,90,122,.2); }
.badge-media { background: rgba(245,197,66,.1); color: var(--gold); border: 1px solid rgba(245,197,66,.2); }

.card-body-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    font-style: italic;
    border-left: 4px solid #25d366;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    background: #f9f9f9;
    min-height: 110px;
    text-align: justify;
    text-shadow: none;
}

/* Variables chips */
.var-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.var-chip {
    font-size: 13.6px;
    font-weight: 600;
    font-family: monospace;
    padding: 3px 8px;
    border-radius: 6px;
    background: #eef5fb;
    color: #3c8dbc;
    border: 1px solid #cfe3ef;
}

/* Card footer */
.card-stats { display: flex; align-items: center; gap: 14px; }
.card-stat { font-size: 11.52px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.card-stat i { font-size: 10.4px; }

.card-actions { display: flex; align-items: center; gap: 6px; }

.act-btn:hover {
    background: #96bbf3;
    color: #000000;
    border-color: #ccc;
}
.act-btn.act-preview:hover { color: var(--blue); border-color: rgba(79,142,247,.4); }
.act-btn.act-send:hover    { color: var(--wa);   border-color: rgba(37,211,102,.4); }
.act-btn.act-edit:hover    { color: var(--gold);  border-color: rgba(245,197,66,.4); }
.act-btn.act-del:hover     { color: var(--rose);  border-color: rgba(255,79,123,.4); }

/* Toggle switch */
.tgl-wrap { display: flex; align-items: center; gap: 8px; }
.tgl { position: relative; width: 36px; height: 20px; }.tgl-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid var(--border2);
    cursor: pointer; transition: all .2s;
}
.tgl input:checked + .tgl-track { background: var(--wa); border-color: var(--wa); }
.tgl-track::after {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: left .2s; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.tgl input:checked + .tgl-track::after { left: calc(100% - 17px); }

/* ── Preview modal ── */
.modal-backdrop-custom {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.8); backdrop-filter: blur(12px);
    z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop-custom.open { display: flex; }

.preview-modal {
    width: 100%; max-width: 420px;
    background: var(--card); border: 1px solid var(--border2);
    border-radius: 24px; overflow: hidden;
    animation: modalIn .3s cubic-bezier(.16,1,.3,1) both;
}

.modal-top {
    background: linear-gradient(135deg, var(--wa2), var(--wa));
    padding: 20px 24px; display: flex; align-items: center; gap: 14px;
}
.modal-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.modal-name { font-family: var(--font-h); font-weight: 600; color: #fff; font-size: 16px; }
.modal-status { font-size: 12px; color: rgba(255,255,255,.7); }
.modal-close {
    margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: none; color: #fff;
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.modal-close:hover { background: rgba(255,255,255,.25); }

.modal-chat {
    padding: 20px;
    background: #e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' opacity='.04'%3E%3Ctext y='50' font-size='40'%3E💬%3C/text%3E%3C/svg%3E");
    min-height: 200px;
}
.chat-bubble {
    background: #fff; border-radius: 4px 18px 18px 18px;
    padding: 12px 16px 8px; max-width: 88%; font-size: 14.08px;
    color: #111; line-height: 1.55; white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    position: relative;
}
.chat-bubble::before {
    content: ''; position: absolute; top: 0; left: -8px;
    border: 8px solid transparent; border-right-color: #fff; border-top-color: #fff;
}
.chat-time { font-size: 10.88px; color: #999; text-align: right; margin-top: 6px; }

.modal-footer-btns {
    padding: 16px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 10px;
}
.modal-btn {
    flex: 1; padding: 11px; border-radius:10px; border: none;
    font-family: var(--font-b); font-weight: 600; font-size: 13.6px;
    cursor: pointer; transition: all .2s;
}
.modal-btn-close { background: #eee; color: var(--muted); }
.modal-btn-close:hover { background: #e0e0e0; color: #333; }
.modal-btn-send { background: var(--wa); color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,.3); }
.modal-btn-send:hover { background: var(--wa2); transform: translateY(-1px); }

/* Send modal */
.send-modal {
    width: 100%; max-width: 360px;
    background: var(--card); border: 1px solid var(--border2);
    border-radius: 10px; overflow: hidden;
    animation: modalIn .3s cubic-bezier(.16,1,.3,1) both;
}
.send-modal-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.send-modal-title { font-family: var(--font-h); font-size: 13px; font-weight: 600; color: #333; }
.send-modal-body { padding: 20px 24px; }
.send-modal-foot { padding: 0 24px 20px; display: flex; gap: 10px; }

.field-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.field-input {
    width: 100%; background: #fff; border: 1.5px solid var(--border2);
    border-radius: 10px; color: var(--text); font-family: var(--font-b); font-size: 14.4px;
    padding: 12px 16px; outline: none; transition: border-color .2s;
}
.field-input:focus { border-color: var(--wa); }
.field-input::placeholder { color: #999 !important; }

/* Alert */
.page-alert {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 14px; margin-bottom: 28px;
    font-size: 14.08px; animation: fadeUp .4s both;
}
.page-alert.success { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.2); color: #34d399; }
.page-alert.error   { background: rgba(255,79,123,.1);  border: 1px solid rgba(255,79,123,.2);  color: var(--rose); }

/* ==================================================================== Responsivo =========================================================================== */

@media(prefers-color-scheme: dark) {.treeview-menu a::before {color: #dee2e6;} .treeview-menu a:hover::before { color: #0d6efd; }}
@media only screen and (max-width: 600px) {.pos-form-actions{ position: absolute; }}
@media print{ .print_section{ display: inline !important; } .modal-xl{ width: 100% !important; } ::-webkit-scrollbar{ display: none !important;} #toast-container { display: none; }}
@media only screen and (max-device-width: 480px) {.right-col { width: 100%;} }
@media only screen and (device-width: 768px) {.right-col { width: 100%;}}
@media(max-width:480px){.stats-strip { grid-template-columns: 1fr;}}
@media(max-width:480px){.kpi-row {grid-template-columns: 1fr;}}
@media(max-width:500px){.kpi-grid {grid-template-columns: 1fr 1fr;}}
@media(max-width:576px){.sidebar-card{margin-bottom:16px}.chat-header{flex-direction:column;gap:16px;text-align:center}}
@media(max-width:576px){.conversations-table thead{display:none}.conversations-table tbody tr{display:block;margin-bottom:16px;border-radius:10px;background:rgba(0, 0, 0, .02);border:1px solid rgba(0, 0, 0, .05)}.conversations-table tbody td{display:block;padding:16px;border-bottom:1px solid rgba(0, 0, 0, .03);position:relative}
@media(max-width:600px){.field-row {grid-template-columns: 1fr;}}
@media(max-width:600px){.filter-grid {grid-template-columns: 1fr;}}
@media(max-width:640px){.tpl-page { padding: 20px 16px 60px;}.tpl-hero { flex-direction: column; align-items: flex-start; }.stats-bar { flex-direction: column; gap: 1px;}
.cards-grid { grid-template-columns: 1fr;}}
@media(max-width:700px){.show-grid {grid-template-columns: 1fr;}}
@media(max-width:767px) { .main-header .navbar-custom-menu {float: none !important; display: block !important; } .main-header .navbar-custom-menu .dropdown-menu { left: auto !important; } .skin-blue-light .main-header .navbar .dropdown-menu li a { color: #777; } .main-header .navbar {height: auto;}}
@media(max-width:768px) { .treeview-menu a::before { font-size: 10px; }}
@media(max-width:768px){.chatbots-grid{grid-template-columns:1fr;gap:16px}.actions-grid{grid-template-columns:1fr}.type-model-grid,.stats-grid{grid-template-columns:1fr}.card-body{padding:20px 20px 16px}.at-header{flex-direction:column;text-align:center;gap:24px}.at-title h1{font-size:28.8px}.info-row{flex-direction:column;gap:8px}.info-lbl{min-width:auto}.sch-grid{grid-template-columns:1fr;gap:20px}.panel-body{padding:10px;}}
@media(max-width:768px){.auto-main-grid{grid-template-columns:1fr}.trigger-grid{grid-template-columns:repeat(2,1fr)}.form-row-2{grid-template-columns:1fr}}
@media(max-width:768px){.conv-header{flex-direction:column;align-items:flex-start;gap:16px}.conv-actions{flex-direction:column;width:100%}.act-btn{width:100%;justify-content:center}}
@media(max-width:768px){.kpi-row, .quick-actions {grid-template-columns:1fr 1fr;}.info-row, .charts-row { grid-template-columns:1fr;}}
@media(max-width:768px){.cb-grid{grid-template-columns:1fr}.form-row-split{grid-template-columns:1fr}}
@media(max-width:768px){.at-root{padding:24px 16px}.filters-grid{grid-template-columns:1fr;gap:12px}.conversations-table{font-size:14.4px}
.conversations-table thead th{padding:12px 16px;font-size:12.8px}.conversations-table tbody td{padding:12px 16px}.conversations-table tbody td:first-child{padding-left:20px}.actions-cell .btn-group{flex-direction:column;gap:6px}.action-btn{width:36px;height:36px}}
@media(max-width:768px){.chat-container{height:500px;border-radius: 0;margin-bottom:16px}.chat-header{padding:16px}.messages-container{padding:16px}.message-input-container{padding:16px}.message-form{flex-direction:column}.message-input-pill{width:100%;margin-bottom:12px}.stats-grid{grid-template-columns:1fr}}
@media(max-width:768px){body {padding: 24px 16px;}.at-header {flex-direction: column;gap: 24px;text-align: center;}.at-title h1 {font-size: 24px;}}
@media(max-width:768px){.crm-header { flex-direction: column; gap: 20px; }.stats-strip { grid-template-columns: 1fr 1fr; }
.filters-section { flex-direction: column; align-items: stretch; }.filter-input, .filter-select { width: 100%; }
.assign-modal { max-width: 100%; border-radius: 10px; }}
@media(max-width:768px){.rp-kpis { grid-template-columns: 1fr 1fr; }.rp-charts-row { grid-template-columns: 1fr; }}
@media(max-width:768px){.chat-sidebar { display: none; }}
@media(max-width:768px){.whatsapp-chat-container {height: calc(100vh - 140px);}}
@media(max-width:800px){.kpi-row {grid-template-columns: 1fr 1fr;}}
@media(max-width:900px){.form-grid{grid-template-columns:1fr;}.preview-panel{position:static;}}
@media(max-width:900px){.kpi-grid  {grid-template-columns: repeat(2, 1fr);}.main-grid { grid-template-columns: 1fr;}}
@media(max-width:900px){.form-layout {grid-template-columns: 1fr;}}
@media(max-width:900px){.kpi-row {grid-template-columns: 1fr 1fr;}}
@media(max-width:992px){.filters-grid {grid-template-columns: 1fr;gap: 20px;}.custom-table {font-size: 14.4px;}.custom-table thead {display: none;}.custom-table tbody tr {display: block;margin-bottom: 16px;padding: 16px;border-radius:10px;background: rgba(0, 0, 0, .02);border: 1px solid rgba(0, 0, 0, .05);}.custom-table td {padding: 12px 0;display: block;border: none;position: relative;padding-left: 40%;}.custom-table td::before {content: attr(data-label);position: absolute;left: 0;width: 35%;font-weight: 600;font-size: 12.8px;color: #888;text-transform: uppercase;letter-spacing: .05em;}.action-group {justify-content: flex-end;}}
@media(max-width:992px){.chat-sidebar {display: none;}.chat-container {height: 70vh;}}
@media(max-width:992px){.custom-table tbody tr {display: block; margin-bottom: 16px; padding: 16px;border-radius:10px; background: rgba(0, 0, 0, .02);border: 1px solid var(--border) !important;}.custom-table td {padding: 9.6px 0; display: block; border: none;position: relative; padding-left: 40%;}.custom-table td::before {content: attr(data-label);position: absolute; left: 0; width: 35%;font-weight: 500; font-family: var(--mono);font-size: 11.52px; color: var(--muted);text-transform: uppercase; letter-spacing: .06em; padding-top: 2px;}.action-group { justify-content: flex-start;}}
@media(max-width:992px){.chat-wrapper {flex-direction: column;height: calc(100vh - 180px);}.chat-sidebar {width: 100%;min-width: auto;max-height: 300px;}}
@media(max-width:992px){.fn-layout {grid-template-columns: 1fr;}}
@media(max-width:992px){.fne-layout {grid-template-columns: 1fr;}}
@media(max-width:1000px){.filter-grid {grid-template-columns: 1fr 1fr;}}
@media(max-width:1200px){.filters-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.conversations-table tbody td:last-child{border-bottom:none}.conversations-table tbody td::before{content:attr(data-label);font-size:12.8px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:8px}}  
@media(max-width:1200px){.suggestions-grid{grid-template-columns:1fr}}
@media(max-width:1100px){.stats-strip { grid-template-columns: repeat(2, 1fr);}}

@keyframes bounce{40%{transform:translateY(-5px)}}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

@keyframes pulse-av {
  0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,.3); }
  50%      { box-shadow: 0 0 40px rgba(139,92,246,.6); }
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes pulse-avatar { 0%,100%{box-shadow:0 0 20px rgba(139,92,246,0.3)} 50%{box-shadow:0 0 40px rgba(139,92,246,0.6)} }
@keyframes pulse-av{0%,100%{box-shadow:0 0 25px rgba(139,92,246,0.4)}50%{box-shadow:0 0 50px rgba(139,92,246,0.8)}}
@keyframes pdvFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); }}
@keyframes spin-cw { to { transform: rotate(360deg); }}
@keyframes l3 { to { background-position: 80% 100%; }}
@-webkit-keyframes blow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); opacity: 1; -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5); } 50% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); opacity: 1; -webkit-transform: scale3d(1, 1, 0.5); transform: scale3d(1, 1, 0.5); } 100% { -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1); opacity: 0.2; -webkit-transform: scale3d(1, 1, 0.5); transform: scale3d(1, 1, 0.5); }}
@keyframes blow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); opacity: 1;  -webkit-transform: scale3d(1, 1, 0.5); transform: scale3d(1, 1, 0.5); } 50% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); opacity: 1; -webkit-transform: scale3d(1, 1, 0.5); transform: scale3d(1, 1, 0.5); } 100% { -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1); opacity: 0.2; -webkit-transform: scale3d(1, 1, 0.5); transform: scale3d(1, 1, 0.5); }}
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1;}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 20px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 50px rgba(139,92,246,0.7), inset 0 1px 0 rgba(255,255,255,0.08); } }
@keyframes bounce {40%{transform:translateY(-6px)} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-av{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.3)}50%{box-shadow:0 0 40px rgba(139,92,246,.6)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-av { 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, .3); } 50% { box-shadow: 0 0 40px rgba(139, 92, 246, .6); }}
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; }}
@keyframes modalIn { from { opacity:0; transform:scale(.94) translateY(20px); } to { opacity:1; transform:none; } }
@keyframes avatar-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, .2), inset 0 0 20px rgba(0, 255, 136, .05); } 50% { box-shadow: 0 0 40px rgba(0, 255, 136, .4), inset 0 0 30px rgba(0, 255, 136, .1); }}
@keyframes glitch { 0%, 90%, 100% { clip-path: none; transform: none; } 92% { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); transform: translateX(-2px); } 94% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(2px); } 96% { clip-path: none; transform: none; }}
@keyframes modal-in { from { transform: scale(.88) translateY(24px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; }}
@keyframes icon-glow { 0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, .15); } 50% { box-shadow: 0 0 30px rgba(255, 215, 0, .35); }}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px var(--purple-glow)}50%{box-shadow:0 0 50px var(--purple-glow)}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px,60px) scale(1.1); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px,-80px) scale(1.15); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); }}
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }}
@keyframes blobFloat { from { transform: translate(0, 0) scale(1); } to{ transform: translate(40px, 60px) scale(1.08); }}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; }}
@keyframes gridShift { from { background-position: 0 0; } to { background-position: 48px 48px; }}
@keyframes colIn { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); }}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); }}
@keyframes stripeFlow { from { background-position: 0% 0; } to { background-position: 200% 0; }}
@keyframes float1 { from { transform: translate(0,0); } to { transform: translate(-40px,60px); } }
@keyframes float2 { from { transform: translate(0,0); } to { transform: translate(40px,-40px); } }
@keyframes fn-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); }}
@keyframes fn-fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); }}
@keyframes fn-stageIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fne-fd   { from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:translateY(0) } }
@keyframes fne-fu   { from { opacity:0; transform:translateY(14px)  } to { opacity:1; transform:translateY(0) } }
@keyframes fne-sli  { from { opacity:0; transform:translateX(-8px)  } to { opacity:1; transform:translateX(0) } }
@keyframes fne-fade { from { opacity:0 } to { opacity:1 } }
@keyframes fne-pulse { 0%, 100% { box-shadow: 0 0 14px rgba(168,85,247,0.6); } 50% { box-shadow: 0 0 22px rgba(168,85,247,0.9); }}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes heroIn { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Padrão das telas do CRM (conectapp/partials/page-header e alerts) ──────
   Cabeçalho único para todas as telas: ícone + título + subtítulo à
   esquerda, ações e "Voltar" à direita; mensagens logo abaixo. */
.crm-page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.crm-page-header .at-brand { width:auto; flex:1 1 320px; min-width:0; }
.crm-page-header .at-title h1 { margin:0; }
.crm-page-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crm-page-actions form { display:inline; margin:0; }
.crm-alert { border-radius:10px; padding:12px 16px; margin:0 0 18px; font-size:14px; line-height:1.45; border-left:4px solid; }
.crm-alert ul { margin:6px 0 0 18px; padding:0; }
.crm-alert-success { background:#e9f9ef; border-color:#25d366; color:#146c3b; }
.crm-alert-error { background:#fdecec; border-color:#e74c3c; color:#8e2a20; }
@media (max-width:768px) {
    .crm-page-header { flex-direction:column; align-items:flex-start; text-align:left; }
    .crm-page-actions { width:100%; }
}

/* Menu "Ações" aberto dentro de tabela com rolagem: não corta o menu (ver app.js). */
.table-responsive.menu-acoes-aberto,
.dataTables_scrollBody.menu-acoes-aberto,
.dataTables_wrapper.menu-acoes-aberto {
    overflow: visible !important;
}
.menu-acoes-aberto .btn-group.open > .dropdown-menu {
    z-index: 1060;
}

/* ═════════════════════════════════════════════════════════════════════════
   PADRÃO DOS MODAIS (02/11/2026, usuário): todos seguem o layout do cadastro de
   contato — cabeçalho branco com título escuro e ícone roxo, fechar quadrado com
   borda, corpo lavanda, rótulos em maiúsculas pequenas, campos brancos com foco
   roxo e rodapé branco. Vale no painel e no PDV claro; o modo escuro do PDV
   (body.pdv-escuro, pdv_visual.css) e o próprio modal de contato ficam como estão.
   ═════════════════════════════════════════════════════════════════════════ */
body:not(.pdv-escuro) .modal {
    background: rgba(17, 24, 39, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body:not(.pdv-escuro) .modal-content {
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(17, 24, 39, .28) !important;
    color: #1f2937 !important;
    text-shadow: none !important;
    overflow: hidden;
}
body:not(.pdv-escuro) .modal-header {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #ecebf3 !important;
    padding: 18px 24px !important;
    color: #1f2937 !important;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 12px;
}
body:not(.pdv-escuro) .modal-header::before,
body:not(.pdv-escuro) .modal-header::after { display: none; }
body:not(.pdv-escuro) .modal-header .modal-title {
    color: #1f2937 !important;
    font-size: 19px;
    font-weight: 800 !important;
    letter-spacing: -.2px;
    text-shadow: none !important;
    margin: 0;
    flex: 1;
    text-align: left !important;
    -webkit-text-fill-color: currentColor;
    background: none !important;
}
body:not(.pdv-escuro) .modal-header .modal-title :is(i, .fa, .fas, .far, .glyphicon) { color: #6d28d9; margin-right: 6px; }
body:not(.pdv-escuro) .modal-header .close {
    float: none;
    order: -1;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    border: 1px solid #e3e1ee !important;
    border-radius: 10px !important;
    color: #6b7280 !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: background .15s, color .15s, border-color .15s;
}
body:not(.pdv-escuro) .modal-header .close:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
body:not(.pdv-escuro) .modal-body {
    background: #f6f5fb;
    color: #1f2937;
    padding: 20px 24px;
}
/* blocos dentro do modal viram cartões brancos, como as seções do contato */
body:not(.pdv-escuro) .modal-body :is(.box, .panel, .well, fieldset) {
    background: #ffffff !important;
    border: 1px solid #e3e1ee !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
body:not(.pdv-escuro) .modal-body :is(.box-header, .panel-heading) {
    background: #f8f7fc !important;
    color: #6d28d9 !important;
    border-bottom: 1px solid #e3e1ee !important;
    border-radius: 14px 14px 0 0;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 12.5px;
}
body:not(.pdv-escuro) .modal-body :is(.box-title, .panel-title) { color: #6d28d9 !important; font-size: 12.5px; font-weight: 800; }
body:not(.pdv-escuro) .modal-body legend {
    border: 0; width: auto; margin: 0 0 8px; padding: 0 6px;
    color: #6d28d9; font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
/* rótulos dos campos: maiúsculas pequenas e cinza-escuro (caixas de marcar ficam no texto normal) */
body:not(.pdv-escuro) .modal-body :is(.form-group > label, label.control-label) {
    color: #4b5563 !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-shadow: none !important;
    margin-bottom: 6px;
}
body:not(.pdv-escuro) .modal-body :is(input.form-control, select.form-control, textarea.form-control) {
    background: #ffffff !important;
    border: 1px solid #e3e1ee !important;
    border-radius: 10px !important;
    color: #1f2937 !important;
    box-shadow: none !important;
    min-height: 40px;
}
body:not(.pdv-escuro) .modal-body textarea.form-control { min-height: 70px; }
body:not(.pdv-escuro) .modal-body :is(input.form-control, select.form-control, textarea.form-control):focus {
    border-color: #6d28d9 !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .14) !important;
    outline: 0;
}
body:not(.pdv-escuro) .modal-body :is(input.form-control, textarea.form-control)::placeholder { color: #9ca3af; }
body:not(.pdv-escuro) .modal-body :is(input.form-control[readonly], input.form-control[disabled], select.form-control[disabled]) {
    background: #f6f5fb !important;
    color: #6b7280 !important;
}
/* ícone à esquerda do campo (input-group-addon) igual ao do contato */
body:not(.pdv-escuro) .modal-body .input-group-addon {
    background: #ffffff !important;
    border: 1px solid #e3e1ee !important;
    color: #6b7280 !important;
}
body:not(.pdv-escuro) .modal-body .input-group > .input-group-addon:first-child { border-radius: 10px 0 0 10px !important; border-right: 0 !important; }
body:not(.pdv-escuro) .modal-body .input-group > .input-group-addon:last-child { border-radius: 0 10px 10px 0 !important; border-left: 0 !important; }
body:not(.pdv-escuro) .modal-body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body:not(.pdv-escuro) .modal-body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body:not(.pdv-escuro) .modal-body .select2-container--default .select2-selection--single,
body:not(.pdv-escuro) .modal-body .select2-container--default .select2-selection--multiple {
    background: #ffffff;
    border: 1px solid #e3e1ee;
    border-radius: 10px;
    min-height: 40px;
}
body:not(.pdv-escuro) .modal-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; color: #1f2937; }
body:not(.pdv-escuro) .modal-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
body:not(.pdv-escuro) .modal-body .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.pdv-escuro) .modal-body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #6d28d9;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .14);
}
body:not(.pdv-escuro) .modal-body .table { background: #ffffff; border-radius: 10px; }
body:not(.pdv-escuro) .modal-footer {
    background: #ffffff !important;
    background-image: none !important;
    border-top: 1px solid #ecebf3 !important;
    border-radius: 0 !important;
    padding: 14px 24px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}
body:not(.pdv-escuro) .modal-footer .btn + .btn { margin-left: 0; }
body:not(.pdv-escuro) .modal-footer .btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 9px 20px !important;
    min-height: 40px;
    text-shadow: none !important;
}
body:not(.pdv-escuro) .modal-footer .btn-default {
    background: #ffffff !important;
    border: 1px solid #e3e1ee !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}
body:not(.pdv-escuro) .modal-footer .btn-default:hover { background: #f6f5fb !important; border-color: #9ca3af !important; }
body:not(.pdv-escuro) .modal-footer .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, .25) !important;
}
body:not(.pdv-escuro) .modal-footer .btn-primary:hover { filter: brightness(1.06); }
/* cabeçalhos coloridos herdados (modal-primary, -success…) ficam no padrão claro */
body:not(.pdv-escuro) :is(.modal-primary, .modal-success, .modal-info, .modal-warning, .modal-danger) .modal-body { background: #f6f5fb !important; color: #1f2937 !important; }
/* títulos dentro do corpo do modal sem a sombra amarela/roxa do tema antigo */
body:not(.pdv-escuro) .modal-body :is(h1, h2, h3, h4, h5, h6) { text-shadow: none !important; color: #1f2937; -webkit-text-fill-color: currentColor; background-image: none; }