:root {
  --color-primary: #066ab7;
  --page-bg: #f4f5f7;
  --surface-bg: #ffffff;
  --app-border-color: #d4d4d5;
  --app-text-muted: #767676;
  --app-danger: #db2828;
  --app-success: #21ba45;
  --app-accent: var(--color-primary);
  --app-accent-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --app-accent-active: color-mix(in srgb, var(--color-primary) 70%, black);
  --app-accent-subtle: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --app-accent-muted: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --app-accent-light: color-mix(in srgb, var(--color-primary) 45%, white);
  --app-accent-emphasis: color-mix(in srgb, var(--color-primary) 75%, black);
  --app-accent-bg-subtle: color-mix(in srgb, var(--color-primary) 12%, white);
  --app-accent-border-subtle: color-mix(in srgb, var(--color-primary) 28%, white);
  --app-accent-focus-border: color-mix(in srgb, var(--color-primary) 55%, transparent);
  --app-accent-focus-ring: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --app-accent-input-ring: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-neutral-base: #64748b;
  --color-neutral: color-mix(in srgb, var(--color-primary) 8%, var(--color-neutral-base));
  --color-neutral-hover: color-mix(in srgb, var(--color-neutral) 88%, black);
  --color-neutral-active: color-mix(in srgb, var(--color-neutral) 74%, black);
  --color-neutral-subtle: color-mix(in srgb, var(--color-neutral) 12%, white);
  --color-neutral-border-subtle: color-mix(in srgb, var(--color-neutral) 24%, white);
  --color-neutral-focus-ring: color-mix(in srgb, var(--color-neutral) 24%, transparent);
  --color-secondary: #4b4b4b;
  --app-secondary-hover: color-mix(in srgb, var(--color-secondary) 88%, black);
  --app-secondary-active: color-mix(in srgb, var(--color-secondary) 74%, black);
  --app-secondary-emphasis: color-mix(in srgb, var(--color-secondary) 78%, black);
  --app-secondary-bg-subtle: color-mix(in srgb, var(--color-secondary) 14%, white);
  --app-secondary-border-subtle: color-mix(in srgb, var(--color-secondary) 26%, white);
  --app-secondary-focus-ring: color-mix(in srgb, var(--color-secondary) 24%, transparent);
  --sidebar-width: 15rem;
  --app-bar-height: 3.5rem;
  --app-bar-bg: #03375e;
  --app-bar-border: #2d323c;
  --app-bar-text: #f1f3f5;
  --sidebar-bg: #e8eaed;
  --sidebar-border: #d5dae1;
  --sidebar-text: #3d4451;
  --sidebar-text-muted: #6b7280;
  --sidebar-active: var(--app-accent);
  --sidebar-active-bg: var(--app-accent-subtle);
}

body {
  background-color: var(--page-bg);
  min-height: 100vh;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

a {
color: var(--color-primary);
}

a:hover {
color: var(--app-accent-hover);
}

.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary);
color: #fff;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--app-accent-hover);
color: #fff;
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
background-color: var(--app-accent-active);
color: #fff;
}

.ui.secondary.button,
.ui.secondary.buttons .button,
.ui.action.input > .ui.secondary.button,
.ui.action.input > .buttons > .ui.secondary.button {
background-color: var(--color-secondary) !important;
border-color: var(--color-secondary) !important;
color: #fff !important;
text-shadow: none;
}

.ui.secondary.button:hover,
.ui.secondary.buttons .button:hover,
.ui.action.input > .ui.secondary.button:hover,
.ui.action.input > .buttons > .ui.secondary.button:hover {
background-color: var(--app-secondary-hover) !important;
border-color: var(--app-secondary-hover) !important;
color: #fff !important;
}

.ui.secondary.button:active,
.ui.secondary.buttons .button:active,
.ui.action.input > .ui.secondary.button:active,
.ui.action.input > .buttons > .ui.secondary.button:active {
background-color: var(--app-secondary-active) !important;
border-color: var(--app-secondary-active) !important;
color: #fff !important;
}

.ui.secondary.button:focus,
.ui.secondary.buttons .button:focus,
.ui.action.input > .ui.secondary.button:focus {
background-color: var(--color-secondary) !important;
color: #fff !important;
}

.ui.basic.button,
.ui.basic.buttons .button {
color: var(--color-neutral);
box-shadow: inset 0 0 0 1px var(--color-neutral);
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
color: #fff;
background: var(--color-neutral) !important;
box-shadow: inset 0 0 0 1px var(--color-neutral);
}

.ui.basic.button:active,
.ui.basic.buttons .button:active {
background: var(--color-neutral-active) !important;
color: #fff;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.input input:focus {
border-color: var(--app-accent-focus-border);
}

.ui.form .field.error :is(textarea, select, input),
.ui.form .fields.error .field :is(textarea, select, input),
.ui.form:not(.initial) .field :is(textarea, select, input):invalid {
background: var(--surface-bg);
}

.ui.form .field.error :is(textarea, select, input):focus,
.ui.form .fields.error .field :is(textarea, select, input):focus,
.ui.form:not(.initial) .field :is(textarea, select, input):invalid:focus {
background: var(--surface-bg);
}

.ui.form .field > label,
.ui.form .fields > .field > label {
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
}

.app-text-muted {
color: var(--app-text-muted) !important;
}

.app-page-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}

.app-page-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}

.app-page-title {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
}

.app-page-subtitle {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: var(--app-text-muted);
}

.app-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.ui.segment.app-data-table-panel {
padding: 0;
overflow: hidden;
}

.app-data-table-panel .ui.table {
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
width: 100%;
min-width: max-content;
}

.app-data-table-panel thead th {
background: var(--surface-bg) !important;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--app-text-muted);
white-space: nowrap;
vertical-align: middle;
}

.app-data-table-panel .ui.table tbody tr:hover {
background: rgba(0, 0, 0, 0.02) !important;
}

.app-data-table-panel .ui.table col.col-edit {
width: 3rem;
}

.app-data-table-panel .ui.table th.col-edit,
.app-data-table-panel .ui.table td.col-edit {
width: 3rem;
min-width: 3rem;
max-width: 3rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
text-align: center;
vertical-align: top;
white-space: nowrap;
box-sizing: border-box;
}

.app-table-empty {
text-align: center;
color: var(--app-text-muted);
padding: 3rem 1rem !important;
}

.app-form-page {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.app-form-shell {
width: 100%;
max-width: 42rem;
}

.app-form-page .app-page-title {
margin-bottom: 1.5rem;
}

.app-form {
width: 100%;
}

.app-form .ui.stackable.grid {
width: 100%;
margin-top: 0;
}

.app-form .ui.stackable.grid > .column {
display: flex;
flex-direction: column;
}

.app-form .ui.stackable.grid > .column > .field {
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 0;
}

.app-form .ui.stackable.grid > .column > .field > label {
display: flex;
align-items: flex-end;
min-height: 2.875rem;
line-height: 1.35;
margin-bottom: 0.5rem;
}

.field-label-layout {
display: flex;
align-items: flex-start;
gap: 0.35rem;
width: 100%;
}

.field-label-layout > .icon {
flex-shrink: 0;
margin-top: 0.15em;
color: var(--app-text-muted);
}

.field-label-text {
flex: 1;
min-width: 0;
}

.app-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}

.app-form-actions-top {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--app-border-color);
}

.app-form-actions-bottom {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--app-border-color);
}

.app-list-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}

.app-list-search {
flex: 1;
min-width: min(100%, 20rem);
max-width: 28rem;
}

.app-list-search .icon {
color: var(--app-text-muted);
}

.app-pagination .ui.pagination.menu {
margin: 0;
}

.app-pagination .ui.pagination.menu .item {
min-width: 2.25rem;
justify-content: center;
}

.app-pagination .ui.pagination.menu .item:not(.disabled):not(.active) {
color: var(--color-neutral);
}

.app-pagination .ui.pagination.menu .item:not(.disabled):not(.active):hover {
color: var(--color-secondary);
background: var(--app-secondary-bg-subtle);
}

.app-pagination .ui.pagination.menu .active.item {
background: var(--color-secondary) !important;
color: #fff !important;
font-weight: 600;
}

.app-pagination .ui.pagination.menu .active.item:hover {
background: var(--app-secondary-hover) !important;
color: #fff !important;
}

.app-pagination .ui.pagination.menu .disabled.item {
opacity: 0.45;
}

.app-list-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
padding: 0.875rem 1.375rem;
border-top: 1px solid var(--app-border-color);
background: var(--surface-bg);
}

.app-list-footer-top {
border-top: 0;
border-bottom: 1px solid var(--app-border-color);
}

.app-list-summary {
font-size: 0.875rem;
color: var(--app-text-muted);
}

.form-label-required {
color: var(--app-danger);
white-space: nowrap;
}

.login-brand-logo {
display: block;
height: 3.25rem;
width: auto;
margin-inline: auto;
}

.login-page {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
overflow: hidden;
}

.login-backdrop {
position: fixed;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%),
radial-gradient(ellipse 70% 55% at 90% 85%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 65%),
linear-gradient(160deg, #e9eef5 0%, var(--page-bg) 45%, #eef1f6 100%);
}

.login-backdrop::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.35;
background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 18%, transparent) 1px, transparent 1px);
background-size: 1.25rem 1.25rem;
}

.login-shell {
position: relative;
z-index: 1;
width: 100%;
max-width: 24rem;
}

.login-card {
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--app-border-color) 80%, white);
border-radius: 1rem;
box-shadow:
0 1px 2px rgba(16, 24, 40, 0.04),
0 12px 32px rgba(16, 24, 40, 0.1);
overflow: hidden;
}

.login-card-accent {
height: 0.25rem;
background: linear-gradient(
90deg,
var(--color-primary),
color-mix(in srgb, var(--color-primary) 70%, #3b82f6)
);
}

.login-card-body {
padding: 2rem 2rem 1.75rem;
}

.login-brand {
text-align: center;
margin-bottom: 1.75rem;
}

.login-title {
margin: 0.875rem 0 0;
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.03em;
color: #111827;
line-height: 1.2;
}

.login-subtitle {
margin: 0.375rem 0 0;
font-size: 0.9375rem;
color: var(--app-text-muted);
line-height: 1.4;
}

.login-form .field > label {
font-size: 0.8125rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.375rem;
}

.login-form .field {
margin-bottom: 1.125rem;
}

.login-form .field:last-of-type {
margin-bottom: 1.5rem;
}

.login-input.ui.left.icon.input {
width: 100%;
}

.login-input.ui.left.icon.input > input {
border-radius: 0.625rem;
border-color: var(--app-border-color);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 0.9375rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input.ui.left.icon.input > input::placeholder {
color: #9ca3af;
}

.login-input.ui.left.icon.input > input:focus {
border-color: var(--app-accent-focus-border);
box-shadow: 0 0 0 0.2rem var(--app-accent-input-ring);
}

.login-input.ui.left.icon.input > .icon {
color: var(--app-text-muted);
opacity: 0.75;
}

.login-form .ui.negative.message {
border-radius: 0.625rem;
font-size: 0.875rem;
margin-bottom: 1.25rem;
}

.login-submit.ui.button {
border-radius: 0.625rem;
font-weight: 600;
letter-spacing: 0.01em;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
box-shadow: 0 1px 2px rgba(6, 106, 183, 0.2);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.login-submit.ui.button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(6, 106, 183, 0.28);
}

.login-submit.ui.button:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(6, 106, 183, 0.2);
}

.login-forgot {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

.login-forgot a {
  color: var(--login-accent, #1b6ca8);
  text-decoration: none;
}

.login-forgot a:hover {
  text-decoration: underline;
}

.login-submit.ui.button .icon {
margin-right: 0.25rem;
}

@media (max-width: 480px) {
.login-card-body {
padding: 1.5rem 1.25rem 1.375rem;
}

.login-title {
font-size: 1.5rem;
}
}

.cell-edit-link {
color: var(--app-text-muted);
line-height: 1;
}

.cell-edit-link:hover {
color: var(--color-primary);
}

.app-feedback-success {
color: var(--app-success);
}

.app-feedback-danger {
color: var(--app-danger);
}

.app-icon-btn {
padding-left: 0.65rem !important;
padding-right: 0.65rem !important;
}

.app-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
height: var(--app-bar-height);
background: var(--app-bar-bg);
border-bottom: 1px solid var(--app-bar-border);
color: var(--app-bar-text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.app-bar-inner {
display: flex;
align-items: center;
gap: 1rem;
height: 100%;
width: 100%;
padding: 0 1.25rem;
}

.app-bar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
font-size: 1.125rem;
font-weight: 700;
color: var(--app-bar-text);
text-decoration: none;
letter-spacing: -0.02em;
}

.app-bar-brand:hover {
color: #fff;
text-decoration: none;
}

.app-bar-brand-logo {
height: 1.75rem;
width: auto;
flex-shrink: 0;
filter: brightness(0) invert(1);
}

.app-bar-menu-toggle {
display: none;
flex-shrink: 0;
}

.global-search {
flex: 1;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
min-width: 0;
}

.global-search-field {
position: relative;
}

.global-search-results {
position: absolute;
top: calc(100% + 0.375rem);
left: 0;
right: 0;
z-index: 400;
background: var(--surface-bg);
color: #1f2937;
border: 1px solid var(--app-border-color);
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
max-height: 18rem;
overflow-y: auto;
}

.global-search-results[hidden] {
display: none !important;
}

.global-search-results-list {
margin: 0;
padding: 0.375rem 0;
list-style: none;
}

.global-search-result {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
color: #1f2937;
text-decoration: none;
cursor: pointer;
}

.global-search-result:hover,
.global-search-result.active {
background: var(--app-accent-muted);
text-decoration: none;
color: #1f2937;
}

.global-search-action {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--app-accent);
text-decoration: none;
cursor: pointer;
}

.global-search-action:hover,
.global-search-action.active {
background: var(--app-accent-muted);
color: var(--app-accent-hover);
text-decoration: none;
}

.global-search-action .icon {
font-size: 0.875rem;
opacity: 0.85;
flex-shrink: 0;
}

.global-search-divider {
height: 1px;
margin: 0.25rem 0.875rem;
background: var(--app-border-color);
list-style: none;
}

.global-search-result-main {
min-width: 0;
flex: 1;
}

.global-search-result-name {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.global-search-result-doc {
display: block;
font-size: 0.8125rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.global-search-result-kind {
flex-shrink: 0;
padding: 0.2rem 0.45rem;
border-radius: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #eef2f7;
color: #4b5563;
white-space: nowrap;
}

.global-search-result-kind-propiedad {
background: #fef3c7;
color: #92400e;
}

.global-search-result-kind-alquiler {
background: #dbeafe;
color: #1e40af;
}

.global-search-empty,
.global-search-loading {
padding: 0.75rem 0.875rem;
font-size: 0.875rem;
color: #6b7280;
}

.global-search .htmx-indicator {
display: none;
}

.global-search .htmx-indicator.htmx-request {
display: block;
}

.global-search .ui.left.icon.input {
width: 100%;
box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
border-radius: 0.5rem;
}

.global-search .ui.left.icon.input > input {
border-radius: 0.5rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
font-size: 0.9375rem;
}

.global-search .ui.left.icon.input > input::placeholder {
color: var(--app-text-muted);
opacity: 0.85;
}

.global-search .ui.left.icon.input > input:focus {
border-color: var(--app-accent-focus-border);
box-shadow: 0 0 0 0.2rem var(--app-accent-input-ring), 0 1px 4px rgba(16, 24, 40, 0.08);
}

.global-search .ui.left.icon.input > .icon {
color: var(--app-text-muted);
font-size: 1.05rem;
}

.app-body {
display: flex;
padding-top: var(--app-bar-height);
min-height: 100vh;
}

.app-shell {
display: flex;
flex: 1;
min-width: 0;
}

.sidebar {
position: fixed;
top: var(--app-bar-height);
left: 0;
z-index: 200;
display: flex;
flex-direction: column;
width: var(--sidebar-width);
height: calc(100vh - var(--app-bar-height));
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
transition: transform 0.2s ease;
}

.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 1rem 0.75rem;
}

.sidebar-nav ul {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-link {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.875rem;
border-radius: 0.5rem;
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}

.sidebar-link .icon {
width: 1.25rem;
font-size: 1.05rem;
text-align: center;
flex-shrink: 0;
}

.sidebar-link:hover {
background: rgba(0, 0, 0, 0.05);
color: #1f2937;
text-decoration: none;
}

.sidebar-link.active {
background: var(--sidebar-active-bg);
color: var(--sidebar-active);
}

.sidebar-footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--sidebar-border);
}

.user-info {
margin: 0 0 0.5rem;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--sidebar-text-muted);
word-break: break-word;
}

.user-info strong {
display: block;
color: var(--sidebar-text);
font-weight: 600;
}

.whatsapp-connection-status {
margin: 0 0 0.75rem;
}

.whatsapp-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
line-height: 1.3;
color: var(--sidebar-text-muted);
text-decoration: none;
}

.whatsapp-status > .icon {
margin: 0;
font-size: 0.875rem;
line-height: 1;
}

a.whatsapp-status:hover .whatsapp-status-label {
text-decoration: underline;
}

.whatsapp-status--static {
cursor: default;
}

.whatsapp-status-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
background: #9ca3af;
}

.whatsapp-status--ok .whatsapp-status-dot {
background: #22c55e;
}

.whatsapp-status--warn .whatsapp-status-dot {
background: #f59e0b;
}

.whatsapp-status--error .whatsapp-status-dot {
background: #ef4444;
}

.whatsapp-status--muted .whatsapp-status-dot {
background: #9ca3af;
}

.whatsapp-status--ok .whatsapp-status-label {
color: var(--sidebar-text);
}

.whatsapp-vinculacion-panel {
margin-top: 1.25rem;
max-width: 32rem;
}

.whatsapp-vinculacion-loading {
margin-left: 0.5rem;
color: var(--text-muted, #6b7280);
}

.whatsapp-vinculacion-user {
display: flex;
align-items: center;
gap: 0.875rem;
margin-top: 1rem;
}

.whatsapp-vinculacion-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.whatsapp-vinculacion-avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #e5e7eb;
color: #25d366;
font-size: 1.75rem;
}

.whatsapp-vinculacion-user-name {
margin: 0;
font-weight: 600;
}

.whatsapp-vinculacion-user-id {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
color: var(--text-muted, #6b7280);
word-break: break-all;
}

.whatsapp-vinculacion-qr {
margin-top: 1.25rem;
}

.whatsapp-vinculacion-qr img {
display: block;
max-width: 280px;
width: 100%;
height: auto;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 0.5rem;
background: #fff;
}

.whatsapp-vinculacion-hint {
margin-top: 0.75rem;
font-size: 0.875rem;
color: var(--text-muted, #6b7280);
line-height: 1.45;
}

.whatsapp-vinculacion-pending .whatsapp-status,
.whatsapp-vinculacion-ok .whatsapp-status {
margin-bottom: 0.25rem;
}

.main-column {
flex: 1;
margin-left: var(--sidebar-width);
min-width: 0;
}

.page-content {
padding: 2rem;
}

.nav-loading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 5px;
overflow: hidden;
pointer-events: none;
opacity: 0;
visibility: hidden;
}

.nav-loading.is-active {
opacity: 1;
visibility: visible;
}

.nav-loading-bar {
height: 100%;
width: 40%;
background: var(--color-primary);
animation: nav-loading-indeterminate 2.0s ease-in-out infinite;
}

@keyframes nav-loading-indeterminate {
0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(350%);
}
}

.menu-toggle svg {
width: 1.25rem;
height: 1.25rem;
}

.sidebar-overlay {
display: none;
}

.placeholder-icon {
font-size: 3rem;
text-align: center;
margin-bottom: 1rem;
}

@media (max-width: 768px) {
.sidebar {
  transform: translateX(-100%);
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-overlay {
  display: block;
  position: fixed;
  top: var(--app-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.52);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.sidebar-drawer-open {
  overflow: hidden;
}

.main-column {
  margin-left: 0;
}

.app-bar-menu-toggle {
  display: inline-flex;
}

.global-search {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.page-content {
  padding: 1.25rem;
}
}

.comprobante-list-label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  max-width: 100%;
  min-width: 0;
}

.comprobante-list-label-main {
  display: block;
}

.comprobante-list-label-detalle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 20rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 400;
}

/* Importes: evitar que el símbolo de moneda se separe del número */
.app-importe,
.col-importe,
.col-saldo,
.col-precio,
.cell-deuda,
.cell-deuda-vencida,
.cell-deuda-saldo-favor,
.cobro-resumen-value,
.alquiler-precio,
.cuota-detalle-importe-valor,
.cuota-detalle-importe-destacado,
.cuota-detalle-importe-negativo {
  white-space: nowrap;
}