:root {
  --bg: #0c0c0d;
  --surface: #151517;
  --surface-2: #1d1d20;
  --surface-3: #252529;
  --border: #303034;
  --text: #f5f5f5;
  --muted: #9d9da5;
  --red: #e10600;
  --red-dark: #a90400;
  --red-soft: rgba(225, 6, 0, 0.14);
  --sidebar-width: 250px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(225, 6, 0, 0.08), transparent 28rem), var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: #09090a;
  border-right: 1px solid var(--border);
  transition: transform .25s ease;
}
.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 92px;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.brand-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--red), var(--red-dark));
  box-shadow: 0 10px 28px rgba(225, 6, 0, .22);
  font-size: 1.35rem;
}
.brand strong { display: block; letter-spacing: .04em; }
.brand strong span { color: var(--red); }
.brand small { color: var(--muted); }
.sidebar-nav { display: grid; gap: .45rem; padding: 1.25rem .85rem; }
.sidebar-nav .nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #b6b6bc;
  border-radius: 10px;
  padding: .8rem .9rem;
  transition: .2s ease;
  text-align: left;
  text-decoration: none;
}
.nav-button { background: transparent; border: 0; }
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active { color: #fff; background: var(--red-soft); }
.sidebar-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--red); }
.sidebar-footer {
  margin-top: auto;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .82rem;
  border-top: 1px solid var(--border);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1fc86a;
  box-shadow: 0 0 0 5px rgba(31, 200, 106, .1);
}
.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  min-height: 92px;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  background: rgba(12, 12, 13, .88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.page-title { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 750; }
.eyebrow { color: var(--red); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.topbar-actions { display: flex; align-items: center; gap: .85rem; }
.date-badge {
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  color: #d4d4d8;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .86rem;
}
.menu-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.new-appointment-button { min-height: 42px !important; }
.content-area { padding: 2rem; }
.welcome-banner {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(111, 0, 0, .96), rgba(225, 6, 0, .84)), #a60000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  overflow: hidden;
  position: relative;
}
.welcome-banner::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -70px;
  top: -100px;
  border: 48px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}
.welcome-banner h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); font-weight: 800; }
.welcome-banner p { color: rgba(255, 255, 255, .75); }
.banner-icon {
  position: relative;
  z-index: 1;
  width: 105px;
  height: 105px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 3.6rem;
}
.stats-row { margin-block: 1.4rem; }
.stat-card {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; font-size: 1.25rem; }
.stat-icon.red { color: #ff625d; background: rgba(225, 6, 0, .15); }
.stat-icon.orange { color: #ffad52; background: rgba(255, 139, 0, .13); }
.stat-icon.blue { color: #67a9ff; background: rgba(39, 125, 255, .13); }
.stat-icon.green { color: #58dc8b; background: rgba(31, 200, 106, .13); }
.stat-card span { display: block; color: var(--muted); font-size: .8rem; }
.stat-card strong { display: block; margin-top: .1rem; font-size: 1.7rem; line-height: 1; }
.panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2);
}
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.panel-header h3 { margin: 0; font-size: 1.15rem; font-weight: 750; }
.panel-header-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(225, 6, 0, .2);
  border-radius: 11px;
}
.confirmation-panel { border-color: rgba(255, 153, 0, .32); }
.confirmation-reminder-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .85rem; }
.reminder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem;
  background: rgba(255, 153, 0, .07);
  border: 1px solid rgba(255, 153, 0, .22);
  border-radius: 11px;
}
.reminder-card strong, .reminder-card span { display: block; }
.reminder-card span { margin-top: .15rem; color: var(--muted); font-size: .78rem; }
.no-reminders { padding: 1rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.workflow-strip {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: .8rem;
  overflow-x: auto;
  background: #101012;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.workflow-strip i { color: #5c5c64; flex: 0 0 auto; }
.workflow-step {
  flex: 0 0 auto;
  padding: .4rem .65rem;
  color: #c6c6cc;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.workflow-step.ready { color: #69e39a; border-color: rgba(31, 200, 106, .35); background: rgba(31, 200, 106, .08); }
.form-label { color: #c8c8cd; font-size: .83rem; font-weight: 650; }
.form-control, .form-select, .input-group-text { min-height: 45px; color: #fff; background-color: var(--surface-2); border-color: var(--border); }
.form-control::placeholder { color: #696970; }
.form-control:focus, .form-select:focus { color: #fff; background-color: var(--surface-2); border-color: var(--red); box-shadow: 0 0 0 .25rem rgba(225, 6, 0, .12); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a5ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.input-group-text { color: var(--red); }
textarea.form-control { resize: vertical; }
.btn-danger { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: #bb0500; --bs-btn-hover-border-color: #bb0500; min-height: 40px; font-weight: 700; }
.btn-outline-danger { --bs-btn-color: #ff524d; --bs-btn-border-color: rgba(225, 6, 0, .55); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); }
.btn-outline-secondary { --bs-btn-color: #b4b4bb; --bs-btn-border-color: #505058; --bs-btn-hover-bg: #303034; --bs-btn-hover-border-color: #505058; }
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 185px 205px; gap: .8rem; margin-bottom: 1rem; }
.search-box {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-inline: .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.search-box i { color: var(--red); }
.search-box input { width: 100%; color: #fff; background: transparent; border: 0; outline: 0; }
.search-box input::placeholder { color: #777780; }
.appointment-table { --bs-table-bg: transparent; --bs-table-color: #efeff1; --bs-table-border-color: var(--border); margin-bottom: 0; }
.appointment-table thead th { padding: .75rem; color: #85858d; border-bottom-width: 1px; font-size: .68rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.appointment-table tbody td { padding: .9rem .75rem; font-size: .8rem; vertical-align: middle; }
.client-name, .vehicle-name { display: block; font-weight: 700; }
.table-subtext { display: block; margin-top: .15rem; color: var(--muted); font-size: .74rem; }
.plate-badge { display: inline-block; margin-top: .3rem; padding: .14rem .4rem; color: #dedee3; background: #28282c; border: 1px solid #3a3a40; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; letter-spacing: .08em; }
.due-label { display: inline-block; margin-top: .35rem; padding: .2rem .45rem; color: #ffbc5b; background: rgba(255, 153, 0, .09); border: 1px solid rgba(255, 153, 0, .25); border-radius: 999px; font-size: .66rem; font-weight: 800; }
.confirmation-stack { display: grid; gap: .4rem; min-width: 128px; }
.confirmation-badge { display: inline-flex; width: fit-content; align-items: center; gap: .35rem; padding: .28rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.confirmation-badge.pending { color: #ffbd61; background: rgba(255, 153, 0, .1); border: 1px solid rgba(255, 153, 0, .25); }
.confirmation-badge.confirmed { color: #72b7ff; background: rgba(39, 125, 255, .1); border: 1px solid rgba(39, 125, 255, .25); }
.confirmation-badge.arrived { color: #68df94; background: rgba(31, 200, 106, .1); border: 1px solid rgba(31, 200, 106, .25); }
.quick-button { min-height: 31px; padding: .28rem .52rem; font-size: .7rem; font-weight: 750; }
.stage-select { width: 145px; min-height: 36px; padding-block: .3rem; font-size: .72rem; }
.stage-select:disabled { opacity: .68; cursor: not-allowed; }
.action-buttons { display: flex; justify-content: flex-end; gap: .35rem; }
.icon-button {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  color: #bfbfc5;
  background: #242428;
  border: 1px solid #35353b;
  border-radius: 8px;
}
.icon-button:hover { color: #fff; border-color: var(--red); }
.icon-button.whatsapp:hover { color: #61df8d; border-color: #1fc86a; }
.icon-button.delete:hover { color: #ff6b67; background: var(--red-soft); }
.empty-state { padding: 3.5rem 1rem; text-align: center; }
.empty-icon { width: 65px; height: 65px; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--red); background: var(--red-soft); border-radius: 50%; font-size: 1.7rem; }
.empty-state h4 { font-size: 1rem; }
.empty-state p { margin-bottom: 0; color: var(--muted); font-size: .85rem; }
.next-appointment { min-height: 110px; }
.next-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.next-date { min-width: 66px; padding: .7rem; text-align: center; background: var(--red); border-radius: 10px; }
.next-date strong, .next-date span { display: block; }
.next-date strong { font-size: 1.45rem; line-height: 1; }
.next-date span { margin-top: .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.next-info h4 { margin-bottom: .2rem; font-size: .95rem; }
.next-info p { margin: 0; color: var(--muted); font-size: .8rem; }
.next-time { font-size: 1.1rem; font-weight: 800; }
.dark-modal { color: #fff; background: var(--surface); border: 1px solid var(--border); }
.dark-modal .modal-header, .dark-modal .modal-footer { border-color: var(--border); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.detail-item { padding: .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.detail-item.full { grid-column: 1 / -1; }
.detail-item span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.detail-item strong { display: block; margin-top: .25rem; font-size: .9rem; }
.toast { --bs-toast-bg: #171719; }
.sidebar-backdrop { display: none; }

@media (max-width: 1199.98px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .search-box { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; background: rgba(0, 0, 0, .65); }
  .sidebar-backdrop.show { display: block; }
}
@media (max-width: 767.98px) {
  .topbar, .content-area { padding-inline: 1rem; }
  .content-area { padding-top: 1rem; }
  .welcome-banner { min-height: 150px; padding: 1.35rem; }
  .filter-bar { grid-template-columns: 1fr; }
  .search-box { grid-column: auto; }
  .agenda-header { align-items: flex-start; }
  .next-card { grid-template-columns: auto 1fr; }
  .next-time { grid-column: 2; }
}
@media (max-width: 575.98px) {
  .panel-card { padding: 1rem; border-radius: 12px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item.full { grid-column: auto; }
  .topbar { padding-block: .8rem; }
  .page-title { font-size: 1.08rem; }
}


/* Atalhos superiores */
.topbar-shortcuts {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.top-action-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  padding: .55rem .72rem;
  color: #d5d5db;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
  transition: .2s ease;
}
.top-action-button:hover,
.top-action-button:focus {
  color: #fff;
  background: #28282c;
  border-color: rgba(225, 6, 0, .65);
  box-shadow: 0 0 0 .2rem rgba(225, 6, 0, .08);
}
.top-action-button i { color: #ff4d48; font-size: 1rem; }
.top-action-button.icon-only { width: 42px; padding: 0; position: relative; }
.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  color: #fff;
  background: var(--red);
  border: 2px solid #0c0c0d;
  border-radius: 999px;
  font-size: .61rem;
  font-weight: 850;
}
.notification-menu {
  width: min(360px, calc(100vw - 2rem));
  margin-top: .65rem !important;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #171719;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .42);
}
.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}
.notification-header strong,
.notification-header small { display: block; }
.notification-header small { margin-top: .15rem; color: var(--muted); font-size: .7rem; }
.notification-header > i { color: var(--red); }
.notification-list { max-height: 360px; overflow-y: auto; }
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(48, 48, 52, .75);
}
.notification-item:last-child { border-bottom: 0; }
.notification-item-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.notification-item.warning .notification-item-icon { color: #ffba55; background: rgba(255, 153, 0, .1); }
.notification-item.success .notification-item-icon { color: #5ee08f; background: rgba(31, 200, 106, .1); }
.notification-item strong,
.notification-item span { display: block; }
.notification-item strong { font-size: .79rem; }
.notification-item span { margin-top: .2rem; color: var(--muted); font-size: .71rem; }
.notification-empty {
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: 2rem 1rem;
  text-align: center;
}
.notification-empty i { color: #58dc8b; font-size: 1.55rem; }
.notification-empty strong { font-size: .85rem; }
.notification-empty span { color: var(--muted); font-size: .74rem; }

/* Indicadores das etapas */
.stage-indicators {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-heading h3 { margin: 0; font-size: 1.1rem; font-weight: 750; }
.section-heading > span { color: var(--muted); font-size: .73rem; }
.stage-indicator-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(125px, 1fr));
  gap: .75rem;
}
.stage-indicator-card {
  min-width: 0;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem;
  color: #fff;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.stage-indicator-card:hover {
  transform: translateY(-2px);
  background: #242428;
  border-color: rgba(225, 6, 0, .58);
}
.stage-indicator-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1rem;
}
.stage-indicator-icon.scheduled { color: #ff6c68; background: rgba(225, 6, 0, .13); }
.stage-indicator-icon.entry { color: #74aaff; background: rgba(39, 125, 255, .12); }
.stage-indicator-icon.diagnosis { color: #b68cff; background: rgba(137, 75, 255, .12); }
.stage-indicator-icon.quote { color: #ffc266; background: rgba(255, 153, 0, .12); }
.stage-indicator-icon.parts { color: #f08fd0; background: rgba(220, 71, 164, .12); }
.stage-indicator-icon.progress { color: #6ee2e2; background: rgba(31, 190, 190, .12); }
.stage-indicator-icon.ready { color: #62df91; background: rgba(31, 200, 106, .12); }
.stage-indicator-copy { min-width: 0; }
.stage-indicator-copy small,
.stage-indicator-copy strong { display: block; }
.stage-indicator-copy small {
  min-height: 2.1em;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.05;
}
.stage-indicator-copy strong { margin-top: .25rem; font-size: 1.35rem; line-height: 1; }

/* Financeiro e manual */
.subscription-plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  background: linear-gradient(115deg, rgba(225, 6, 0, .14), rgba(225, 6, 0, .03));
  border: 1px solid rgba(225, 6, 0, .3);
  border-radius: 13px;
}
.subscription-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #ff625d;
  background: rgba(225, 6, 0, .13);
  border-radius: 12px;
  font-size: 1.35rem;
}
.subscription-plan small { color: var(--muted); }
.subscription-plan h4 { margin: .1rem 0 .2rem; font-size: 1.05rem; }
.subscription-plan p { margin: 0; color: var(--muted); font-size: .78rem; }
.subscription-status {
  padding: .32rem .6rem;
  color: #68df94;
  background: rgba(31, 200, 106, .1);
  border: 1px solid rgba(31, 200, 106, .27);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 850;
}
.finance-info-card {
  height: 100%;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.finance-info-card span,
.finance-info-card strong { display: block; }
.finance-info-card span { color: var(--muted); font-size: .72rem; }
.finance-info-card strong { margin-top: .25rem; font-size: 1rem; }
.finance-note,
.manual-intro {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  color: #c8c8ce;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .77rem;
}
.finance-note i,
.manual-intro > i { color: var(--red); }
.manual-intro { margin-bottom: 1rem; }
.manual-intro strong,
.manual-intro span { display: block; }
.manual-intro span { margin-top: .12rem; color: var(--muted); font-size: .72rem; }
.manual-accordion {
  --bs-accordion-bg: var(--surface-2);
  --bs-accordion-color: #e8e8ec;
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-bg: var(--surface-2);
  --bs-accordion-btn-color: #e8e8ec;
  --bs-accordion-active-bg: rgba(225, 6, 0, .1);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(225, 6, 0, .1);
}
.manual-accordion .accordion-button::after { filter: invert(1) grayscale(1); }
.manual-accordion .accordion-body { color: #bdbdc4; font-size: .82rem; line-height: 1.65; }

@media (max-width: 1499.98px) {
  .stage-indicator-grid { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
  .top-action-button span { display: none; }
  .top-action-button:not(.icon-only) { width: 42px; padding: 0; }
}
@media (max-width: 1199.98px) {
  .stage-indicator-grid { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .topbar-actions { gap: .5rem; }
}
@media (max-width: 767.98px) {
  .topbar { flex-wrap: wrap; }
  .topbar > div:nth-child(2) { flex: 1; }
  .topbar-actions { width: 100%; justify-content: flex-end; }
  .stage-indicator-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .subscription-plan { grid-template-columns: auto 1fr; }
  .subscription-status { grid-column: 2; width: fit-content; }
}
@media (max-width: 449.98px) {
  .topbar-shortcuts { gap: .35rem; }
  .top-action-button,
  .top-action-button:not(.icon-only) { width: 38px; min-height: 38px; }
  .new-appointment-button { min-width: 38px; padding-inline: .55rem; }
  .stage-indicator-grid { grid-template-columns: 1fr; }
}

/* ===== Aplicação PHP 7.4 ===== */
.brand { text-decoration: none; }
.brand img { width: 100%; max-width: 205px; height: auto; }
.sidebar-nav { overflow-y: auto; }
.sidebar-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1030; background: rgba(0,0,0,.65); }
.sidebar-backdrop.show { display: block; }
.top-action-button { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); }
.notification-button { position: relative; }
.notification-count { position: absolute; min-width: 19px; height: 19px; padding: 0 5px; right: -7px; top: -8px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; }
.user-menu { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .35rem .7rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.user-menu strong,.user-menu small { display:block; text-align:left; }
.user-menu small { color: var(--muted); font-size:.73rem; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; display:grid; place-items:center; background:linear-gradient(145deg,var(--red),var(--red-dark)); color:#fff; font-weight:800; }
.user-avatar.large { width:56px; height:56px; font-size:1.25rem; }
.dropdown-menu { --bs-dropdown-bg: var(--surface-2); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color:#eee; --bs-dropdown-link-hover-bg:var(--red-soft); --bs-dropdown-link-hover-color:#fff; }
.notification-menu { width:min(390px,92vw); padding:0; overflow:hidden; }
.notification-header { padding:1rem; display:flex; justify-content:space-between; border-bottom:1px solid var(--border); }
.notification-header small,.notification-item small { display:block; color:var(--muted); }
.notification-item { display:flex; gap:.7rem; padding:.85rem 1rem; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); }
.notification-item:hover { background:var(--surface-3); }
.notification-icon { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(13,202,240,.12);color:#0dcaf0;flex:0 0 auto; }
.notification-icon.warning { color:#ffc107;background:rgba(255,193,7,.12); }.notification-icon.danger{color:#dc3545;background:rgba(220,53,69,.12)}.notification-icon.success{color:#198754;background:rgba(25,135,84,.12)}
.notification-empty { padding:2rem 1rem;text-align:center;color:var(--muted); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.section-heading h2,.section-heading h3 { margin:0; font-weight:800; }.section-heading p{color:var(--muted);margin:.4rem 0 0}.section-heading>a{color:#fff}
.form-control,.form-select,.input-group-text { color:#f5f5f5; background:var(--surface-2); border-color:var(--border); }
.form-control:focus,.form-select:focus { color:#fff;background:var(--surface-2);border-color:var(--red);box-shadow:0 0 0 .25rem rgba(225,6,0,.15); }
.form-control::placeholder { color:#777780; }.form-select option{background:#1d1d20;color:#fff}.form-label{color:#d8d8dd;font-weight:600;font-size:.86rem}
.table { --bs-table-bg: transparent; --bs-table-color:#ececef; --bs-table-border-color:var(--border); margin:0; }.table thead th{color:#aaaab2;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;white-space:nowrap}.table td{vertical-align:middle}.table-subtext{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem}.table-actions{display:flex;align-items:center;gap:.35rem}.table-actions form{display:inline-flex;margin:0}.table-warning-row{background:rgba(255,193,7,.05)!important}
.modal-content { color:#f4f4f5;background:var(--surface);border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,.5); }.modal-header,.modal-footer{border-color:var(--border)}.modal-backdrop.show{opacity:.75}
.btn-outline-light { --bs-btn-color:#ddd;--bs-btn-border-color:#4a4a50;--bs-btn-hover-bg:#fff;--bs-btn-hover-color:#111; }.alert{border:0}.btn{font-weight:650}
.stage-pill { display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .58rem;border:1px solid color-mix(in srgb,var(--stage) 45%,transparent);background:color-mix(in srgb,var(--stage) 16%,transparent);color:color-mix(in srgb,var(--stage) 72%,white);border-radius:999px;font-size:.78rem;font-weight:750;white-space:nowrap; }
.plate-badge,.plate-inline { display:inline-block;padding:.25rem .5rem;border:2px solid #d8d8d8;border-radius:5px;color:#171717;background:#f4f4f4;font-family:monospace;font-weight:900;letter-spacing:.08em; }.plate-inline{padding:.08rem .28rem;font-size:.7rem}
.empty-state { padding:3rem 1rem;text-align:center; }.empty-icon,.empty-mini i{width:58px;height:58px;margin:0 auto 1rem;display:grid;place-items:center;border-radius:16px;background:var(--red-soft);color:var(--red);font-size:1.65rem}.empty-state p,.empty-mini p{color:var(--muted)}.empty-mini{text-align:center;padding:1.5rem}
.next-appointment strong{color:#ff726d}.next-appointment h4{margin:.5rem 0}.next-appointment p{color:var(--muted)}.next-appointment span{display:block;padding:.75rem;border-radius:9px;background:var(--surface-2)}
.catalog-card,.supplier-card,.user-card { height:100%;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:0 12px 34px rgba(0,0,0,.17); }.catalog-card{display:flex;gap:1rem}.catalog-card.inactive{opacity:.65}.catalog-icon{width:45px;height:45px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--red-soft);color:var(--red);font-size:1.2rem}.catalog-copy{min-width:0;flex:1}.catalog-copy h3,.supplier-card h3,.user-card h3{font-size:1rem;font-weight:800;margin:.15rem 0}.catalog-copy p,.supplier-card p{color:var(--muted);min-height:42px}.catalog-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}.catalog-meta span{display:flex;gap:.4rem;align-items:center}.catalog-meta strong{color:#fff;font-size:1.05rem}
.supplier-card small{color:var(--muted)}.supplier-card h3{margin-top:1rem}.user-card-header{display:flex;align-items:center;gap:.8rem}.user-card-header>div{flex:1}.user-card-header span:not(.user-avatar):not(.badge){color:var(--muted);font-size:.8rem}.user-card-body{padding:1rem 0}.user-card-body p{display:flex;align-items:center;gap:.55rem;color:#d0d0d5;margin:.55rem 0}.user-card-body i{color:var(--red)}
.app-tabs{border-bottom-color:var(--border)}.app-tabs .nav-link{color:var(--muted);border:0;border-bottom:2px solid transparent}.app-tabs .nav-link.active{color:#fff;background:transparent;border-bottom-color:var(--red)}
.order-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.order-detail-header h2{margin:.7rem 0 .2rem}.order-detail-header p{color:var(--muted)}.order-detail-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.order-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.order-info-grid>div{padding:.85rem;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}.order-info-grid small{display:block;color:var(--muted);margin-bottom:.25rem}.order-info-grid strong{font-size:.87rem}.summary-box{padding:1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}.summary-box h3,.timeline h3{font-size:1rem;font-weight:800}.summary-box>div{display:flex;justify-content:space-between;padding:.5rem 0}.summary-total{border-top:1px solid var(--border);margin-top:.4rem;padding-top:1rem!important}.summary-total strong{font-size:1.15rem;color:#62dd91}.timeline-item{display:flex;gap:.8rem;position:relative;padding-bottom:1rem}.timeline-item>span{width:12px;height:12px;border-radius:50%;background:var(--red);margin-top:.3rem;box-shadow:0 0 0 5px var(--red-soft)}.timeline-item:not(:last-child):before{content:"";position:absolute;left:5px;top:17px;bottom:0;width:2px;background:var(--border)}.timeline-item strong,.timeline-item small{display:block}.timeline-item small,.timeline-item p{color:var(--muted);font-size:.76rem}.timeline-item p{margin:.3rem 0 0}
.settings-list>div{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border)}.settings-list dt{color:var(--muted);font-weight:500}.settings-list dd{margin:0;font-weight:700}
.manual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.manual-card{display:flex;gap:1rem;padding:1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:14px}.manual-card>span{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--red);font-weight:900}.manual-card h3{font-size:1rem;font-weight:800}.manual-card p{color:var(--muted)}.manual-card a{color:#ff716d}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 15% 15%,rgba(225,6,0,.22),transparent 28rem),#080809}.auth-shell{width:min(1050px,100%);display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:#0d0d0e;box-shadow:0 35px 100px rgba(0,0,0,.55)}.auth-visual{padding:4rem;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(117,0,0,.85),rgba(14,14,15,.95))}.auth-logo{width:min(360px,100%);margin-bottom:3rem}.auth-visual h1{font-weight:850;font-size:clamp(2rem,4vw,3.2rem)}.auth-visual p{color:#ccc;max-width:500px}.auth-feature{display:flex;gap:.7rem;align-items:center;margin-top:1.5rem;color:#fff}.auth-feature i{font-size:1.4rem}.auth-card{padding:3.5rem;background:var(--surface)}.auth-card h1,.auth-card h2{font-weight:850}.install-shell{display:block;max-width:900px}.auth-brand{padding:1rem;background:#09090a;text-align:center}.auth-brand img{width:240px}.install-shell .auth-card{padding:2.5rem}
.tv-body{min-height:100vh;background:#070708;color:#fff}.tv-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.2rem 2rem;border-bottom:1px solid var(--border);background:#0e0e10}.tv-header img{width:240px}.tv-header>div{display:flex;flex-direction:column;text-align:center}.tv-header span{color:var(--muted)}.tv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;padding:2rem}.tv-card{position:relative;overflow:hidden;padding:1.7rem;border:1px solid color-mix(in srgb,var(--stage-color) 45%,var(--border));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--stage-color) 12%,#171719),#101012)}.tv-card:before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:var(--stage-color)}.tv-stage{color:var(--stage-color);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.tv-plate{display:inline-block;margin:1.2rem 0 .6rem;padding:.35rem .7rem;background:#f5f5f5;color:#111;border-radius:5px;font-family:monospace;font-size:1.4rem;font-weight:900;letter-spacing:.12em}.tv-card h2{font-weight:850}.tv-card p,.tv-card small{color:var(--muted)}.tv-empty{grid-column:1/-1;text-align:center;padding:10vh}.tv-empty i{font-size:5rem;color:var(--red)}
@media(max-width:1199px){.order-info-grid{grid-template-columns:repeat(2,1fr)}.order-detail-header{flex-direction:column}.order-detail-actions{justify-content:flex-start}}
@media(max-width:991px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.topbar{padding:1rem}.content-area{padding:1.2rem}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.manual-grid{grid-template-columns:1fr}}
@media(max-width:767px){.topbar-actions .date-badge{display:none}.user-menu>span:not(.user-avatar),.user-menu>i{display:none!important}.section-heading{align-items:flex-start;flex-direction:column}.section-heading>.d-flex{width:100%}.section-heading>.d-flex .btn{flex:1}.stage-indicator-grid{grid-template-columns:repeat(2,1fr)}.order-info-grid{grid-template-columns:1fr}.order-detail-actions .btn{flex:1}.auth-card{padding:2rem 1.25rem}.tv-header{padding:1rem;flex-wrap:wrap}.tv-header img{width:180px}.tv-grid{grid-template-columns:1fr;padding:1rem}}

/* Rolagem preservada com barras ocultas para um visual mais limpo. */
html,
body,
.sidebar-nav,
.notification-list,
.modal-body,
.table-responsive {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.notification-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*
 * Correção global dos modais com formulários extensos.
 * O formulário intermediário passa a participar do flex layout do Bootstrap,
 * mantendo cabeçalho e rodapé visíveis enquanto somente o corpo é rolado.
 */
.modal-dialog-scrollable .modal-content {
  min-height: 0;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
  flex: 0 0 auto;
}
.modal-dialog-scrollable .modal-content > form > .modal-body,
.modal-dialog-scrollable .modal-content > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .modal-dialog-scrollable {
    height: calc(100% - 1rem);
    margin: .5rem;
  }
  .modal-dialog-scrollable .modal-content {
    max-height: 100%;
    border-radius: 14px;
  }
  .modal-header,
  .modal-footer {
    padding: .85rem 1rem;
  }
  .modal-body {
    padding: 1rem;
  }
}

.confirmation-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,193,7,.28);
  border-radius: 13px;
  background: rgba(255,193,7,.07);
}
.confirmation-action-card strong,
.confirmation-action-card span { display: block; }
.confirmation-action-card span { color: var(--muted); margin-top: .2rem; font-size: .84rem; }

.vehicle-detail-strip,
.vehicle-history-header,
.quote-headline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.vehicle-detail-strip h3,
.vehicle-history-header h3 { margin: .35rem 0 .15rem; font-weight: 850; }
.vehicle-detail-strip p,
.vehicle-history-header p { margin: 0; color: var(--muted); }
.vehicle-photo-frame,
.vehicle-photo-large,
.vehicle-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--red);
  background: #101012;
  border: 1px solid var(--border);
}
.vehicle-photo-frame { width: 108px; height: 82px; border-radius: 12px; font-size: 2rem; }
.vehicle-photo-frame.small { width: 78px; height: 62px; }
.vehicle-photo-large { width: 210px; height: 145px; border-radius: 16px; font-size: 3.4rem; }
.vehicle-thumb { width: 58px; height: 44px; border-radius: 8px; }
.vehicle-photo-frame img,
.vehicle-photo-large img,
.vehicle-thumb img { width: 100%; height: 100%; object-fit: cover; }

.form-section {
  margin-bottom: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
  transition: opacity .2s ease, border-color .2s ease;
}
.form-section-title { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.form-section-title > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #fff;
  background: var(--red);
  font-weight: 900;
}
.form-section-title h3 { margin: 0; font-size: 1rem; font-weight: 850; }
.form-section-title p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.form-section-disabled { display: none; }

.item-type {
  display: inline-flex;
  padding: .26rem .52rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.item-type.service { color: #7cb7ff; background: rgba(13,110,253,.14); border: 1px solid rgba(13,110,253,.28); }
.item-type.part { color: #ffd66f; background: rgba(255,193,7,.12); border: 1px solid rgba(255,193,7,.25); }
.item-type.product { color: #74e7b0; background: rgba(25,135,84,.14); border: 1px solid rgba(25,135,84,.28); }
.quote-total-preview {
  min-height: 45px;
  display: flex;
  align-items: center;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: .375rem;
  color: #63dc93;
  background: var(--surface-2);
  font-size: 1.05rem;
  font-weight: 850;
}

.service-history-card {
  margin-bottom: .85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}
.service-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.service-history-head > div { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.service-history-head span:not(.stage-pill) { color: var(--muted); font-size: .78rem; }
.service-history-card > p { color: #ddd; margin: .9rem 0; }
.service-history-items { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; }

@media(max-width:767px) {
  .confirmation-action-card,
  .vehicle-history-header,
  .vehicle-detail-strip,
  .quote-headline,
  .service-history-head { align-items: flex-start; flex-direction: column; }
  .vehicle-photo-large { width: 100%; height: 210px; }
  .confirmation-action-card > .d-flex { width: 100%; }
  .confirmation-action-card .btn { flex: 1; }
}

/* Catálogo de marcas e modelos */
.catalog-brand-list{display:flex;flex-direction:column;gap:.55rem;max-height:640px;overflow:auto;scrollbar-width:none}.catalog-brand-list::-webkit-scrollbar{display:none}.catalog-brand-item{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:14px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.025);transition:.2s}.catalog-brand-item:hover,.catalog-brand-item.active{border-color:rgba(220,53,69,.7);background:rgba(220,53,69,.1);color:#fff}.catalog-brand-item span{display:flex;flex-direction:column}.catalog-brand-item small{color:var(--muted);font-size:.78rem}.vehicle-model-select:disabled,.vehicle-brand-select:disabled{opacity:.65}
.workshop-brand-logo{max-width:180px;max-height:68px;object-fit:contain;border-radius:10px;background:#fff;padding:6px}.subscription-card{max-width:760px;margin:0 auto}.admin-metric .metric-value{font-size:1.65rem;font-weight:800}.logo-preview{width:120px;height:90px;object-fit:contain;border-radius:12px;background:#fff;padding:8px}.admin-shell .sidebar{border-right-color:rgba(255,255,255,.08)}


/* BoxFlow: segmentos e suporte */
.segment-context-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border:1px solid rgba(225,6,0,.28);border-radius:16px;background:linear-gradient(135deg,rgba(225,6,0,.11),rgba(255,255,255,.02))}.segment-context-card>div{display:flex;align-items:center;gap:1rem}.segment-context-card h3{margin:0 0 .25rem;font-size:1.05rem}.segment-context-card p{color:var(--muted)}.segment-context-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;color:#fff;background:var(--red);font-size:1.45rem}.presence-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;border-radius:999px;font-size:.78rem;font-weight:800;border:1px solid var(--border)}.presence-pill i{font-size:.55rem}.presence-pill.online{color:#65dc96;background:rgba(25,135,84,.12);border-color:rgba(25,135,84,.3)}.presence-pill.offline{color:#aaa;background:rgba(255,255,255,.04)}
.support-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:1rem;min-height:650px}.support-sidebar{padding:1rem}.support-ticket-list{display:flex;flex-direction:column;gap:.5rem;overflow:auto}.support-ticket-item{display:block;padding:.85rem;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.02)}.support-ticket-item:hover,.support-ticket-item.active{color:#fff;border-color:rgba(225,6,0,.55);background:rgba(225,6,0,.09)}.support-ticket-item>div{display:flex;align-items:start;justify-content:space-between;gap:.5rem}.support-ticket-item strong{font-size:.88rem}.support-ticket-item small{display:block;margin-top:.35rem;color:var(--muted);font-size:.74rem}.support-conversation{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden}.support-conversation-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}.support-conversation-header h3,.support-conversation-header h2{margin:0 0 .25rem;font-size:1.1rem}.support-conversation-header small{color:var(--muted)}.support-messages{flex:1;min-height:430px;max-height:560px;overflow:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.75rem;background:rgba(0,0,0,.12)}.support-message{max-width:78%;padding:.8rem 1rem;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)}.support-message.client{align-self:flex-end;border-bottom-right-radius:4px;background:rgba(225,6,0,.12);border-color:rgba(225,6,0,.28)}.support-message.agent{align-self:flex-start;border-bottom-left-radius:4px;background:rgba(13,110,253,.1);border-color:rgba(13,110,253,.25)}.support-message>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.35rem}.support-message strong{font-size:.78rem}.support-message small{color:var(--muted);font-size:.68rem}.support-message p{margin:0;white-space:normal;word-break:break-word}.support-message-form{display:flex;align-items:stretch;gap:.75rem;padding:1rem;border-top:1px solid var(--border)}.support-message-form textarea{resize:none}.support-message-form button{min-width:105px}.support-message-form button i{margin-right:.35rem}
.support-agent-body{min-height:100vh;background:var(--bg);color:var(--text)}.support-agent-topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;border-bottom:1px solid var(--border);background:#0d0d0f}.support-agent-topbar img{width:165px}.support-agent-topbar>div{display:flex;align-items:center;gap:1rem}.support-agent-topbar a{color:var(--muted);text-decoration:none}.support-agent-layout{display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100vh - 74px)}.support-agent-sidebar{padding:1rem;border-right:1px solid var(--border);overflow:auto;background:#0c0c0e}.support-filter{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:1rem}.support-filter a{padding:.55rem;text-align:center;border-radius:9px;color:var(--muted);text-decoration:none;background:rgba(255,255,255,.04);font-size:.78rem}.support-filter a.active{color:#fff;background:var(--red)}.support-agent-conversation{display:flex;flex-direction:column;min-width:0;overflow:hidden}.support-agent-conversation .support-messages{max-height:none}.priority-urgente{border-left:3px solid #dc3545}.priority-alta{border-left:3px solid #fd7e14}
@media(max-width:900px){.support-layout,.support-agent-layout{grid-template-columns:1fr;height:auto}.support-agent-sidebar{border-right:0;border-bottom:1px solid var(--border);max-height:330px}.support-layout{min-height:0}.support-messages{min-height:360px}.segment-context-card,.support-conversation-header{align-items:flex-start;flex-direction:column}.support-message{max-width:92%}}@media(max-width:600px){.support-message-form{flex-direction:column}.support-message-form button{width:100%}.support-agent-topbar strong{display:none}}