/* Shared visual density. Keep layout in CSS pixels; user text scaling remains
   independent from viewport size and never zooms the page or its overlays. */
:root {
  --crm-base-font: clamp(87.5%, calc(78% + .16vw), 100%);
  --crm-space: clamp(.65rem, 1.2vw, 1.15rem);
  --crm-control: 2.35rem;
  --crm-radius: .85rem;
  --crm-blue: #2563eb;
  --crm-teal: #0d9488;
  --crm-violet: #7c3aed;
  --crm-surface: #fff;
  --crm-soft: #f1f5fb;
  --crm-line: #dce5f1;
  --crm-ink: #24344d;
  --bs-sidebar-width: clamp(200px, 15vw, 240px);
  --bs-topbar-height: 3.75rem;
  --bs-footer-height: 0px;
  --footerH: 0px !important;
  --bs-sidebar-item-font-size: .9rem;
  --bs-sidebar-item-icon-size: 1.15rem;
  --bs-sidebar-item-padding-y: .6rem;
  font-size: calc(var(--crm-base-font) * var(--crm-user-scale, 1));
}

html[data-bs-theme="dark"] {
  --crm-surface: #182334;
  --crm-soft: #202e42;
  --crm-line: #34445c;
  --crm-ink: #e4edf8;
}

body { font-size: .9rem; line-height: 1.45; }
body .page-content { padding: var(--crm-space); }
body .page-content > .container-fluid { padding-inline: 0; }
body .page-content:has(#chatsBoardContainer) > .container-fluid.main-content {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
body .app-sidebar { display: flex; flex-direction: column; padding-bottom: 0 !important; }
body .app-sidebar .logo-box { flex: 0 0 auto; }
body .app-sidebar > .scrollbar { flex: 1 1 0; min-height: 0; height: auto !important; }
body .app-sidebar .sidebar-credit {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  padding: .6rem .5rem max(.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 85%);
  font-size: .68rem;
  line-height: 1.4;
  text-align: center;
}
body .sidebar-credit__brand { color: #fff; font-size: .74rem; }
body .sidebar-credit__compact { display: none; border: 0; text-decoration: none; }
html[data-sidebar-size="condensed"] .sidebar-credit :is(.sidebar-credit__label, .sidebar-credit__brand),
html[data-sidebar-size="sm-hover"] .app-sidebar:not(:hover) .sidebar-credit :is(.sidebar-credit__label, .sidebar-credit__brand) { display: none; }
html[data-sidebar-size="condensed"] .sidebar-credit .sidebar-credit__compact,
html[data-sidebar-size="sm-hover"] .app-sidebar:not(:hover) .sidebar-credit .sidebar-credit__compact { display: block; }
body .app-topbar .topbar-button { width: 2.6rem; height: 2.6rem; }
body .app-topbar .topbar-button > :is(i, iconify-icon) { font-size: 1.35rem !important; }
body .app-topbar .updates-open { height: 2.6rem; padding-block: .35rem; }
body .app-sidebar .logo-box { height: var(--bs-topbar-height); }

/* Common headings across the modules, including their locally styled heroes. */
body :is(.ws-hero, .owner-hero, .users-hero, .files-hero, .tasks-hero,
         .report-hero, .perfil-hero) {
  border-radius: var(--crm-radius);
  margin-bottom: var(--crm-space) !important;
  color: #fff;
  background: linear-gradient(120deg, #1d4ed8 0%, #2563eb 52%, #0d9488 100%) !important;
  box-shadow: 0 6px 20px rgb(37 99 235 / 14%) !important;
}
body .ws-hero { padding: 1rem 1.2rem; }
body :is(.owner-hero__inner, .users-hero__inner, .files-hero__inner,
         .tasks-hero__inner, .report-hero__inner, .perfil-hero__inner) {
  padding: 1rem 1.2rem;
  gap: .85rem;
  min-width: 0;
}
body :is(.ws-hero__inner, .tasks-hero__main) { gap: .85rem; min-width: 0; }
body :is(.ws-hero__inner, .owner-hero__inner, .users-hero__inner,
         .files-hero__inner, .tasks-hero__inner, .report-hero__inner,
         .perfil-hero__inner) > * { min-width: 0; }
body :is(.ws-hero__title, .owner-hero__title, .users-hero__title,
         .files-hero__title, .tasks-hero__title, .report-hero__title,
         .perfil-hero__name, .reservas-hero h1) {
  font-size: clamp(1.25rem, 1.1rem + .45vw, 1.7rem);
  line-height: 1.2;
  margin-block: .15rem .3rem;
  color: #fff;
  overflow-wrap: anywhere;
}
body :is(.ws-hero__icon, .owner-hero__icon, .users-hero__icon,
         .files-hero__icon, .tasks-hero__icon, .report-hero__icon) {
  width: 2.9rem;
  height: 2.9rem;
  min-width: 2.9rem;
  border-radius: .8rem;
  font-size: 1.3rem;
}
body :is(.ws-hero__sub, .owner-hero__sub, .users-hero__sub,
         .files-hero__sub, .tasks-hero__sub, .report-hero__sub, .reservas-hero p) {
  font-size: .84rem;
  line-height: 1.4;
  margin-bottom: 0;
}
body :is(.ws-hero__eyebrow, .owner-hero__eyebrow, .users-hero__eyebrow,
         .files-hero__eyebrow, .tasks-hero__eyebrow, .report-hero__eyebrow) {
  font-size: .67rem;
  letter-spacing: .065em;
}
body :is(.card-pro__head, .res-card__head) { padding: .85rem 1rem; }
body .card-pro__body:not(.p-0) { padding: 1rem; }
body .page-content .card { --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; }
body .page-content :is(.owner-toolbar, .agenda-toolbar) { flex-wrap: wrap; gap: .65rem; }
body .page-content :is(.form-control, .form-select) { font-size: .88rem; }
body .page-content :is(.btn, .btn-pro) { font-size: .86rem; }
body :is(.page-content, .modal) .btn > :is(i, iconify-icon) { flex-shrink: 0; }
body .page-content .form-label { margin-bottom: .3rem; font-size: .82rem; }
body .page-content .table > :not(caption) > * > * { padding: .55rem .65rem; }
body .page-content :is(.table-responsive, .table-wrap, .dataTables_wrapper, .dt-container) {
  min-width: 0;
  max-width: 100%;
}
body .page-content :is(.table-wrap, .dataTables_wrapper, .dt-container) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
body .page-content :is(.dataTables_filter, .dataTables_length) :is(input, select) { max-width: 100%; }
body .page-content :is(.nav-tabs, .nav-pills) { gap: .25rem; }
body .page-content :is(.nav-tabs, .nav-pills) .nav-link { padding: .5rem .75rem; }

/* Give ordinary dialogs an internally scrollable body and a reachable footer.
   Chat dialogs have their own geometry, including dragging and full screen. */
body .modal:not(#chatBigModal):not(#chatBigModalMobile) {
  --bs-modal-margin: .75rem;
  --bs-modal-header-padding: .85rem 1rem;
  --bs-modal-padding: 1rem;
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-dialog:not(.modal-fullscreen) {
  height: auto;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-content {
  height: auto;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) :is(.modal-header, .modal-footer) { flex-shrink: 0; }
body .modal .task-progress { min-width: 0; max-width: 100%; }

/* Standalone sign-in and initial setup use the same scale as the dashboard. */
body.authentication-bg { overflow-y: auto; }
body .login-shell { height: auto; min-height: 100vh; min-height: 100dvh; }
body .login-panel { width: min(100%, 27rem); }
body .login-card { padding: clamp(1.25rem, 3vh, 2rem); }
body:has(.setup-wrap) { padding: var(--crm-space); }
body .setup-wrap { width: 100%; max-width: 48rem; }
body .setup-wrap .inp { box-sizing: border-box; min-width: 0; max-width: 100%; }
body .setup-hero { margin-bottom: 1rem; }
body .setup-hero__icon { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; border-radius: 1rem; }
body .step-body { padding: 1.25rem; min-height: 0; }
body .summary-row { min-width: 0; gap: .6rem; overflow-wrap: anywhere; }
body .step-footer { flex-wrap: wrap; padding: .8rem 1.25rem; }

/* Board: remove fixed minimums in the header; horizontal scroll belongs only
   to the Kanban lanes, not to the entire page. */
body .ws-chat-mobile-header {
  padding: .7rem .9rem !important;
  margin-bottom: .65rem !important;
  background: linear-gradient(120deg, #1d4ed8, #2563eb 60%, #0d9488) !important;
  box-shadow: 0 5px 18px rgb(37 99 235 / 15%) !important;
}
body .ws-chat-mobile-header .lead-header-compact {
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.6fr) !important;
  gap: .5rem .75rem !important;
}
body #chatsBoardContainer .board-row > .col { min-width: 0 !important; }

/* Chat: a compact profile row and one action row. Weather is only displayed
   when both the actual dialog width and viewport height leave room for it. */
body #chatBigModal .modal-header.modal-header--glass {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "profile" "actions" !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: .6rem .85rem !important;
  gap: .45rem !important;
}
body #chatBigModal .chat-modal-header-profile {
  grid-area: profile;
  width: auto !important;
  min-width: 0 !important;
}
body #chatBigModal .chat-modal-header-profile > .flex-column > .d-flex {
  flex-wrap: wrap;
  gap: .25rem .65rem !important;
}
body #chatBigModal .chat-modal-header-profile .d-inline-flex {
  flex-shrink: 1 !important;
  min-width: 0;
  max-width: 100%;
}
body #chatBigModal #modalChatTag { overflow: hidden; text-overflow: ellipsis; }
body #chatBigModal .crm-clock-weather { display: none !important; }
body #chatBigModal .modal-avatar-wa {
  width: 2.65rem !important;
  height: 2.65rem !important;
  min-width: 2.65rem !important;
  margin-right: .65rem !important;
  border-radius: .8rem !important;
}
body #chatBigModal .modal-avatar-wa i { font-size: 1.65rem !important; }
body #chatBigModal #modalChatName { font-size: .98rem !important; }
body #chatBigModal .modal-header.modal-header--glass > .chat-modal-header-actions {
  grid-area: actions;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
}
body #chatBigModal .chat-modal-header-actions > [data-assignee-control] {
  flex: 1 1 155px !important;
  max-width: 230px;
  margin-right: auto;
}
body #chatBigModal :is(#asignarUsuarioHeader, #asignarUsuarioHeaderDisabled) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body #chatBigModal .chat-modal-header-actions > .btn-group {
  flex-wrap: wrap !important;
  min-width: 0;
  max-width: 100%;
  gap: .25rem !important;
}
body #chatBigModal .modal-header :is(.btn, .form-select),
body #chatBigModal .crm-assignee__trigger {
  min-height: var(--crm-control) !important;
  height: auto !important;
  padding: .4rem .65rem !important;
  font-size: .8rem !important;
  border-radius: .55rem !important;
}
body #chatBigModal .crm-assignee { width: 100%; min-width: 0; }
body #chatBigModal .crm-assignee__avatar { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
body #chatBigModal .crm-assignee__name { font-size: .8rem; }
body #chatBigModal .crm-assignee__specialty { font-size: .7rem; }
body #chatBigModal .attr-section__title > i { color: var(--crm-teal); font-size: .9em; }
body #chatBigModal .chat-modal-stage-strip { padding: .2rem .65rem !important; margin: 0; }
body #chatBigModal #waIdentityDesktop { padding: .25rem .65rem !important; font-size: .75rem !important; }
body #chatBigModal #desktopDropArea { padding: 0 !important; }
body #chatBigModal #desktopModalBodyFlex { gap: 0 !important; }
body #chatBigModal #attrPanel.attr-panel {
  container: lead-fields / inline-size;
  flex: 0 1 clamp(250px, 29%, 360px) !important;
  min-width: 250px !important;
  max-width: 38% !important;
  margin: 0 !important;
  color: var(--crm-ink);
  background: var(--crm-surface);
}
body #chatBigModal .attr-panel__header { padding: .55rem .65rem .35rem; }
body #chatBigModal #attrPanelBody.attr-panel__body { padding: .55rem !important; }
body #chatBigModal .attr-section { border-radius: .65rem; }
body #chatBigModal :is(.attr-section__header, .attr-section__body) { padding: .55rem .65rem !important; }
body #chatBigModal .attr-section__title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem !important;
}
body #chatBigModal #attrPanel :is(.form-control, .form-select, .btn, .form-label) { font-size: .8rem !important; }
body #chatBigModal #attrPanel :is(.form-control, .form-select) { padding-block: .35rem !important; }
body #chatBigModal .attr-panel__header > .d-flex > div:first-child { min-width: 0; }
body #chatBigModal #attrChatIdInfo { overflow-wrap: anywhere; }
body #chatBigModal #btnActualizarCliente { white-space: nowrap; flex-shrink: 0; }
body #chatBigModal :is(#modalMessages, #modalMessagesMobile),
body #chatBigModalMobile #modalMessagesMobile { padding: .85rem 1rem !important; gap: .6rem !important; }
body #chatBigModal #modalMessages .chat-bubble,
body #chatBigModalMobile #modalMessagesMobile .chat-bubble {
  font-size: .9rem !important;
  padding: .55rem .75rem !important;
  border-radius: .85rem !important;
}
body #chatBigModal #chatComposerDesktop { padding: .5rem .65rem !important; }
body #chatBigModal #chatFooter { align-items: center !important; gap: .4rem !important; }
body #chatBigModal #chatFooter :is(.btn, #inputMensaje) {
  min-height: var(--crm-control) !important;
  height: auto !important;
  padding: .45rem .65rem !important;
  font-size: .85rem !important;
}
body #chatBigModal #inputMensaje { max-height: min(9rem, 24dvh) !important; }

/* Form columns follow the panel width, including the advisor's embedded chat. */
@container lead-fields (max-width: 319.98px) {
  body #chatBigModal #attrPanel .attr-section__body .row > .col-md-6 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-height: 801px) {
  @container chat-modal (min-width: 1140px) {
    body:not(.agent-wa-chat-open) #chatBigModal .modal-header.modal-header--glass {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
      grid-template-areas: "profile weather" "actions actions" !important;
    }
    body:not(.agent-wa-chat-open) #chatBigModal .crm-clock-weather {
      display: flex !important;
      grid-area: weather;
      width: 100%;
      min-width: 0;
      margin: 0;
    }
  }
}

@media (max-width: 1199.98px) {
  body :is(.owner-hero__inner, .users-hero__inner, .files-hero__inner) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
  }
  body :is(.owner-hero__text, .users-hero__text, .files-hero__text) { flex: 1 1 220px; }
  body :is(.owner-hero__icon, .users-hero__icon, .files-hero__icon) { margin: 0; }
  body .ws-chat-mobile-header .lead-header-compact { grid-template-columns: minmax(0, 1fr) !important; }
  body .ws-chat-mobile-header :is(.admin-header-actions, .user-header-actions) { justify-content: flex-start !important; }
}

@media (max-height: 768px) and (min-width: 768px) {
  :root { --crm-base-font: 87.5%; --crm-space: .7rem; --crm-control: 2.2rem; }
  body :is(.ws-hero, .owner-hero__inner, .users-hero__inner, .files-hero__inner,
           .tasks-hero__inner, .report-hero__inner, .perfil-hero__inner) { padding: .75rem 1rem; }
  body .page-content .mb-4 { margin-bottom: 1rem !important; }
  body #chatBigModal .modal-header.modal-header--glass { padding-block: .4rem !important; }
}

/* A narrow dialog can be dragged/resized independently of the screen. */
@container chat-modal (min-width: 640px) {
  body:not(.agent-wa-chat-open) #chatBigModal #desktopModalBodyFlex { flex-direction: row !important; }
  body:not(.agent-wa-chat-open) #chatBigModal #desktopDropArea { flex: 1 1 0 !important; min-height: 0 !important; }
  body:not(.agent-wa-chat-open) #chatBigModal #attrPanel.attr-panel {
    flex: 0 1 clamp(250px, 29%, 360px) !important;
    height: auto !important;
    min-height: 0 !important;
    border-top: 0 !important;
    border-left: 1px solid var(--crm-line) !important;
  }
  body.agent-wa-layout.agent-wa-chat-open #chatBigModal #desktopModalBodyFlex { flex-direction: row !important; }
  body.agent-wa-layout.agent-wa-chat-open #chatBigModal #desktopDropArea { flex: 1 1 0 !important; min-height: 0 !important; }
  body.agent-wa-layout.agent-wa-chat-open #chatBigModal #attrPanel.attr-panel {
    flex: 0 1 clamp(240px, 30%, 320px) !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 38% !important;
    min-height: 0 !important;
    height: auto !important;
    border-top: 0 !important;
    border-left: 1px solid var(--crm-line) !important;
  }
}
@container chat-modal (max-width: 639.98px) {
  body #chatBigModal #desktopModalBodyFlex { flex-direction: column !important; }
  body #chatBigModal #desktopDropArea { flex: 1 1 0 !important; min-height: 0 !important; }
  body #chatBigModal #attrPanel.attr-panel {
    flex: 0 1 45% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--crm-line) !important;
  }
}
@container chat-modal (max-width: 559.98px) {
  body #chatBigModal #chatFooter { display: flex !important; flex-wrap: wrap !important; }
  body #chatBigModal #chatFooter > .flex-grow-1 { flex: 1 1 100% !important; order: 2; }
  body #chatBigModal #sendButton { margin-left: auto; }
  body #chatBigModal #btnChatSummaryDesktop { padding-inline: .5rem !important; }
  body #chatBigModal #attrPanel .attr-panel__header :is(#attrChatIdInfo, #attrLeadInfo) { display: none !important; }
  body #chatBigModal #attrPanel.attr-panel { flex: 0 0 clamp(130px, 22dvh, 190px) !important; }
}

body.agent-wa-layout.agent-wa-chat-open #chatBigModal .modal-content { min-height: 0 !important; }

html[data-bs-theme="dark"] body #chatBigModal #desktopDropArea.chat-background,
html[data-bs-theme="dark"] body #chatBigModalMobile #modalMessagesMobile.chat-background {
  background-color: #101e2c !important;
  background-image: radial-gradient(ellipse at top, rgb(13 148 136 / 8%), transparent 65%) !important;
}
html[data-bs-theme="dark"] body :is(#chatBigModal, #chatBigModalMobile) .chat-bubble.user {
  color: #e4edf8 !important;
  background: #243448 !important;
  border-color: #344b63 !important;
}
html[data-bs-theme="dark"] body :is(#chatBigModal, #chatBigModalMobile) .chat-bubble.bot {
  color: #e4f5ef !important;
  background: #164c42 !important;
  border-color: #276b5c !important;
}
html[data-bs-theme="dark"] body :is(#chatBigModal, #chatBigModalMobile) .msg-ts { color: #a6bcb6 !important; }
html[data-bs-theme="dark"] body [data-crm-clock-weather] {
  color: var(--crm-ink);
  background: var(--crm-soft);
  border-color: var(--crm-line);
}
html[data-bs-theme="dark"] body [data-crm-clock-weather] strong { color: #e4edf8; }
html[data-bs-theme="dark"] body [data-crm-clock-weather] small { color: #afc1d6; }

@media (max-width: 767.98px) {
  :root { --crm-space: .65rem; --crm-control: 2.5rem; }
  body .page-content .container-fluid { padding-inline: 0; }
  body :is(.tasks-hero__inner, .report-hero__inner) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
  }
  body :is(.tasks-hero__actions, .report-hero__actions) { flex-wrap: wrap; gap: .4rem; }
  body .tasks-hero__main { flex-direction: row; text-align: left; }
  body .tasks-hero__icon { margin: 0; }
  body :is(.report-hero__icon, .report-hero__sub) { margin-inline: 0; }
  body .ws-hero__crumbs { margin-left: 0; }
  body .reservas-hero { flex-wrap: wrap; gap: .8rem; }
  body .reservas-hero > div { min-width: 0; }
  body .page-content :is(.card-header, .card-pro__head) { flex-wrap: wrap; gap: .5rem; }
  body #importForm { flex-wrap: wrap; width: 100%; }
  body #importForm input { flex: 1 1 180px; }
  body .page-content .dataTables_filter input { width: min(180px, 50vw); }
}
@media (max-height: 600px) and (min-width: 768px) {
  :root { --crm-base-font: 81.25%; --crm-space: .55rem; }
  body #chatBigModal .modal-avatar-wa { width: 2.25rem !important; height: 2.25rem !important; min-width: 2.25rem !important; }
  body #chatBigModal .modal-header.modal-header--glass { gap: .3rem !important; }
}
@media (pointer: coarse) {
  body :is(.page-content, .modal) :is(.btn, .nav-link) { min-height: 40px; }
  body :is(.page-content, .modal, .login-form, .setup-wrap) :is(input.form-control, textarea.form-control, select.form-select, .inp),
  body #chatBigModal #attrPanel :is(input.form-control, textarea.form-control, select.form-select),
  body #chatBigModal #chatFooter textarea#inputMensaje { font-size: 16px !important; }
  body #chatBigModal #chatFooter .btn,
  body #chatBigModal .modal-header .btn { min-height: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.app-sidebar, .page-content, .app-topbar),
  body :is(.ws-hero, .owner-hero, .users-hero, .files-hero, .tasks-hero, .report-hero) {
    animation: none !important;
    transition: none !important;
  }
}