:root {
    --navy-950: #0b1f35;
    --navy-900: #102a43;
    --navy-800: #183b5b;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-100: #dbeafe;
    --blue-50: #eff6ff;
    --blue-700: #1d4ed8;
    --cyan-500: #06b6d4;
    --green-600: #059669;
    --green-100: #d1fae5;
    --amber-600: #d97706;
    --amber-100: #fef3c7;
    --red-600: #dc2626;
    --red-100: #fee2e2;
    --slate-900: #172033;
    --slate-700: #3f4b5f;
    --slate-600: #5b677a;
    --slate-500: #7a8699;
    --slate-300: #d7deea;
    --slate-200: #e7ecf3;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --surface: #ffffff;
    --page: #f5f7fb;
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow-sm: 0 2px 8px rgba(15, 39, 69, .06);
    --shadow-md: 0 12px 30px rgba(15, 39, 69, .10);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--slate-900);
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, .08), transparent 28rem),
        var(--page);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--blue-600);
    text-decoration: none;
}

a:hover {
    color: #1d4ed8;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
}

.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
}

.container {
    max-width: 1280px;
}

.app-header__inner.container,
.page-content.container {
    max-width: none;
    padding-right: 16px;
    padding-left: 16px;
}

.app-header {
    position: sticky;
    z-index: 100;
    top: 0;
    color: #fff;
    background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
    box-shadow: 0 8px 24px rgba(11, 31, 53, .22);
}

.app-header__inner {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 14px;
    overflow: visible;
    flex-wrap: nowrap;
}

.brand {
    display: flex;
    flex: 0 1 230px;
    align-items: center;
    gap: 11px;
    color: #fff;
    min-width: 0;
}

.brand:hover {
    color: #fff;
}

.brand__mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--blue-500), var(--cyan-500));
    box-shadow: 0 7px 18px rgba(6, 182, 212, .25);
    font-size: 20px;
    font-weight: 800;
}

.brand__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.brand__title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand__subtitle {
    margin-top: 3px;
    color: rgba(255, 255, 255, .60);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-nav {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow: visible;
}

.app-nav-toggle { display: none; }

@media (max-width: 640px) {
    .app-nav-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: transparent; color: #fff; }
    .app-nav { display: none; position: absolute; z-index: 1100; top: 100%; left: 12px; right: 12px; max-height: calc(100vh - 90px); overflow-y: auto; overflow-x: hidden; flex-direction: column; align-items: stretch; padding: 10px; border-radius: 12px; background: #0b1f35; box-shadow: 0 18px 44px rgba(0,0,0,.28); }
    .app-nav.is-open { display: flex; }
    .app-nav__link { width: 100%; min-height: 44px; justify-content: flex-start; }
    .nav-dropdown, .nav-dropdown__menu { width: 100%; position: static; }
    .nav-dropdown__menu { box-shadow: none; margin: 4px 0 8px; }
    .crm-agenda-grid { display: block; overflow: visible; }
    .crm-agenda-day { min-height: 0; margin-bottom: 10px; }
    .crm-agenda-grid--mes .crm-agenda-day:not(:has(.crm-agenda-event)) { display: none; }
    .crm-commercial-filter { grid-template-columns: 1fr; }
}

.crm-agenda-event.is-blocked { background: #f1f5f9; border-left-color: #64748b; color: #334155; }

.app-nav__link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.app-nav__link:hover,
.app-nav__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.app-nav__link:hover {
    transform: translateY(-1px);
}

.app-nav__icon {
    width: 17px;
    height: 17px;
    opacity: .85;
}

.nav-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.nav-dropdown summary {
    list-style: none;
    cursor: pointer;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }

.nav-dropdown summary::after {
    margin-left: 2px;
    content: "â–¾";
    font-size: 10px;
}

.nav-dropdown__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 9px);
    right: 0;
    display: grid;
    width: 180px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.nav-dropdown__menu a {
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--slate-700);
    font-size: 13px;
    font-weight: 700;
}

.nav-dropdown__menu a:hover { background: var(--blue-50); color: var(--blue-700); }

.user-area {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}

.tenant-current,
.tenant-switcher {
    display: flex;
    min-width: 150px;
    flex-direction: column;
    gap: 2px;
}

.tenant-current small,
.tenant-switcher label {
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tenant-current strong {
    max-width: 190px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-switcher select {
    max-width: 210px;
    padding: 5px 28px 5px 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 7px;
    outline: 0;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    font: inherit;
    font-size: 12px;
}

.tenant-switcher option { color: var(--slate-900); background: #fff; }

.tenant-notice {
    max-width: 680px;
    margin: 7vh auto 0;
}

.company-facts {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px 16px;
}

.company-facts dt,
.company-facts dd { margin: 0; }
.company-facts dt { color: var(--slate-500); font-size: 12px; }
.company-facts dd { color: var(--slate-900); font-weight: 650; overflow-wrap: anywhere; }

.inline-role-form {
    display: flex;
    min-width: 230px;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.form-select-sm { padding: 7px 30px 7px 9px; font-size: 12px; }

.plan-summary {
    display: grid;
    min-height: 86px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 11px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: var(--blue-50);
    color: var(--slate-600);
    font-size: 12px;
}

.plan-summary strong {
    grid-column: 1 / -1;
    color: var(--blue-700);
    font-size: 13px;
}

.form-control:disabled,
.form-check-input:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
}

.user-chip__avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 800;
}

.page-content {
    padding-top: 34px;
    padding-bottom: 54px;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-heading__eyebrow {
    margin-bottom: 5px;
    color: var(--blue-600);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-heading h1,
.h3 {
    margin-bottom: 4px;
    color: var(--navy-950);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 780;
    letter-spacing: -.025em;
    line-height: 1.15;
}

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

.text-primary { color: var(--blue-600) !important; }
.text-success { color: var(--green-600) !important; }
.text-danger { color: var(--red-600) !important; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card {
    position: relative;
    display: flex;
    min-height: 142px;
    overflow: hidden;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(215, 222, 234, .74);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.stat-card::after {
    position: absolute;
    right: -30px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--stat-soft, var(--blue-100));
    content: "";
    opacity: .55;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card--blue { --stat-color: var(--blue-600); --stat-soft: var(--blue-100); }
.stat-card--cyan { --stat-color: #0891b2; --stat-soft: #cffafe; }
.stat-card--green { --stat-color: var(--green-600); --stat-soft: var(--green-100); }
.stat-card--red { --stat-color: var(--red-600); --stat-soft: var(--red-100); }

.stat-card__label {
    margin-bottom: 9px;
    color: var(--slate-600);
    font-size: 13px;
    font-weight: 650;
}

.stat-card__value {
    color: var(--navy-950);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.stat-card__hint {
    margin-top: 10px;
    color: var(--slate-500);
    font-size: 12px;
}

.stat-card__icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--stat-soft, var(--blue-100));
    color: var(--stat-color, var(--blue-600));
}

.stat-card__icon svg {
    width: 21px;
    height: 21px;
}

.card {
    overflow: hidden;
    border: 1px solid rgba(215, 222, 234, .82);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 21px;
    border-bottom: 1px solid var(--slate-200);
    background: #fff;
    color: var(--navy-950);
}

.card-header strong {
    font-size: 15px;
    font-weight: 750;
}

.card-body {
    padding: 22px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
    color: var(--slate-700);
}

.table th,
.table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--slate-200);
    text-align: left;
    vertical-align: middle;
}

.table th {
    color: var(--slate-500);
    background: #fafbfd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table-hover tbody tr {
    transition: background .15s ease;
}

.table-hover tbody tr:hover {
    background: #f8fbff;
}

.btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .17s ease, border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}

.btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-primary {
    border-color: var(--blue-600);
    background: linear-gradient(135deg, var(--blue-600), #1d4ed8);
    color: #fff;
    box-shadow: 0 7px 16px rgba(37, 99, 235, .18);
}

.btn-primary:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.btn-success {
    border-color: var(--green-600);
    background: var(--green-600);
    color: #fff;
}

.btn-success:hover { background: #047857; color: #fff; }
.btn-danger { border-color: var(--red-600); background: var(--red-600); color: #fff; }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light {
    background: transparent;
}

.btn-outline-primary { border-color: #bfd0f4; color: var(--blue-600); }
.btn-outline-primary:hover { border-color: var(--blue-600); background: var(--blue-100); color: #1d4ed8; }
.btn-outline-secondary { border-color: var(--slate-300); color: var(--slate-700); }
.btn-outline-secondary:hover { border-color: var(--slate-500); background: var(--slate-100); color: var(--slate-900); }
.btn-outline-danger { border-color: #fecaca; color: var(--red-600); }
.btn-outline-danger:hover { border-color: var(--red-600); background: var(--red-100); color: #b91c1c; }
.btn-outline-light { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85); }
.btn-outline-light:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: #fff; }

.btn-sm {
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
}

.form-label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--slate-700);
    font-size: 13px;
    font-weight: 700;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--slate-300);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--slate-900);
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-select {
    padding-right: 34px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--blue-600);
}

.form-check-label {
    color: var(--slate-600);
    font-size: 13px;
}

.form-hint {
    margin-top: 6px;
    color: var(--slate-500);
    font-size: 12px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list span {
    padding: 6px 9px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 650;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.import-summary > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 15px 18px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #fff;
}

.import-summary strong {
    color: var(--blue-600);
    font-size: 24px;
}

.import-summary span {
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 650;
}

.import-summary__ok strong { color: var(--green-600); }
.import-summary__warning strong { color: var(--amber-600); }

.validation-reason {
    color: var(--red-600);
    font-size: 12px;
    font-weight: 650;
}

.message-preview {
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-status {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid;
    border-radius: var(--radius-md);
}

.ai-status--active {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.ai-status--manual {
    border-color: var(--slate-300);
    background: #fff;
    color: var(--slate-700);
}

.ai-status__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 99, 235, .10);
    color: var(--blue-600);
}

.ai-status__icon svg {
    width: 22px;
    height: 22px;
}

.ai-status strong {
    display: block;
    margin-bottom: 2px;
}

.ai-status div div {
    font-size: 13px;
}

.connection-result {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.connection-result--ok {
    background: var(--green-100);
    color: #065f46;
}

.connection-result--error {
    background: var(--red-100);
    color: #991b1b;
}

.connection-result strong,
.connection-result small {
    display: block;
}

.connection-result small {
    margin-top: 6px;
    opacity: .72;
}

.security-list {
    margin: 0;
    padding-left: 20px;
    color: var(--slate-600);
}

.security-list li + li {
    margin-top: 9px;
}

.copilot-card {
    border-color: #c7d7f4;
}

.copilot-empty {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1px dashed var(--slate-300);
    border-radius: var(--radius-md);
    background: var(--slate-100);
}

.copilot-empty p {
    margin-top: 3px;
}

.copilot-disclaimer {
    margin-left: 10px;
    font-size: 12px;
}

.suggestion-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.suggestion-card {
    padding: 18px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #fbfdff;
}

.suggestion-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.suggestion-card__header .text-muted {
    margin-left: 7px;
    font-size: 12px;
}

.confidence {
    color: var(--blue-600);
    font-size: 12px;
    font-weight: 750;
}

.suggestion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
    gap: 20px;
}

.suggestion-grid h3 {
    margin-bottom: 7px;
    color: var(--slate-500);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.suggestion-grid p {
    margin-bottom: 8px;
}

.suggestion-explanation {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--blue-500);
    background: var(--blue-100);
    color: var(--slate-700);
    font-size: 13px;
}

.draft-message {
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid #b7ead2;
    border-radius: 10px;
    background: #f0fdf8;
}

.draft-message__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    color: #066144;
    font-size: 12px;
}

.draft-message__actions,
.whatsapp-confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.draft-message textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 11px;
    border: 0;
    border-top: 1px solid #c7f1dc;
    outline: 0;
    background: #fff;
    color: var(--slate-700);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.whatsapp-confirmation {
    padding: 12px;
    border-top: 1px solid #b7ead2;
    background: #ecfdf5;
    color: #065f46;
}

.whatsapp-confirmation[hidden] {
    display: none;
}

.whatsapp-confirmation p {
    margin: 4px 0 10px;
    color: var(--slate-600);
    font-size: 12px;
}

.conversation-card {
    overflow: visible;
}

.conversation-card__header .page-heading__eyebrow {
    margin-bottom: 2px;
}

.conversation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.conversation-toolbar .text-muted {
    margin-top: 3px;
    font-size: 13px;
}

.conversation-empty {
    padding: 28px;
    border: 1px dashed var(--slate-300);
    border-radius: var(--radius-md);
    background: var(--slate-50);
    text-align: center;
}

.conversation-empty p {
    margin-top: 5px;
}

.conversation-flow {
    display: grid;
    grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.conversation-step {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--slate-500);
}

.conversation-step > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid var(--slate-300);
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.conversation-step strong,
.conversation-step small {
    display: block;
    white-space: nowrap;
}

.conversation-step strong { font-size: 12px; }
.conversation-step small { margin-top: 1px; font-size: 10px; }

.conversation-step--active {
    color: var(--blue-700);
}

.conversation-step--active > span {
    border-color: var(--blue-500);
    background: var(--blue-600);
    color: #fff;
    box-shadow: 0 0 0 4px var(--blue-100);
}

.conversation-step--complete {
    color: #047857;
}

.conversation-step--complete > span {
    border-color: #10b981;
    background: #d1fae5;
    color: #047857;
}

.conversation-flow__line {
    height: 2px;
    margin: 0 12px;
    background: var(--slate-200);
}

.conversation-flow__line.is-complete {
    background: #34d399;
}

.conversation-layout {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.35fr);
    gap: 16px;
    align-items: start;
}

.conversation-context,
.message-composer {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #fff;
}

.conversation-context {
    padding: 17px;
    background: linear-gradient(150deg, #f8fbff, #fff);
}

.conversation-context__topline,
.message-composer__header,
.message-composer__meta,
.message-composer__actions,
.conversation-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.conversation-context h3 {
    margin: 15px 0 6px;
    color: var(--navy-950);
    font-size: 14px;
}

.conversation-context p {
    margin: 0;
    color: var(--slate-700);
    font-size: 13px;
    line-height: 1.55;
}

.conversation-recommendation {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-top: 15px;
    padding: 12px;
    border-left: 3px solid var(--blue-500);
    border-radius: 7px;
    background: var(--blue-50);
    color: var(--navy-950);
    font-size: 13px;
}

.conversation-recommendation small { color: var(--slate-500); }

.conversation-why {
    margin-top: 14px;
    color: var(--slate-600);
    font-size: 12px;
}

.conversation-why summary {
    cursor: pointer;
    font-weight: 700;
}

.conversation-why p { margin-top: 8px; font-size: 12px; }

.message-composer {
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.message-composer__header {
    padding: 14px 15px;
    border-bottom: 1px solid var(--slate-200);
    background: #f0fdf8;
    color: #065f46;
}

.message-composer__header strong,
.message-composer__header small {
    display: block;
}

.message-composer__header small {
    margin-top: 2px;
    color: var(--slate-500);
    font-size: 11px;
}

.message-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--slate-200);
    background: #fff;
}

.message-recipient__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #047857;
    font-size: 12px;
    font-weight: 850;
}

.message-recipient small,
.message-recipient strong,
.message-recipient div > span {
    display: block;
}

.message-recipient small {
    color: var(--slate-500);
    font-size: 10px;
}

.message-recipient strong {
    margin-top: 1px;
    color: var(--navy-950);
    font-size: 13px;
}

.message-recipient div > span {
    margin-top: 1px;
    color: var(--slate-600);
    font-size: 11px;
}

.message-composer__input {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 0;
    outline: 0;
    background: #fff;
    color: var(--slate-800);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
}

.message-composer__input:focus {
    box-shadow: inset 0 0 0 2px var(--blue-200);
}

.message-composer__meta {
    padding: 7px 15px;
    border-top: 1px solid var(--slate-100);
    color: var(--slate-500);
    font-size: 11px;
}

.message-composer__actions {
    justify-content: flex-end;
    padding: 12px 15px;
    border-top: 1px solid var(--slate-200);
    background: #fbfdff;
}

.conversation-secondary-actions {
    justify-content: flex-start;
    padding: 11px 15px;
    border-top: 1px solid var(--slate-200);
}

.message-sent-state {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 15px;
    border-bottom: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-size: 12px;
}

.conversation-history {
    margin-top: 18px;
    border-top: 1px solid var(--slate-200);
    padding-top: 14px;
}

.conversation-history > summary {
    cursor: pointer;
    color: var(--slate-700);
    font-size: 13px;
    font-weight: 750;
}

.conversation-history > summary span {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    margin-left: 5px;
    place-items: center;
    border-radius: 999px;
    background: var(--slate-200);
    font-size: 11px;
}

.conversation-history__list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.conversation-history__item {
    padding: 12px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--slate-50);
    font-size: 12px;
}

.conversation-history__item > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.conversation-history__item p {
    margin: 8px 0 4px;
    color: var(--slate-600);
}

.suggestion-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
}

.field-validation-error,
.validation-summary-errors,
.text-danger {
    color: var(--red-600);
}

.field-validation-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.badge-danger { background: var(--red-100); color: #b91c1c; }
.badge-warning { background: var(--amber-100); color: #92400e; }

.status-stack,
.table-actions,
.form-actions,
.form-options,
.security-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.table-actions { min-width: 250px; }
.form-actions { gap: 10px; }
.form-options { gap: 24px; }
.security-meta {
    padding: 14px 16px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--slate-50);
    color: var(--slate-600);
    font-size: 13px;
}
.security-meta span + span { margin-left: 18px; }

.form-card { max-width: 720px; }
.section-title {
    margin: 14px 0 12px;
    color: var(--navy-950);
    font-size: 15px;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.option-check {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    background: var(--slate-50);
    cursor: pointer;
}

.option-check:hover { border-color: #bfdbfe; background: var(--blue-50); }
.option-check input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; accent-color: var(--blue-600); }
.option-check span,
.option-check strong,
.option-check small,
.option-check code { display: block; }
.option-check span { min-width: 0; }
.option-check strong { color: var(--navy-950); font-size: 13px; }
.option-check small { margin-top: 2px; color: var(--slate-500); font-size: 11px; }
.option-check code { margin-top: 6px; color: var(--blue-700); font-size: 10px; overflow-wrap: anywhere; }

.permission-modules { display: grid; gap: 14px; }
.permission-module { overflow: visible; }

.access-denied {
    max-width: 620px;
    margin: 40px auto;
    text-align: center;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.bg-primary { background: var(--blue-100) !important; color: #1d4ed8 !important; }
.bg-secondary { background: var(--slate-100) !important; color: var(--slate-700) !important; }
.bg-success { background: var(--green-100) !important; color: #047857 !important; }
.bg-white { background: #fff !important; }
.bg-light { background-color: var(--page) !important; }

.alert {
    position: relative;
    margin-bottom: 20px;
    padding: 13px 46px 13px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.alert-danger { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
.alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }

.btn-close {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 24px;
    height: 24px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.btn-close::after {
    content: "\00d7";
    font-size: 22px;
}

.auth-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 18% 16%, rgba(6, 182, 212, .24), transparent 24rem),
        radial-gradient(circle at 88% 82%, rgba(59, 130, 246, .30), transparent 28rem),
        linear-gradient(145deg, var(--navy-950), #163a61);
}

.auth-card {
    width: min(440px, 100%);
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #fff;
}

.auth-brand__copy h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
}

.auth-brand__copy p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
}

.auth-panel {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 25px 65px rgba(3, 15, 29, .35);
}

.auth-panel__title {
    margin-bottom: 6px;
    font-size: 21px;
    font-weight: 780;
}

.auth-panel__subtitle {
    margin-bottom: 24px;
    color: var(--slate-500);
    font-size: 13px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.row > [class*="col-"] {
    width: 100%;
    padding: 8px;
}

.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-grid { display: grid !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-middle { vertical-align: middle !important; }
.gap-2 { gap: 8px !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.border-0 { border: 0 !important; }
.border-start { border-left: 3px solid var(--slate-300) !important; }
.border-primary { border-color: var(--blue-500) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.text-center { text-align: center !important; }
.me-auto { margin-right: auto !important; }
.me-3 { margin-right: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.p-4 { padding: 24px !important; }
.ps-3 { padding-left: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.display-6 { font-size: 36px; font-weight: 780; line-height: 1.1; }

dl {
    margin-top: 0;
}

dt {
    color: var(--slate-600);
    font-weight: 700;
}

dd {
    margin-left: 0;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--slate-200);
}

.lead-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
}

.lead-fact {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--slate-50);
}

.lead-fact--wide {
    grid-column: 1 / -1;
}

.lead-fact span,
.lead-fact strong {
    display: block;
}

.lead-fact span {
    margin-bottom: 4px;
    color: var(--slate-500);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.lead-fact strong {
    overflow-wrap: anywhere;
    color: var(--navy-950);
    font-size: 13px;
    line-height: 1.35;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--slate-200);
}

.contact-item:first-child { padding-top: 0; }
.contact-item:last-child { padding-bottom: 0; border-bottom: 0; }

.contact-item__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--blue-100);
    color: var(--blue-600);
    font-weight: 800;
}

.contact-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

.timeline-item {
    position: relative;
    margin-left: 7px;
    padding: 0 0 24px 24px;
    border-left: 2px solid var(--slate-200);
}

.timeline-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.timeline-item__dot {
    position: absolute;
    top: 3px;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--blue-600);
    box-shadow: 0 0 0 2px var(--blue-100);
}

.timeline-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.timeline-item__result {
    margin-bottom: 4px;
    color: var(--green-600);
    font-size: 13px;
    font-weight: 700;
}

.timeline-item__next {
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: 12px;
}

.tasks-heading { margin-bottom: 18px; }

.tasks-scope-note {
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 13px;
}

.task-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(135px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.task-summary-card {
    --task-accent: var(--blue-600);
    display: flex;
    min-height: 126px;
    flex-direction: column;
    padding: 15px;
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--task-accent);
    border-radius: 12px;
    background: #fff;
    color: var(--slate-700);
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.task-summary-card:hover,
.task-summary-card.is-active {
    transform: translateY(-2px);
    border-color: var(--task-accent);
    color: var(--slate-900);
    box-shadow: var(--shadow-md);
}

.task-summary-card span { min-height: 38px; font-size: 12px; font-weight: 750; line-height: 1.3; }
.task-summary-card strong { margin: 3px 0; color: var(--task-accent); font-size: 29px; line-height: 1; }
.task-summary-card small { margin-top: auto; color: var(--slate-500); font-size: 10px; }
.task-summary-card--red { --task-accent: var(--red-600); }
.task-summary-card--amber { --task-accent: var(--amber-600); }
.task-summary-card--green { --task-accent: var(--green-600); }
.task-summary-card--cyan { --task-accent: #0891b2; }
.task-summary-card--slate { --task-accent: var(--slate-600); }

.tasks-filter-card { margin-bottom: 18px; }

.task-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: end;
}

.task-filters__submit { display: grid; }
.task-sections { display: grid; gap: 18px; }

.task-section {
    --section-accent: var(--blue-600);
    border-top: 3px solid var(--section-accent);
}

.task-section--red { --section-accent: var(--red-600); }
.task-section--amber { --section-accent: var(--amber-600); }
.task-section--green { --section-accent: var(--green-600); }
.task-section--cyan { --section-accent: #0891b2; }
.task-section--slate { --section-accent: var(--slate-600); }

.task-section .card-header .text-muted { margin-top: 2px; font-size: 12px; }

.task-section__count {
    display: grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: var(--slate-100);
    background: color-mix(in srgb, var(--section-accent) 12%, white);
    color: var(--section-accent);
    font-size: 13px;
    font-weight: 800;
}

@supports not (background: color-mix(in srgb, #000 10%, white)) {
    .task-section__count { background: var(--slate-100); }
}

.task-table { min-width: 1240px; font-size: 13px; }
.task-table th, .task-table td { padding: 12px 14px; }
.task-table td:first-child { min-width: 245px; }
.task-table td:nth-child(2) { min-width: 145px; }
.task-table td:nth-child(4) { min-width: 210px; }
.task-table td:nth-child(5) { min-width: 165px; }
.task-table td:last-child { min-width: 355px; }
.task-row--priority { box-shadow: inset 3px 0 0 var(--red-600); }
.task-row--interested { background: #f0fdf8; }

.task-lead-name { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.task-lead-name a { color: var(--navy-950); font-weight: 800; }
.task-lead-meta { margin-top: 4px; color: var(--slate-500); font-size: 11px; }
.badge-priority-a { background: var(--red-100); color: #b91c1c; }
.task-next-date { margin-top: 5px; font-weight: 700; }
.task-primary-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; white-space: nowrap; }

.task-icon-btn {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid var(--slate-300);
    border-radius: 9px;
    background: #fff;
    color: var(--slate-600);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.task-icon-btn:hover { transform: translateY(-1px); border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-700); }
.task-icon-btn svg { width: 17px; height: 17px; }
.task-icon-btn--view { border-color: #bfdbfe; color: var(--blue-600); }
.task-icon-btn--whatsapp { border-color: #86efac; background: #ecfdf5; color: #047857; }
.task-icon-btn--whatsapp:hover { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.task-icon-btn--sent { border-color: #99f6e4; color: #0f766e; }
.task-icon-btn--template { border-color: #ddd6fe; background: #faf5ff; color: #7c3aed; }
.task-icon-btn--call { border-color: #c7d2fe; color: #4f46e5; }
.task-icon-btn--reply { border-color: #bae6fd; color: #0369a1; }
.task-icon-btn--interested { border-color: #86efac; color: #047857; }
.task-icon-btn--reject { border-color: #fecaca; color: var(--red-600); }
.task-icon-btn--schedule { border-color: #fde68a; color: #b45309; }

.btn-whatsapp { border-color: #86efac; background: #ecfdf5; color: #047857; }
.btn-whatsapp:hover { border-color: var(--green-600); background: var(--green-600); color: #fff; }

.btn-cloud-api { border-color: #0f766e; background: #0f766e; color: #fff; }
.btn-cloud-api:hover { border-color: #115e59; background: #115e59; color: #fff; }

.task-action-form { max-width: 820px; }

.commercial-message-panel {
    border-top: 3px solid #10b981;
}

.commercial-message-panel .card-header .text-muted {
    margin-top: 2px;
    font-size: 12px;
}

.commercial-message-badges,
.commercial-message-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.commercial-message-grid {
    display: grid;
    grid-template-columns: minmax(260px, .65fr) minmax(420px, 1.35fr);
    gap: 18px;
    align-items: start;
}

.commercial-template-info {
    margin-top: 12px;
    padding: 12px 13px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--slate-50);
}

.commercial-template-info strong,
.commercial-template-info small {
    display: block;
}

.commercial-template-info strong { color: var(--navy-950); font-size: 13px; }
.commercial-template-info small { margin-top: 3px; color: var(--slate-500); font-size: 11px; }

.commercial-message-preview {
    min-height: 285px;
    white-space: pre-wrap;
    line-height: 1.55;
}

.commercial-message-actions {
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--slate-200);
}

.commercial-message-actions .is-disabled {
    pointer-events: none;
    opacity: .48;
}

.timeline-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 7px 0;
}

.timeline-message {
    margin-top: 7px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: var(--slate-50);
}

.timeline-message summary {
    padding: 9px 11px;
    cursor: pointer;
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 750;
}

.timeline-message > div {
    padding: 0 11px 11px;
    color: var(--slate-700);
    font-size: 12px;
    white-space: pre-wrap;
}

.timeline-meta-id {
    margin-top: 7px;
    color: var(--slate-500);
    font-size: 11px;
}

.timeline-meta-id code {
    overflow-wrap: anywhere;
    color: #0f766e;
}

.timeline-whatsapp-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: var(--slate-500);
}

.timeline-whatsapp-status details { flex-basis: 100%; }
.timeline-whatsapp-status summary { cursor: pointer; color: var(--red-600); font-size: 11px; font-weight: 700; }
.timeline-whatsapp-status details div { margin-top: 5px; color: var(--red-600); font-size: 11px; white-space: pre-wrap; }

.api-response {
    min-height: 250px;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: #0f172a;
    color: #d1fae5;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.api-response-empty {
    display: grid;
    min-height: 250px;
    place-items: center;
    border: 1px dashed var(--slate-300);
    border-radius: 10px;
    background: var(--slate-50);
    color: var(--slate-500);
    text-align: center;
}

.cloud-confirmation-data {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--slate-50);
}

.cloud-confirmation-data dt,
.cloud-confirmation-data dd { margin: 0; }
.cloud-confirmation-data dt { color: var(--slate-500); font-size: 12px; }
.cloud-confirmation-data dd { color: var(--navy-950); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

.cloud-confirmation-layout {
    display: grid;
    grid-template-columns: minmax(420px, .85fr) minmax(500px, 1.15fr);
    gap: 16px;
    align-items: stretch;
}

.cloud-message-preview {
    min-height: 250px;
    white-space: pre-wrap;
    line-height: 1.55;
}

.cloud-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.webhook-filter-card { margin-bottom: 18px; }

.webhook-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.webhook-filters__submit { display: grid; }
.webhook-events-table { min-width: 1180px; font-size: 12px; }
.webhook-meta-id { max-width: 280px; overflow-wrap: anywhere; font-family: Consolas, "Courier New", monospace; }
.webhook-error { max-width: 280px; }
.webhook-error summary { cursor: pointer; color: var(--red-600); font-weight: 700; }
.webhook-error details div { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1600px) and (min-width: 1051px) {
    .app-header__inner { gap: 16px; }
    .app-nav { gap: 3px; }
    .app-nav__link { padding: 9px 9px; }
    .app-nav .app-nav__icon { display: none; }
}

@media (min-width: 576px) {
    .col-sm-5 { width: 41.6667% !important; }
    .col-sm-7 { width: 58.3333% !important; }
}

@media (min-width: 768px) {
    .col-md-3 { width: 25% !important; }
    .col-md-5 { width: 41.6667% !important; }
    .col-md-6 { width: 50% !important; }
}

@media (min-width: 992px) {
    .col-lg-2 { width: 16.6667% !important; }
    .col-lg-4 { width: 33.3333% !important; }
    .col-lg-5 { width: 41.6667% !important; }
    .col-lg-7 { width: 58.3333% !important; }
}

@media (max-width: 1050px) {
    .app-header__inner {
        flex-wrap: wrap;
        gap: 10px 20px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .app-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .app-nav__link {
        white-space: nowrap;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .conversation-layout {
        grid-template-columns: 1fr;
    }

    .task-summary-grid { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
    .task-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .commercial-message-grid { grid-template-columns: 1fr; }
    .cloud-confirmation-layout { grid-template-columns: 1fr; }
    .webhook-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .app-header__inner, .app-nav { max-width: 100%; min-width: 0; }
    .container,
    .container-fluid {
        padding-right: 16px;
        padding-left: 16px;
    }

    .page-content {
        padding-top: 24px;
    }

    .page-heading,
    .d-flex.justify-content-between.align-items-center,
    .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        align-items: stretch !important;
    }

    nav.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .import-summary {
        grid-template-columns: 1fr;
    }

    .lead-facts {
        grid-template-columns: 1fr;
    }

    .lead-fact--wide {
        grid-column: auto;
    }

    .suggestion-grid {
        grid-template-columns: 1fr;
    }

    .option-grid {
        grid-template-columns: 1fr;
    }

    .task-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-filters { grid-template-columns: 1fr; }
    .commercial-message-actions { align-items: stretch; flex-direction: column; }
    .commercial-message-actions .btn,
    .commercial-message-actions form,
    .commercial-message-actions form .btn { width: 100%; }
    .cloud-confirmation-data { grid-template-columns: 1fr; }
    .cloud-confirmation-actions { align-items: stretch; flex-direction: column-reverse; }
    .cloud-confirmation-actions .btn { width: 100%; }
    .webhook-filters { grid-template-columns: 1fr; }

    .security-meta span + span { margin-left: 0; }

    .copilot-disclaimer {
        display: block;
        margin: 8px 0 0;
    }

    .conversation-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .conversation-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 8px;
    }

    .conversation-flow__line {
        display: none;
    }

    .conversation-step {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .conversation-step small {
        display: none;
    }

    .message-composer__actions,
    .conversation-secondary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .user-chip__name,
    .app-nav__icon {
        display: none;
    }

    .brand__subtitle {
        display: none;
    }

    .table th,
    .table td {
        padding: 12px 14px;
    }

    .card-body {
        padding: 18px;
    }

    .auth-page {
        padding: 18px;
    }

    .auth-panel {
        padding: 24px 20px;
    }
}

.z3-page,
.z3-card {
    box-sizing: border-box;
    max-width: 100%;
}

.app-header .brand .brand__logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: block;
    flex: 0 0 42px;
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

/* Logo de empresa en header */
.app-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-header .brand .brand__logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: block;
    flex: 0 0 42px;
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.app-header .brand .brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

/* Fase 2: bandeja WhatsApp, acotada al módulo. */
.wa-filters{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin:1rem 0}.wa-filters input,.wa-filters select{min-height:38px}.wa-list{display:grid;gap:.55rem}.wa-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(240px,2fr) minmax(180px,auto);gap:1rem;align-items:center;padding:1rem;border:1px solid #dce3ea;border-radius:10px;background:#fff;color:inherit;text-decoration:none}.wa-row:hover{border-color:#22a06b}.wa-row small{display:block;color:#667085}.wa-unread{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:20px;background:#22a06b;color:#fff;margin:.25rem}.wa-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:1rem}.wa-chat-header{display:flex;justify-content:space-between;align-items:center}.wa-messages{display:flex;flex-direction:column;gap:.6rem;max-height:58vh;overflow:auto;padding:1rem;background:#eef3f1;border-radius:12px}.wa-message{max-width:78%;padding:.75rem 1rem;border-radius:12px;background:#fff;overflow-wrap:anywhere}.wa-message.outgoing{align-self:flex-end;background:#d8fdd2}.wa-message small{display:block;color:#667085;margin-top:.4rem}.wa-side,.wa-compose{background:#fff;border:1px solid #dce3ea;border-radius:12px;padding:1rem}.wa-side form,.wa-compose{display:grid;gap:.7rem;margin-top:1rem}.wa-compose textarea{min-height:120px;width:100%}.badge-warning{background:#fff0c2;color:#7a4d00}@media(max-width:850px){.wa-detail{grid-template-columns:1fr}.wa-row{grid-template-columns:1fr}.wa-message{max-width:92%}}

/* Z4B: el menú móvil queda fuera del flujo hasta que el usuario lo abre. */
@media (max-width:640px){
    .app-nav{display:none!important;position:absolute!important;left:12px!important;right:12px!important;top:100%!important;width:auto!important;max-height:calc(100vh - 90px);overflow-x:hidden!important;overflow-y:auto!important;flex-direction:column!important;align-items:stretch!important}
    .app-nav.is-open{display:flex!important}
}

/* Z12C10A HEADER RESPONSIVE START */

/*
 * El encabezado completo requiere bastante ancho.
 * Hasta 1450 px se usa directamente el menú hamburguesa existente.
 */
@media (max-width: 1450px) and (min-width: 641px) {
    .app-header {
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .app-header__inner {
        position: relative;
        min-height: 64px;
        flex-wrap: nowrap;
        gap: 12px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-header .brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 76px);
    }

    .app-header .brand__text {
        min-width: 0;
        overflow: hidden;
    }

    .app-header .brand__title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-header .brand__subtitle {
        display: none;
    }

    .app-nav-toggle {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 52px;
        min-height: 42px;
        margin-left: auto;
    }

    .app-nav {
        display: none !important;
        position: absolute !important;
        z-index: 1300;
        top: calc(100% + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 92px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 14px;
        background: #0b1f35;
        box-shadow: 0 20px 48px rgba(0,0,0,.35);
    }

    .app-nav.is-open {
        display: flex !important;
    }

    .app-nav > .app-nav__link,
    .app-nav > a,
    .app-nav > button,
    .app-nav > form,
    .app-nav > .nav-dropdown {
        width: 100%;
        min-width: 0;
    }

    .app-nav .app-nav__link,
    .app-nav .nav-dropdown > summary {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        white-space: normal;
    }

    .app-nav .nav-dropdown,
    .app-nav .nav-dropdown__menu,
    .app-nav .nav-dropdown--right .nav-dropdown__menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .app-nav .nav-dropdown__menu {
        margin: 4px 0 8px;
        box-shadow: none;
    }

    .app-nav .nav-dropdown__menu a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .pwa-mobile-user-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
        width: 100%;
        margin-top: 8px;
        padding: 12px 0 0;
        border-top: 1px solid rgba(255,255,255,.16);
    }

    .pwa-mobile-user-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pwa-mobile-user-actions .app-nav__link,
    .pwa-mobile-user-actions button {
        width: auto;
        min-width: 42px;
    }

    .user-area {
        display: none !important;
    }
}

html[data-theme="dark"] .app-nav,
html[data-theme-preference="dark"] .app-nav {
    border-color: #34485e;
    background: #0b1f35;
    color: #f3f7fb;
}

/* Z12C10A HEADER RESPONSIVE END */

/* Z12C10C MENU COMPACTO START */

@media (max-width: 1450px) {
    .app-nav {
        gap: 2px !important;
        padding: 10px !important;
    }

    .app-nav > .app-nav__link,
    .app-nav > a,
    .app-nav > button,
    .app-nav .nav-dropdown > summary {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 9px;
        line-height: 1.25;
    }

    .app-nav .nav-dropdown {
        margin: 0;
    }

    .app-nav .nav-dropdown > summary {
        position: relative;
        padding-right: 34px !important;
    }

    /*
     * Oculta cualquier glifo roto heredado y dibuja una flecha limpia.
     */
    .app-nav .nav-dropdown > summary::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 12px;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-65%) rotate(45deg);
        opacity: .8;
        transition: transform .15s ease;
    }

    .app-nav .nav-dropdown[open] > summary::after {
        transform: translateY(-30%) rotate(225deg);
    }

    .app-nav .nav-dropdown__menu {
        margin: 3px 0 5px !important;
        padding: 4px !important;
        border-radius: 8px;
    }

    .app-nav .nav-dropdown__menu a {
        min-height: 34px;
        padding: 7px 10px;
        border-radius: 7px;
        line-height: 1.25;
    }

    .pwa-mobile-user-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 8px !important;
        align-items: center !important;
        margin-top: 8px !important;
        padding: 10px 0 0 !important;
    }

    .pwa-mobile-user-name {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #ffffff;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
    }

    .pwa-mobile-user-actions .crm-theme-toggle,
    .pwa-mobile-user-actions .app-nav__link,
    .pwa-mobile-user-actions form,
    .pwa-mobile-user-actions button {
        margin: 0 !important;
    }

    .pwa-mobile-user-actions .crm-theme-toggle,
    .pwa-mobile-user-actions .app-nav__link,
    .pwa-mobile-user-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px !important;
        min-height: 38px !important;
        width: auto !important;
        padding: 7px 10px !important;
        white-space: nowrap;
    }

    .pwa-mobile-user-actions form {
        display: inline-flex;
    }
}

@media (max-width: 760px) {
    .pwa-mobile-user-actions {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .pwa-mobile-user-actions .pwa-mobile-logout {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

html[data-theme="dark"] .app-nav .nav-dropdown > summary::after,
html[data-theme-preference="dark"] .app-nav .nav-dropdown > summary::after {
    border-color: currentColor;
}

/* Z12C10C MENU COMPACTO END */

/* Z12C10D FLECHAS MENU START */

/*
 * Sustituye globalmente cualquier carácter heredado del pseudo-elemento
 * por una flecha construida solo con bordes CSS.
 */
.nav-dropdown > summary {
    position: relative;
    padding-right: 30px;
}

.nav-dropdown > summary::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    right: 11px;
    width: 7px;
    height: 7px;
    margin: 0 !important;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transform-origin: center;
    opacity: .78;
    transition: transform .15s ease, opacity .15s ease;
    font-size: 0 !important;
    line-height: 0 !important;
}

.nav-dropdown[open] > summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.nav-dropdown > summary:hover::after,
.nav-dropdown > summary:focus::after {
    opacity: 1;
}

/* Z12C10D FLECHAS MENU END */

/* Z12C48ZE V5 ANCHO SUBMENU ESCRITORIO START */
/*
 * Ajuste exclusivo de los submenus desplegables del encabezado en escritorio.
 * No modifica .app-nav, .app-header, el layout ni el modo responsive/hamburguesa.
 */
@media (min-width: 1451px) {
    .app-nav .nav-dropdown__menu {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        box-sizing: border-box !important;
    }

    .app-nav .nav-dropdown__menu a {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}
/* Z12C48ZE V5 ANCHO SUBMENU ESCRITORIO END */

/* Z12C48ZF SCROLLS ARMONICOS START */
/*
 * Scroll principal y scroll de los submenus.
 * Solo cambia la apariencia; no cambia alturas, overflow ni comportamiento.
 */
@media (min-width: 1451px) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #7f94a8 #e8eef5;
    }

    html::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html::-webkit-scrollbar-track {
        background: #e8eef5;
        border-radius: 999px;
    }

    html::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 2px solid #e8eef5;
        border-radius: 999px;
        background: #7f94a8;
    }

    html::-webkit-scrollbar-thumb:hover {
        background: #5e7489;
    }

    .app-nav,
    .app-nav .nav-dropdown__menu {
        scrollbar-width: thin;
        scrollbar-color: rgba(196, 210, 224, .88) rgba(255, 255, 255, .07);
    }

    .app-nav .nav-dropdown__menu {
        scrollbar-gutter: stable;
    }

    .app-nav::-webkit-scrollbar,
    .app-nav .nav-dropdown__menu::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .app-nav::-webkit-scrollbar-track,
    .app-nav .nav-dropdown__menu::-webkit-scrollbar-track {
        margin: 7px 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .06);
    }

    .app-nav::-webkit-scrollbar-thumb,
    .app-nav .nav-dropdown__menu::-webkit-scrollbar-thumb {
        min-height: 42px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(196, 210, 224, .82);
        background-clip: padding-box;
    }

    .app-nav::-webkit-scrollbar-thumb:hover,
    .app-nav .nav-dropdown__menu::-webkit-scrollbar-thumb:hover {
        background: rgba(229, 237, 245, .96);
        background-clip: padding-box;
    }

    .app-nav::-webkit-scrollbar-corner,
    .app-nav .nav-dropdown__menu::-webkit-scrollbar-corner {
        background: transparent;
    }
}
/* Z12C48ZF SCROLLS ARMONICOS END */