/* CHAT-OMNI-11 — Templates oficiais do WhatsApp.
   Reaproveita os tokens de tema já definidos em crm-theme.css; nenhuma cor nova hardcoded. */

.tpl-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
}

.tpl-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tpl-header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--crm-color-text);
}

.tpl-subtitle {
    margin: 4px 0 0;
    color: var(--crm-color-text-muted);
    font-size: 0.875rem;
}

.tpl-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------------------------------------------ botões ------------ */

.tpl-btn {
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    padding: 8px 14px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tpl-btn:hover:not(:disabled) {
    background: var(--crm-color-primary-soft);
}

.tpl-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tpl-btn-primary {
    background: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
    color: #fff;
}

.tpl-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.tpl-btn-danger {
    color: var(--crm-color-danger);
    border-color: var(--crm-color-danger);
}

/* ------------------------------------------------------------------ alertas ----------- */

.tpl-alert {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.tpl-alert ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.tpl-alert-error {
    background: color-mix(in srgb, var(--crm-color-danger) 12%, transparent);
    border-color: var(--crm-color-danger);
    color: var(--crm-color-text);
}

.tpl-alert-success {
    background: color-mix(in srgb, var(--crm-color-success) 12%, transparent);
    border-color: var(--crm-color-success);
    color: var(--crm-color-text);
}

.tpl-alert-warning {
    background: color-mix(in srgb, var(--crm-color-warning) 14%, transparent);
    border-color: var(--crm-color-warning);
    color: var(--crm-color-text);
}

/* ------------------------------------------------------ campos compartilhados --------- */

.tpl-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.tpl-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--crm-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tpl-input {
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    padding: 8px 10px;
    font-size: 0.875rem;
    width: 100%;
}

.tpl-input:focus {
    border-color: var(--crm-color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-color-primary) 18%, transparent);
}

.tpl-input-sm {
    padding: 6px 8px;
    font-size: 0.8125rem;
}

.tpl-textarea {
    resize: vertical;
    font-family: inherit;
}

.tpl-hint {
    font-size: 0.75rem;
    color: var(--crm-color-text-muted);
}

/* ---------------------------------------------- barra única + lista (UX Brevo) -------- */

.tpl-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

/* Picker padrão Uni (mesmo tratamento do select do dashboard do UniCursos em produção):
   sem seta nativa, chevron desenhado em CSS, borda 1,5px com tinta da primária, foco com
   halo suave. Candidato a virar `.uni-select` compartilhado entre todos os produtos. */
.tpl-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 44px;
    padding: 0 40px 0 14px;
    border: 1.5px solid color-mix(in srgb, var(--crm-color-primary) 26%, var(--crm-color-border));
    border-radius: 10px;
    background-color: var(--crm-color-surface);
    color: var(--crm-color-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--crm-color-primary) 50%),
        linear-gradient(135deg, var(--crm-color-primary) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tpl-select:focus,
.tpl-toolbar-search:focus-within {
    border-color: var(--crm-color-primary);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--crm-color-primary) 14%, transparent);
}

.tpl-toolbar-conn {
    flex: 0 1 auto;
    max-width: 260px;
}

.tpl-toolbar-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid var(--crm-color-border);
    border-radius: 50%;
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    cursor: pointer;
}

.tpl-toolbar-info:hover {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
}

.tpl-toolbar-info .crm-icon {
    width: 16px;
    height: 16px;
}

.tpl-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 200px;
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid color-mix(in srgb, var(--crm-color-primary) 26%, var(--crm-color-border));
    border-radius: 10px;
    background: var(--crm-color-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tpl-toolbar-search .crm-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--crm-color-text-muted);
}

.tpl-toolbar-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--crm-color-text);
    font: inherit;
}

.tpl-toolbar-filter {
    flex: 0 0 auto;
}

.tpl-toolbar-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--crm-color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.tpl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    cursor: pointer;
}

.tpl-pager-btn:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
}

.tpl-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tpl-pager-btn .crm-icon {
    width: 16px;
    height: 16px;
}

.tpl-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--crm-color-border);
    border-radius: 12px;
    background: var(--crm-color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpl-row:hover {
    border-color: var(--crm-color-primary);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--crm-color-primary) 12%, transparent);
}

.tpl-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.tpl-row-main:focus-visible {
    outline: 2px solid var(--crm-color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.tpl-row-line1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tpl-row-line1 strong {
    color: var(--crm-color-text);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.tpl-row-line2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 0.8125rem;
    color: var(--crm-color-text-muted);
}

.tpl-row-line2 .tpl-dot {
    opacity: 0.5;
}

/* Terceira linha: só o badge de status, borda esquerda alinhada em todas as linhas
   da lista para os status formarem uma coluna limpa ao varrer. */
.tpl-row-line3 {
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.tpl-row-rejection {
    font-size: 0.8125rem;
    color: var(--crm-color-danger);
}

.tpl-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tpl-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.tpl-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tpl-badge-muted {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-text-muted);
    border-color: var(--crm-color-border);
}

.tpl-badge-info {
    background: color-mix(in srgb, var(--crm-color-primary) 14%, transparent);
    color: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
}

.tpl-badge-success {
    background: color-mix(in srgb, var(--crm-color-success) 16%, transparent);
    color: var(--crm-color-success);
    border-color: var(--crm-color-success);
}

.tpl-badge-warning {
    background: color-mix(in srgb, var(--crm-color-warning) 18%, transparent);
    color: var(--crm-color-text);
    border-color: var(--crm-color-warning);
}

.tpl-badge-danger {
    background: color-mix(in srgb, var(--crm-color-danger) 14%, transparent);
    color: var(--crm-color-danger);
    border-color: var(--crm-color-danger);
}

.tpl-loading,
.tpl-empty {
    padding: 32px;
    text-align: center;
    border: 1px dashed var(--crm-color-border);
    border-radius: 10px;
    color: var(--crm-color-text-muted);
}

.tpl-empty-hint {
    font-size: 0.8125rem;
}

.tpl-muted {
    color: var(--crm-color-text-muted);
    font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ overlay ----------- */

.tpl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1200;
}

.tpl-panel {
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: 90vh;
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    border-radius: 12px;
    overflow: hidden;
}

.tpl-panel-sm {
    width: min(560px, 100%);
}

.tpl-detail-panel {
    width: min(1180px, 100%);
}

.tpl-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--crm-color-border);
}

.tpl-panel-header h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--crm-color-text);
}

.tpl-panel-subtitle {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--crm-color-text-muted);
}

.tpl-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tpl-panel-footer {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--crm-color-border);
}

/* ------------------------------------------------------ detalhe / prévia WhatsApp ----- */

.tpl-detail-body {
    padding: 0;
    overflow: hidden;
}

.tpl-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    min-height: 0;
    height: 100%;
}

.tpl-detail-content {
    min-width: 0;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tpl-whatsapp-preview-pane {
    min-width: 0;
    padding: 20px 22px;
    border-left: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tpl-whatsapp-preview-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--crm-color-text);
}

.tpl-whatsapp-preview-title > .crm-icon {
    width: 22px;
    height: 22px;
    color: var(--crm-color-success);
}

.tpl-whatsapp-preview-title div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tpl-whatsapp-preview-title span {
    color: var(--crm-color-text-muted);
    font-size: 0.75rem;
}

/* Estrutura reaproveitada do telefone CSS do site institucional Tech Vision. A moldura
   preserva sua anatomia; apenas o conteúdo interno foi adaptado para o WhatsApp. */
.tpl-whatsapp-phone {
    position: relative;
    width: min(302px, 100%);
    flex: 0 0 auto;
    aspect-ratio: 9 / 19.5;
    border-radius: clamp(30px, 5vw, 42px);
    background: linear-gradient(160deg, #363c46, #1a1d23 45%, #08090c);
    padding: 8px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--crm-color-primary) 26%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 36px 64px -30px rgba(0, 0, 0, 0.78);
}

.tpl-phone-island {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    width: 36%;
    height: 19px;
    padding-right: 7px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #05060a;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tpl-phone-camera {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #7dd3fc, #0b3a52 70%);
    box-shadow: 0 0 4px rgba(125, 211, 252, 0.65);
}

.tpl-phone-button {
    position: absolute;
    border-radius: 2px;
    background: linear-gradient(180deg, #3f454e, #191c20);
}

.tpl-phone-button-mute {
    left: -3px;
    top: 18%;
    width: 2px;
    height: 16px;
}

.tpl-phone-button-volume-up {
    left: -3px;
    top: 26%;
    width: 2px;
    height: 30px;
}

.tpl-phone-button-volume-down {
    left: -3px;
    top: 37%;
    width: 2px;
    height: 30px;
}

.tpl-phone-button-side {
    right: -3px;
    top: 28%;
    width: 2px;
    height: 43px;
}

.tpl-whatsapp-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 0 13px;
    border-radius: clamp(24px, 4vw, 34px);
    background: #efeae2;
    color: #111b21;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tpl-phone-home-indicator {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 34%;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(17, 27, 33, 0.48);
}

.tpl-whatsapp-topbar {
    min-height: 52px;
    padding: 8px 10px;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(17, 27, 33, 0.12);
    z-index: 1;
}

.tpl-whatsapp-topbar > .crm-icon {
    width: 17px;
    height: 17px;
    color: #54656f;
}

.tpl-whatsapp-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tpl-whatsapp-avatar .crm-icon {
    width: 17px;
    height: 17px;
}

.tpl-whatsapp-contact {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.tpl-whatsapp-contact strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

.tpl-whatsapp-contact small {
    color: #667781;
    font-size: 0.625rem;
}

.tpl-whatsapp-topbar-actions {
    display: flex;
    gap: 10px;
    color: #54656f;
}

.tpl-whatsapp-topbar-actions .crm-icon {
    width: 16px;
    height: 16px;
}

.tpl-whatsapp-chat {
    position: relative;
    min-height: 0;
    flex: 1;
    padding: 14px 10px;
    overflow-y: auto;
    background-color: #efeae2;
    background-image:
        radial-gradient(circle at 18% 16%, rgba(134, 150, 113, 0.12) 0 2px, transparent 2.5px),
        radial-gradient(circle at 78% 32%, rgba(134, 150, 113, 0.10) 0 2px, transparent 2.5px),
        radial-gradient(circle at 42% 72%, rgba(134, 150, 113, 0.11) 0 1.5px, transparent 2px);
    background-size: 52px 52px, 68px 68px, 44px 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tpl-whatsapp-date {
    align-self: center;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 1px rgba(17, 27, 33, 0.08);
    color: #54656f;
    font-size: 0.6rem;
    text-transform: uppercase;
}

.tpl-whatsapp-bubble {
    position: relative;
    width: min(92%, 244px);
    padding: 8px 8px 18px;
    border-radius: 0 7px 7px 7px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(17, 27, 33, 0.13);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.7rem;
    line-height: 1.38;
}

.tpl-whatsapp-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: -7px;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
}

.tpl-whatsapp-media {
    min-height: 112px;
    border-radius: 6px;
    background: linear-gradient(145deg, #dfe5e7, #c8d1d4);
    color: #667781;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.65rem;
}

.tpl-whatsapp-media .crm-icon {
    width: 28px;
    height: 28px;
}

.tpl-whatsapp-header-text,
.tpl-whatsapp-body-text,
.tpl-whatsapp-footer-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tpl-whatsapp-header-text {
    font-size: 0.74rem;
}

.tpl-whatsapp-footer-text {
    color: #667781;
    font-size: 0.62rem;
}

.tpl-whatsapp-time {
    position: absolute;
    right: 7px;
    bottom: 5px;
    color: #667781;
    font-size: 0.55rem;
}

.tpl-whatsapp-template-button {
    margin: 1px -8px -5px;
    padding: 8px 6px 2px;
    border-top: 1px solid #e9edef;
    color: #00a884;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 600;
}

.tpl-whatsapp-composer {
    min-height: 48px;
    padding: 6px 9px 9px;
    background: #f0f2f5;
    color: #54656f;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tpl-whatsapp-composer-plus {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: #00a884;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tpl-whatsapp-composer .crm-icon {
    width: 15px;
    height: 15px;
}

.tpl-whatsapp-composer-field {
    height: 30px;
    flex: 1;
    border-radius: 999px;
    background: #fff;
}

/* ------------------------------------------------------------------- seções ----------- */

.tpl-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpl-section h3 {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--crm-color-text);
}

.tpl-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tpl-status-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--crm-color-text-muted);
}

.tpl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px 20px;
    font-size: 0.8125rem;
    color: var(--crm-color-text-muted);
}

.tpl-facts em {
    font-style: normal;
    opacity: 0.75;
}

.tpl-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tpl-component {
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-component-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpl-component-text,
.tpl-preview {
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--crm-color-app-bg);
    border: 1px solid var(--crm-color-border);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--crm-color-text);
}

.tpl-buttons {
    margin: 0;
    padding-left: 18px;
    font-size: 0.8125rem;
    color: var(--crm-color-text);
}

.tpl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.tpl-table th,
.tpl-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--crm-color-border);
    color: var(--crm-color-text);
    vertical-align: middle;
}

.tpl-table th {
    color: var(--crm-color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.tpl-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-timeline li {
    display: flex;
    gap: 12px;
    font-size: 0.8125rem;
    border-left: 2px solid var(--crm-color-border);
    padding-left: 12px;
}

.tpl-timeline-when {
    flex: 0 0 130px;
    color: var(--crm-color-text-muted);
}

.tpl-timeline-what {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--crm-color-text);
}

.tpl-timeline-detail {
    color: var(--crm-color-text-muted);
}

.tpl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--crm-color-text);
}

/* --------------------------------------------------------------------- mobile --------- */

@media (max-width: 1023px) {
    .tpl-detail-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .tpl-detail-content,
    .tpl-whatsapp-preview-pane {
        overflow: visible;
    }

    .tpl-whatsapp-preview-pane {
        border-top: 1px solid var(--crm-color-border);
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .tpl-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .tpl-row-actions {
        justify-content: flex-start;
    }

    .tpl-toolbar-search {
        flex-basis: 100%;
    }

    .tpl-toolbar-pager {
        margin-left: 0;
    }

    /* Contrato O (mobile-composition-contract.md): modal quase-fullscreen com largura
       segura, radius preservado e desconto de safe areas — não 100vw/100vh cru. */
    .tpl-overlay {
        padding: 12px;
    }

    .tpl-panel {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        height: auto;
        max-height: calc(92dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .tpl-panel-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .tpl-panel-footer button,
    .tpl-panel-footer .app-button {
        width: 100%;
        justify-content: center;
    }

    .tpl-whatsapp-preview-pane {
        padding-inline: 16px;
    }

    .tpl-whatsapp-phone {
        width: min(292px, 92vw);
    }

    .tpl-timeline li {
        flex-direction: column;
        gap: 2px;
    }

    .tpl-timeline-when {
        flex: none;
    }
}

/* UNICHAT-MESSAGING-CAMPAIGNS-COMPLETION-01 — editor em página, UX Brevo + UI Uni. */
.tpl-editor-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.tpl-editor-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: center;
    gap: 24px;
}

.tpl-editor-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tpl-editor-heading {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tpl-editor-heading h1 {
    margin: 0;
    color: var(--crm-color-text);
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}

.tpl-editor-close,
.tpl-row-remove {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crm-color-border);
    border-radius: 50%;
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    cursor: pointer;
}

.tpl-editor-close:hover,
.tpl-row-remove:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
}

.tpl-editor-close .crm-icon,
.tpl-row-remove .crm-icon {
    width: 18px;
    height: 18px;
}

.tpl-editor-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: stretch;
    gap: 24px;
    overflow: hidden;
}

.tpl-editor-form {
    min-width: 0;
    min-height: 0;
    padding-right: 8px;
    padding-bottom: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tpl-editor-section,
.tpl-identification {
    border: 1px solid var(--crm-color-border);
    border-radius: 10px;
    background: var(--crm-color-surface);
    padding: 16px;
}

.tpl-editor-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tpl-editor-section h2 {
    margin: 0;
    color: var(--crm-color-text);
    font-size: 1rem;
}

.tpl-editor-section > p,
.tpl-editor-section-head p {
    margin: 3px 0 0;
    color: var(--crm-color-text-muted);
    font-size: .8125rem;
}

.tpl-editor-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.tpl-editor-section .tpl-field > span:first-child {
    color: var(--crm-color-text-muted);
    font-size: .75rem;
    font-weight: 600;
}

.tpl-editor-body-input {
    min-height: 150px;
}

.tpl-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 38px auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* O checkbox real fica invisível MAS ancorado exatamente sobre o trilho visível do switch
   (top/left/width/height do `> span`). Sem essas âncoras ele herdava a posição estática no
   canto do label; ao receber foco no clique, o `scrollIntoView` implícito do navegador subia
   por TODOS os ancestrais roláveis — incluindo `.tpl-editor-layout` (overflow:hidden ainda é
   rolável por script) — e arrastava as duas colunas (formulário + telefone) para cima em
   ~(altura do conteúdo do formulário − viewport), que é a "faixa" que roubava altura ao
   ativar/desativar a seção Botões numa janela baixa. Ancorado sobre o trilho, o elemento já
   está visível e o scroll não dispara. */
.tpl-switch input {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 22px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tpl-switch > span {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--crm-color-border);
    transition: background .15s ease;
}

.tpl-switch > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--crm-color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
    transition: transform .15s ease;
}

.tpl-switch input:checked + span {
    background: var(--crm-color-primary);
}

.tpl-switch input:checked + span::after {
    transform: translateX(16px);
}

.tpl-switch input:focus-visible + span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-color-primary) 18%, transparent);
}

.tpl-switch em {
    color: var(--crm-color-text-muted);
    font-size: .75rem;
    font-style: normal;
    white-space: nowrap;
}

.tpl-editor-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpl-button-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-button-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    background: var(--crm-color-app-bg);
}

.tpl-button-summary-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tpl-button-summary-copy strong {
    color: var(--crm-color-text);
    font-size: .875rem;
}

.tpl-button-summary-copy span {
    color: var(--crm-color-text-muted);
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-button-summary-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.tpl-variable-item {
    padding: 12px;
    border: 1px solid var(--crm-color-border);
    border-radius: 8px;
    background: var(--crm-color-app-bg);
}

.tpl-variable-row {
    display: grid;
    grid-template-columns: 70px 88px minmax(150px, 1fr) minmax(150px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.tpl-variable-row > span,
.tpl-variable-row > code {
    color: var(--crm-color-text-muted);
    font-size: .75rem;
}

.tpl-variable-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--crm-color-warning) 13%, transparent);
    color: var(--crm-color-text-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.tpl-variable-warning .crm-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--crm-color-warning);
}

.tpl-variable-warning code {
    color: var(--crm-color-text);
    font-weight: 700;
}

.tpl-row-remove {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    color: var(--crm-color-danger);
}

/* D1 (PRE-PRODUCTION-CORRECTIONS-01) — .tpl-media-upload/.tpl-media-input-hidden saíram: os dois
   seletores de mídia do editor usam o UniFilePicker canônico. */

.app-icon-action.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.tpl-identification {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tpl-identification-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--crm-color-text);
    font-weight: 600;
    cursor: pointer;
}

.tpl-identification-info .crm-icon {
    width: 17px;
    height: 17px;
    color: var(--crm-color-primary);
}

.tpl-identification > strong {
    color: var(--crm-color-text-muted);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.tpl-identification-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tpl-identification-details span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border-bottom: 1px solid var(--crm-color-border);
}

.tpl-identification-details em {
    color: var(--crm-color-text-muted);
    font-size: .75rem;
    font-style: normal;
}

.tpl-identification-details strong {
    color: var(--crm-color-text);
    overflow-wrap: anywhere;
}

.tpl-editor-save {
    display: flex;
    justify-content: flex-end;
}

.tpl-editor-save-button {
    padding-inline: 14px;
}

.tpl-editor-save-button .crm-icon {
    width: 16px;
    height: 16px;
}

.tpl-editor-preview {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.tpl-editor-preview-title {
    min-width: 0;
    width: 100%;
}

.tpl-editor-phone-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    box-sizing: border-box;
    overflow: visible;
    container-type: size;
}

.tpl-editor-phone {
    flex: 0 0 auto;
    width: min(100cqw, 48.1583cqh);
    height: min(207.6487cqw, 100cqh);
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 70.6 / 146.6;
    box-sizing: border-box;
}

.tpl-editor-phone .tpl-whatsapp-chat {
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1023px) {
    .tpl-editor-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tpl-editor-preview-title {
        padding-left: 52px;
    }

    .tpl-editor-page {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }

    .tpl-editor-layout {
        flex: 0 0 auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .tpl-editor-form {
        overflow: visible;
        padding-right: 0;
    }

    .tpl-editor-preview {
        height: auto;
    }

    .tpl-editor-phone-stage {
        flex: 0 0 auto;
        height: min(570px, 78vh);
    }
}

@media (max-width: 767px) {
    .tpl-variable-row {
        grid-template-columns: 1fr;
    }

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

    .tpl-button-summary-actions {
        justify-content: flex-start;
    }

    .tpl-editor-section-head {
        flex-direction: column;
    }

    .tpl-identification-details {
        grid-template-columns: 1fr;
    }

    .tpl-editor-phone-stage {
        height: min(540px, 72vh);
    }

    .tpl-editor-phone {
        width: min(100cqw, 48.1583cqh);
        height: min(207.6487cqw, 100cqh);
    }
}

/* UNICHAT-MOBILE-UX-ARCHITECTURE-01 (B6) — linhas de Templates/KB: ações no ⋮ no mobile (a linha inteira já abre). */
@media (max-width: 1023px) {
    .tpl-row-actions { justify-content: flex-end; }
}

/* =============================================================================================
   UNICHAT-TEMPLATES-CHANNELS-RESIDUAL-VISUAL-CONVERGENCE-01 (T-3)
   =============================================================================================

   O que esta seção NÃO faz: criar uma quinta gramática. Cada regra abaixo ou declara a grade da
   superfície — que VL-17 manda cada tela declarar — ou compõe primitives canônicas. Nenhuma
   cor, medida ou raio literal: tudo sai dos tokens.

   O que ficou de fora, de propósito: a limpeza das regras `tpl-*` legadas. Medido nesta passagem,
   `/base-conhecimento` renderiza SEUS overlays, badges e linhas com regras que moram neste
   arquivo (`.tpl-overlay`, `.tpl-panel*`, `.tpl-badge*`, `.tpl-rows`, `.tpl-row-line*`,
   `.tpl-select`, `.tpl-pager-btn`, `.tpl-empty`, `.tpl-loading`, `.tpl-status-dot`) e quase não
   define as suas. `crm-knowledge.css` tem UMA delas. Campanhas consome a família inteira do
   telefone (`.tpl-whatsapp-*`, `.tpl-phone-*`) no seu componente de prévia.

   Apagar o que Templates parou de usar quebraria uma superfície que este corte não visitou e
   colidiria com o corte paralelo de Campanhas. É a mesma dívida que §23.4 do contrato já registra
   para `kanban-*` fora do Kanban. Fica registrada no Residual Handoff, não resolvida aqui.
   ============================================================================================= */

/* Espaço entre blocos de aviso no topo da página. Uma camada só (§ do corte de Configurações:
   o espaçamento vem do gap OU da margem, nunca dos dois). */
.tpl-block {
    margin-bottom: var(--uni-space-4);
}

/* VL-17 — a grade é declarada pela superfície; sem ela o UniList empilha tudo numa coluna.
   Mesma forma que `.crm-settings-list-connections` usa na superfície já aceita. */
.tpl-list .uni-list-row {
    grid-template-columns: 48px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr);
}

/* UNICHAT-CUT-6S (F-89, Owner R1) — miniatura do cabeçalho em COLUNA PRÓPRIA (Imagem | Modelo | Categoria | Estado |
   Ações): caixa fixa e discreta (48×36), imagem inteira (contain, sem crop); placeholder com ícone quando não há imagem;
   célula vazia para modelo sem cabeçalho de mídia, para as colunas alinharem. */
.tpl-cell-thumb { display: flex; align-items: center; min-height: 36px; }
.tpl-row-copy { display: flex; flex-direction: column; min-width: 0; }
.tpl-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--uni-color-neutral-soft); /* CC-03: token `--uni-color-surface-muted` não existia; neutral-soft = #eef1f5 claro / #222b3a escuro */
    border: 1px solid var(--uni-color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uni-color-text-muted);
}
.tpl-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.tpl-thumb .crm-icon { width: 18px; height: 18px; }
.tpl-thumb-empty { background: var(--uni-color-neutral-soft); /* CC-03: token `--uni-color-surface-muted` não existia; neutral-soft = #eef1f5 claro / #222b3a escuro */ color: var(--uni-color-text-muted); }

.tpl-cell-category,
.tpl-cell-state {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    align-items: flex-start;
    min-width: 0;
}

/* Apoio da linha: nunca compete com o nome nem com o badge de estado. */
.tpl-meta {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
    line-height: 1.4;
}

.tpl-meta-danger {
    color: var(--uni-color-danger);
}

.tpl-detail-badge {
    align-self: flex-start;
    margin-bottom: var(--uni-space-3);
}

/* T-4 — frescor da lista. Discreto por decisão: informa sem disputar com o conteúdo. */
.tpl-freshness {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    margin: 0 0 var(--uni-space-3);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
    min-height: var(--uni-space-5);
}

.tpl-freshness svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.tpl-freshness-spinner {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--uni-color-border);
    border-top-color: var(--uni-color-primary);
    animation: tpl-freshness-spin 0.7s linear infinite;
}

@keyframes tpl-freshness-spin {
    to { transform: rotate(360deg); }
}

/* Movimento é preferência do sistema, não decoração obrigatória. */
@media (prefers-reduced-motion: reduce) {
    .tpl-freshness-spinner {
        animation: none;
        border-top-color: var(--uni-color-border);
    }
}

.tpl-pager-label {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
    white-space: nowrap;
}

/* Ficha de dados: <dl> em vez de <span><em>/<strong>. O par rótulo/valor agora é semântico, e o
   rótulo é micro-label — a única caixa alta que VL-03 autoriza. */
.tpl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--uni-space-3) var(--uni-space-5);
    margin: 0;
}

.tpl-facts > div {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 0;
}

.tpl-facts dt {
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--uni-color-text-muted);
}

.tpl-facts dd {
    margin: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
    overflow-wrap: anywhere;
}

/* T-5 — bloco Avançado. `<details>` NÃO distribui `gap` para o conteúdo revelado: o espaçamento
   do miolo vem de margem, e é por isso que esta regra existe em vez de um `gap` no pai. */
.tpl-advanced {
    margin-top: var(--uni-space-4);
    border-top: 1px solid var(--uni-color-border);
    padding-top: var(--uni-space-3);
}

.tpl-advanced > summary {
    cursor: pointer;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-text-muted);
    list-style: none;
}

.tpl-advanced > summary::-webkit-details-marker {
    display: none;
}

.tpl-advanced > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: var(--uni-space-2);
    transition: transform 0.15s ease;
}

.tpl-advanced[open] > summary::before {
    transform: rotate(90deg);
}

.tpl-advanced[open] > summary {
    margin-bottom: var(--uni-space-3);
}

/* VL-62 — o foco do teclado precisa ser visível no resumo, que é um alvo interativo. */
.tpl-advanced > summary:focus-visible {
    outline: 2px solid var(--uni-color-primary);
    outline-offset: 2px;
    border-radius: var(--uni-radius-sm);
}

.tpl-issues {
    margin: var(--uni-space-2) 0 0;
    padding-left: var(--uni-space-5);
}

.tpl-issues li + li {
    margin-top: var(--uni-space-1);
}

/* Mobile: a grade de quatro colunas não cabe. Cada linha vira cartão empilhado (VL-17). */
@media (max-width: 1023px) {
    .tpl-list .uni-list-row {
        grid-template-columns: 1fr;
        gap: var(--uni-space-2);
    }
    /* Mobile: o placeholder "sem foto" não ganha linha própria no cartão empilhado; só a foto real aparece. */
    .tpl-cell-thumb:has(> .tpl-thumb-empty:only-child) { display: none; }

    .tpl-list .uni-list-row-head {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   VL-59 / D-38 — piso de toque de 44px, SOB ESCOPO desta superfície.

   Medido no navegador a 390px, antes: `.uni-menu-row-trigger` 40px, `.uni-list-row-link` 37px e o
   input da busca fixa 42px dentro de uma faixa de 44px.

   Por que sob escopo e não na primitive: as superfícies já aceitas não exercitam estes elementos no
   celular — `/configuracoes` e `/contatos` escondem as ações de linha no mobile e, no desktop, as
   escopam para 32px dentro dos seus próprios contêineres. Subir o piso na ficha base mudaria as
   duas em silêncio, que é exatamente o que CF-02 ensinou a não fazer.

   A promoção global fica proposta como PAA-TC-02, com o inventário de consumidores medido.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .tpl-page .uni-menu-row-trigger {
        min-width: 44px;
        min-height: 44px;
    }

    /* O alvo é a linha inteira do título — o gesto natural é tocar no nome do modelo. */
    .tpl-page .uni-list-row-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 44px;
    }

    /* A faixa já tem 44px; o campo dentro dela não acompanhava. */
    .tpl-page .uni-search-row,
    .tpl-page .uni-search-row input {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------------------------
   Rodada 2 — revisão do proprietário (2026-09-10)
   --------------------------------------------------------------------------------------------- */

/* R-1 — seta de voltar do editor. O "×" de fechar virou seta: o editor é uma PÁGINA, e o gesto é
   voltar. Mesma seta do painel de contatos do Atendimento; a classe é própria porque
   `.uni-appbar-btn` pinta branco para app bar colorida, e aqui o fundo é a superfície comum.
   44px atende VL-59 nos dois temas — a antiga `.tpl-editor-close` tinha 38px. */
.tpl-editor-back {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uni-color-text-muted);
    cursor: pointer;
}

.tpl-editor-back:hover,
.tpl-editor-back:focus-visible {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.tpl-editor-back:focus-visible {
    outline: 2px solid var(--uni-color-primary);
    outline-offset: 2px;
}

.tpl-editor-back .crm-icon {
    width: 20px;
    height: 20px;
}

/* R-3 — respiro abaixo de "Criar modelo".
   O botão era o último filho da coluna e encostava na borda da página. O vão vem de UMA camada
   (margem no próprio bloco), nunca somada ao `gap` do contêiner — foi o erro medido no modal do
   WhatsApp Oficial, que produziu 48px onde deviam ser 24. */
.tpl-editor-save {
    margin-bottom: var(--uni-space-8);
}

/* R-4 — o corpo deste drawer não leva padding: quem está dentro é uma grade de duas colunas
   (conteúdo + prévia do telefone) que precisa ocupar a caixa inteira. O padding de 24px da
   primitive criava uma moldura em volta da grade e encolhia a prévia.

   ESCOPADO de propósito. `.uni-drawer-body` é usado por todas as superfícies de detalhe do
   produto, várias já aceitas pelo proprietário; zerar o padding na ficha base mudaria todas em
   silêncio. O `gap` também sai: o espaçamento interno é responsabilidade da grade, e somar as
   duas camadas é o erro que o modal do WhatsApp Oficial já cometeu (48px onde deviam ser 24). */
.tpl-detail-drawer .uni-drawer-body {
    padding: 0;
    gap: 0;
}

/* R-5 — o rodapé deste drawer pode quebrar em duas linhas.
   MEDIDO: com o modelo em rascunho o rodapé tem três ações — "Enviar para aprovação" (229px),
   "Editar" (117px) e "Fechar" (96px) — que somam 443px mais 24px de gaps e 48px de padding: 515px
   dentro de um rodapé de 440px. Os botões nao encolhem porque `min-width: auto` num item flex
   resolve para o tamanho de min-content, e o rótulo é `white-space: nowrap` — entao o excesso
   vazava PARA A ESQUERDA (o botão começava em x=949 com o rodapé começando em x=1000), que é
   justamente o lugar onde `scrollWidth` não denuncia nada.

   Deixar quebrar preserva os três rótulos legíveis. Encolher com ellipsis seria pior: rótulo de
   ação cortado deixa de dizer o que a ação faz.

   Escopado, com promoção global proposta em PAA-TC-04 — o rodapé de qualquer drawer com três
   ações tem o mesmo problema, mas mudar a ficha base mexeria em superfícies já aceitas. */
.tpl-detail-drawer .uni-drawer-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--uni-space-3);
}

/* =============================================================================================
   Rodada 3 — revisão do proprietário (2026-09-10)
   ============================================================================================= */

/* R-7 — a grade do detalhe dentro do DRAWER.
   Tirar o padding do corpo (R-4) expôs um defeito latente: `.tpl-detail-layout` é uma grade de
   duas colunas com a prévia fixa em `minmax(320px, 380px)`. Isso foi desenhado para um painel
   largo. Num drawer de 440px sobra ~60px para o conteúdo — foi o que o proprietário viu, com o
   texto espremido numa coluna de uma letra por linha.

   A media query que já existia para uma coluna é de VIEWPORT (<=1023px), e o drawer tem 440px
   dentro de um viewport de 1440px: ela nunca dispara aqui. O contêiner é estreito, a janela não —
   e é o contêiner que manda neste caso.

   Dentro deste drawer a grade é SEMPRE de uma coluna: conteúdo primeiro, prévia embaixo. */
.tpl-detail-drawer .tpl-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
}

.tpl-detail-drawer .tpl-detail-content {
    overflow: visible;
}


/* R-9 — conexão, busca e status na MESMA linha no desktop.
   O status não precisa de largura de campo: o maior rótulo do menu é curto, então ele ocupa o
   conteúdo e para de disputar espaço com a busca, que é quem realmente cresce. */
@media (min-width: 1024px) {
    .tpl-toolbar {
        flex-wrap: nowrap;
    }

    .tpl-toolbar-conn {
        flex: 0 0 auto;
        width: 232px;
    }

    .tpl-toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tpl-toolbar-filter {
        flex: 0 0 auto;
        width: 184px;
    }
}

/* R-10 — piso de toque nas setas do UniPager, SOB ESCOPO desta superfície.

   Conflito real entre duas regras, e o contrato diz qual vence: VL-34 prescreve setas circulares
   de 34px; D-38/VL-59 exige 44px de alvo no toque. O §0 subordina o contrato visual a "requisitos
   de acessibilidade que não sejam puramente visuais" — então no celular o alvo sobe.

   É a mesma família de CF-02, e a reconciliação de §23.3 já enfrentou o caso nas abas: não deu para
   separar alvo de caixa pintada, e o piso subiu junto. Aqui vale o mesmo.

   Escopado porque `UniPager` é primitive de outro corte, em execução paralela: mexer na ficha dele
   agora criaria conflito de merge. Promoção global proposta em PAA-TC-07. */
@media (max-width: 767px) {
    .tpl-page .uni-pager-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* =============================================================================================
   Rodada 4 — o drawer de detalhe do modelo, reestruturado
   =============================================================================================

   O proprietário reprovou o resultado das rodadas anteriores, e com razão: eu tinha empilhado
   correções pontuais (tirar padding, forçar uma coluna) sobre uma estrutura que já estava errada
   na raiz. O sintoma era a prévia espremida no fim; a causa era a ordem da informação.

   O que mudou aqui é anatomia, não retoque: a prévia subiu para logo depois do estado, o bloco
   que duplicava o texto dela saiu, a ficha desceu para dentro de um `<details>`, e o que só
   informa ausência deixou de ocupar linha.
   ============================================================================================= */

/* O detalhe carrega um mockup de telefone. A 440px sobra pouco para os dois — e o telefone é
   proporcional, então estreitar demais também o encurta. 560px acomoda a prévia em tamanho legível
   com margem dos dois lados, e continua sendo drawer, não página.

   Escopado: a ficha base de `.uni-drawer` serve superfícies já aceitas com 440px. */
.tpl-detail-drawer {
    width: min(560px, 100vw);
}

.tpl-detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    padding: var(--uni-space-5) var(--uni-space-6) var(--uni-space-7);
}

/* A prévia ganha o palco: fundo próprio para separar a simulação do resto da interface, e o
   telefone centrado com respiro. Sem título — o aparelho desenhado já diz o que é, e um rótulo
   "Prévia no WhatsApp" acima dele era mais um `<h3>` competindo com os outros. */
.tpl-detail-preview {
    display: flex;
    justify-content: center;
    padding: var(--uni-space-6) var(--uni-space-5);
    background: var(--uni-color-app-bg);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
}

/* Dentro do drawer o aparelho tem largura fixa e confortável: proporcional, então largura manda
   na altura. 260px dá ~563px de altura, que cabe na dobra junto com o estado. */
.tpl-detail-drawer .tpl-whatsapp-phone {
    width: 260px;
    margin-inline: auto;
}

.tpl-detail-section h3 {
    margin: 0 0 var(--uni-space-3);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

/* Parâmetros e botões: lista de itens, não tabela. Numa coluna estreita a tabela de quatro colunas
   virava quatro linhas por item com cabeçalho repetido — VL-17 já prefere cartão a régua. */
.tpl-detail-params {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tpl-detail-params li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--uni-space-2);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
}

.tpl-detail-params code {
    font-size: var(--uni-font-size-xs);
    padding: 2px 6px;
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.tpl-detail-param-name {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

.tpl-detail-params .tpl-meta {
    flex: 1 1 100%;
}

/* Os identificadores técnicos ficam um degrau abaixo da ficha de produto, dentro do mesmo
   Avançado: quem precisa deles sabe o que procura. */
.tpl-facts-technical {
    margin-top: var(--uni-space-4);
    padding-top: var(--uni-space-4);
    border-top: 1px dashed var(--uni-color-border);
}

.tpl-facts-technical dd {
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    color: var(--uni-color-text-muted);
}

/* No celular o drawer é tela cheia e o aparelho encolhe junto. */
@media (max-width: 767px) {
    .tpl-detail-body {
        padding: var(--uni-space-4) var(--uni-space-4) var(--uni-space-7);
    }

    .tpl-detail-drawer .tpl-whatsapp-phone {
        width: min(240px, 70vw);
    }
}

/* Rodada 5 — o corpo do drawer voltou a rolar.

   MEDIDO: `scrollHeight` e `clientHeight` do corpo davam os MESMOS 713px, e mesmo assim o último
   filho estava em y=951 — fora da janela de 900. O corpo não sabia que havia conteúdo abaixo, então
   `overflow-y: auto` nunca acionava a barra e o resto ficava inalcançável: só o mockup aparecia,
   cortado.

   São duas causas somadas, e as duas precisam do conserto:

   1. `.uni-drawer-body` é filho de um contêiner em coluna com altura definida e tem
      `min-height: auto`, que num item flex resolve para o tamanho de min-content — ele não encolhe
      e não vira caixa de rolagem. É a mesma armadilha que colapsou a faixa de abas, pelo avesso.

   2. `.tpl-detail-body` é filho flex do corpo com `flex-shrink: 1` por padrão: foi comprimido para
      a altura do pai (713px) e passou a transbordar sem contribuir para a rolagem dele.

   Antes desta estrutura nada disso aparecia porque quem rolava era `.tpl-detail-content`, coluna
   interna da grade antiga. Ao trocar a grade por fluxo único, a responsabilidade de rolar voltou
   para o corpo — e ele não estava preparado. */
.tpl-detail-drawer .uni-drawer-body {
    min-height: 0;
}

.tpl-detail-body {
    flex: none;
}

/* O selo de estado e o (i) no cabeçalho, alinhados entre si e com o botão de fechar. */
.tpl-detail-state-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
}

/* UNICHAT-POST-CAMPAIGN-OPERATIONAL-HARDENING-20260910-01 / FEAT-11 + FEAT-12 — imagem padrão do
   cabeçalho: na prévia do celular e na seção de cadastro do detalhe. */
/* UNICHAT-CUT-6S (F-92, Owner R1) — a prévia representa a mídia como o WhatsApp real: a imagem ocupa TODA a largura
   do balão e a altura acompanha a proporção da imagem (nunca 16:9 forçado, nunca crop, nunca faixas). */
.tpl-whatsapp-media-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0 0 6px;
    background: linear-gradient(145deg, #dfe5e7, #c8d1d4);
}

/* UNICHAT-CUT-6S (F-90/F-91) — badge pós-sync compacto: padding menor, texto em uma linha, relatório nominal
   em <details> (fechado quando a lista é longa). Alinhado ao bloco da lista, com o espaçamento do UniSectionAlert. */
.tpl-sync-alert { padding: var(--uni-space-3) var(--uni-space-4); }
.tpl-sync-alert .uni-section-alert-title { font-size: var(--uni-font-size-sm); }
.tpl-sync-alert .uni-section-alert-message { margin-top: 2px; }
.tpl-sync-details { margin-top: var(--uni-space-2); font-size: var(--uni-font-size-sm); }
.tpl-sync-details > summary { cursor: pointer; color: var(--uni-color-text); font-weight: 600; }
.tpl-sync-list { margin: var(--uni-space-1) 0 0; padding-left: 18px; color: var(--uni-color-text-muted); }
.tpl-sync-list li { margin: 2px 0; }
.tpl-sync-list strong { color: var(--uni-color-text); font-weight: 600; }

/* UNICHAT-CUT-6S (F-96) — origem honesta da imagem na prévia (exemplo da Meta ≠ imagem padrão). */
.tpl-whatsapp-media-source {
    display: block;
    margin: -2px 0 6px;
    font-size: 10px;
    line-height: 1.2;
    color: #667781;
}

.tpl-default-media .tpl-detail-hint {
    margin: 0 0 var(--uni-space-3);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.tpl-default-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-3);
    margin-bottom: var(--uni-space-3);
}

.tpl-default-media {
    margin-top: var(--uni-space-3);
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

/* ------------------------------------------------------------------- envio de teste --- */
/* UNICHAT-CUT-6R-A (F-80/F-83) — formulário à esquerda, prévia canônica à direita (mesma grade da
   personalização na conversa); aviso sucinto com (i); resultado num bloco só com tom; gaps de 12–16px. */
.tpl-test-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
    .tpl-test-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.tpl-test-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tpl-test-notice {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px;
    font-size: 12.5px; color: var(--crm-color-text);
    background: color-mix(in srgb, var(--crm-color-warning) 12%, transparent);
}
.tpl-test-notice > .crm-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--crm-color-warning); }
.tpl-test-notice > span { flex: 1 1 auto; min-width: 0; }
.tpl-test-result {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid transparent; font-size: 13px; color: var(--crm-color-text);
}
.tpl-test-result.is-info { background: color-mix(in srgb, var(--crm-color-info) 10%, transparent); border-color: color-mix(in srgb, var(--crm-color-info) 35%, transparent); }
.tpl-test-result.is-success { background: color-mix(in srgb, var(--crm-color-success) 10%, transparent); border-color: color-mix(in srgb, var(--crm-color-success) 35%, transparent); }
.tpl-test-result.is-danger { background: color-mix(in srgb, var(--crm-color-danger) 10%, transparent); border-color: color-mix(in srgb, var(--crm-color-danger) 35%, transparent); }
.tpl-test-result-icon { display: inline-flex; margin-top: 2px; }
.tpl-test-result-icon .crm-icon { width: 16px; height: 16px; }
.tpl-test-result.is-info .tpl-test-result-icon { color: var(--crm-color-info); }
.tpl-test-result.is-success .tpl-test-result-icon { color: var(--crm-color-success); }
.tpl-test-result.is-danger .tpl-test-result-icon { color: var(--crm-color-danger); }
.tpl-test-result-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tpl-test-result-copy strong { font-size: 13.5px; }
.tpl-test-result-copy small { font-size: 12px; color: var(--crm-color-text-muted); }
.tpl-test-watching { display: inline-flex; align-items: center; gap: 6px; }
.tpl-test-watching .app-button-spinner { width: 12px; height: 12px; }
.tpl-test-field { display: flex; flex-direction: column; gap: 6px; }
.tpl-test-field .uni-field-hint { margin: 0; }
.tpl-test-variables { gap: 10px; }
.tpl-test-variables .app-field-label code { font-size: 12px; }
.tpl-test-media-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px;
    font-size: 12.5px; color: var(--crm-color-text-muted);
    background: color-mix(in srgb, var(--crm-color-primary) 8%, transparent);
}
.tpl-test-media-note .crm-icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--crm-color-primary); }
.tpl-test-media-note.is-missing { color: var(--crm-color-text); background: color-mix(in srgb, var(--crm-color-warning) 12%, transparent); }
.tpl-test-media-note.is-missing .crm-icon { color: var(--crm-color-warning); }
.tpl-test-preview { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tpl-test-preview-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--crm-color-text-muted); }
.tpl-test-preview .cmp-msg { max-width: 440px; }

/* UNICHAT-CUT-6T (§21) — rastreabilidade do modelo: rótulo de link na lista e seção no detalhe. Só tokens do DS. */
.tpl-cell-category .tpl-meta-link, .tpl-meta-link { display: inline-flex; flex-direction: row; align-items: center; gap: var(--uni-space-1); }
.tpl-meta-link .crm-icon { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; }
.tpl-meta-link.tpl-link-trackable { color: var(--uni-color-success); }
.tpl-detail-linkkind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2); margin: 0 0 var(--uni-space-2); }
.tpl-detail-relation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--uni-space-2); margin: 0 0 var(--uni-space-2); }
.tpl-detail-relation .app-badge { margin-inline-start: var(--uni-space-1); }
.tpl-detail-actions { display: flex; flex-wrap: wrap; gap: var(--uni-space-2); margin-top: var(--uni-space-2); }