:root {
  --navy: #08365f;
  --navy-dark: #062b4c;
  --blue: #1769aa;
  --blue-soft: #eaf3fb;
  --surface: #ffffff;
  --background: #f1f5f9;
  --border: #dce5ee;
  --text: #1e293b;
  --muted: #64748b;
  --green: #15803d;
  --red: #c2414b;
  --shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

/* WhatsApps vinculados diretamente ao cadastro de empresas */
.company-inline-whatsapps { margin-top: 12px; padding: 11px 12px; border: 1px solid #dfe8e4; border-radius: 12px; background: #f7fbf9; min-width: 300px; }
.clients-heading { margin-bottom: 18px; }
.client-advanced-search { margin-bottom: 20px; padding: 20px; border: 1px solid #dce6e1; border-radius: 15px; background: #fff; box-shadow: 0 6px 20px rgba(33,65,53,.05); }
.client-advanced-search > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.client-advanced-search > header > div { display: flex; align-items: center; gap: 11px; }
.client-advanced-search > header > div > i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; background: #eaf4fa; color: #1769aa; }
.client-advanced-search > header span { display: grid; gap: 2px; }
.client-advanced-search > header small { color: #718078; }
.client-advanced-search > header > a { color: #64776e; font-size: 12px; font-weight: 700; text-decoration: none; }
.client-search-grid { display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)) auto; align-items: end; gap: 11px; }
.client-search-grid label { display: grid; gap: 6px; min-width: 0; color: #40534b; font-size: 12px; font-weight: 700; }
.client-search-grid input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d5e0db; border-radius: 9px; background: #fbfdfc; font: inherit; color: #263b33; }
.client-search-grid input:focus { outline: 2px solid rgba(23,105,170,.15); border-color: #4d91c5; }
.clients-table td { vertical-align: middle; }
.client-list-person { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.client-list-person > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: #eaf4ef; color: #197653; }
.client-list-person img { width: 100%; height: 100%; object-fit: cover; }
.client-list-person > div { display: grid; gap: 3px; min-width: 0; }
.client-list-person strong { color: #263c34; }
.client-list-person small { color: #74837c; font-size: 11px; }
.client-phone { display: inline-flex; align-items: center; gap: 6px; color: #167b54; font-weight: 600; text-decoration: none; white-space: nowrap; }
.client-service-count { display: inline-grid; min-width: 31px; height: 29px; place-items: center; padding: 0 7px; border-radius: 9px; background: #eaf3fb; color: #1769aa; font-weight: 700; }
.client-factory-badge { display: flex; width: max-content; align-items: center; gap: 4px; margin-top: 4px; color: #1769aa; font-size: 10px; font-weight: 700; }
.client-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.client-pagination a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid #d6e2dc; border-radius: 9px; color: #176d50; font-weight: 700; text-decoration: none; }
.client-pagination span { color: #6f7f78; font-size: 13px; }
.client-open-status { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; color: #64776e; font-size: 11px; font-weight: 700; line-height: 1.25; }
.client-open-status i { font-size: 7px; }
.client-open-status.active { color: #15804e; }
.client-open-status.waiting { color: #b87516; }
.client-open-status.none { color: #7b8b84; }
.client-start-service,.client-action-busy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: 9px; background: #e8f6ef; color: #167b54; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.client-action-busy { background: #f1f3f2; color: #7b8883; }
.client-card-service { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e5ece8; }
.start-client-service { width: min(760px,100%); margin: 0 auto; padding: 25px; border: 1px solid #dce6e1; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(33,65,53,.08); }
.start-client-profile { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.start-client-profile > span { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 16px; background: #eaf6f0; color: #167b54; font-size: 23px; }
.start-client-profile small { color: #75857e; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.start-client-profile h1 { margin: 3px 0; color: #263c34; font-size: 25px; }
.start-client-profile p { margin: 0; color: #667970; }
.start-client-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.start-client-options label { display: grid; gap: 7px; color: #3d5148; font-size: 12px; font-weight: 700; }
.start-client-options select,.start-client-options input { min-height: 45px; width: 100%; padding: 0 12px; border: 1px solid #d2dfd9; border-radius: 9px; background: #fbfdfc; color: #263c34; font: inherit; }
.start-client-options input[readonly] { background: #f2f5f4; }
.start-client-open-note { display: flex; gap: 9px; margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; background: #fff8e9; color: #835b19; font-size: 13px; }
.start-client-service > form > footer { display: flex; justify-content: flex-end; gap: 9px; }
.new-client-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.new-client-grid label { display: flex; flex-direction: column; gap: 7px; color: #40554b; font-size: 12px; font-weight: 700; }
.new-client-grid input,.new-client-grid textarea { width: 100%; border: 1px solid #d5e1db; border-radius: 10px; background: #fbfdfc; color: #203d31; font: inherit; font-size: 13px; font-weight: 500; outline: none; padding: 11px 12px; transition: border-color .2s,box-shadow .2s; }
.new-client-grid textarea { resize: vertical; min-height: 92px; }
.new-client-grid input:focus,.new-client-grid textarea:focus { border-color: #37a875; box-shadow: 0 0 0 3px rgba(55,168,117,.12); }
.new-client-wide { grid-column: 1/-1; }
.new-client-phone-help { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; color: #6c7e76; font-size: 11px; }
.new-client-duplicate { display: flex; justify-content: flex-end; margin: -5px 0 14px; }
.sector-schedule-card { margin-top: 20px; padding: 25px; border: 1px solid #dce6e1; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(33,65,53,.08); }
.sector-schedule-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.sector-schedule-heading > span { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: #e9f7f0; color: #168058; font-size: 18px; }
.sector-schedule-heading h2 { margin: 0 0 3px; color: #173e30; font-size: 20px; }
.sector-schedule-heading p { margin: 0; color: #71837b; font-size: 12px; }
.sector-schedule-default { margin-left: auto; flex: 0 0 auto; border-color: #acd8c4; color: #176d4d; background: #f2fbf7; }
.sector-schedule-default:hover,.sector-schedule-default.applied { border-color: #299b6c; color: #176d4d; background: #e5f7ee; }
.sector-schedule-help { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; padding: 11px 13px; border-radius: 10px; background: #f3f8f5; color: #61766c; font-size: 11px; line-height: 1.45; }
.sector-schedule-days { display: grid; gap: 13px; }
.sector-schedule-day { overflow: hidden; border: 1px solid #dde7e2; border-radius: 13px; background: #fbfdfc; }
.sector-schedule-day > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #e3ebe7; background: #f4f8f6; }
.sector-schedule-day > header strong { color: #284c3d; font-size: 13px; }
.sector-schedule-day > header small { color: #819087; font-size: 10px; }
.sector-schedule-periods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
.sector-schedule-period { display: grid; grid-template-columns: minmax(100px,1fr) repeat(2,minmax(85px,1fr)); align-items: end; gap: 9px; padding: 11px; border: 1px solid #e3eae6; border-radius: 10px; background: #f7f9f8; opacity: .68; transition: border-color .2s,background .2s,opacity .2s; }
.sector-schedule-period.active { border-color: #9ed4bd; background: #f3fbf7; opacity: 1; }
.sector-schedule-period > label:not(.sector-schedule-toggle) { display: flex; flex-direction: column; gap: 5px; color: #71837b; font-size: 10px; font-weight: 700; }
.sector-schedule-period input[type=time] { width: 100%; min-height: 37px; padding: 0 8px; border: 1px solid #d6e1dc; border-radius: 8px; background: #fff; color: #27483a; font: inherit; font-size: 12px; }
.sector-schedule-toggle { display: flex; align-items: center; gap: 7px; min-height: 37px; cursor: pointer; color: #405c50; font-size: 11px; }
.sector-schedule-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sector-schedule-toggle > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: transparent; font-size: 10px; }
.sector-schedule-toggle input:checked + span { border-color: #269b6b; background: #269b6b; color: #fff; }
.sector-schedule-card > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.sector-night-option { margin-top: 12px; border-top: 1px solid #e4ebe7; padding-top: 14px; }
.sector-night-option em { display: block; margin-top: 5px; color: #a36916; font-size: 10px; font-style: normal; font-weight: 600; }
.holiday-heading { margin-bottom: 18px; }
.holiday-layout { display: grid; grid-template-columns: minmax(290px,360px) minmax(0,1fr); align-items: start; gap: 18px; }
.holiday-form,.holiday-list { border: 1px solid #dce6e1; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(33,65,53,.07); }
.holiday-form { display: flex; flex-direction: column; gap: 15px; padding: 20px; }
.holiday-form > header { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid #e6ece9; }
.holiday-form > header > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #eaf7f1; color: #19815a; }
.holiday-form > header div { display: flex; flex-direction: column; gap: 2px; }
.holiday-form > header strong { color: #24493a; font-size: 14px; }
.holiday-form > header small { color: #7c8d85; font-size: 10px; }
.holiday-form > label:not(.permission-toggle),.holiday-date-fields label { display: flex; flex-direction: column; gap: 6px; color: #536a60; font-size: 11px; font-weight: 700; }
.holiday-form input[type=text],.holiday-form input[type=number],.holiday-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d7e1dc; border-radius: 9px; background: #fbfdfc; color: #27483a; font: inherit; font-size: 13px; outline: none; }
.holiday-form input:focus,.holiday-form select:focus { border-color: #38a977; box-shadow: 0 0 0 3px rgba(56,169,119,.12); }
.holiday-date-fields { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 11px; }
.holiday-active { padding-top: 13px; border-top: 1px solid #e6ece9; }
.holiday-form > footer { display: flex; justify-content: flex-end; gap: 8px; }
.holiday-list { overflow: hidden; }
.holiday-list > header { padding: 17px 19px; border-bottom: 1px solid #e4ebe7; background: #f7faf8; }
.holiday-list > header div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.holiday-list > header strong { color: #294d3e; font-size: 14px; }
.holiday-list > header small { color: #788a81; font-size: 10px; }
.holiday-items { display: grid; }
.holiday-items article { display: grid; grid-template-columns: 54px minmax(150px,1fr) auto auto; align-items: center; gap: 13px; padding: 13px 17px; border-bottom: 1px solid #edf1ef; }
.holiday-items article:last-child { border-bottom: 0; }
.holiday-date { width: 49px; height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 11px; background: #edf7f2; color: #187b56; text-transform: uppercase; }
.holiday-date strong { font-size: 18px; line-height: 18px; }
.holiday-date span { margin-top: 2px; font-size: 9px; font-weight: 800; }
.holiday-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.holiday-copy strong { overflow: hidden; color: #29493c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.holiday-copy small { color: #7b8c84; font-size: 10px; }
.holiday-actions { display: flex; gap: 4px; }
.holiday-actions form { margin: 0; }
.holiday-actions a,.holiday-actions button { width: 33px; height: 33px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #eef5f1; color: #41705d; cursor: pointer; text-decoration: none; }
.holiday-actions .danger { background: #fff0f0; color: #b94b4b; }
.holiday-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #819088; font-size: 12px; }
.holiday-empty i { font-size: 29px; color: #aac0b5; }
.pause-heading { margin-bottom: 18px; }
.pause-layout { display: grid; grid-template-columns: minmax(330px,410px) minmax(0,1fr); align-items: start; gap: 18px; }
.pause-form,.pause-list { border: 1px solid #dce6e1; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(33,65,53,.07); }
.pause-form { display: flex; flex-direction: column; gap: 15px; padding: 20px; }
.pause-form > header { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid #e6ece9; }
.pause-form > header > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #fff3e6; color: #bc6d18; }
.pause-form > header div { display: flex; flex-direction: column; gap: 2px; }
.pause-form > header strong { color: #24493a; font-size: 14px; }
.pause-form > header small { color: #7c8d85; font-size: 10px; }
.pause-form > label:not(.permission-toggle),.pause-date-fields label { display: flex; flex-direction: column; gap: 6px; color: #536a60; font-size: 11px; font-weight: 700; }
.pause-form input[type=text],.pause-form input[type=datetime-local],.pause-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d7e1dc; border-radius: 9px; background: #fbfdfc; color: #27483a; font: inherit; font-size: 12px; outline: none; }
.pause-form input:focus,.pause-form select:focus { border-color: #38a977; box-shadow: 0 0 0 3px rgba(56,169,119,.12); }
.pause-date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pause-active { padding-top: 13px; border-top: 1px solid #e6ece9; }
.pause-form > footer { display: flex; justify-content: flex-end; gap: 8px; }
.pause-list { overflow: hidden; }
.pause-list > header { padding: 17px 19px; border-bottom: 1px solid #e4ebe7; background: #f7faf8; }
.pause-list > header div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pause-list > header strong { color: #294d3e; font-size: 14px; }
.pause-list > header small { color: #788a81; font-size: 10px; }
.pause-items { display: grid; }
.pause-items article { display: grid; grid-template-columns: 42px minmax(180px,1fr) auto auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #edf1ef; }
.pause-items article:last-child { border-bottom: 0; }
.pause-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; background: #fff3e5; color: #b96817; }
.pause-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pause-copy strong { overflow: hidden; color: #29493c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pause-copy small { color: #5d776b; font-size: 10px; }
.pause-copy > span { color: #84918b; font-size: 10px; line-height: 1.35; }
.status-badge.waiting { color: #936111; border-color: #ead4a5; background: #fff8e8; }
.invite-link-card,.invite-create-card,.invite-history { margin-bottom: 18px; padding: 22px; border: 1px solid #dfe8e4; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(31,66,53,.05); }
.invite-link-card { display: grid; gap: 14px; background: #f2fbf6; }
.invite-link-card > div:first-child { display: grid; gap: 4px; }
.invite-link-card small,.invite-create-card p,.invite-history article small { color: #6b7d75; }
.invite-link-copy { display: flex; gap: 8px; }
.invite-link-copy input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #cfddd6; border-radius: 9px; background: #fff; }
.invite-link-copy button,.invite-link-card > a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 9px; background: #16835a; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.invite-link-card > a { width: max-content; min-height: 40px; }
.invite-create-card h1 { margin: 5px 0; color: #263c34; }
.invite-create-card form { display: flex; align-items: end; gap: 12px; margin-top: 18px; }
.invite-create-card label { display: grid; flex: 1; gap: 7px; color: #33483f; font-size: 13px; font-weight: 700; }
.invite-create-card input { min-height: 44px; padding: 0 13px; border: 1px solid #cfddd6; border-radius: 9px; font: inherit; }
.invite-history > header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.invite-history article { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #e5ece8; }
.invite-history article > div { display: grid; gap: 3px; }
.invite-history article > button { border: 0; background: #fff0f0; color: #bd3e47; border-radius: 8px; padding: 9px 11px; font-weight: 700; cursor: pointer; }
.invite-public-body { min-height: 100vh; background: linear-gradient(145deg,#eef7f3,#f7faf9); }
.invite-public-shell { width: min(560px,calc(100% - 28px)); margin: 0 auto; padding: 34px 0; }
.invite-public-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 22px; color: #163d30; text-decoration: none; }
.invite-public-brand > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #08365f; color: #fff; }
.invite-public-card { padding: 28px; border: 1px solid #dfe8e4; border-radius: 18px; background: #fff; box-shadow: 0 15px 42px rgba(30,68,53,.1); }
.invite-public-card > header { margin-bottom: 22px; }
.invite-public-card h1 { margin: 6px 0; color: #253b33; }
.invite-public-card p { color: #687a72; }
.invite-public-card.complete,.invite-public-card.invalid { text-align: center; }
.invite-public-success,.invite-public-error { display: grid; width: 66px; height: 66px; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: #e8f7ef; color: #16835a; font-size: 28px; }
.invite-public-error { background: #fff0f0; color: #c13f49; }
.invite-user-wizard > section { display: none; }
.invite-user-wizard > section.active { display: grid; gap: 15px; }
.invite-user-wizard label { display: grid; gap: 7px; color: #344b41; font-size: 13px; font-weight: 700; }
.invite-user-wizard input { min-height: 46px; padding: 0 13px; border: 1px solid #cfddd6; border-radius: 9px; font: inherit; }
.invite-user-wizard input[readonly] { background: #f2f5f4; color: #596c64; }
.invite-user-wizard section > small { color: #697c73; }
.invite-user-wizard footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.company-inline-whatsapps-heading .company-invite-inline { margin-left: auto; color: #365d4d; }
.company-inline-whatsapps-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.company-inline-whatsapps-heading > span { color: #176b4b; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.company-inline-whatsapps-heading > a { display: inline-flex; align-items: center; gap: 5px; color: #147d55; font-size: 12px; font-weight: 700; text-decoration: none; }
.company-inline-whatsapp-item,.company-inline-whatsapp-mobile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #e5eee9; }
.company-inline-whatsapp-item > span,.company-inline-whatsapp-mobile > span { display: grid; gap: 2px; min-width: 0; }
.company-inline-whatsapp-item strong,.company-inline-whatsapp-mobile strong { color: #253b33; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-inline-whatsapp-item small,.company-inline-whatsapp-mobile small,.company-inline-whatsapps-empty { color: #6d7e77; font-size: 11px; }
.company-inline-whatsapp-item > div { display: flex; gap: 4px; }
.company-inline-whatsapp-item > div a,.company-inline-whatsapp-item > div button { display: grid; width: 29px; height: 29px; place-items: center; border: 0; border-radius: 8px; background: #e7f4ed; color: #167450; cursor: pointer; text-decoration: none; }
.company-inline-whatsapp-item > div button { background: #fff0f0; color: #c33f48; }
.company-inline-whatsapps-manage { display: inline-flex; margin-top: 8px; color: #147d55; font-size: 11px; font-weight: 700; text-decoration: none; }
.company-inline-whatsapp-mobile { color: inherit; text-decoration: none; }
.company-inline-whatsapp-mobile > i { color: #16835a; }
.company-inline-whatsapps.mobile { min-width: 0; margin: 14px 0 0; }
.company-whatsapp-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.company-whatsapp-page-heading h1 { margin: 4px 0; color: #263c34; font-size: 27px; }
.company-whatsapp-page-heading p { margin: 0; color: #718079; }
.company-whatsapp-management-list { display: grid; gap: 12px; }
.company-whatsapp-management-item { display: grid; grid-template-columns: 48px minmax(220px,1fr) auto auto auto; align-items: center; gap: 15px; padding: 17px; border: 1px solid #dfe8e4; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(31,66,53,.05); }
.company-whatsapp-management-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #e7f7ef; color: #168a5c; font-size: 23px; }
.company-whatsapp-management-copy { display: grid; gap: 3px; min-width: 0; }
.company-whatsapp-management-copy strong { color: #263c34; }
.company-whatsapp-management-copy span { color: #52665e; font-size: 13px; }
.company-whatsapp-management-copy small { color: #829089; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-whatsapp-management-actions { display: flex; align-items: center; gap: 7px; }
.company-whatsapp-management-actions a,.company-whatsapp-management-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: #edf6f2; color: #176f50; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.company-whatsapp-management-actions button.danger { background: #fff0f0; color: #c33f48; }

@media (max-width: 760px) {
  .client-advanced-search > header { align-items: flex-start; flex-direction: column; }
  .client-search-grid { grid-template-columns: 1fr; }
  .client-search-grid .button { width: 100%; justify-content: center; }
  .client-pagination { justify-content: space-between; gap: 8px; }
  .client-pagination span { text-align: center; }
  .client-card-service { align-items: stretch; flex-direction: column; }
  .client-start-service,.client-action-busy { width: 100%; }
  .start-client-service { padding: 19px 15px; }
  .start-client-options { grid-template-columns: 1fr; }
  .start-client-service > form > footer { flex-direction: column-reverse; }
  .start-client-service > form > footer .button { width: 100%; justify-content: center; }
  .new-client-grid { grid-template-columns: 1fr; }
  .new-client-wide { grid-column: auto; }
  .sector-schedule-card { padding: 18px 13px; }
  .sector-schedule-heading { flex-wrap: wrap; }
  .sector-schedule-default { width: 100%; margin-left: 0; justify-content: center; }
  .sector-schedule-day > header { align-items: flex-start; flex-direction: column; }
  .sector-schedule-periods { grid-template-columns: 1fr; }
  .sector-schedule-period { grid-template-columns: minmax(105px,1fr) repeat(2,minmax(80px,1fr)); }
  .sector-schedule-card > footer { flex-direction: column-reverse; }
  .sector-schedule-card > footer .button { width: 100%; justify-content: center; }
  .holiday-layout { grid-template-columns: 1fr; }
  .holiday-items article { grid-template-columns: 50px minmax(0,1fr) auto; }
  .holiday-items article > .status-badge { display: none; }
  .holiday-actions { grid-column: 2/-1; justify-content: flex-end; }
  .holiday-form > footer { flex-direction: column-reverse; }
  .holiday-form > footer .button { width: 100%; justify-content: center; }
  .pause-layout { grid-template-columns: 1fr; }
  .pause-date-fields { grid-template-columns: 1fr; }
  .pause-items article { grid-template-columns: 40px minmax(0,1fr) auto; }
  .pause-items article > .status-badge { display: none; }
  .pause-items .holiday-actions { grid-column: 2/-1; justify-content: flex-end; }
  .pause-form > footer { flex-direction: column-reverse; }
  .pause-form > footer .button { width: 100%; justify-content: center; }
  .company-whatsapp-page-heading { align-items: stretch; flex-direction: column; }
  .company-whatsapp-page-heading .button { justify-content: center; }
  .company-whatsapp-management-item { grid-template-columns: 44px 1fr; gap: 12px; }
  .company-whatsapp-management-item > .whatsapp-status,.company-whatsapp-management-item > .status-badge { justify-self: start; }
  .company-whatsapp-management-actions { grid-column: 1 / -1; }
  .company-whatsapp-management-actions a,.company-whatsapp-management-actions button { flex: 1; justify-content: center; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--text); font-family: "Inter", Arial, sans-serif; font-size: 14px; }
body.is-loading { cursor: progress; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; color: #fff; background: var(--navy); box-shadow: 16px 0 40px rgba(15, 23, 42, .13); z-index: 30; }
.brand { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 20px; background: rgba(255,255,255,.13); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: #c4d7e8; font-size: 11px; }
.sidebar-context { padding: 18px 20px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-context span, .sidebar-context strong, .sidebar-context small { display: block; }
.sidebar-context span { color: #a9c3d9; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sidebar-context strong { margin-top: 5px; font-weight: 600; }
.sidebar-context small { margin-top: 4px; color: #f8d98b; font-size: 10px; }
.sidebar-menu { flex: 1; overflow-y: auto; padding: 14px 12px 24px; }
.sidebar-logout { padding: 10px 12px 16px; border-top: 1px solid rgba(255,255,255,.1); }
.menu-label { padding: 17px 12px 8px; color: #8fb0ca; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.menu-item { min-height: 44px; display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 10px 12px; border-radius: 9px; color: #e5eff7; transition: background .18s, color .18s; }
.menu-item > i { width: 20px; text-align: center; color: #b9cede; }
.menu-item > span { flex: 1; }
.menu-item > small { color: #8fb0ca; font-size: 9px; }
a.menu-item:hover, .menu-item.active { color: #fff; background: rgba(255,255,255,.12); }
.menu-item.active { box-shadow: inset 3px 0 #68b5ee; }
.menu-item.active > i { color: #fff; }
.menu-item.disabled { cursor: default; opacity: .58; }
.menu-subitems { position: relative; display: grid; gap: 2px; margin: 1px 0 8px 22px; padding-left: 18px; }
.menu-subitems::before { content: ''; position: absolute; top: 0; bottom: 5px; left: 0; width: 1px; background: rgba(185,206,222,.3); }
.menu-subitem { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: #b9cede; font-size: 12px; transition: background .18s,color .18s; }
.menu-subitem i { width: 15px; color: #8fb0ca; text-align: center; font-size: 10px; }
.menu-subitem:hover,.menu-subitem.active { color: #fff; background: rgba(255,255,255,.1); }
.menu-subitem.active i { color: #8ed0fa; }
.sidebar-overlay { display: none; }

.app-content { min-width: 0; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 30px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title strong, .topbar-title span { display: block; }
.topbar-title strong { font-size: 16px; }
.topbar-title span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--navy); cursor: pointer; }
.access-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #fde3a8; border-radius: 999px; color: #8a5d00; background: #fff8e7; font-size: 11px; font-weight: 600; }
.access-badge.authenticated { color: #176534; border-color: #b9e2c7; background: #eefaf2; }
.topbar-account { display: flex; align-items: center; gap: 14px; }
.topbar-account span strong, .topbar-account span small { display: block; text-align: right; }
.topbar-account span strong { font-size: 12px; }
.topbar-account span small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.topbar-account > a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--navy); background: #fff; }
.main-content { width: min(1480px, 100%); margin: 0 auto; padding: 30px; }

.login-page { overflow-x: hidden; background: #eaf1f7; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(480px, 1.1fr); }
.login-presentation { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 46px clamp(38px, 6vw, 86px); color: #fff; background: linear-gradient(145deg, #062b4c 0%, #083f6d 58%, #0c659d 100%); }
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.1); font-size: 21px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 20px; }
.login-brand small { margin-top: 3px; color: #bdd9ec; font-size: 11px; }
.login-factory-brand { width: min(390px, 92%); display: block; padding: 8px 0; }
.login-factory-brand img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.16)); transition: transform .2s ease, filter .2s ease; }
.login-factory-brand:hover img { transform: translateY(-2px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.24)); }
.login-copy > span { color: #8ed0fa; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.login-copy h1 { max-width: 560px; margin: 15px 0 18px; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -.05em; }
.login-copy p { max-width: 560px; margin: 0; color: #c9dfed; font-size: 15px; line-height: 1.7; }
.login-feature { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.07); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.login-feature:hover { border-color: rgba(34,216,112,.55); background: rgba(34,216,112,.1); transform: translateY(-1px); }
.login-feature > i { color: #7dc8f6; font-size: 22px; }
.login-feature strong, .login-feature small { display: block; }
.login-feature small { margin-top: 3px; color: #bfd7e7; font-size: 10px; }
.login-form-side { display: grid; place-items: center; padding: 38px; }
.login-card { width: min(470px, 100%); padding: clamp(28px, 4vw, 46px); border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.12); }
.login-card-heading h2 { margin: 0; color: #102c43; font-size: 30px; letter-spacing: -.035em; }
.login-card-heading p { margin: 9px 0 26px; color: var(--muted); }
.login-field { display: block; margin-top: 17px; }
.login-field > span { display: block; margin-bottom: 8px; color: #34495b; font-size: 11px; font-weight: 600; }
.login-field > div { position: relative; }
.login-field > div > i { position: absolute; left: 14px; top: 50%; color: #8196a8; transform: translateY(-50%); }
.login-field input { width: 100%; height: 50px; padding: 0 45px 0 42px; border: 1px solid #cbd8e3; border-radius: 11px; outline: 0; color: var(--text); background: #fbfdff; }
.login-field input:focus { border-color: #428bc1; box-shadow: 0 0 0 3px rgba(66,139,193,.13); }
.login-field button { position: absolute; top: 0; right: 0; width: 45px; height: 50px; border: 0; color: #71859a; background: transparent; cursor: pointer; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; font-size: 11px; }
.login-options label { display: flex; align-items: center; gap: 8px; color: #52687a; cursor: pointer; }
.login-options input { width: 16px; height: 16px; accent-color: var(--navy); }
.login-options a { color: var(--blue); font-weight: 600; }
.login-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; border: 0; border-radius: 11px; color: #fff; background: var(--navy); font-weight: 700; cursor: pointer; }
.login-submit:hover { background: var(--navy-dark); }
.login-secondary { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid #cbd8e3; border-radius: 11px; color: var(--navy); background: #fff; font-weight: 600; cursor: pointer; }
.login-secondary:hover { background: #f6f9fc; }
.login-note { display: flex; align-items: flex-start; gap: 7px; margin: 19px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.login-director-footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.login-director-footer a { display: inline-flex; align-items: center; gap: 7px; color: #71859a; font-size: 10px; font-weight: 600; }
.login-director-footer a:hover { color: var(--blue); }
.login-back { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--blue); font-size: 11px; font-weight: 600; }

.admin-welcome, .company-hero { display: flex; align-items: center; gap: 24px; padding: 28px 30px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.admin-welcome > div, .company-hero-copy { flex: 1; min-width: 0; }
.admin-welcome h1, .company-hero h1 { margin: 0; color: #102c43; font-size: clamp(23px, 3vw, 34px); letter-spacing: -.04em; }
.admin-welcome p, .company-hero-copy > p { margin: 9px 0 0; color: var(--muted); line-height: 1.6; }
.admin-welcome-icon { width: 88px; height: 88px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 23px; color: #1769aa; background: #e8f3fc; font-size: 34px; }
.company-context-card { display: flex; align-items: end; gap: 14px; margin: 18px 0; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.company-context-card label { flex: 1; }
.company-context-card label > span { display: block; margin-bottom: 7px; color: #34495b; font-size: 11px; font-weight: 600; }
.company-context-card select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #cad6e2; border-radius: 9px; color: var(--text); background: #fff; }
.admin-links { margin-top: 18px; }
.company-hero { position: relative; }
.company-hero-image { width: 112px; height: 112px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 24px; color: #fff; background: var(--navy); font-size: 40px; }
.company-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.company-hero-details { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-top: 15px; }
.company-hero-details > span:not(.status-badge) { display: inline-flex; align-items: center; gap: 7px; color: #52687a; font-size: 11px; }
.company-change { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--navy); font-size: 11px; font-weight: 600; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin: 18px 0; }
.metrics-grid article { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.metric-icon { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; }
.metric-icon.blue { color: #1769aa; background: #e8f3fc; }.metric-icon.green { color: #15803d; background: #e9f8ee; }.metric-icon.purple { color: #7951b8; background: #f2ecfc; }.metric-icon.orange { color: #c46b14; background: #fff2df; }
.metrics-grid strong, .metrics-grid small { display: block; }
.metrics-grid strong { color: #102c43; font-size: 23px; }.metrics-grid small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.factory-promo { position: relative; isolation: isolate; min-height: 176px; display: grid; grid-template-columns: minmax(210px, 330px) minmax(280px, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 58px); overflow: hidden; margin-top: 22px; padding: 30px clamp(26px, 4vw, 52px); border: 1px solid rgba(34,216,112,.35); border-radius: 21px; color: #fff; background: linear-gradient(120deg, #020b28 0%, #061b3c 58%, #073f48 100%); box-shadow: 0 18px 44px rgba(2,11,40,.18); transition: transform .2s ease, box-shadow .2s ease; }
.factory-promo::before { content: ""; position: absolute; width: 360px; height: 360px; right: -170px; top: -220px; border-radius: 50%; background: rgba(34,216,112,.18); z-index: -1; }
.factory-promo::after { content: ""; position: absolute; width: 210px; height: 210px; left: 28%; bottom: -185px; border: 1px solid rgba(34,216,112,.18); border-radius: 50%; z-index: -1; }
.factory-promo:hover { transform: translateY(-2px); box-shadow: 0 23px 54px rgba(2,11,40,.25); }
.factory-promo-brand { display: block; }
.factory-promo-brand img { width: 100%; height: auto; display: block; }
.factory-promo-copy { min-width: 0; }
.factory-promo-copy > span, .factory-promo-copy > strong, .factory-promo-copy > small { display: block; }
.factory-promo-eyebrow { margin-bottom: 8px; color: #22d870; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.factory-promo-copy > strong { font-size: clamp(20px, 2vw, 28px); line-height: 1.18; letter-spacing: -.035em; }
.factory-promo-copy > small { max-width: 650px; margin-top: 10px; color: #bcd0df; font-size: 12px; line-height: 1.65; }
.factory-promo-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border-radius: 10px; color: #031329; background: #22d870; font-size: 11px; font-weight: 700; white-space: nowrap; }

.welcome-card { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 38px 44px; border-radius: 20px; color: white; background: linear-gradient(125deg, #08365f 0%, #0d578d 66%, #1676ad 100%); box-shadow: var(--shadow); }
.eyebrow { display: block; margin-bottom: 9px; color: var(--blue); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.welcome-card .eyebrow { color: #a8d4f3; }
.welcome-card h1 { max-width: 680px; margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -.04em; }
.welcome-card p { max-width: 650px; margin: 14px 0 0; color: #d6e9f7; font-size: 15px; line-height: 1.65; }
.welcome-icon { flex: 0 0 auto; width: 122px; height: 122px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: rgba(255,255,255,.1); font-size: 48px; transform: rotate(-4deg); }
.section-heading, .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 17px; }
.section-heading h2, .page-heading h1 { margin: 0; color: #15283a; letter-spacing: -.025em; }
.section-heading h2 { font-size: 20px; }
.page-heading h1 { font-size: 26px; }
.section-heading p, .page-heading p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.action-card { min-height: 126px; display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 7px 24px rgba(15,23,42,.05); transition: transform .18s, box-shadow .18s, border-color .18s; }
a.action-card:hover { transform: translateY(-2px); border-color: #a8cce6; box-shadow: var(--shadow); }
.action-card.muted { opacity: .72; }
.action-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 18px; }
.action-icon.blue { color: #1769aa; background: #e8f3fc; }
.action-icon.green { color: #15803d; background: #e9f8ee; }
.action-icon.purple { color: #7951b8; background: #f2ecfc; }
.action-copy { flex: 1; min-width: 0; }
.action-copy strong, .action-copy small { display: block; }
.action-copy strong { margin-bottom: 7px; font-size: 15px; }
.action-copy small { color: var(--muted); line-height: 1.45; }
.action-arrow { color: #8da5b8; }
.notice-card { display: flex; gap: 15px; margin-top: 22px; padding: 18px 20px; border: 1px solid #f1d494; border-radius: 14px; background: #fffaf0; color: #72531c; }
.notice-card > i { margin-top: 2px; color: #bc8215; font-size: 19px; }
.notice-card strong { display: block; }
.notice-card p { margin: 5px 0 0; line-height: 1.55; }

/* Painel de filas de atendimento */
.queue-main { max-width: none; padding-top: 18px; padding-bottom: 88px; }
.queue-main > .page-heading,
.queue-main > .company-whatsapp-panel { display: none; }
.topbar-operations { display: flex; align-items: center; gap: 18px; }
.queue-live { display: inline-flex; align-items: center; gap: 8px; color: #537083; font-size: 11px; font-weight: 600; }
.queue-live > span { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px #dcfce7; }
.queue-live.offline > span { background: #ef4444; box-shadow: 0 0 0 5px #fee2e2; }
.whatsapp-header { position: relative; }
.whatsapp-header-button { min-width: 310px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #bbdec9; border-radius: 13px; color: #173348; background: #f5fcf7; cursor: pointer; text-align: left; transition: border-color .18s, box-shadow .18s, background .18s; }
.whatsapp-header-button:hover,.whatsapp-header.open .whatsapp-header-button { border-color: #22a75a; background: #fff; box-shadow: 0 8px 24px rgba(21,128,61,.13); }
.whatsapp-header-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#25d366,#128c4a); font-size: 18px; }
.whatsapp-header-copy { min-width: 0; flex: 1; }
.whatsapp-header-copy small,.whatsapp-header-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-header-copy small { color: #708496; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.whatsapp-header-copy strong { margin-top: 2px; max-width: 145px; font-size: 11px; }
.whatsapp-header-state { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.whatsapp-header-state i { font-size: 6px; }
.whatsapp-header-state.connected { color: #166534; background: #dcfce7; }
.whatsapp-header-state.waiting { color: #92400e; background: #fef3c7; }
.whatsapp-header-state.disconnected,.whatsapp-header-state.empty { color: #991b1b; background: #fee2e2; }
.whatsapp-header-chevron { color: #7c8e9b; font-size: 10px; transition: transform .18s; }
.whatsapp-header.open .whatsapp-header-chevron { transform: rotate(180deg); }
.whatsapp-header-menu { position: absolute; top: calc(100% + 9px); right: 0; width: min(390px, calc(100vw - 28px)); visibility: hidden; opacity: 0; transform: translateY(-5px); overflow: hidden; border: 1px solid #d9e5de; border-radius: 15px; background: #fff; box-shadow: 0 20px 55px rgba(15,38,26,.2); transition: opacity .16s, transform .16s, visibility .16s; z-index: 80; }
.whatsapp-header.open .whatsapp-header-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.whatsapp-header-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #e6eee9; background: #f6fbf8; }
.whatsapp-header-menu > header strong,.whatsapp-header-menu > header small { display: block; }
.whatsapp-header-menu > header strong { color: #173348; font-size: 12px; }
.whatsapp-header-menu > header small { margin-top: 2px; color: #728697; font-size: 8px; }
.whatsapp-header-menu > header a { color: #15803d; font-size: 10px; font-weight: 700; }
.whatsapp-header-list { max-height: 310px; overflow-y: auto; padding: 8px; }
.whatsapp-header-item { display: grid; grid-template-columns: auto minmax(100px,1fr) auto; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; }
.whatsapp-header-item + .whatsapp-header-item { border-top: 1px solid #edf2ef; }
.whatsapp-header-item-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #20b95b; font-size: 15px; }
.whatsapp-header-item > div { min-width: 0; }
.whatsapp-header-item > div strong,.whatsapp-header-item > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-header-item > div strong { color: #19364b; font-size: 10px; }
.whatsapp-header-item > div small { margin-top: 3px; color: #728697; font-size: 9px; }
.whatsapp-header-item .whatsapp-status { padding: 5px 7px; font-size: 9px; }
.whatsapp-header-empty { padding: 24px 14px; color: #7b8d82; font-size: 11px; text-align: center; }
.company-whatsapp-panel { margin-bottom: 17px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 7px 24px rgba(15,23,42,.05); }
.company-whatsapp-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border-bottom: 1px solid #e7edf2; background: #f8fbf9; }
.company-whatsapp-heading .eyebrow { margin-bottom: 4px; color: #15803d; }
.company-whatsapp-heading strong { color: #173348; font-size: 14px; }
.company-whatsapp-heading > small { color: #718596; font-size: 9px; }
.company-whatsapp-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.company-whatsapp-item { min-width: 245px; flex: 1 1 270px; display: grid; grid-template-columns: auto minmax(100px,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #dce7e1; border-radius: 12px; background: #fbfefc; }
.company-whatsapp-icon { width: 36px; height: 36px; display: grid; place-items: center; grid-row: span 2; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#25d366,#128c4a); font-size: 18px; }
.company-whatsapp-item > div { min-width: 0; }
.company-whatsapp-item > div strong,.company-whatsapp-item > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-whatsapp-item > div strong { color: #173348; font-size: 11px; }
.company-whatsapp-item > div small { margin-top: 3px; color: #718596; font-size: 9px; }
.company-whatsapp-item time { grid-column: 2 / 4; color: #8a9aa6; font-size: 8px; }
.company-whatsapp-item time::before { content: 'Verificado: '; }
.company-whatsapp-empty { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 17px; color: #7d9187; font-size: 11px; }
.company-whatsapp-empty i { color: #16a34a; font-size: 18px; }
.queue-board { display: grid; grid-template-columns: repeat(2,minmax(300px,1fr)); align-items: start; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.queue-column { min-width: 260px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #eef3f7; }
.queue-column > header { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-top: 4px solid #64748b; border-bottom: 1px solid #dde5ec; background: #fff; }
.queue-column.first > header { border-top-color: #3b82f6; }
.queue-column.waiting > header { border-top-color: #f59e0b; }
.queue-column.serving > header { border-top-color: #10b981; }
.queue-column.done > header { border-top-color: #64748b; }
.queue-column-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #31536b; background: #e9f1f7; }
.queue-column > header > div { flex: 1; min-width: 0; }
.queue-column > header strong,.queue-column > header small { display: block; }
.queue-column > header strong { color: #163348; font-size: 15px; }
.queue-column > header small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.queue-column > header b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: #40596c; background: #edf2f6; font-size: 12px; }
.queue-cards { display: grid; gap: 5px; min-height: 150px; max-height: calc(100vh - 112px); overflow-y: auto; padding: 6px; }
.ticket-card { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "head action" "tags action"; column-gap: 8px; padding: 7px 8px; border: 1px solid #d9e3eb; border-radius: 10px; background: #fff; box-shadow: 0 1px 5px rgba(15,23,42,.04); }
.ticket-head { grid-area: head; display: flex; align-items: center; gap: 7px; min-width: 0; }
.ticket-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: #08365f; font-size: 14px; font-weight: 700; }
.ticket-head > div { flex: 1; min-width: 0; }
.ticket-head strong,.ticket-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-head strong { color: #173348; font-size: 14px; line-height: 1.15; }
.ticket-head small { margin-top: 1px; color: var(--muted); font-size: 10px; line-height: 1.15; }
.ticket-head .ticket-company { color: #536d7e; font-size: 10.5px; font-weight: 600; }
.ticket-head .ticket-phone { color: #748894; font-size: 10px; }
.ticket-head .ticket-company i,.ticket-head .ticket-phone i { width: 12px; color: #16866a; text-align: center; }
.ticket-head em { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: #ef4444; font-size: 10px; font-style: normal; }
.ticket-tags { grid-area: tags; display: flex; min-width: 0; margin: 3px 0 0 43px; }
.ticket-tags span { max-width: 100%; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; padding: 3px 6px; border-radius: 6px; color: #526a7b; background: #eef3f7; font-size: 9.5px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.ticket-tags .sector { color: #176534; background: #e8f7ed; }
.ticket-tags .no-sector { color: #975a16; background: #fff4db; }
.ticket-card > p { display: none; }
.ticket-foot { grid-area: action; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 0; border: 0; }
.ticket-foot time { color: #758995; font-size: 9px; white-space: nowrap; }
.ticket-foot time i { margin-right: 4px; }
.ticket-foot form { margin: 0; }
.ticket-action { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 8px; color: #fff; background: #08365f; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ticket-card.is-triage { border-color: #f2d59c; box-shadow: 0 2px 8px rgba(180,112,21,.08); }
.ticket-tags .no-sector.triage { color: #89520d; background: #fff0c7; }
.triage-take-form { width: 158px; display: grid; gap: 5px; }
.triage-take-form select { width: 100%; height: 30px; padding: 0 25px 0 8px; border: 1px solid #d7e0e6; border-radius: 7px; outline: none; color: #38505f; background: #fff; font: inherit; font-size: 10px; }
.triage-take-form select:focus { border-color: #3b87b8; box-shadow: 0 0 0 2px rgba(59,135,184,.1); }
.triage-take-form .ticket-action { width: 100%; }
.triage-take-form .ticket-action:disabled { opacity: .55; cursor: not-allowed; }
.triage-card-actions { width: 158px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.triage-card-actions form { min-width: 0; }
.triage-card-preview,.triage-card-finish { width: 100%; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; border-radius: 7px; font: inherit; font-size: 9px; font-weight: 700; line-height: 1.15; cursor: pointer; }
.triage-card-preview { border: 1px solid #b9ceda; color: #315d75; background: #f4f9fc; }
.triage-card-finish { border: 1px solid #e4bbbb; color: #a03939; background: #fff5f5; }
.triage-card-preview:hover { color: #fff; border-color: #337da5; background: #337da5; }
.triage-card-finish:hover { color: #fff; border-color: #b84242; background: #b84242; }
.triage-preview-modal[hidden] { display: none !important; }
.triage-preview-modal { position: fixed; inset: 0; z-index: 3300; display: grid; place-items: center; padding: 20px; background: rgba(13,30,40,.56); backdrop-filter: blur(3px); }
.triage-preview-card { width: min(620px,100%); max-height: min(760px,92vh); display: grid; grid-template-rows: auto auto minmax(150px,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: 0 28px 90px rgba(9,24,31,.35); }
.triage-preview-card > header { display: flex; align-items: center; gap: 14px; padding: 19px 20px 16px; border-bottom: 1px solid #e2e9ec; }
.triage-preview-card > header > div { min-width: 0; flex: 1; }
.triage-preview-card > header small,.triage-preview-card > header strong,.triage-preview-card > header span { display: block; }
.triage-preview-card > header small { color: #778b95; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.triage-preview-card > header strong { margin-top: 3px; color: #193541; font-size: 18px; }
.triage-preview-card > header span { margin-top: 4px; overflow: hidden; color: #627983; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.triage-preview-card > header button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; color: #617680; background: #edf2f4; cursor: pointer; }
.triage-preview-note { display: flex; align-items: center; gap: 9px; padding: 10px 20px; color: #426472; background: #edf7fa; font-size: 11px; }
.triage-preview-note i { color: #277895; }
.triage-preview-messages { min-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 18px 20px; background: #f3f6f7; }
.triage-preview-message { max-width: 82%; padding: 9px 11px 7px; border-radius: 11px; box-shadow: 0 1px 3px rgba(27,47,57,.08); }
.triage-preview-message.from-client { align-self: flex-start; border-bottom-left-radius: 3px; background: #fff; }
.triage-preview-message.from-system { align-self: flex-end; border-bottom-right-radius: 3px; background: #dff2ea; }
.triage-preview-message small { color: #66808b; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.triage-preview-message p { margin: 4px 0 5px; color: #263f49; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.triage-preview-message time { display: block; color: #7d9098; font-size: 9px; text-align: right; }
.triage-preview-loading,.triage-preview-empty,.triage-preview-error { margin: auto; padding: 22px; color: #70858e; font-size: 12px; text-align: center; }
.triage-preview-error { color: #ae3e3e; }
.triage-preview-card > footer { display: flex; justify-content: flex-end; padding: 13px 20px; border-top: 1px solid #e2e9ec; }
.ticket-action.finish { background: #198754; }
.queue-empty { min-height: 135px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; color: #8ca0ae; text-align: center; font-size: 10px; }
.queue-empty i { font-size: 25px; }
.queue-filter-footer { position: fixed; right: 0; bottom: 0; left: 280px; z-index: 24; padding: 9px 24px; border-top: 1px solid #d8e3ea; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(15,23,42,.08); backdrop-filter: blur(10px); }
.queue-filter-form { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; }
.queue-filter-form > label { display: flex; align-items: center; gap: 9px; }
.queue-filter-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #1769aa; background: #eaf3fb; }
.queue-filter-copy strong,.queue-filter-copy small { display: block; white-space: nowrap; }
.queue-filter-copy strong { color: #24465c; font-size: 11px; }
.queue-filter-copy small { margin-top: 2px; color: #7a8d99; font-size: 9px; }
.queue-filter-select { position: relative; width: min(390px, 44vw); }
.queue-filter-select > i:first-child { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: #5b7d92; pointer-events: none; }
.queue-filter-select > i:last-child { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: #78909f; font-size: 10px; pointer-events: none; }
.queue-filter-select select { width: 100%; height: 40px; padding: 0 38px; border: 1px solid #bfcfd9; border-radius: 10px; outline: 0; color: #24465c; background: #fff; font: inherit; font-size: 12px; font-weight: 600; appearance: none; cursor: pointer; }
.queue-filter-select select:focus { border-color: #4f91ba; box-shadow: 0 0 0 3px rgba(23,105,170,.12); }
.queue-filter-total,.queue-filter-empty { color: #6b7f8c; font-size: 10px; white-space: nowrap; }
.queue-filter-empty { color: #a04646; }
.sector-user-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.sector-user-option { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #dbe4eb; border-radius: 10px; background: #f8fafc; cursor: pointer; }
.sector-user-option input { width: 18px; height: 18px; accent-color: #08365f; }
.sector-user-option span,.sector-user-option strong,.sector-user-option small { display: block; }
.sector-user-option small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.sector-edit-card { width: min(920px,calc(100% - 30px)); overflow: hidden; padding: 0; border: 1px solid #dbe4ec; box-shadow: 0 14px 38px rgba(15,23,42,.1); }
.sector-edit-card .wizard-panel.active { gap: 0; }
.sector-edit-heading { display: none; }
.sector-edit-heading > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; background: rgba(255,255,255,.12); font-size: 20px; }
.sector-edit-heading h1 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.sector-edit-heading p { margin: 5px 0 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.45; }
.sector-edit-section { padding: 14px 20px; border-bottom: 1px solid #e5ebf0; }
.sector-edit-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sector-edit-section-heading > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #0d527f; background: #e8f2f8; font-size: 12px; }
.sector-edit-section-heading strong,.sector-edit-section-heading small { display: block; }
.sector-edit-section-heading strong { color: #173348; font-size: 13px; }
.sector-edit-section-heading small { display: none; }
.sector-edit-fields { display: grid; grid-template-columns: 165px minmax(0,1fr); gap: 14px; }
.sector-edit-fields .users-field label { min-height: 17px; margin-bottom: 4px; font-size: 11px; }
.sector-edit-fields .users-field input { height: 40px; padding: 8px 12px; border-width: 1px; border-radius: 9px; font-size: 14px; }
.sector-edit-fields .users-field > small { display: none; }
.users-page .master-card-header small { display: none; }
.user-editor { width: min(1040px,calc(100% - 30px)); margin: 0 auto 18px; overflow: hidden; border: 1px solid #d9e3ea; border-radius: 15px; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.user-editor-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,.88fr); }
.user-editor-profile,.user-editor-permissions { min-width: 0; padding: 24px; }
.user-editor-permissions { border-left: 1px solid #e0e7ec; background: #f8fafb; }
.user-editor-section-title { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.user-editor-section-title > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #0b4d78; background: #e8f2f8; font-size: 15px; }
.user-editor-section-title strong,.user-editor-section-title small { display: block; }
.user-editor-section-title strong { color: #173348; font-size: 15px; }
.user-editor-section-title small { margin-top: 3px; color: #758794; font-size: 10px; line-height: 1.35; }
.user-editor-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.user-editor-full { grid-column: 1 / -1; }
.user-editor .users-field label { min-height: auto; margin-bottom: 6px; color: #405664; font-size: 11px; }
.user-editor .users-field input { height: 43px; padding: 9px 12px; border: 1px solid #cbd7df; border-radius: 9px; background: #fff; box-shadow: none; font-size: 14px; text-transform: none !important; }
.user-editor .users-field input:focus { border-color: #397da7; background: #fff; box-shadow: 0 0 0 3px rgba(23,105,170,.1); }
.user-editor .users-field input[readonly] { color: #607386; background: #eef3f7; cursor: not-allowed; }
.user-editor .password-field button { width: 41px; height: 43px; }
.user-editor-email-row { display: flex; align-items: stretch; gap: 7px; }
.user-editor-email-row > input { min-width: 0; flex: 1; }
.user-editor-email-row > input:disabled { opacity: 1; color: #526875; border-color: #d7e0e6; background: #f3f6f8; cursor: default; }
.user-editor-email-edit { min-width: 86px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid #9bb5c5; border-radius: 9px; color: #174f72; background: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.user-editor-email-edit:hover { border-color: #397da7; background: #edf6fb; }
.user-editor-email-state { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #7a8c97; font-size: 9px; }
.user-editor-email-state i { color: #587383; }
.user-editor-email-state.verified { color: #147553; }
.user-editor-email-state.verified i { color: #16866a; }
.user-editor-sector-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.user-editor-sector-label strong { color: #405664; font-size: 11px; }
.user-editor-sector-label span { padding: 3px 7px; border-radius: 999px; color: #496879; background: #e8eff3; font-size: 9px; font-weight: 700; }
.user-editor-sector-list { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; padding-right: 3px; }
.user-editor-sector { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px 8px 12px; border: 1px solid #d8e2e8; border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .15s,background .15s,box-shadow .15s; }
.user-editor-sector input { position: absolute; opacity: 0; pointer-events: none; }
.user-editor-sector > span { min-width: 0; }
.user-editor-sector strong,.user-editor-sector small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-editor-sector strong { color: #294655; font-size: 12px; }
.user-editor-sector small { margin-top: 2px; color: #7a8c97; font-size: 9px; }
.user-editor-sector > i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #c9d5dc; border-radius: 6px; color: transparent; background: #fff; font-size: 9px; }
.user-editor-sector:hover { border-color: #9ebacb; background: #fcfeff; }
.user-editor-sector:has(input:checked) { border-color: #6da0bf; background: #edf6fb; box-shadow: inset 3px 0 #1769aa; }
.user-editor-sector:has(input:checked) > i { color: #fff; border-color: #1769aa; background: #1769aa; }
.user-editor-sector:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23,105,170,.14); }
.user-editor-empty { margin: 0; padding: 20px 10px; color: #7a8c97; font-size: 11px; text-align: center; }
.user-editor-status { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 13px 0 0; border-top: 1px solid #dde5ea; }
.user-editor-status strong,.user-editor-status small { display: block; }
.user-editor-status strong { color: #294655; font-size: 12px; }
.user-editor-status small { margin-top: 3px; color: #7a8c97; font-size: 9px; }
.user-editor-status.administrator { padding: 12px; border: 1px solid #cfe0ec; border-radius: 10px; background: #f3f8fb; }
.user-editor-status.administrator + .user-editor-status { margin-top: 10px; }
.user-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid #e0e7ec; background: #fff; }
.user-editor-actions a,.user-editor-actions button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.user-editor-actions a { color: #526875; border: 1px solid #cbd7df; background: #fff; }
.user-editor-actions a:hover { color: #294655; background: #f2f5f7; }
.user-editor-actions button { border: 1px solid #08365f; color: #fff; background: #08365f; box-shadow: 0 4px 10px rgba(8,54,95,.16); }
.user-editor-actions button:hover { background: #062b4c; }
.user-email-modal[hidden] { display: none !important; }
.user-email-modal { position: fixed; inset: 0; z-index: 3400; display: grid; place-items: center; padding: 18px; background: rgba(15,27,35,.62); backdrop-filter: blur(4px); }
.user-email-dialog { width: min(465px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 17px; background: #fff; box-shadow: 0 28px 85px rgba(9,24,31,.38); animation: chat-confirm-in .18s ease-out; }
.user-email-dialog > header { display: flex; align-items: center; gap: 11px; padding: 17px 19px; border-bottom: 1px solid #e2e8ec; }
.user-email-dialog > header > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #0b4d78; background: #e8f2f8; font-size: 15px; }
.user-email-dialog > header > div { min-width: 0; flex: 1; }
.user-email-dialog > header strong,.user-email-dialog > header small { display: block; }
.user-email-dialog > header strong { color: #173348; font-size: 15px; }
.user-email-dialog > header small { margin-top: 3px; color: #758794; font-size: 10px; }
.user-email-dialog > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #667d89; background: #eef2f4; cursor: pointer; }
.user-email-steps { display: grid; grid-template-columns: auto minmax(30px,1fr) auto; align-items: center; gap: 10px; padding: 13px 19px; border-bottom: 1px solid #edf1f3; background: #fafcfd; }
.user-email-steps > span { display: inline-flex; align-items: center; gap: 6px; color: #8797a0; font-size: 10px; font-weight: 700; }
.user-email-steps b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #718590; background: #e5ebee; font-size: 9px; }
.user-email-steps > i { height: 1px; background: #dce4e8; }
.user-email-steps > span.active { color: #0d527f; }
.user-email-steps > span.active b { color: #fff; background: #1769aa; }
.user-email-steps > span.done { color: #16866a; }
.user-email-steps > span.done b { color: #fff; background: #16866a; }
.user-email-dialog > section { padding: 20px 19px 18px; }
.user-email-dialog > section[hidden] { display: none !important; }
.user-email-dialog > section > label { display: block; margin-bottom: 6px; color: #405664; font-size: 11px; font-weight: 700; }
.user-email-dialog > section > input { width: 100%; height: 44px; padding: 9px 12px; border: 1px solid #cbd7df; border-radius: 9px; outline: none; color: #233f4e; background: #fff; font: inherit; font-size: 14px; text-transform: none !important; }
.user-email-dialog > section > input:focus { border-color: #397da7; box-shadow: 0 0 0 3px rgba(23,105,170,.1); }
.user-email-dialog > section > small { display: block; margin-top: 7px; color: #7a8c97; font-size: 9px; }
.user-email-dialog > section > p { margin: 11px 0 0; padding: 9px 10px; border-radius: 8px; color: #a62d36; background: #fff0f1; font-size: 10px; line-height: 1.4; }
.user-email-dialog > section > p[hidden] { display: none !important; }
.user-email-dialog section footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; }
.user-email-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.user-email-button.secondary { color: #526875; border: 1px solid #cbd7df; background: #fff; }
.user-email-button.primary { color: #fff; border: 1px solid #08365f; background: #08365f; }
.user-email-button:disabled { opacity: .6; cursor: wait; }
.user-email-code { font: 700 20px Consolas,monospace !important; letter-spacing: 7px; text-align: center; }
.user-email-sent { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 10px 11px; border-radius: 9px; color: #376174; background: #edf6fb; font-size: 10px; line-height: 1.4; }
.user-email-sent > i { color: #1769aa; }
.user-email-sent strong { display: block; max-width: 330px; overflow: hidden; color: #174f72; text-overflow: ellipsis; white-space: nowrap; }
.sector-edit-card .sector-user-grid { gap: 6px; }
.sector-edit-card .sector-user-option { min-width: 0; padding: 9px 11px; border-color: #dce5ec; background: #fbfcfd; }
.sector-edit-card .sector-user-option:has(input:checked) { border-color: #8ab7d1; background: #f0f7fb; box-shadow: inset 3px 0 #1769aa; }
.sector-edit-card .sector-user-option input { accent-color: #1769aa; }
.sector-status-section { background: #fbfcfd; }
.sector-status-section .permission-toggle { padding: 10px 13px; border-color: #dce5ec; border-radius: 9px; background: #fff; }
.sector-status-section .permission-toggle small { font-size: 10px; }
.sector-edit-actions { padding: 12px 20px; background: #f6f8fa; }
.sector-edit-actions .wizard-button { min-height: 40px; padding: 9px 14px; border-radius: 9px; font-size: 13px; }
.sector-edit-actions .wizard-button.secondary { color: #526575; border: 1px solid #ccd8e0; background: #fff; box-shadow: none; }
.sector-edit-actions .wizard-button.secondary:hover { color: #263f52; background: #edf2f5; }
.email-input-action { display: flex; align-items: stretch; gap: 8px; }
.email-input-action input { flex: 1; min-width: 0; }
.email-input-action .button,.email-send-dynamic { white-space: nowrap; }
.email-send-dynamic { margin-top: 8px; align-self: flex-start; }
.email-code-area { display: flex; gap: 8px; margin-top: 10px; }
.email-code-area[hidden] { display: none; }
.email-code-area input { flex: 1; min-width: 0; letter-spacing: 4px; font-weight: 700; text-align: center; }
.email-verification-status { margin-top: 7px; font-size: 11px; color: var(--muted); }
.email-verification-status.success { color: #15803d; }
.email-verification-status.sent { color: #0369a1; }
.email-verification-status.error { color: #b91c1c; }
.sector-user-empty { color: var(--muted); font-size: 11px; }

.alert { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: 12px; }
.alert.success { color: #176534; border-color: #b9e2c7; background: #eefaf2; }
.alert.error { color: #9d2935; border-color: #efc1c6; background: #fff1f2; }
.management-grid { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); align-items: start; gap: 20px; }
.panel { overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); box-shadow: 0 8px 26px rgba(15,23,42,.05); }
.panel-header { padding: 20px 22px; border-bottom: 1px solid var(--border); background: #fbfdff; }
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; padding: 22px; }
.full { grid-column: 1 / -1; }
.field > span { display: block; margin-bottom: 7px; color: #34495b; font-size: 11px; font-weight: 600; }
.field b { color: #d1434f; }
.field input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #cad6e2; border-radius: 9px; outline: none; color: var(--text); background: #fff; transition: border-color .18s, box-shadow .18s; }
.field input:focus { border-color: #428bc1; box-shadow: 0 0 0 3px rgba(66,139,193,.13); }
.password-field { position: relative; }
.password-field input { padding-right: 43px; }
.password-field button { position: absolute; top: 0; right: 0; width: 42px; height: 43px; border: 0; background: transparent; color: #71859a; cursor: pointer; }
.switch-row { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: #f8fafc; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { flex: 0 0 auto; width: 38px; height: 22px; padding: 3px; border-radius: 999px; background: #b9c6d2; transition: background .18s; }
.switch::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .18s; }
.switch-row input:checked + .switch { background: #258257; }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 12px; }
.switch-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.button { min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 9px; font-weight: 600; cursor: pointer; }
.button.primary { color: #fff; background: var(--navy); }
.button.primary:hover { background: var(--navy-dark); }
.button.secondary { color: var(--navy); border-color: #b9ccdc; background: #fff; }
.button.ghost { color: #53677a; border-color: var(--border); background: #fff; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 15px; border-bottom: 1px solid #e6edf3; text-align: left; vertical-align: middle; }
th { color: #64778a; background: #f8fafc; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
td { font-size: 12px; }
td strong, td small { display: block; }
td small { margin-top: 4px; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
.actions-column { text-align: right; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #cbd8e3; border-radius: 8px; color: var(--blue); background: #fff; cursor: pointer; }
.icon-button.danger { color: var(--red); }
.icon-button.success { color: var(--green); }
.status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.status.active { color: #176534; background: #e9f8ef; }
.status.inactive { color: #8a3b43; background: #faeaec; }
.empty-state { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: var(--muted); text-align: center; }
.empty-state i { margin-bottom: 14px; color: #9bb0c1; font-size: 34px; }
.empty-state strong { color: #405568; }
.empty-state span { margin-top: 6px; font-size: 11px; }

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .management-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .factory-promo { grid-template-columns: minmax(190px, 280px) 1fr; }
  .factory-promo-action { grid-column: 2; justify-self: start; }
  .queue-board { grid-template-columns: repeat(2,minmax(300px,1fr)); }
}

@media (max-width: 840px) {
  .login-shell { display: block; }
  .login-presentation { min-height: auto; padding: 28px 24px; }
  .login-copy { margin: 55px 0 45px; }
  .login-copy h1 { font-size: 38px; }
  .login-form-side { padding: 24px 16px 40px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(310px, 88vw); transform: translateX(-105%); transition: transform .22s ease; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(4,19,32,.58); z-index: 29; transition: opacity .22s, visibility .22s; }
  .sidebar-open .sidebar-overlay { visibility: visible; opacity: 1; }
  .menu-button { display: inline-grid; place-items: center; }
  .topbar { padding: 12px 16px; }
  .main-content { padding: 20px 16px; }
  .access-badge { display: none; }
  .queue-filter-footer { left: 0; padding-right: 16px; padding-left: 16px; }
  .topbar-account span { display: none; }
  .welcome-card { min-height: auto; padding: 27px 24px; }
  .welcome-icon { display: none; }
}

@media (max-width: 620px) {
  .login-feature { display: none; }
  .login-copy { margin-bottom: 8px; }
  .login-card { padding: 25px 20px; }
  .login-options { align-items: flex-start; flex-direction: column; }
  .admin-welcome, .company-hero { align-items: flex-start; flex-direction: column; padding: 23px; }
  .admin-welcome-icon { display: none; }
  .company-hero-image { width: 88px; height: 88px; }
  .company-change { align-self: stretch; justify-content: center; }
  .metrics-grid { grid-template-columns: 1fr; }
  .company-context-card { align-items: stretch; flex-direction: column; }
  .factory-promo { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; text-align: center; }
  .factory-promo-brand { width: min(310px, 100%); margin: 0 auto; }
  .factory-promo-copy > small { font-size: 11px; }
  .factory-promo-action { grid-column: 1; justify-self: stretch; white-space: normal; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading .button { align-self: flex-start; }
  .company-whatsapp-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .company-whatsapp-item { min-width: 100%; }
  .form-grid { grid-template-columns: 1fr; padding: 18px; }
  .field, .full { grid-column: 1; }
  .form-actions { position: sticky; bottom: 0; margin: 0 -18px -18px; padding: 13px 18px; border-top: 1px solid var(--border); background: rgba(255,255,255,.96); }
  .list-panel .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody { padding: 10px; }
  tbody tr { margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
  tbody tr:last-child { margin-bottom: 0; }
  td { display: grid; grid-template-columns: 92px minmax(0,1fr); padding: 7px 0; border: 0; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
  .row-actions { justify-content: flex-start; }
  .welcome-card h1 { font-size: 27px; }
  .sector-user-grid { grid-template-columns: 1fr; }
  .email-input-action,.email-code-area { flex-direction: column; }
  .email-input-action .button,.email-code-area .button,.email-send-dynamic { width: 100%; justify-content: center; }
  .topbar { gap: 8px; }
  .topbar-title > div { display: none; }
  .topbar-operations { min-width: 0; flex: 1; justify-content: flex-end; }
  .queue-live { display: none; }
  .queue-filter-footer { padding: 8px 10px; }
  .queue-filter-form { justify-content: stretch; gap: 8px; }
  .queue-filter-copy,.queue-filter-total,.queue-filter-empty { display: none; }
  .queue-filter-select { width: auto; flex: 1; }
  .whatsapp-header { min-width: 0; width: min(100%, 310px); }
  .whatsapp-header-button { width: 100%; min-width: 0; padding: 6px 8px; }
  .whatsapp-header-icon { width: 31px; height: 31px; }
  .whatsapp-header-copy strong { max-width: 112px; }
  .whatsapp-header-state span { max-width: 95px; overflow: hidden; text-overflow: ellipsis; }
  .whatsapp-header-menu { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; }
}

/* Cadastro no padrão FactoryADM */
.master-main { padding-bottom: 100px; }
.floating-actions { position: fixed; right: 30px; bottom: 30px; display: flex; flex-direction: row-reverse; gap: 14px; z-index: 40; }
.floating-button { width: 70px; height: 70px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.28); font-size: 30px; cursor: pointer; transition: transform .2s; }
.floating-button:hover { color: #fff; transform: scale(1.08); }
.floating-button.add { background: linear-gradient(135deg, #48bb78, #38a169); }
.floating-button.search { background: #08365f; }
.menu-button.visible { display: inline-grid; place-items: center; }

.users-filters { display: grid; grid-template-columns: minmax(220px,1fr) 160px auto auto; align-items: end; gap: 12px; margin: 0 15px 15px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); }
.users-filters-company { grid-template-columns: minmax(180px,.8fr) minmax(220px,1fr) 145px auto auto; }
.users-field { display: grid; min-width: 0; }
.users-field label { min-height: 20px; margin-bottom: 6px; color: #4a5568; font-size: 13px; font-weight: 600; }
.users-field input, .users-field select { width: 100%; height: 46px; padding: 12px 16px; border: 2px solid #cbd5e0; border-radius: 12px; outline: none; color: #1a202c; background: #fff; font: inherit; font-size: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: .2s; }
.users-field input:focus, .users-field select:focus { border-color: #8b5cf6; background: #faf5ff; }
.wizard-card .users-field input[readonly] { color: #607386; background: #eef3f7; cursor: not-allowed; }
.menu-item[href="usuarios_master.php"], .action-card[href="usuarios_master.php"] { display: none !important; }
.users-field input:not([type="email"]):not([type="password"]) { text-transform: uppercase; }
.users-field input[type="email"] { text-transform: lowercase; }
.users-filter-button { height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 12px; color: #fff; background: #08365f; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.users-filter-button.secondary { background: #2c5282; }

.wizard-card { margin: 0 15px 15px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); }
.cadastro-card { width: 70%; margin-right: auto; margin-left: auto; }
.wizard-panel { display: none; gap: 18px; }
.wizard-panel.active { display: grid; }
.wizard-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wizard-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 12px; color: #fff; background: #08365f; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(8,54,95,.25); }
.wizard-button:hover { color: #fff; background: #062747; }
.wizard-button.secondary { color: #fff; background: #e53e3e; box-shadow: 0 4px 12px rgba(229,62,62,.2); }
.wizard-button.secondary:hover { background: #c53030; }
.users-form-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2%; flex-wrap: wrap; }
.users-field.largura50 { flex: 0 0 49%; max-width: 49%; }
.password-field .users-field input, .users-field .password-field input { height: 46px; }
.permission-section-title { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid #dbeafe; border-left: 4px solid #08365f; border-radius: 8px; color: #08365f; background: #eff6ff; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.permission-section-title i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #08365f; font-size: 12px; }
.permission-section-title::after { content: ""; flex: 1; height: 1px; background: rgba(8,54,95,.18); }
.permission-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.permission-toggle strong, .permission-toggle small { display: block; }
.permission-toggle small { margin-top: 3px; color: #64748b; font-size: 12px; }
.permission-toggle.administrator { margin-bottom: 10px; border-color: #cfe0ec; background: #f3f8fb; }
.toggle-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.toggle-switch input { position: absolute; opacity: 0; }
.toggle-slider { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: .18s; }
.toggle-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.18); transition: .18s; }
.toggle-switch input:checked + .toggle-slider { background: #08365f; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.results-header { display: flex; justify-content: space-between; padding: 10px 15px; }
.results-count { padding: 7px 12px; border-radius: 20px; color: #4a5568; font-size: 14px; font-weight: 500; }
.results-count i { margin-right: 5px; }
.master-table-container { width: 98%; margin: 0 auto 15px; padding: 24px; overflow: visible; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); }
.master-table { width: 100%; border-collapse: collapse; }
.master-table th, .master-table td { padding: 10px; border: 1px solid #ddd; text-align: left; vertical-align: middle; }
.master-table th { color: #333; background: #f4f4f4; font-size: 14px; font-weight: 600; }
.master-table td { color: #333; background: #fff; font-size: 13px; }
.master-table tbody tr:nth-child(even) td { background: #f8f9ff; }
.master-table tbody tr:hover td { background: #e9ecef; }
.menu-column { width: 5%; }
.table-menu-button { width: 36px; height: 36px; border: 0; color: #718096; background: transparent; font-size: 20px; cursor: pointer; }
.table-dropdown { position: fixed; display: none; min-width: 190px; padding: 8px 0; border-radius: 8px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.18); z-index: 100; }
.table-dropdown.open { display: block; }
.table-dropdown a, .table-dropdown button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 0; color: #333; background: transparent; text-align: left; cursor: pointer; }
.table-dropdown a:hover, .table-dropdown button:hover { background: #f0f4f8; }
.table-dropdown i { width: 18px; color: #08365f; text-align: center; }
.table-dropdown .danger { color: #b4232d; }
.table-dropdown .danger i { color: #c2414b; }
.table-dropdown .danger:hover { background: #fff1f2; }
.master-user strong, .master-user small { display: block; }
.master-user strong { color: #08365f; font-size: 15px; }
.master-user small { margin-top: 5px; color: #64748b; }
.master-user small i { margin-right: 6px; }
.status-badge { width: fit-content; display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-badge.on { color: #166534; background: #dcfce7; }
.status-badge.off { color: #991b1b; background: #fee2e2; }
.status-badge.admin { color: #174f72; background: #e3f0f7; }
.users-empty { margin: 0 15px 15px; padding: 24px; border-radius: 16px; color: #64748b; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.users-empty p { margin: 0 0 14px; }
.users-empty-action { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 13px; border-radius: 8px; color: #fff; background: #08365f; font-weight: 600; }

.master-mobile-list { display: grid; gap: 12px; }
.master-card { position: relative; overflow: hidden; margin: 0 15px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.master-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #08365f; }
.master-card-header { display: flex; align-items: center; gap: 12px; }
.master-avatar { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: #08365f; font-size: 22px; }
.master-card-header > div { flex: 1; min-width: 0; }
.master-card-header strong, .master-card-header small { display: block; }
.master-card-header strong { font-size: 15px; }
.master-card-header small { margin-top: 4px; color: #718096; }
.master-card-header button { width: 38px; height: 38px; border: 0; color: #718096; background: transparent; font-size: 22px; }
.master-card-details { display: grid; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.master-card-details > span:not(.status-badge) { display: flex; align-items: center; gap: 9px; color: #4a5568; overflow-wrap: anywhere; }
.master-card-details i { width: 16px; color: #2c5282; text-align: center; }
.mobile-action-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.7); z-index: 110; }
.mobile-action-modal.open { display: flex; }
.mobile-action-box { width: min(330px,100%); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mobile-action-box header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: #fff; background: #08365f; }
.mobile-action-box header button { border: 0; color: #fff; background: transparent; font-size: 18px; }
.mobile-action-box > a, .mobile-action-box > button { width: calc(100% - 20px); display: flex; align-items: center; gap: 13px; margin: 10px; padding: 14px; border: 0; border-radius: 9px; color: #4a5568; background: #fff; text-align: left; }
.mobile-action-box > a:hover, .mobile-action-box > button:hover { background: #f5f5f5; }
.mobile-action-box > a i, .mobile-action-box > button i { width: 20px; color: #2c5282; text-align: center; }
.mobile-action-box > .danger { color: #b4232d; }
.mobile-action-box > .danger i { color: #c2414b; }
.mobile-action-box > .danger:hover { background: #fff1f2; }

.message-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.5); z-index: 200; }
.message-overlay.active { display: flex; }
.message-box { width: min(420px,96vw); padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.28); text-align: center; }
.message-icon { width: 58px; height: 58px; display: inline-grid; place-items: center; margin-bottom: 14px; border-radius: 50%; color: #c2410c; background: #fff7ed; font-size: 26px; }
.message-box > strong { display: block; color: #08365f; font-size: 20px; }
.message-box > p { margin: 8px 0 20px; color: #475569; line-height: 1.45; }
.message-actions { display: flex; justify-content: center; gap: 10px; }

.global-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; padding: 20px; opacity: 0; background: rgba(4, 20, 34, .62); backdrop-filter: blur(2px); z-index: 1000; transition: opacity .16s ease, visibility .16s ease; }
.global-loading.active { visibility: visible; opacity: 1; }
.global-loading-card { width: min(330px, 92vw); display: flex; align-items: center; flex-direction: column; padding: 28px 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); text-align: center; }
.global-loading-spinner { width: 48px; height: 48px; margin-bottom: 17px; border: 4px solid #dceaf4; border-top-color: var(--navy); border-radius: 50%; animation: suporte-loading-spin .72s linear infinite; }
.global-loading-card strong { color: var(--navy); font-size: 17px; }
.global-loading-card small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
@keyframes suporte-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .global-loading-spinner { animation-duration: 1.6s; } }

.company-image-editor { display: flex; align-items: center; gap: 24px; padding: 20px; border: 1px solid #dbe4ec; border-radius: 14px; background: #f8fafc; }
.company-image-editor.edit { margin-top: 4px; }
.company-image-preview { position: relative; width: 150px; height: 150px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 2px solid #cbd5e0; border-radius: 18px; color: #8ba0b3; background: #fff; }
.company-image-preview > i { font-size: 44px; }
.company-image-preview img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.company-image-preview.empty img:not([src]) { display: none; }
.company-image-copy { min-width: 0; }
.company-image-copy strong { display: block; color: #08365f; font-size: 17px; }
.company-image-copy p { max-width: 560px; margin: 7px 0 14px; color: #64748b; line-height: 1.55; }
.company-image-copy small { display: block; margin-top: 10px; color: #718096; overflow-wrap: anywhere; }
.company-image-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border-radius: 10px; color: #fff; background: #2c5282; font-weight: 600; cursor: pointer; }
.company-image-button:hover { background: #1f426c; }
.company-image-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.company-list-identity { display: flex; align-items: center; gap: 13px; }
.company-list-image { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid #d8e2eb; border-radius: 12px; color: #fff; background: #08365f; }
.company-list-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.company-list-image i { font-size: 22px; }
.master-avatar.company.has-image { background: #fff; }
.master-avatar.company img { width: 100%; height: 100%; display: block; object-fit: cover; }
.master-avatar.sector { background: linear-gradient(145deg, #6441a5, #8561c5); }
.sector-number-badge { min-width: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 9px; color: #5b3796; background: #f2ecfc; font-weight: 700; }
.floating-button.add.whatsapp, .wizard-button.whatsapp { background: linear-gradient(135deg, #25d366, #128c4a); }
.wizard-button.whatsapp:hover { background: #0f7b40; }
.permission-section-title.whatsapp { color: #08743d; border-color: #bbf7d0; border-left-color: #16a34a; background: #f0fdf4; }
.permission-section-title.whatsapp i { background: #16a34a; }
.whatsapp-session-preview { min-height: 46px; display: flex; align-items: center; padding: 11px 15px; border: 2px solid #d7e1e8; border-radius: 12px; color: #0f5132; background: #f1fbf5; font: 600 14px/1.4 Consolas, monospace; overflow-wrap: anywhere; }
.field-help { display: block; margin-top: 6px; color: #64748b; font-size: 11px; line-height: 1.5; }
.whatsapp-session-code { display: inline-block; max-width: 340px; padding: 6px 8px; border-radius: 7px; color: #345; background: #edf2f7; font-size: 11px; overflow-wrap: anywhere; }
.whatsapp-status { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.whatsapp-status i { font-size: 7px; }
.whatsapp-status.connected { color: #166534; background: #dcfce7; }
.whatsapp-status.waiting { color: #92400e; background: #fef3c7; }
.whatsapp-status.disconnected { color: #475569; background: #e2e8f0; }
.whatsapp-status.error { color: #991b1b; background: #fee2e2; }
.master-avatar.whatsapp { background: linear-gradient(145deg, #25d366, #128c4a); }
.whatsapp-card::before { background: #16a34a; }
.whatsapp-management-main .status-badge { display: none; }
.whatsapp-action-cell { width: 160px; }
.whatsapp-action-loading { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 11px; font-weight: 600; white-space: nowrap; }
.whatsapp-connection-button { min-width: 125px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 14px rgba(15,23,42,.12); }
.whatsapp-connection-button.connect { background: #16a34a; }
.whatsapp-connection-button.connect:hover { background: #15803d; }
.whatsapp-connection-button.disconnect { background: #dc2626; }
.whatsapp-connection-button.disconnect:hover { background: #b91c1c; }
.whatsapp-connection-button[hidden],.whatsapp-action-loading[hidden] { display: none !important; }
.whatsapp-card-action { display: flex; padding: 0 15px 15px; }
.whatsapp-card-action .whatsapp-connection-button { width: 100%; }
.whatsapp-qr-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(3,20,13,.78); backdrop-filter: blur(3px); z-index: 500; }
.whatsapp-qr-overlay.active { display: flex; }
.whatsapp-qr-card { width: min(450px, 96vw); max-height: 96vh; overflow-y: auto; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.42); }
.whatsapp-qr-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.whatsapp-qr-heading > span { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: #16a34a; font-size: 26px; }
.whatsapp-qr-heading strong, .whatsapp-qr-heading small { display: block; }
.whatsapp-qr-heading strong { color: #08365f; font-size: 19px; }
.whatsapp-qr-heading small { margin-top: 4px; color: #64748b; font: 10px Consolas, monospace; overflow-wrap: anywhere; }
.whatsapp-qr-card > img { width: min(290px, 100%); aspect-ratio: 1; display: block; margin: 0 auto; padding: 8px; border: 1px solid #d9e3e8; border-radius: 14px; object-fit: contain; image-rendering: crisp-edges; }
.whatsapp-qr-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; padding: 9px 12px; border: 1px solid #fde68a; border-radius: 10px; color: #854d0e; background: #fffbeb; font-size: 12px; font-weight: 600; }
.whatsapp-qr-timer span { display: inline-flex; align-items: center; gap: 7px; }
.whatsapp-qr-timer strong { min-width: 58px; color: #92400e; font: 700 18px Consolas, monospace; text-align: right; }
.whatsapp-monitor-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; padding: 9px 11px; border-radius: 9px; color: #166534; background: #f0fdf4; font-size: 12px; font-weight: 600; text-align: center; }
.whatsapp-monitor-status span { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: suporte-loading-spin .8s linear infinite; }
.whatsapp-monitor-status.connected { color: #166534; background: #dcfce7; }
.whatsapp-monitor-status.connected span { border: 0; background: #16a34a; animation: none; }
.whatsapp-monitor-status.refreshing { color: #1d4ed8; background: #eff6ff; }
.whatsapp-monitor-status.error, .whatsapp-monitor-status.expired { color: #991b1b; background: #fee2e2; }
.whatsapp-monitor-status.expired span { border: 0; background: #dc2626; animation: none; }
.whatsapp-qr-card ol { margin: 18px 0; padding-left: 23px; color: #475569; font-size: 13px; line-height: 1.7; }
.whatsapp-qr-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.whatsapp-qr-actions form { margin: 0; }

@media (min-width: 761px) { .desktop-only { display: block !important; } .mobile-only { display: none !important; } }
@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .users-filters { grid-template-columns: 1fr; margin: 0; }
  .cadastro-card { width: 98%; margin: 0 auto 15px; padding: 18px; }
  .users-form-row { gap: 13px; }
  .users-field.largura50 { flex-basis: 100%; max-width: 100%; }
  .floating-actions { right: 18px; bottom: 18px; }
  .floating-button { width: 60px; height: 60px; font-size: 26px; }
  .company-image-editor { align-items: stretch; flex-direction: column; }
  .company-image-preview { width: 180px; height: 180px; align-self: center; }
  .company-image-button { width: 100%; }
  .whatsapp-qr-actions, .whatsapp-qr-actions form, .whatsapp-qr-actions .wizard-button { width: 100%; }
  .sector-edit-card { width: 100%; margin: 0 0 15px; }
  .sector-edit-section { padding: 14px; }
  .sector-edit-fields { grid-template-columns: 1fr; gap: 14px; }
  .user-editor { width: 100%; margin: 0 0 15px; }
  .user-editor-grid { grid-template-columns: 1fr; }
  .user-editor-profile,.user-editor-permissions { padding: 18px 15px; }
  .user-editor-permissions { border-top: 1px solid #e0e7ec; border-left: 0; }
  .user-editor-fields { grid-template-columns: 1fr; gap: 12px; }
  .user-editor-full { grid-column: auto; }
  .user-editor-sector-list { max-height: none; }
  .user-editor-actions { align-items: stretch; flex-direction: column-reverse; padding: 12px 15px; }
  .user-editor-actions a,.user-editor-actions button { width: 100%; }
  .user-editor-email-edit { min-width: 42px; width: 42px; padding: 0; }
  .user-editor-email-edit span { display: none; }
  .user-email-modal { padding: 10px; }
  .user-email-dialog > header,.user-email-dialog > section { padding-right: 15px; padding-left: 15px; }
  .user-email-steps { padding-right: 15px; padding-left: 15px; }
  .user-email-dialog section footer { align-items: stretch; flex-direction: column-reverse; }
  .user-email-button { width: 100%; }
  .sector-edit-actions { align-items: stretch; flex-direction: column-reverse; padding: 12px 14px; }
  .sector-edit-actions .wizard-button { width: 100%; }
}

/* Conversa de atendimento */
.chat-app-content { min-width: 0; height: 100vh; overflow: hidden; }
.chat-topbar { position: relative; min-height: 64px; height: 64px; padding-top: 9px; padding-bottom: 9px; }
.chat-back { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 11px; color: #25465e; background: #fff; }
.chat-live { display: inline-flex; align-items: center; gap: 8px; color: #537083; font-size: 13px; font-weight: 600; }
.chat-live > span { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px #dcfce7; }
.chat-live.offline > span { background: #ef4444; box-shadow: 0 0 0 5px #fee2e2; }
.chat-main { height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0,1fr) 320px; overflow: hidden; background: #dce5e8; }
.chat-window { min-width: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: #efeae2; }
.chat-contact-header { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 9px 17px; border-bottom: 1px solid #d7dfe0; background: #f7f9f9; z-index: 2; }
.chat-contact-avatar,.chat-details-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#087a63,#19ad83); font-weight: 700; }
.chat-contact-avatar { width: 44px; height: 44px; font-size: 17px; }
.chat-contact-copy { flex: 1; min-width: 0; }
.chat-contact-copy strong,.chat-contact-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-name-row,.chat-profile-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chat-contact-name-row strong,.chat-profile-name-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-edit { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; color: #16866a; background: #e1f0eb; font-size: 11px; cursor: pointer; transition: background .15s,color .15s,transform .15s; }
.chat-contact-edit:hover { color: #fff; background: #16866a; transform: translateY(-1px); }
.chat-contact-edit:focus-visible { outline: 3px solid rgba(22,134,106,.2); outline-offset: 2px; }
.chat-contact-copy strong { color: #142d3b; font-size: 17px; }
.chat-contact-copy span { margin-top: 3px; color: #6c7f89; font-size: 12px; }
.chat-contact-copy .chat-contact-company { color: #536d78; font-size: 12px; font-weight: 600; }
.chat-contact-copy .chat-contact-phone { color: #71848d; font-size: 12px; }
.chat-contact-copy .chat-contact-company i,.chat-contact-copy .chat-contact-phone i { width: 14px; color: #16866a; text-align: center; }
.chat-contact-copy b { color: #16866a; font-weight: 600; }
.chat-header-actions { display: flex; align-items: center; gap: 9px; }
.chat-protocol { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; color: #526974; background: #e9eff1; font-size: 12px; font-weight: 600; }
.chat-transfer { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: #2878a8; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.chat-transfer:hover { background: #1f648e; }
.chat-transfer[hidden] { display: none !important; }
.chat-transfer:disabled { opacity: .5; cursor: not-allowed; }
.chat-finish { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: #dc4d4d; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.chat-finish[hidden] { display: none !important; }
.chat-finish:disabled,.chat-send:disabled { opacity: .55; cursor: wait; }
.chat-finish-confirm[hidden] { display: none !important; }
.chat-finish-confirm { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 20px; background: rgba(18,27,32,.64); backdrop-filter: blur(5px); }
.chat-finish-confirm-card { width: min(430px,100%); padding: 27px 25px 24px; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: #fff; box-shadow: 0 32px 90px rgba(9,24,31,.4); text-align: center; animation: chat-confirm-in .18s ease-out; }
.chat-finish-confirm-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ee6a62,#c83f3f); box-shadow: 0 10px 24px rgba(200,63,63,.25); font-size: 23px; }
.chat-finish-confirm-card h2 { margin: 0; color: #203842; font-size: 21px; }
.chat-finish-confirm-card > p { margin: 10px 0 18px; color: #687c85; font-size: 13px; line-height: 1.55; }
.chat-finish-confirm-card > p strong { color: #344f5a; }
.chat-finish-confirm-note { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 11px; color: #5d727b; background: #f2f6f7; font-size: 12px; line-height: 1.4; text-align: left; }
.chat-finish-confirm-note i { color: #16866a; font-size: 16px; }
.chat-finish-confirm-card footer { display: flex; justify-content: center; gap: 9px; margin-top: 21px; }
.chat-finish-confirm-card footer .button,.chat-finish-confirm-button { min-height: 42px; }
.chat-finish-confirm-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 9px; color: #fff; background: #c83f3f; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.chat-finish-confirm-button:hover { background: #ac3030; }
.chat-finish-confirm-button:disabled,.chat-finish-confirm-card footer .button:disabled { opacity: .55; cursor: wait; }
.chat-messages { min-height: 0; overflow-y: auto; padding: 24px clamp(18px,5vw,70px); scroll-behavior: smooth; background-color: #efeae2; background-image: radial-gradient(rgba(80,98,91,.075) 1px,transparent 1px),linear-gradient(45deg,rgba(255,255,255,.16) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.16) 75%); background-size: 18px 18px,36px 36px; }
.chat-loading,.chat-empty { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 10px; color: #70838b; font-size: 14px; }
.chat-day { position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; margin: 7px 0 15px; }
.chat-day span { padding: 7px 12px; border-radius: 8px; color: #526a73; background: #fff; box-shadow: 0 1px 3px rgba(22,44,54,.16); font-size: 11px; font-weight: 600; }
.chat-bubble { position: relative; width: fit-content; max-width: min(76%,720px); margin: 4px 0; padding: 10px 12px 8px; border-radius: 9px; box-shadow: 0 1px 2px rgba(18,38,45,.16); color: #1c3038; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-bubble.incoming { margin-right: auto; border-top-left-radius: 2px; background: #fff; }
.chat-bubble.outgoing { margin-left: auto; border-top-right-radius: 2px; background: #d9fdd3; }
.chat-bubble-text { white-space: normal; }
.chat-bubble-text strong { font-weight: 700; }
.chat-bubble-text em { font-style: italic; }
.chat-bubble-text del { text-decoration-thickness: 1px; }
.chat-whatsapp-inline { padding: 2px 5px; border-radius: 4px; background: rgba(32,56,66,.1); font-family: Consolas,"Courier New",monospace; font-size: .9em; }
.chat-whatsapp-code { overflow-x: auto; margin: 5px 0; padding: 9px 10px; border-radius: 6px; background: rgba(32,56,66,.1); white-space: pre-wrap; }
.chat-whatsapp-code code { font-family: Consolas,"Courier New",monospace; font-size: .88em; }
.chat-bubble.has-media { width: min(430px,76%); max-width: min(76%,720px); }
.chat-bubble.has-media .chat-bubble-text { margin-top: 8px; }
.chat-media-image { display: block; overflow: hidden; border-radius: 7px; background: #d8dfdc; }
.chat-media-image img { width: 100%; max-height: 420px; display: block; object-fit: contain; background: #d8dfdc; }
.chat-media-audio { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.chat-media-audio > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #16866a; font-size: 17px; }
.chat-media-audio audio { min-width: 0; width: 100%; height: 42px; }
.chat-media-video { width: 100%; max-height: 420px; display: block; border-radius: 7px; background: #172126; }
.chat-media-document { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: #294750; background: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; }
.chat-media-document i { font-size: 24px; color: #16866a; }
.chat-media-unavailable { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #8a4f24; background: #fff5e8; font-size: 13px; }
.chat-bubble footer { min-height: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin: 5px 0 -2px 32px; color: #75878e; font-size: 11px; line-height: 1; }
.chat-bubble footer span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #498473; }
.chat-bubble footer .message-read { color: #31a6e0; }
.chat-bubble footer .message-failed { color: #dc2626; }
.chat-composer { min-height: 64px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 15px; border-top: 1px solid #d7dfe0; background: #f0f2f2; }
.chat-composer[hidden] { display: none !important; }
.chat-composer textarea { min-height: 46px; max-height: 140px; flex: 1; resize: none; padding: 12px 16px; border: 0; border-radius: 11px; outline: none; color: #20343c; background: #fff; font: inherit; font-size: 15px; line-height: 22px; }
.chat-composer-icon,.chat-record,.chat-send { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; font-size: 16px; }
.chat-composer-icon { color: #526b75; background: transparent; cursor: pointer; }
.chat-composer-icon:hover { color: #16866a; background: #e1ece8; }
.chat-image-input { display: none; }
.chat-record { color: #526b75; background: transparent; cursor: pointer; }
.chat-record:hover { color: #16866a; background: #e1ece8; }
.chat-send { color: #fff; background: #16866a; cursor: pointer; }
.chat-recording,.chat-audio-preview,.chat-image-preview,.chat-document-preview { min-width: 0; min-height: 46px; flex: 1; align-items: center; gap: 12px; }
.chat-recording { color: #4d626b; }
.chat-recording[hidden],.chat-audio-preview[hidden],.chat-image-preview[hidden],.chat-document-preview[hidden] { display: none !important; }
.chat-composer.is-recording > :not(.chat-recording),.chat-composer.is-audio-preview > :not(.chat-audio-preview),.chat-composer.is-image-preview > :not(.chat-image-preview),.chat-composer.is-document-preview > :not(.chat-document-preview) { display: none !important; }
.chat-composer.is-recording .chat-recording,.chat-composer.is-audio-preview .chat-audio-preview,.chat-composer.is-image-preview .chat-image-preview,.chat-composer.is-document-preview .chat-document-preview { display: flex; }
.chat-record-cancel { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; color: #dc4d4d; background: #feecec; cursor: pointer; }
.chat-record-pulse { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.45); animation: chat-record-pulse 1.3s infinite; }
.chat-recording strong { min-width: 44px; color: #d63f3f; font-size: 14px; }
.chat-recording > span:last-of-type { flex: 1; font-size: 13px; }
.chat-record-stop,.chat-audio-send,.chat-image-send,.chat-document-send { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 10px; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.chat-record-stop { background: #dc4d4d; }
.chat-audio-send,.chat-image-send,.chat-document-send { background: #16866a; }
.chat-audio-send:disabled,.chat-image-send:disabled,.chat-document-send:disabled { opacity: .55; cursor: wait; }
.chat-audio-preview audio { min-width: 160px; height: 42px; flex: 1; }
.chat-image-preview > img { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: #dce5e7; }
.chat-image-preview > input { min-width: 120px; min-height: 42px; flex: 1; padding: 0 13px; border: 1px solid #d6e0e2; border-radius: 10px; outline: none; color: #20343c; background: #fff; font: inherit; font-size: 14px; }
.chat-image-preview > input:focus { border-color: #79b9a8; box-shadow: 0 0 0 3px rgba(22,134,106,.1); }
.chat-document-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #16866a; background: #dceee8; font-size: 23px; }
.chat-document-info { min-width: 100px; max-width: 190px; flex: 0 1 190px; }
.chat-document-info strong,.chat-document-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-document-info strong { color: #29424d; font-size: 13px; }
.chat-document-info small { margin-top: 3px; color: #768991; font-size: 11px; }
.chat-document-preview > input { min-width: 110px; min-height: 42px; flex: 1; padding: 0 13px; border: 1px solid #d6e0e2; border-radius: 10px; outline: none; color: #20343c; background: #fff; font: inherit; font-size: 14px; }
.chat-document-preview > input:focus { border-color: #79b9a8; box-shadow: 0 0 0 3px rgba(22,134,106,.1); }
@keyframes chat-record-pulse { 70% { box-shadow: 0 0 0 9px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.chat-closed { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid #cce7dc; color: #176b54; background: #e6f7f0; }
.chat-closed[hidden] { display: none !important; }
.chat-closed > i { font-size: 22px; }
.chat-closed > div { flex: 1; min-width: 0; }
.chat-closed strong,.chat-closed span { display: block; }
.chat-closed strong { font-size: 14px; }
.chat-closed span { margin-top: 3px; color: #558074; font-size: 12px; }
.chat-closed a { padding: 9px 12px; border-radius: 8px; color: #fff; background: #16866a; font-size: 12px; font-weight: 700; }
.chat-details { height: 100%; overflow-y: auto; border-left: 1px solid #ccd7da; background: #f7f9fa; }
.chat-details-profile { display: grid; justify-items: center; padding: 28px 20px 24px; border-bottom: 1px solid #e1e7e9; text-align: center; }
.chat-details-avatar { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 8px 22px rgba(8,122,99,.2); }
.chat-profile-name-row { max-width: 100%; margin-top: 13px; }
.chat-details-profile strong { color: #17303d; font-size: 17px; }
.chat-details-profile span { margin-top: 5px; color: #70838d; font-size: 13px; }
.chat-details-profile .chat-profile-company { color: #536d78; font-size: 12px; font-weight: 600; }
.chat-details-profile .chat-profile-phone { color: #70838d; font-size: 12px; }
.chat-details-profile .chat-profile-company i,.chat-details-profile .chat-profile-phone i { margin-right: 3px; color: #16866a; }
.chat-detail-group { padding: 20px; border-bottom: 1px solid #e1e7e9; }
.chat-detail-group > small { color: #87979e; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.chat-detail-group dl { margin: 9px 0 0; }
.chat-detail-group dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid #e8edef; }
.chat-detail-group dl > div:last-child { border-bottom: 0; }
.chat-detail-group dt { color: #6e8089; font-size: 12px; }
.chat-detail-group dd { margin: 0; color: #263e49; font-size: 12px; font-weight: 600; text-align: right; }
.chat-channel { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.chat-channel > i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #20b87a; font-size: 20px; }
.chat-channel > div { flex: 1; min-width: 0; }
.chat-channel strong,.chat-channel span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel strong { color: #29424d; font-size: 13px; }
.chat-channel span { margin-top: 3px; color: #7a8c94; font-size: 11px; }
.chat-channel em { font-size: 10px; font-style: normal; font-weight: 700; }
.chat-channel em.connected { color: #16866a; }
.chat-channel em.disconnected { color: #dc4d4d; }
.ticket-action { text-decoration: none; }
.modal-open { overflow: hidden; }
.chat-contact-modal[hidden] { display: none !important; }
.chat-contact-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(15,35,45,.48); backdrop-filter: blur(2px); }
.chat-contact-modal-card { width: min(440px,100%); overflow: hidden; border: 1px solid #d9e4e7; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,35,45,.28); }
.chat-contact-modal-card > header { display: flex; align-items: center; gap: 14px; padding: 19px 20px 16px; border-bottom: 1px solid #e5ecee; }
.chat-contact-modal-card > header > div { flex: 1; min-width: 0; }
.chat-contact-modal-card > header strong,.chat-contact-modal-card > header span { display: block; }
.chat-contact-modal-card > header strong { color: #183541; font-size: 16px; }
.chat-contact-modal-card > header span { margin-top: 4px; color: #70838d; font-size: 12px; }
.chat-contact-modal-card > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #667d87; background: #edf2f3; cursor: pointer; }
.chat-contact-modal-card form { padding: 19px 20px 20px; }
.chat-contact-modal-card label { display: block; margin-bottom: 7px; color: #314b57; font-size: 12px; font-weight: 700; }
.chat-contact-modal-card input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfdcdf; border-radius: 10px; outline: none; color: #183541; background: #fff; font: inherit; font-size: 14px; }
.chat-contact-modal-card input:focus { border-color: #56a992; box-shadow: 0 0 0 3px rgba(22,134,106,.12); }
.chat-transfer-modal .chat-contact-modal-card select { width: 100%; height: 44px; padding: 0 38px 0 13px; border: 1px solid #cfdcdf; border-radius: 10px; outline: none; color: #183541; background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.chat-transfer-modal .chat-contact-modal-card select:focus { border-color: #2878a8; box-shadow: 0 0 0 3px rgba(40,120,168,.12); }
.chat-contact-modal-card form > small { display: block; margin-top: 9px; color: #71838c; font-size: 11px; }
.chat-contact-modal-card form > small b { color: #435e69; }
.chat-contact-link { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px; border: 1px solid #f0d4d4; border-radius: 11px; background: #fff8f8; }
.chat-contact-link > div { min-width: 0; flex: 1; }
.chat-contact-link span,.chat-contact-link strong,.chat-contact-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-link span { color: #8d6a6a; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.chat-contact-link strong { margin-top: 3px; color: #553737; font-size: 12px; }
.chat-contact-link small { margin-top: 3px; color: #947676; font-size: 10px; }
.chat-contact-link button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 0 10px; border: 1px solid #e5aaaa; border-radius: 8px; color: #b13636; background: #fff; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.chat-contact-link button:hover { color: #fff; border-color: #c33f3f; background: #c33f3f; }
.chat-contact-link button:disabled { opacity: .55; cursor: wait; }
.chat-contact-modal-card form > p { margin: 12px 0 0; padding: 9px 11px; border-radius: 8px; color: #a33232; background: #feeeee; font-size: 12px; }
.chat-contact-modal-card footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 19px; }
.chat-contact-modal-card footer .button { min-height: 38px; }
.chat-unlink-confirm[hidden] { display: none !important; }
.chat-unlink-confirm { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 20px; background: rgba(18,27,32,.62); backdrop-filter: blur(4px); }
.chat-unlink-confirm-card { width: min(420px,100%); padding: 25px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(9,24,31,.38); text-align: center; animation: chat-confirm-in .18s ease-out; }
.chat-unlink-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; color: #bd3434; background: #fdeaea; font-size: 21px; box-shadow: 0 0 0 8px #fff6f6; }
.chat-unlink-confirm-card h2 { margin: 0; color: #203842; font-size: 20px; }
.chat-unlink-confirm-card > p { margin: 9px 0 17px; color: #687c85; font-size: 13px; line-height: 1.5; }
.chat-unlink-confirm-card > p strong { color: #344f5a; }
.chat-unlink-company { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid #e0e8ea; border-radius: 11px; background: #f7fafb; text-align: left; }
.chat-unlink-company > i { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #526d78; background: #e7eff1; }
.chat-unlink-company > div { min-width: 0; }
.chat-unlink-company strong,.chat-unlink-company span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unlink-company strong { color: #2c4651; font-size: 12px; }
.chat-unlink-company span { margin-top: 3px; color: #788b93; font-size: 10px; }
.chat-unlink-confirm-card ul { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; text-align: left; }
.chat-unlink-confirm-card li { display: flex; align-items: flex-start; gap: 8px; color: #60757e; font-size: 11px; line-height: 1.4; }
.chat-unlink-confirm-card li i { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #16866a; background: #e4f4ef; font-size: 8px; }
.chat-unlink-confirm-card footer { display: flex; justify-content: center; gap: 9px; margin-top: 21px; }
.chat-unlink-confirm-card footer .button,.chat-unlink-confirm-button { min-height: 40px; }
.chat-unlink-confirm-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: #c33f3f; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.chat-unlink-confirm-button:hover { background: #a92f2f; }
.chat-unlink-confirm-button:disabled,.chat-unlink-confirm-card footer .button:disabled { opacity: .55; cursor: wait; }
@keyframes chat-confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1050px) { .chat-main { grid-template-columns: minmax(0,1fr) 280px; } }
@media (max-width: 850px) { .chat-main { grid-template-columns: 1fr; } .chat-details { display: none; } .chat-bubble { max-width: 84%; } }
@media (max-width: 560px) {
  .chat-topbar { min-height: 58px; height: 58px; }
  .chat-main { height: calc(100vh - 58px); }
  .chat-live,.chat-protocol { display: none; }
  .chat-contact-header { min-height: 62px; padding: 8px 10px; }
  .chat-contact-avatar { width: 40px; height: 40px; }
  .chat-finish,.chat-transfer { width: 36px; padding: 0; justify-content: center; }
  .chat-finish span,.chat-transfer span { display: none; }
  .chat-messages { padding: 16px 10px; }
  .chat-bubble { max-width: 90%; font-size: 15px; }
  .chat-bubble.has-media { width: min(360px,90%); max-width: 90%; }
  .chat-media-audio > span { display: none; }
  .chat-composer { padding: 8px 9px; gap: 6px; }
  .chat-recording,.chat-audio-preview,.chat-image-preview,.chat-document-preview { gap: 7px; }
  .chat-recording > span:last-of-type { display: none; }
  .chat-record-stop,.chat-audio-send,.chat-image-send,.chat-document-send { padding: 0 11px; font-size: 12px; }
  .chat-audio-preview audio { min-width: 100px; }
  .chat-image-preview > img { width: 48px; height: 48px; }
  .chat-image-send { width: 42px; padding: 0; font-size: 0; }
  .chat-image-send i { font-size: 13px; }
  .chat-document-icon { width: 42px; height: 42px; }
  .chat-document-info { display: none; }
  .chat-document-send { width: 42px; padding: 0; font-size: 0; }
  .chat-document-send i { font-size: 13px; }
  .chat-contact-modal { padding: 12px; }
  .chat-contact-modal-card > header,.chat-contact-modal-card form { padding-left: 16px; padding-right: 16px; }
  .chat-contact-link { align-items: stretch; flex-direction: column; }
  .chat-contact-link button { width: 100%; }
  .chat-unlink-confirm { padding: 12px; }
  .chat-unlink-confirm-card { padding: 21px 16px 17px; }
  .chat-unlink-confirm-card footer { align-items: stretch; flex-direction: column-reverse; }
  .chat-unlink-confirm-card footer .button,.chat-unlink-confirm-button { width: 100%; }
  .chat-finish-confirm { padding: 12px; }
  .chat-finish-confirm-card { padding: 23px 16px 18px; }
  .chat-finish-confirm-card footer { align-items: stretch; flex-direction: column-reverse; }
  .chat-finish-confirm-card footer .button,.chat-finish-confirm-button { width: 100%; }
}
.attendance-tabs { display: inline-flex; gap: 5px; margin-bottom: 18px; padding: 5px; border: 1px solid #dbe5eb; border-radius: 12px; background: #edf3f6; }
.attendance-tabs a { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 9px; color: #587080; font-size: 12px; font-weight: 700; }
.attendance-tabs a.active { color: #fff; background: #08365f; box-shadow: 0 5px 14px rgba(8,54,95,.2); }
.attendance-filters { margin-bottom: 18px; padding: 19px; border: 1px solid #dce6e1; border-radius: 15px; background: #fff; box-shadow: 0 6px 20px rgba(33,65,53,.05); }
.attendance-filters > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.attendance-filters > header div { display: flex; align-items: center; gap: 10px; }
.attendance-filters > header i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #1769aa; background: #eaf4fa; }
.attendance-filters > header span { display: grid; gap: 2px; }
.attendance-filters > header small { color: #718078; }
.attendance-filters > header a { color: #64776e; font-size: 12px; font-weight: 700; }
.attendance-filter-grid { display: grid; grid-template-columns: minmax(180px,1.3fr) repeat(2,minmax(145px,.7fr)) auto; align-items: end; gap: 11px; }
.attendance-filter-grid label { display: grid; gap: 6px; color: #40534b; font-size: 12px; font-weight: 700; }
.attendance-filter-grid input,.attendance-filter-grid select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d5e0db; border-radius: 9px; outline: 0; color: #263b33; background: #fbfdfc; font: inherit; }
.attendance-filter-grid input:focus,.attendance-filter-grid select:focus { border-color: #4d91c5; box-shadow: 0 0 0 3px rgba(23,105,170,.12); }
.attendance-table .attendance-person { min-width: 185px; display: flex; align-items: center; gap: 10px; }
.attendance-person > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #1769aa; background: #eaf4fa; font-weight: 800; }
.attendance-person strong,.attendance-person small { display: block; }
.attendance-person small { margin-top: 3px; color: #71808b; font-size: 11px; }
.attendance-agent { display: inline-flex; align-items: center; gap: 7px; color: #24465c; font-weight: 700; }
.attendance-agent i { color: #17865c; }
.attendance-protocol { color: #607383; font-size: 11px; font-weight: 700; }
.attendance-sector { color: #40596c; font-size: 12px; }
.attendance-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; color: #08704a; background: #e7f7ef; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.attendance-status.finished { color: #596b78; background: #edf1f4; }
.attendance-actions { display: flex; justify-content: flex-end; }
.attendance-actions form { margin: 0; }
.attendance-reopen { border: 0; color: #fff; background: #1769aa; cursor: pointer; }
.attendance-readonly { color: #788b98; font-size: 11px; font-weight: 700; }
.attendance-empty { padding: 38px 20px; border: 1px dashed #cfdbe2; border-radius: 14px; color: #718591; background: #fff; text-align: center; }
.attendance-empty i { display: block; margin-bottom: 10px; font-size: 28px; }
.attendance-mobile-card .attendance-card-actions { margin-top: 13px; }
.attendance-mobile-card .attendance-card-actions .button,.attendance-mobile-card .attendance-card-actions form { width: 100%; }
.attendance-mobile-card .attendance-card-actions button { width: 100%; justify-content: center; }
@media (max-width:760px) {
  .attendance-tabs { width: 100%; }
  .attendance-tabs a { flex: 1; justify-content: center; }
  .attendance-filters > header { align-items: flex-start; flex-direction: column; }
  .attendance-filter-grid { grid-template-columns: 1fr; }
  .attendance-filter-grid .button { width: 100%; justify-content: center; }
}
.chat-readonly-state { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: #176347; background: #e5f6ed; font-size: 12px; font-weight: 800; }
.chat-readonly-window { grid-template-rows: auto auto minmax(0,1fr); }
.chat-readonly-notice { display: flex; align-items: center; gap: 11px; padding: 10px 17px; border-bottom: 1px solid #cfe5d8; color: #245c45; background: #effaf4; }
.chat-readonly-notice > i { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #17865c; }
.chat-readonly-notice > div { min-width: 0; flex: 1; }
.chat-readonly-notice strong,.chat-readonly-notice span { display: block; }
.chat-readonly-notice span { margin-top: 2px; color: #547264; font-size: 11px; }
.chat-readonly-notice .button { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.chat-readonly-detail { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border-radius: 10px; color: #315e49; background: #eef8f2; font-size: 11px; line-height: 1.45; }
.chat-readonly-detail i { margin-top: 2px; color: #17865c; }
.attendance-actions { gap: 12px; }
.attendance-actions form { margin-left: 2px; }
.attendance-card-actions { display: grid; gap: 12px; }
.attendance-actions,.attendance-mobile-card .attendance-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 9px; }
.attendance-actions form,.attendance-mobile-card .attendance-card-actions form { width: 38px; flex: 0 0 38px; margin: 0; }
.attendance-actions .attendance-icon-action,.attendance-mobile-card .attendance-card-actions .attendance-icon-action { width: 38px; min-width: 38px; height: 38px; min-height: 38px; display: inline-grid; place-items: center; flex: 0 0 38px; padding: 0; border-radius: 10px; font-size: 0; line-height: 1; }
.attendance-actions .attendance-icon-action i,.attendance-mobile-card .attendance-card-actions .attendance-icon-action i { margin: 0; font-size: 14px; line-height: 1; }
.attendance-actions form .attendance-icon-action,.attendance-mobile-card .attendance-card-actions form .attendance-icon-action { width: 38px; }
.attendance-icon-action.attendance-view { color: #1769aa; border-color: #b9d1e3; background: #f4f9fc; }
.attendance-icon-action.attendance-view:hover { color: #fff; border-color: #1769aa; background: #1769aa; }
.attendance-icon-action.attendance-locked { color: #718391; border: 1px solid #d7e0e6; background: #f2f5f7; cursor: default; }
.attendance-actions > .button,.attendance-actions > form > .button,.attendance-actions > .attendance-readonly,.attendance-mobile-card .attendance-card-actions > .button,.attendance-mobile-card .attendance-card-actions > form > .button,.attendance-mobile-card .attendance-card-actions > .attendance-readonly { width: 38px; min-width: 38px; height: 38px; min-height: 38px; display: inline-grid; place-items: center; flex: 0 0 38px; padding: 0; border-radius: 10px; font-size: 0; line-height: 1; }
.attendance-actions > .button i,.attendance-actions > form > .button i,.attendance-actions > .attendance-readonly i,.attendance-mobile-card .attendance-card-actions i { margin: 0; font-size: 14px; line-height: 1; }
.attendance-actions > form,.attendance-mobile-card .attendance-card-actions > form { width: 38px; flex: 0 0 38px; margin: 0; }
@media (max-width:560px) {
  .chat-readonly-state { padding: 7px 9px; font-size: 10px; }
  .chat-readonly-notice { align-items: flex-start; padding: 9px 10px; }
  .chat-readonly-notice > i { display: none; }
  .chat-readonly-notice .button { flex: 0 0 auto; }
}

body.conversation-modal-open { overflow: hidden; }
.conversation-modal[hidden] { display: none; }
.conversation-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; }
.conversation-modal-backdrop { position: absolute; inset: 0; background: rgba(9,27,43,.7); backdrop-filter: blur(3px); }
.conversation-modal-window { position: relative; width: min(1420px,96vw); height: min(900px,94vh); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; background: #eef3f7; box-shadow: 0 28px 80px rgba(4,19,31,.38); }
.conversation-modal-window > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px 10px 18px; color: #fff; background: #073f73; }
.conversation-modal-window > header > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.conversation-modal-window > header > div > i { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 50%; background: rgba(255,255,255,.14); }
.conversation-modal-window > header span,.conversation-modal-window > header strong,.conversation-modal-window > header small { display: block; }
.conversation-modal-window > header strong { font-size: 14px; }
.conversation-modal-window > header small { margin-top: 2px; color: #cbdceb; font-size: 11px; }
.conversation-modal-window > header button { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; padding: 0; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.13); cursor: pointer; font-size: 18px; }
.conversation-modal-window > header button:hover { background: rgba(255,255,255,.24); }
.conversation-modal-window iframe { width: 100%; height: 100%; border: 0; background: #eef3f7; }
html.conversation-popup .chat-app-shell { grid-template-columns: minmax(0,1fr); }
html.conversation-popup .chat-app-shell > .sidebar,html.conversation-popup .chat-app-shell > .sidebar-overlay,html.conversation-popup .chat-topbar { display: none !important; }
html.conversation-popup .chat-app-content { height: 100vh; }
html.conversation-popup .chat-main { height: 100vh; }
@media (max-width:760px) {
  .conversation-modal { padding: 0; }
  .conversation-modal-window { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
}

.chat-composer { flex-wrap: wrap; }
.chat-reply-compose[hidden] { display: none !important; }
.chat-reply-compose { width: 100%; flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-left: 4px solid #16866a; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(18,38,45,.12); }
.chat-reply-compose > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-reply-compose > div > i { color: #16866a; }
.chat-reply-compose span,.chat-reply-compose strong,.chat-reply-compose small { display: block; min-width: 0; }
.chat-reply-compose strong { color: #16866a; font-size: 12px; }
.chat-reply-compose small { max-width: 760px; margin-top: 2px; overflow: hidden; color: #546b75; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-compose > button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; padding: 0; border: 0; border-radius: 50%; color: #667b84; background: transparent; cursor: pointer; }
.chat-reply-compose > button:hover { color: #173f50; background: #edf2f3; }
.chat-contact-avatar,.chat-details-avatar { overflow: hidden; }
.chat-contact-avatar img,.chat-details-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.attendance-person > span,.attendance-mobile-card .master-avatar { overflow: hidden; }
.attendance-person > span img,.attendance-mobile-card .master-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.chat-bubble[data-message-id] { cursor: pointer; }
.chat-bubble[data-message-id] a,.chat-bubble[data-message-id] audio,.chat-bubble[data-message-id] video { cursor: default; }
.chat-reply-action { position: absolute; top: 7px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #4f6873; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(18,38,45,.18); cursor: pointer; opacity: 0; transform: scale(.92); transition: opacity .15s ease,transform .15s ease; }
.chat-bubble.incoming .chat-reply-action { right: -38px; }
.chat-bubble.outgoing .chat-reply-action { left: -38px; }
.chat-bubble:hover .chat-reply-action,.chat-reply-action:focus { opacity: 1; transform: scale(1); }
.chat-quoted-message { display: grid; gap: 2px; margin: -2px 0 8px; padding: 7px 9px; overflow: hidden; border-left: 4px solid #16866a; border-radius: 6px; background: rgba(255,255,255,.67); }
.chat-quoted-message strong { color: #12745b; font-size: 12px; }
.chat-quoted-message span { overflow: hidden; color: #52666f; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
@media (hover:none) {
  .chat-reply-action { opacity: .72; transform: scale(1); }
}
@media (max-width:560px) {
  .chat-reply-action { position: static; float: right; margin: -4px -5px 2px 7px; opacity: .65; box-shadow: none; background: transparent; transform: none; }
  .chat-reply-compose small { max-width: 68vw; }
}