:root {
    /* Ser Digital */
    --sd-navy: #2e3e61;
    --sd-blue: #0068a5;
    --sd-red: #ed1c24;
    --sd-navy-dark: #24324f;
    --sd-blue-dark: #005688;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --text: #2e3e61;
    --muted: #5a6b85;
    --border: #dce4ef;
    --accent: #0068a5;
    --accent-hover: #005688;
    --accent-soft: #e8f4fc;
    --highlight: #ed1c24;
    --highlight-soft: #fde8e9;
    --success: #1a7f4b;
    --error: #c41e24;
    --radius: 12px;
    --shadow: 0 8px 30px rgba(46, 62, 97, 0.08);
    --sidebar-w: 268px;
}

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

body {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

code {
    font-size: 0.88em;
    background: var(--accent-soft);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: var(--sidebar-w);
    background: var(--sd-navy);
    color: #eef3fa;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.85rem 1rem;
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.marca-produto-aviso {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.sidebar-brand {
    flex-shrink: 0;
    padding: 0 0.45rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.75rem;
}

.sidebar-company {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
    text-align: center;
}

.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.brand-logo-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    display: inline-block;
}

.brand-sidebar .brand-logo {
    max-width: 150px;
    display: block;
}

.brand-login .brand-logo {
    max-width: 200px;
    margin: 0 auto;
}

.brand-tagline {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}

.brand-sidebar .brand-tagline {
    color: rgba(238, 243, 250, 0.65);
    text-align: left;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.2rem 0.55rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    color: rgba(238, 243, 250, 0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

.sidebar-link:hover,
.sidebar-link.is-active {
    background: var(--sd-blue);
    color: #fff;
}

.sidebar-link-icon {
    flex: 0 0 1.2rem;
    width: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    text-align: center;
}

.sidebar-link--with-badge {
    justify-content: flex-start;
}

.sidebar-link-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.3;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-link--perfil {
    margin-top: 0;
}

.sidebar-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer .sidebar-link--perfil {
    border-top: none;
    border-radius: 8px;
    padding-top: 0.5rem;
    margin-bottom: 0.1rem;
}

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #f79009;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 0 0 2px var(--sd-navy, #0f2744);
}

.sidebar-badge.is-hidden {
    display: none;
}

.sidebar-badge-icon {
    font-size: 0.55rem;
    line-height: 1;
}

.sidebar-user {
    font-size: 0.8rem;
    color: rgba(238, 243, 250, 0.75);
    padding: 0.75rem 0.5rem 0;
    border-top: none;
    margin-top: 0;
    flex-shrink: 0;
}

.sidebar-user strong {
    display: block;
    color: #fff;
    font-size: 0.9rem;
}

.sidebar-user span,
.sidebar-user-email {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: rgba(238, 243, 250, 0.55);
}

.sidebar-user small {
    display: block;
    color: rgba(238, 243, 250, 0.5);
    margin-top: 0.25rem;
    text-transform: capitalize;
}

.sidebar-logout {
    display: inline-block;
    margin-top: 0.55rem;
    color: var(--sd-red);
    text-decoration: none;
    font-weight: 700;
}

.sidebar-logout:hover {
    color: #fff;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(145deg, var(--sd-navy) 0%, var(--sd-blue) 42%, var(--bg) 42%);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-card,
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(28, 25, 23, 0.15);
}

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

.login-brand p {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.login-form .form-row {
    margin-bottom: 1rem;
}

.auth-notice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    animation: auth-notice-in 0.35s ease-out;
}

@keyframes auth-notice-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-notice--error {
    background: linear-gradient(135deg, #fff8f8 0%, var(--highlight-soft) 100%);
    border-color: #f3c4c7;
    box-shadow: inset 3px 0 0 var(--error);
}

.auth-notice--success {
    background: linear-gradient(135deg, #f6fffa 0%, #d8f3dc 100%);
    border-color: #b7e4c7;
    box-shadow: inset 3px 0 0 var(--success);
}

.auth-notice--info {
    background: linear-gradient(135deg, #f8fcff 0%, var(--accent-soft) 100%);
    border-color: #b8d9ef;
    box-shadow: inset 3px 0 0 var(--accent);
}

.auth-notice__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 10px rgba(46, 62, 97, 0.08);
}

.auth-notice--error .auth-notice__icon {
    color: var(--error);
}

.auth-notice--success .auth-notice__icon {
    color: var(--success);
}

.auth-notice--info .auth-notice__icon {
    color: var(--accent);
}

.auth-notice__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.auth-notice__content {
    min-width: 0;
    flex: 1;
    padding-top: 0.1rem;
}

.auth-notice__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--sd-navy);
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

.auth-notice__text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--muted);
}

.btn-block {
    width: 100%;
}

.login-hint {
    margin: 1.25rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sidebar-w);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem 2rem 0;
}

.page-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sd-navy);
}

.page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

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

/* Notifica??es do operador (sininho no header) */
.notificacoes-operador {
    position: relative;
}

.btn-notificacoes {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 10px;
    background: #fff;
    color: var(--sd-navy, #0f2744);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-notificacoes:hover,
.btn-notificacoes--ativo {
    background: var(--accent-soft, #e8f1fb);
    border-color: var(--accent, #1d6fd6);
    color: var(--accent, #1d6fd6);
}

.btn-notificacoes-icon {
    display: block;
}

.notificacoes-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #f04438;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.notificacoes-badge.is-hidden {
    display: none;
}

.notificacoes-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 900;
    width: 500px;
    max-height: 26rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.notificacoes-panel.is-hidden {
    display: none;
}

.notificacoes-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border, #d8dee6);
    background: #f8fafc;
}

.notificacoes-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sd-navy, #0f2744);
}

.notificacoes-panel-body {
    overflow-y: auto;
    padding: 0.5rem 0;
}

.notificacoes-empty {
    margin: 0;
    padding: 1.25rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.notificacao-item {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
    transition: background 0.12s;
}

.notificacao-item:last-child {
    border-bottom: none;
}

.notificacao-item:hover {
    background: #f8fafc;
}

.notificacao-item--nova {
    background: #fff8f0;
}

.notificacao-item--nova:hover {
    background: #fff3e6;
}

.notificacao-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.notificacao-item-titulo {
    font-size: 0.85rem;
    color: #b42318;
}

.notificacao-item-nova {
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #fee4e2;
    color: #b42318;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.notificacao-item-produto {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
}

.notificacao-item-produto a {
    color: var(--sd-navy, #0f2744);
    text-decoration: none;
    font-weight: 600;
}

.notificacao-item-produto a:hover {
    color: var(--accent, #1d6fd6);
    text-decoration: underline;
}

.notificacao-item-meta {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.notificacao-item-motivo {
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #334155;
}

.notificacao-item-motivo strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.notificacoes-sem-motivo {
    color: var(--muted);
}

.page-content {
    padding: 1.25rem 2rem 2rem;
    flex: 1;
}

.site-footer {
    padding: 1rem 2rem;
    color: var(--muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
}

.alert {
    margin: 0 2rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.alert-hidden {
    display: none;
}

.alert-success {
    background: #d8f3dc;
    color: var(--success);
}

.alert-error {
    background: #fde8e8;
    color: var(--error);
}

.alert-info {
    background: var(--accent-soft);
    color: var(--sd-blue);
}

.welcome-panel {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sd-red);
}

.welcome-title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sd-navy);
}

.welcome-text {
    margin: 0 0 1rem;
    color: var(--muted);
}

.welcome-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 0;
}

.welcome-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.welcome-meta dd {
    margin: 0;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.stat-card-accent {
    background: linear-gradient(135deg, var(--accent-soft), var(--surface));
}

.stat-label {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sd-blue);
}

.stat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.panel,
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 30px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.panel-body {
    padding: 1.25rem;
}

.card {
    padding: 1.25rem;
}

.card-muted {
    background: #faf9f7;
}

.card-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.card-text {
    color: var(--muted);
    margin: 0 0 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 7px;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 104, 165, 0.2);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 2px 6px rgba(0, 104, 165, 0.22);
}

.btn-secondary {
    background: var(--surface);
    color: var(--sd-navy);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(46, 62, 97, 0.04);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: #b8d4ea;
    color: var(--sd-blue);
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(46, 62, 97, 0.06);
    color: var(--text);
    border-color: transparent;
}

.btn-danger {
    background: #fff;
    color: var(--error);
    border-color: #f0c4c6;
}

.btn-danger:hover:not(:disabled) {
    background: var(--highlight-soft);
    border-color: #e8a0a4;
    color: #a0181e;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.input {
    width: 90%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.input:focus {
    outline: none;
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-select {
    max-width: 100%;
}

select.input-select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.35rem;
    cursor: pointer;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
}

select.input-select-multiple,
select.input-select[multiple] {
    min-height: 8.5rem;
    padding: 0.45rem 0.5rem;
    line-height: 1.4;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #fff;
}

select.input-select-multiple option,
select.input-select[multiple] option {
    padding: 0.3rem 0.35rem;
    border-radius: 4px;
}

select.input-select-multiple option:checked,
select.input-select[multiple] option:checked {
    background: linear-gradient(0deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
    color: var(--sd-navy);
}

.input-textarea {
    resize: vertical;
    min-height: 100px;
}

.label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.hint {
    display: block;
    width: 100%;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.char-counter.is-near-limit {
    color: #b45309;
}

.char-counter.is-at-limit {
    color: #b91c1c;
    font-weight: 600;
}

.form-row,
.form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.form-row .input,
.form-row .input-select,
.form-row select.input,
.form-row textarea.input,
.form-group .input,
.form-group .input-select,
.form-group select.input,
.form-group textarea.input {
    width: 100%;
    max-width: 100%;
}

.form-row .hint,
.form-group .hint {
    margin-top: 0.35rem;
}

.form-row > .image-preview-wrap,
.form-group > .image-preview-wrap {
    width: 100%;
    margin-top: 0.5rem;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.search-box {
    flex: 1;
    min-width: 200px;
}

.toolbar .input-select {
    width: auto;
    min-width: 180px;
}

.toolbar-produtos {
    align-items: center;
    margin-bottom: 0;
}

.produtos-toolbar {
    margin-bottom: 1rem;
}

.produtos-toolbar-filtros {
    margin-bottom: 0.65rem;
}

.produtos-filtros-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.produtos-toolbar-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.produtos-toolbar-filtros .search-box {
    flex: 1 1 280px;
    min-width: min(100%, 220px);
}

.produtos-toolbar-filtros .search-box .input {
    width: 100%;
}

.produtos-filtros-grupo .input-select {
    min-width: 11rem;
}

.produtos-lista-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.produtos-contagem {
    margin: 0;
    flex: 1;
    font-size: 0.9rem;
    color: var(--muted);
}

.filtros-atributos-panel {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filtros-atributos-panel .filtros-atributos-titulo {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.filtros-atributos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem 1rem;
}

.filtro-atributo-campo .label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.filtro-atributo-campo .input {
    width: 100%;
}

.produtos-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.produtos-pagina-numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.produtos-pagina-nav,
.produtos-pagina-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text, #1e293b);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.produtos-pagina-nav:hover:not(:disabled),
.produtos-pagina-num:hover:not(.is-active):not(:disabled) {
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}

.produtos-pagina-nav:disabled,
.produtos-pagina-num:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.produtos-pagina-num.is-active {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
    cursor: default;
}

.produtos-pagina-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    user-select: none;
}

.produtos-per-page-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.input-select-sm {
    min-width: 4.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.loading,
.empty-state {
    color: var(--muted);
    padding: 2rem;
    text-align: center;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(46, 62, 97, 0.45);
    backdrop-filter: blur(3px);
    pointer-events: all;
    cursor: wait;
}

.app-loading-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    min-width: 14rem;
    max-width: 22rem;
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.app-loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: app-loading-spin 0.75s linear infinite;
}

.app-loading-overlay__text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

body.app-loading-active {
    overflow: hidden;
}

@keyframes app-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.is-hidden {
    display: none !important;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
}

.product-card {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    overflow: hidden;
    background: var(--surface);
    transition: transform 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.product-card a {
    text-decoration: none;
    color: inherit;
}

.product-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.product-card-body-link {
    display: block;
}

.product-card-image {
    aspect-ratio: 3/4;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform 0.22s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.04);
}


.product-card-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.product-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.product-thumb-placeholder {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: var(--border);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.product-card-placeholder-icon,
.product-thumb-placeholder-icon {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.2;
    line-height: 1;
}

.product-card-placeholder-text {
    font-size: 0.72rem;
    color: var(--muted);
    opacity: 0.85;
    text-align: center;
}

.product-card-body {
    padding: 0.75rem 0.9rem;
    flex: 1;
    border-top: 1px solid var(--border);
}

.product-card-body h3 {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}

.product-card-badge--inactive {
    background: rgba(254, 226, 226, 0.92);
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.product-card-badge--pendente {
    top: auto;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(255, 247, 237, 0.92);
    color: #c2410c;
    border: 1px solid #fdba74;
}

.ficha-dl .is-pendente {
    color: #c2410c;
}

.atributo-row--obrigatorio .label {
    font-weight: 600;
}

.product-card--selectable {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-width: 2px;
}

.product-card--selectable:hover {
    border-color: #b8cfe0;
}

.product-card--selectable.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.product-card--selectable.is-drop-target {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.35);
}

.product-card--selectable .product-card-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    background: rgba(15, 118, 110, 0.82);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
    pointer-events: none;
}

.product-card--selectable.is-drop-target .product-card-drop-hint {
    display: flex;
}

.produtos-drop-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.produtos-drop-preview img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.produtos-drop-preview p {
    margin: 0;
    text-align: center;
}

.product-card--selectable input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-card--selectable .product-card-image {
    flex: 0 0 auto;
}

.product-card--selectable .product-card-body {
    flex: 1;
}

.product-card-check {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem 0.75rem;
    color: var(--border);
    font-size: 1.1rem;
}

.product-grid--lote .product-card-check {
    display: flex;
}

.product-card--selectable.is-selected .product-card-check {
    color: var(--accent);
}

.produtos-fab {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    pointer-events: none;
}

.produtos-fab-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.produtos-fab-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
}

.produtos-fab-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.produtos-fab-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.produtos-fab-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.produto-fab {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    pointer-events: none;
}

.produto-fab .produtos-fab-btn {
    pointer-events: auto;
}

.produto-fab .produtos-fab-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.marca-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    margin-bottom: 1.25rem;
}

.marca-form-card {
    padding: 0;
    overflow: hidden;
}

.marca-aside-tips {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.marca-aside-tips li + li {
    margin-top: 0.35rem;
}

.marca-media-frame--wide {
    flex: 0 0 168px;
    width: 168px;
    height: 110px;
}

.marca-produtos-section {
    margin-top: 0.25rem;
}

.marca-produtos-toolbar {
    align-items: center;
    gap: 0.5rem;
}

.marca-produtos-toolbar .evento-produtos-search {
    flex: 1 1 220px;
}

@media (max-width: 900px) {
    .marca-form-layout {
        grid-template-columns: 1fr;
    }

    .marca-media-frame--wide {
        width: 100%;
        max-width: 220px;
        height: 130px;
        margin: 0 auto;
        flex: none;
    }
}

.produtos-lote-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    margin-top: 1rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.produtos-lote-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
}

.produtos-lote-title {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
}

.produtos-lote-contagem {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 400;
}

.produtos-lote-contagem strong {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.produtos-lote-contagem-meta {
    color: var(--text-muted);
}

.produtos-lote-sair {
    flex-shrink: 0;
}

.produtos-lote-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.produtos-lote-section {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.produtos-lote-section:last-child {
    border-bottom: 0;
}

.produtos-lote-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.45rem;
}

.produtos-lote-section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.produtos-lote-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0.15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg, #f8fafc);
}

.produtos-lote-chip {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.produtos-lote-chip:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
}

.produtos-lote-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.produtos-lote-inline-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.produtos-lote-inline-field .input-select {
    flex: 1 1 10rem;
    min-width: 8.5rem;
    max-width: 16rem;
}

.produtos-lote-inline-field--marca {
    flex: 1 1 100%;
}

.produtos-lote-acoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.produtos-lote-acao-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.produtos-lote-acao-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.produtos-lote-acao-grupo .produtos-lote-inline-field,
.produtos-lote-acao-grupo .produtos-lote-chip-group {
    align-self: flex-start;
}

.produtos-lote-exportar-acoes {
    gap: 0.5rem;
}

.produtos-lote-hint {
    margin: 0;
    padding: 0.65rem 1rem 0.8rem;
    font-size: 0.76rem;
    border-top: 1px solid var(--border);
    background: rgba(148, 163, 184, 0.08);
}

.produto-pendencia-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #fff4e5;
    color: #b45309;
    border: 1px solid #f59e0b;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
    cursor: help;
    vertical-align: middle;
}

.produto-pendencia-icon--card {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(46, 62, 97, 0.18);
}

.produto-pendencia-icon--inline {
    margin-left: 0.35rem;
}

.product-card--pendente,
.evento-produto-card--pendente {
    border-color: #f59e0b;
}

.produto-pendencias-wrap {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.produto-form-aside .produto-pendencias-wrap {
    margin-top: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    background: #fffbeb;
}

.produto-pendencias-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.produto-pendencias-title::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff4e5;
    border: 1px solid #f59e0b;
    font-size: 0.65rem;
    font-weight: 800;
}

.produto-pendencias-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.produto-pendencias-list li + li {
    margin-top: 0.25rem;
}

.produtos-legenda-pendencia {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.product-list-item--pendente .product-list-link strong {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.product-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-list-item {
    border-bottom: 1px solid var(--border);
}

.product-list-item:last-child {
    border-bottom: none;
}

.product-list-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    text-decoration: none;
    color: inherit;
}

.product-thumb-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

.produto-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.produto-form-card {
    padding: 0;
    overflow: hidden;
}

.produto-form-section {
    padding: 1.15rem 1.25rem 1.25rem;
    margin: 0;
    border: 0;
}

.produto-form-section + .produto-form-section {
    border-top: 1px solid var(--border);
}

.produto-form-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.95rem;
}

.produto-form-section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.produto-form-section-hint {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.4;
}

.produto-form-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.produto-form-section-body .form-row {
    margin-bottom: 0.85rem;
}

.produto-form-section-body .form-grid-2 {
    margin-bottom: 0.35rem;
}

.produto-form-actions {
    margin: 0;
    padding: 1rem 1.25rem 1.15rem;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 40%);
    backdrop-filter: blur(4px);
    z-index: 5;
}

.produto-form-aside {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
}

.produto-aside-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.produto-aside-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.produto-aside-actions {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.produto-aside-actions .btn-block {
    width: 100%;
    justify-content: center;
}

.produto-imagem-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafbfd;
    max-width: 34rem;
}

.produto-imagem-frame {
    flex: 0 0 132px;
    width: 132px;
    height: 132px;
}

.produto-imagem-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.produto-imagem-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.produto-imagem-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--muted);
    text-align: center;
    padding: 0.5rem;
}

.produto-imagem-placeholder-icon {
    font-size: 1.35rem;
    opacity: 0.55;
    line-height: 1;
}

.produto-imagem-placeholder-text {
    font-size: 0.78rem;
    font-weight: 600;
}

.produto-imagem-preview:not(.is-empty) .produto-imagem-placeholder {
    display: none;
}

.produto-imagem-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.produto-imagem-meta-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text, #1e293b);
}

.produto-imagem-meta-hint {
    margin: 0;
}

.produto-imagem-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.25rem;
}

.produto-imagem-choose {
    cursor: pointer;
    margin: 0;
}

.produto-imagem-nome {
    margin: 0.15rem 0 0;
    word-break: break-all;
}

.atributos-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.atributos-list--grid .atributo-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfd;
}

.atributos-list--grid .atributo-row--wide {
    grid-column: 1 / -1;
}

.atributos-list--grid .atributo-row .label {
    margin: 0;
}

.atributos-list--grid .atributo-row .hint {
    margin: 0;
}

.perfil-layout {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.perfil-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    grid-template-rows: auto auto;
    gap: 1.25rem;
    align-items: start;
}

.perfil-card--dados {
    grid-column: 1;
    grid-row: 1;
}

.perfil-aside {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 1rem;
}

.perfil-card--senha {
    grid-column: 1;
    grid-row: 2;
}

.perfil-card-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: var(--sd-navy);
}

.perfil-card-hint {
    margin: 0 0 1.25rem;
}

.perfil-senha-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.perfil-aside h3 {
    margin-top: 0;
}

.perfil-form .input {
    width: 100%;
}

@media (max-width: 900px) {
    .perfil-app {
        grid-template-columns: 1fr;
    }

    .perfil-card--dados,
    .perfil-card--senha,
    .perfil-aside {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }

    .perfil-senha-grid {
        grid-template-columns: 1fr;
    }
}

.ficha-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

.ficha-card {
    padding: 0;
    overflow: hidden;
}

.ficha-hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fafcfe 0%, #fff 100%);
}

/* Na página de visualização, imagem vertical cabe melhor com coluna menor */
.ficha-hero-ver {
    grid-template-columns: 180px 1fr;
    align-items: start;
}

.ficha-hero-marca {
    grid-template-columns: 160px 1fr;
}

.ficha-hero-media {
    aspect-ratio: 4/3;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    position: relative;
}

/* Variante para a página de visualização: proporção vertical, fundo branco */
.ficha-hero-media-ver {
    aspect-ratio: 3/4;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.ficha-hero-media-logo {
    aspect-ratio: 1;
}

.ficha-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

.ficha-hero-media-logo img {
    object-fit: contain;
    padding: 0.5rem;
    background: #fff;
}

.ficha-titulo {
    margin: 0 0 0.35rem;
    font-size: 1.45rem;
    line-height: 1.25;
}

.ficha-subtitulo {
    margin: 0 0 0.75rem;
    color: var(--muted);
}

.ficha-pendencia-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.ficha-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ficha-section {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.ficha-section:last-child {
    border-bottom: none;
}

.ficha-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--sd-navy);
}

.ficha-dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.45rem 1rem;
    margin: 0;
}

.ficha-dl dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.ficha-dl dd {
    margin: 0;
    font-size: 0.92rem;
}

.ficha-texto {
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
}

.ficha-texto-muted {
    color: var(--muted);
}

.ficha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ficha-tag {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
}

.ficha-tag-muted {
    background: var(--bg);
    color: var(--muted);
    font-weight: 500;
}

.ficha-arquivo-atual {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.form-card .form-row {
    margin-bottom: 1rem;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.form-aside h3 {
    margin-top: 0;
}

.meta-list {
    margin: 0;
}

.meta-list dt {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meta-list dd {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.atributo-row {
    margin-bottom: 0.75rem;
}

.image-preview {
    margin-top: 0.5rem;
}

.image-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.image-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.image-preview img {
    max-width: 200px;
    border-radius: 8px;
}

.product-card-actions {
    padding: 0 0.9rem 0.9rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
}

.product-card-actions .product-card-ficha-btn,
.product-card-actions .product-card-ficha-btn.is-disabled {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

.product-card-actions .btn-primary,
.product-card-actions .btn-primary:hover:not(:disabled) {
    color: #fff;
}

.product-card-download-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border, #d8dee6);
    background: #fff;
    color: var(--text, #1e293b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.product-card-download-btn:hover {
    background: var(--accent-soft, #eef4ff);
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.product-card-download-btn:active {
    transform: scale(0.96);
}

.product-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

.product-list-row .product-list-link {
    flex: 1;
    min-width: 0;
}

.product-list-ficha-btn {
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.evento-produto-download {
    margin-top: 0.45rem;
}

.image-preview-logo img {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    padding: 0.35rem;
}

.image-preview-ficha-bg img {
    max-width: min(100%, 420px);
    width: 100%;
    aspect-ratio: 794 / 1123;
    object-fit: contain;
    background: repeating-conic-gradient(#e5e5e5 0% 25%, #fff 0% 50%) 50% / 20px 20px;
    border: 1px solid var(--border);
}

.marca-ficha-cores-panel {
    margin-top: 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

.marca-ficha-cores-panel .form-section-title {
    margin-bottom: 0.35rem;
}

.marca-ficha-cores-grid {
    margin-top: 0.75rem;
}

.marca-ficha-cores-regras-wrap {
    margin-top: 1rem;
}

.marca-ficha-cores-regras-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.marca-ficha-cores-regras {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.marca-ficha-cores-regra {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 640px) {
    .marca-ficha-cores-regra {
        grid-template-columns: 1fr;
    }
}

.marca-ficha-formatos-padrao {
    margin-bottom: 0.75rem;
}

.marca-ficha-formatos-padrao-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

.marca-ficha-formatos-regras-wrap {
    margin-top: 0.75rem;
}

.marca-ficha-formatos-regras-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.marca-ficha-formatos-regras {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.marca-ficha-formatos-regra {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(100px, 0.8fr) auto 44px auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfd;
}

.marca-ficha-formatos-regra .ftl-marca-formatos-regra-valor {
    min-width: 0;
}

.marca-ficha-formatos-preview {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
}

.marca-ficha-formatos-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.marca-ficha-formatos-preview--round {
    border-radius: 50%;
}

.marca-ficha-formatos-preview--square {
    border-radius: 6px;
}

.marca-ficha-formatos-preview--star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.marca-ficha-formatos-upload {
    cursor: pointer;
    margin: 0;
}

@media (max-width: 720px) {
    .marca-ficha-formatos-regra {
        grid-template-columns: 1fr;
    }
}

.marca-logo-cell {
    width: 72px;
}

.marca-logo-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 0.2rem;
}

.marca-logo-placeholder {
    color: var(--muted);
}

.marca-produtos-count .hint {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.marca-pais-tag {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
}

.marca-pais-tag--vazio {
    font-weight: 500;
    font-style: italic;
    opacity: 0.65;
}

.marcas-lote-pais {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.marcas-lote-pais-select {
    max-width: 400px;
}

.marcas-lote-pais-dica {
    padding: 0;
    border-top: 0;
}

.marcas-toolbar {
    align-items: center;
}

.marcas-toolbar-acoes {
    margin-left: auto;
}

.data-table--lote tbody tr.marcas-row--selectable {
    cursor: pointer;
}

.data-table--lote tbody tr.marcas-row--selectable.is-drop-target td {
    background: rgba(15, 118, 110, 0.08);
}

.data-table--lote tbody tr.marcas-row--selectable.is-drop-target {
    outline: 2px solid #0f766e;
    outline-offset: -2px;
}

.marca-logo-drop-zone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}

.marca-logo-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: rgba(15, 118, 110, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    padding: 0.2rem;
    border-radius: 6px;
    pointer-events: none;
}

.marca-logo-drop-zone.is-drop-target {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
    border-radius: 8px;
}

.marca-logo-drop-zone.is-drop-target .marca-logo-drop-hint {
    display: flex;
}

.marca-fundo-thumb {
    object-fit: cover;
}

.marca-bandeira-thumb {
    object-fit: cover;
}

.marca-bandeira-thumb--round {
    border-radius: 50%;
}

.marca-bandeira-thumb--square {
    border-radius: 8px;
}

.marca-ver-origem {
    margin: 0 0 0.75rem;
}

.marca-ver-origem-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.35rem;
}

.marca-ver-bandeira {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
}

/* Mesma proporção da página da ficha, em escala reduzida: o fundo é uma arte
   vertical inteira e em tamanho real empurraria o resto do conteúdo pra baixo. */
.marca-ver-fundo-preview {
    width: 190px;
    max-width: 100%;
    aspect-ratio: 794 / 1123;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
}

.marca-ver-fundo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.marca-ver-fundo-acoes {
    margin-top: 0.65rem;
}

.data-table--lote tbody tr.marcas-row--selectable.is-drop-target .marca-logo-drop-hint {
    display: none;
}

.data-table--lote tbody tr.marcas-row--selectable.is-drop-target .marca-logo-drop-zone.is-drop-target .marca-logo-drop-hint {
    display: flex;
}

.data-table--lote tbody tr.marcas-row--selectable.is-selected td {
    background: rgba(37, 99, 235, 0.08);
}

.marcas-col-select {
    width: 42px;
    text-align: center;
}

.marcas-col-select input[type="checkbox"] {
    pointer-events: none;
}

.import-layout {
    display: grid;
    gap: 1.25rem;
}

.import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.import-export-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fafcfe;
}

.import-export-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sd-navy);
}

.import-export-options .hint {
    margin: 0;
    flex: 1 1 220px;
}

.import-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    background: #faf9f7;
}

.import-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dropzone-label {
    display: block;
    cursor: pointer;
    padding: 1rem;
}

.dropzone-icon {
    display: block;
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.file-name {
    color: var(--muted);
    font-size: 0.9rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}

.tab.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

.error-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--error);
}

.import-erros-panel {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid #f0c9cb;
    border-radius: calc(var(--radius) - 2px);
    background: linear-gradient(180deg, #fff8f8 0%, #fff 48%);
    box-shadow: inset 3px 0 0 var(--error);
}

.import-erros-panel--warn {
    border-color: #f0d9a8;
    background: linear-gradient(180deg, #fffbf2 0%, #fff 48%);
    box-shadow: inset 3px 0 0 #d97706;
}

.import-erros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.import-erros-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #1a2332);
}

.import-erros-badge {
    flex: 0 0 auto;
    min-width: 1.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.import-erros-badge--warn {
    background: #d97706;
}

.import-erros-hint {
    margin: 0 0 0.75rem;
}

.import-erros-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 0.15rem;
}

.import-erro-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #f3d4d6;
    border-radius: 8px;
    background: #fff;
}

.import-erros-list--warn .import-erro-item {
    border-color: #f0e0bc;
}

.import-erro-item--aviso {
    border-color: var(--border);
    background: #fafbfc;
}

.import-erro-linha {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #fde8e9;
    color: var(--error);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.import-erro-linha--geral {
    background: #eef2f7;
    color: var(--muted);
}

.import-erros-list--warn .import-erro-linha {
    background: #fff1d6;
    color: #b45309;
}

.import-erro-msg {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text, #1a2332);
    font-size: 0.88rem;
    line-height: 1.4;
    word-break: break-word;
}

.import-erros-truncados {
    margin: 0.75rem 0 0;
}

.catalogo-config-card {
    margin-bottom: 1rem;
}

.catalogo-config-id-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.catalogo-config-id-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: #f8fafc;
}

.catalogo-config-id-item .hint {
    margin: 0.2rem 0 0;
}

.catalogo-config-id-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.catalogo-config-id-badge--alt {
    background: var(--muted);
}

.catalogo-config-toggle {
    margin-top: 0.5rem;
}

.catalogo-config-tipo {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.catalogo-config-tipo--extra {
    background: #eef2f7;
    color: var(--muted);
}

.catalogo-config-actions {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.form-layout-wide {
    max-width: 960px;
}

/* Tela editar evento ? layout em coluna, largura total */
.evento-edit-layout,
.evento-ver-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
}

.evento-ver-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.evento-ver-header .card-title {
    margin: 0 0 0.25rem;
}

.evento-form-card {
    width: 100%;
}

.form-grid-2-wide {
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 1100px) {
    .evento-form-card .form-grid-2-wide:first-of-type {
        grid-template-columns: 2fr 1fr;
    }
}

.label-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.evento-produtos-panel {
    width: 100%;
}

.evento-produtos-panel .panel-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.evento-produtos-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.evento-produtos-header .form-section-title {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.evento-produtos-header .hint {
    margin: 0;
}

.evento-produtos-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.evento-produtos-panel .panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.evento-produtos-toolbar {
    margin-bottom: 1.25rem;
}

.evento-produtos-search {
    max-width: 480px;
}

.evento-produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: min(70vh, 720px);
    overflow-y: auto;
    padding: 0.25rem;
}

.evento-produto-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 100px;
}

.evento-produto-card:hover {
    border-color: #b8cfe0;
    box-shadow: var(--shadow);
}

.evento-produto-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.evento-produto-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.evento-produto-card-media {
    flex: 0 0 100px;
    width: 100px;
    min-height: 100px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.evento-produto-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evento-produto-card-body {
    flex: 1;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
}

.evento-produto-card-body strong {
    font-size: 0.9rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evento-produto-card-body small {
    color: var(--muted);
    font-size: 0.8rem;
}

.evento-produto-card-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-right: 0.85rem;
    color: var(--border);
    font-size: 1.25rem;
}

.evento-produto-card.is-selected .evento-produto-card-check {
    color: var(--accent);
}

.evento-produtos-actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-section-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.url-copy-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.url-copy-row .input {
    flex: 1;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th,
.data-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.data-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover td {
    background-color: var(--accent-soft);
}

.data-table tbody tr:has(.empty-cell):hover td {
    background-color: transparent;
}

.url-col {
    max-width: 280px;
}

.url-cell {
    display: block;
    font-size: 0.75rem;
    word-break: break-all;
    margin-bottom: 0.35rem;
}

.data-table th.col-actions,
.data-table td.table-actions {
    width: auto;
    min-width: 13rem;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.data-table td.table-actions {
    display: table-cell;
}

.table-actions-flex {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.table-actions-flex .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.data-table td.table-actions > form {
    display: inline-block;
    margin: 0;
}

.badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: #e6f4ea;
    color: var(--success);
}

.badge-muted {
    background: #eef2f7;
    color: var(--muted);
}

.badge-warn {
    background: #fff7ed;
    color: #c2410c;
}

/* ---- Aside da visualização de produto ---- */
.ficha-aside-ver {
    padding: 0;
    overflow: hidden;
}

.ficha-aside-resumo {
    padding: 1rem 1.1rem 0.5rem;
}

.ficha-aside-titulo {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 600;
}

.ficha-aside-meta dt {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 0.6rem;
}

.ficha-aside-meta dt:first-child {
    margin-top: 0;
}

.ficha-aside-meta dd {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ficha-aside-meta code {
    font-size: 0.8rem;
    background: var(--bg);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.ficha-aside-ver .produto-pendencias-wrap {
    margin: 0;
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--border);
}

.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-list-item {
    border-bottom: 1px solid var(--border);
}

.event-list-item:last-child {
    border-bottom: none;
}

.event-list-link {
    display: block;
    padding: 0.85rem 0;
    color: inherit;
    text-decoration: none;
}

.event-list-link:hover {
    color: var(--accent);
}

/* Topbar mobile + drawer (desktop inalterado) */
.mobile-topbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

.mobile-topbar-burger,
.mobile-topbar-burger::before,
.mobile-topbar-burger::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.mobile-topbar-burger {
    position: relative;
}

.mobile-topbar-burger::before,
.mobile-topbar-burger::after {
    content: '';
    position: absolute;
    left: 0;
}

.mobile-topbar-burger::before {
    top: -6px;
}

.mobile-topbar-burger::after {
    top: 6px;
}

body.sidebar-open .mobile-topbar-burger {
    background: transparent;
}

body.sidebar-open .mobile-topbar-burger::before {
    top: 0;
    transform: rotate(45deg);
}

body.sidebar-open .mobile-topbar-burger::after {
    top: 0;
    transform: rotate(-45deg);
}

body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .app-shell {
        flex-direction: column;
    }

    .mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 260;
        align-items: center;
        gap: 0.65rem;
        height: 3.5rem;
        padding: 0 0.75rem;
        background: var(--sd-navy);
        color: #eef3fa;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
    }

    .mobile-topbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-topbar-brand {
        flex: 1;
        min-width: 0;
        font-weight: 700;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-topbar-logout {
        flex-shrink: 0;
        color: #eef3fa;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.35rem 0.55rem;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 270;
        background: rgba(15, 23, 42, 0.45);
    }

    .sidebar-backdrop[hidden] {
        display: none !important;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 280;
        width: min(280px, 88vw);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        padding: 1rem 0.85rem 1rem;
        overflow: hidden;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 8px 0 30px rgba(15, 23, 42, 0.25);
    }

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

    .sidebar-brand {
        flex: 0 0 auto;
        padding: 0.35rem 0.5rem 0.85rem;
        margin-bottom: 0.5rem;
    }

    .sidebar-company {
        font-size: 0.95rem;
    }

    .sidebar-nav {
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.25rem;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.15rem;
        padding-bottom: 0.35rem;
    }

    .sidebar-link {
        padding: 0.75rem 0.85rem;
        font-size: 1.02rem;
        flex-shrink: 0;
    }

    .sidebar-link--perfil {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.75rem;
        border-radius: 0 0 8px 8px;
    }

    .sidebar-footer {
        flex: 0 0 auto;
        margin-top: 0;
        padding-top: 0.25rem;
        background: var(--sd-navy);
    }

    .sidebar-user {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        margin-top: 0;
        padding: 0.65rem 0.65rem 0.15rem;
        border-top: none;
        background: var(--sd-navy);
    }

    .sidebar-user strong {
        font-size: 0.88rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .sidebar-user-email {
        word-break: break-all;
        line-height: 1.3;
    }

    /* Sair ja aparece na topbar no mobile */
    .sidebar-user .sidebar-logout {
        display: none;
    }

    .app-main {
        margin-left: 0;
        padding-top: 3.5rem;
    }

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

    .produto-form-aside {
        position: static;
    }

    .produto-imagem-card {
        max-width: none;
        flex-direction: column;
        align-items: stretch;
    }

    .produto-imagem-frame {
        width: 100%;
        max-width: 180px;
        height: 180px;
        margin: 0 auto;
        flex: none;
    }

    .produto-imagem-actions {
        width: 100%;
    }

    .produto-imagem-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .atributos-list--grid {
        grid-template-columns: 1fr;
    }

    .produto-form-actions {
        position: static;
    }

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

    .ficha-hero,
    .ficha-hero-marca {
        grid-template-columns: 1fr;
    }

    .ficha-dl {
        grid-template-columns: 1fr;
    }

    .form-grid-2,
    .form-grid-2-wide {
        grid-template-columns: 1fr;
    }

    .evento-produtos-grid {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .evento-produto-card-media {
        flex: 0 0 88px;
        width: 88px;
        min-height: 88px;
    }

    .page-header,
    .page-content,
    .site-footer,
    .alert {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding-top: 1.15rem;
    }

    .page-title {
        font-size: 1.35rem;
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    .dashboard-grid-mid,
    .dashboard-grid-bottom {
        grid-template-columns: 1fr;
    }

    .ftl-workspace {
        grid-template-columns: 1fr;
    }

    .master-context-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .master-context-banner .btn {
        width: 100%;
        justify-content: center;
    }
}

.ref-import-config {
    margin-bottom: 1.25rem;
}

.import-campo-grupo {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.import-campo-grupo--basico {
    background: var(--accent-soft);
    color: var(--accent);
}

.import-campo-grupo--extra {
    background: #f4f4f5;
    color: #52525b;
}

.import-campo-row--basico td:first-child code {
    font-weight: 600;
}

.export-colunas-list {
    margin-bottom: 1rem;
}

.export-colunas-grupo + .export-colunas-grupo {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.export-colunas-grupo-title {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.export-colunas-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
}

.export-colunas-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 70px;
}

.export-colunas-label:has(input:disabled) {
    cursor: default;
    opacity: 0.85;
    background: #fafafa;
}

.export-colunas-checkbox {
    flex-shrink: 0;
}

.export-colunas-nome {
    flex: 1;
    min-width: 0;
    font-weight: 800;
}

.export-colunas-slug {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.export-colunas-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.export-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.export-export-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}

.export-export-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.export-export-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.ref-campos-sistema,
.ref-campos-extras {
    margin-bottom: 1.25rem;
}

.ref-campos-sistema .card-title,
.ref-campos-extras .card-title {
    margin-bottom: 0.35rem;
}

.ref-add-attr {
    margin-bottom: 1.25rem;
}

.ref-add-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
}

.ref-add-form-grid .field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ref-add-form-grid .field-checkbox {
    flex-direction: row;
    align-items: center;
    padding-top: 1.75rem;
}

.field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #1e293b);
}

.field-hint {
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    line-height: 1.4;
}

.ref-add-form-actions {
    margin-top: 1rem;
}

.ref-table-actions--split {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.ref-table-hint {
    margin: 0;
}

.empty-cell {
    text-align: center;
    color: var(--text-muted, #64748b);
    padding: 1.5rem !important;
}

@media (max-width: 768px) {
    .ref-add-form-grid {
        grid-template-columns: 1fr;
    }

    .ref-add-form-grid .field-checkbox {
        padding-top: 0;
    }
}

.btn-secondary.is-disabled,
.btn-secondary[aria-disabled="true"],
.btn-primary.is-disabled,
.btn-primary[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.ficha-gerar-hint {
    margin-top: 0.35rem;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
    line-height: 1.35;
}

.import-campo-nome {
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.ref-table-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.ref-row-actions {
    white-space: nowrap;
}

.btn-danger-text {
    color: var(--error);
}

.btn-danger-text:hover:not(:disabled) {
    color: #a0181e;
    background: var(--highlight-soft);
}

.checkbox-label,
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.92rem;
}

.input-compact {
    width: 100%;
    max-width: 12rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 6px;
    background: #fff;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
}

.modal-overlay.is-hidden {
    display: none;
}

body.modal-open {
    overflow: hidden;
}

.modal-card {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.modal-card-wide {
    max-width: 960px;
}

#message-modal {
    z-index: 1100;
}

.modal-card-message {
    max-width: 420px;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
    align-items: center;
}

.modal-card-message--success {
    border-top: 4px solid var(--success);
}

.modal-card-message--error {
    border-top: 4px solid var(--error);
}

.modal-card-message--info {
    border-top: 4px solid var(--accent);
}

.message-modal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.modal-card-message--success .message-modal-icon {
    background: #d1fadf;
    color: var(--success);
}

.modal-card-message--error .message-modal-icon {
    background: var(--highlight-soft);
    color: var(--error);
}

.modal-card-message--info .message-modal-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

.message-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--sd-navy);
}

.message-modal-text {
    margin: 0 0 1.25rem;
    color: var(--muted);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-card-message--wide {
    max-width: 520px;
}

.confirm-modal-detail {
    width: 100%;
    margin: -0.35rem 0 1.15rem;
    text-align: left;
}

.confirm-faltantes {
    margin: 0 0 0.85rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid #f5c2c7;
    background: var(--highlight-soft);
    border-radius: 10px;
}

.confirm-faltantes-label {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--error);
}

.confirm-faltantes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.confirm-faltante-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem 0.35rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #f1aeb5;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(196, 30, 36, 0.06);
}

.confirm-faltante-chip strong {
    font-weight: 700;
}

.confirm-faltante-chip small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.confirm-faltantes-footer {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: center;
}

.message-modal-actions {
    width: 100%;
    display: flex;
    justify-content: center;
}

.message-modal-actions--split {
    justify-content: flex-end;
    gap: 0.75rem;
}

.prompt-modal-field {
    width: 100%;
    margin-bottom: 1rem;
    text-align: left;
}

.prompt-modal-field .input-textarea {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
}

#confirm-modal,
#prompt-modal {
    z-index: 1050;
}

.message-modal-actions .btn {
    min-width: 7rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #d8dee6);
}

.modal-header h3,
.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, #d8dee6);
}

.snapshot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .snapshot-grid {
        grid-template-columns: 1fr;
    }
}

.snapshot-block {
    background: var(--bg-muted, #f8fafc);
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
    padding: 1rem;
}

.snapshot-block h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.snapshot-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.snapshot-dl dt {
    font-weight: 600;
    color: #64748b;
}

.snapshot-dl dd {
    margin: 0;
}

.diff-antes {
    color: #b42318;
}

.diff-depois {
    color: #027a48;
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pendente {
    background: #fef0c7;
    color: #b54708;
}

.status-aprovada {
    background: #d1fadf;
    color: #027a48;
}

.status-recusada {
    background: #fee4e2;
    color: #b42318;
}

.solicitacoes-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.solicitacoes-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b54708;
    background: #fef0c7;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}

.solicitacoes-lote-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.solicitacoes-lote-contagem {
    font-weight: 600;
    margin-right: 0.25rem;
}

.solicitacoes-col-check {
    width: 2.5rem;
    text-align: center;
}

.solicitacao-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.solicitacao-meta p {
    margin: 0;
    line-height: 1.45;
}

.alteracoes-titulo {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
}

.data-table-compact td,
.data-table-compact th {
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
}

.btn-sm {
    padding: 0.38rem 0.7rem;
    font-size: 0.8125rem;
}

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

/* Painel Master */
.app-shell--master .sidebar--master {
    border-right-color: #2d3a52;
}

.sidebar-master-tag {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

.master-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #1f2a44 0%, #283656 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.master-context-banner strong {
    color: #fff;
}

/* Botão flutuante do modo empresa: canto inferior esquerdo, ao lado da navbar. */
.master-context-fab {
    position: fixed;
    left: calc(var(--sidebar-w) + 1rem);
    bottom: 1rem;
    z-index: 250;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.05rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1f2a44 0%, #283656 100%);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.master-context-fab:hover,
.master-context-fab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.36);
    background: linear-gradient(135deg, #26324f 0%, #30416a 100%);
    color: #fff;
    outline: none;
}

.master-context-fab-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 900px) {
    /* Sidebar vira menu off-canvas: botão volta para a borda da tela. */
    .master-context-fab {
        left: 1rem;
    }

    .master-context-fab-text {
        display: none;
    }

    .master-context-fab {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .master-context-fab-icon {
        font-size: 1.15rem;
    }
}

.inline-form {
    display: inline;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.badge-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.badge-muted {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.senha-provisoria-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0.75rem;
}

.senha-provisoria-box {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.senha-provisoria-row .senha-provisoria-box {
    flex: 1;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.senha-provisoria-row .btn {
    flex-shrink: 0;
    align-self: center;
}

.form-row--filters {
    max-width: 320px;
    margin-bottom: 1rem;
}

.master-empresa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.master-empresa-card {
    display: block;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.master-empresa-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.master-empresa-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.master-empresa-card h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.master-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.master-chip-warn,
.master-chip-count {
    display: inline-flex;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 600;
}

.master-empresa-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.master-empresa-meta div {
    margin: 0;
}

.master-empresa-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.master-empresa-meta dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
}

.master-empresa-meta-wide {
    grid-column: 1 / -1;
}

.master-empresa-meta-wide dd {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.master-import-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.master-import-data {
    font-weight: 600;
    color: var(--text);
}

.master-import-arquivo {
    display: block;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.35;
    word-break: break-word;
}

.master-import-arquivo-block {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.master-import-empty {
    color: var(--text-muted);
}

.master-empresa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.master-empresa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    cursor: pointer;
    font: inherit;
}

.master-empresa-chip.is-active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.master-filtro-banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-muted);
    font-size: 0.92rem;
}

.master-filtro-banner a {
    color: var(--primary);
    text-decoration: none;
}

.master-filtro-banner a:hover {
    text-decoration: underline;
}

.data-table--master-usuarios td {
    vertical-align: middle;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-card-warn .stat-value {
    color: #b45309;
}

.stats-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.dashboard-app {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-app > .panel,
.dashboard-app .dashboard-acoes {
    margin-top: 0;
}

.dashboard-app .panel-header {
    padding: 0.65rem 0.9rem;
}

.dashboard-app .panel-header h2 {
    font-size: 1rem;
}

.dashboard-app .panel-body {
    padding: 0.75rem 0.9rem;
}

.dashboard-app .product-list-link {
    gap: 0.65rem;
    padding: 0.45rem 0;
}

.dashboard-app .product-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.dashboard-app .product-list-ficha-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
}

.dashboard-app .empty-state {
    padding: 0.75rem 0.5rem;
}

.dashboard-kpis {
    margin-bottom: 0;
}

.dashboard-acoes {
    margin-top: 0;
    padding: 0.75rem 0.9rem;
}

.dashboard-acoes-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.dashboard-acoes-label {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.875rem;
}

.dashboard-acoes-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-grid-mid,
.dashboard-grid-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.dashboard-grid-bottom--solo {
    grid-template-columns: 1fr;
}

.dashboard-grid-mid--parceiro {
    grid-template-columns: 1fr;
}

.dashboard-grid-mid > .panel,
.dashboard-grid-bottom > .panel {
    margin-top: 0;
    height: auto;
    align-self: start;
}

.dashboard-panel-hint {
    margin-top: 0;
}

.dash-health-grid {
    display: grid;
    gap: 0.65rem;
}

.dash-health-pairs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.dash-health-pair {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.dash-health-pair:hover {
    border-color: #b8d4ea;
    background: var(--accent-soft);
}

.dash-health-pair.is-alerta {
    border-color: #f0d9a8;
    background: #fffaf0;
}

.dash-health-pair-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sd-navy);
    min-width: 0;
}

.dash-health-pair-nums {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.15;
}

.dash-health-pair-nums strong {
    font-size: 0.95rem;
    color: var(--sd-navy);
}

.dash-health-pair-nums em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
}

.dash-health-pair.is-alerta .dash-health-pair-nums em {
    color: #9a6b00;
}

.dash-fila-ok {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 520px) {
    .dash-health-pairs {
        grid-template-columns: 1fr;
    }
}

.dash-health-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfc;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dash-health-item:hover {
    border-color: #b8d4ea;
    background: var(--accent-soft);
}

.dash-health-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
}

.dash-health-bar {
    height: 6px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden;
}

.dash-health-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
}

.dash-queue-list,
.dashboard-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-queue-item,
.dashboard-event-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.dash-queue-item:last-child,
.dashboard-event-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-queue-item--alert {
    background: var(--highlight-soft);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 8px;
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.dash-queue-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dash-queue-meta {
    font-size: 0.8125rem;
    color: var(--muted);
    white-space: nowrap;
}

.dash-subsection + .dash-subsection,
.dash-subsection--fila {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.dash-subsection-title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
}

.dash-import-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dash-import-file {
    margin: 0;
    word-break: break-word;
}

.dash-import-file strong {
    font-size: 0.9rem;
}

.dash-import-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--sd-blue);
    font-size: 0.8125rem;
    font-weight: 600;
}

.dash-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.dash-import-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
}

.dash-import-empty .empty-state {
    padding: 0.5rem 1rem 0;
    margin: 0;
}

.dash-import-erros.import-erros-panel {
    margin-top: 0.45rem;
    padding: 0.55rem 0.65rem 0.6rem;
}

.dash-import-erros .import-erros-header {
    margin-bottom: 0.4rem;
}

.dash-import-erros .import-erros-title {
    font-size: 0.85rem;
}

.dash-import-erros .import-erros-list {
    max-height: none;
    gap: 0.3rem;
}

.dash-import-erros .import-erro-item {
    padding: 0.35rem 0.5rem;
    gap: 0.45rem;
}

.dash-import-erros .import-erro-msg {
    font-size: 0.8rem;
    line-height: 1.25;
}

.dash-import-erros .import-erros-truncados {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
}

.dash-import-status--concluido {
    color: var(--success);
}

.dash-import-status--concluido_com_erros,
.dash-import-status--erro {
    color: var(--error);
}

.dashboard-event-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-event-main a {
    color: inherit;
    text-decoration: none;
}

.dashboard-event-main a:hover strong {
    color: var(--accent);
}

@media (max-width: 1024px) {
    .dashboard-grid-mid,
    .dashboard-grid-bottom {
        grid-template-columns: 1fr;
    }
}

.detail-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.detail-list dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-list dd {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

.hint-warn {
    color: #b45309;
}

.modal-card-lg {
    max-width: 640px;
}

.form-group--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.master-empresa-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

.master-empresa-topbar-info {
    flex: 1;
    min-width: min(100%, 240px);
}

.master-empresa-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.master-empresa-form {
    gap: 1.25rem;
}

.master-config-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.master-config-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.master-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.import-modificacoes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.import-modificacao-card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #fff;
}

.import-modificacao-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.import-modificacao-ean {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.panel--form {
    margin-bottom: 1.25rem;
}

/* ?? Layout ficha t?cnica (editor visual) ?? */
.ftl-palette-subtitle {
    margin: 1rem 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
}

.ftl-palette-atributos {
    max-height: 280px;
    overflow-y: auto;
}

.ftl-palette-btn--attr strong {
    font-size: 0.85rem;
}

/* Painel de fichas técnicas */
.ftl-hub {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.ftl-hub-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.ftl-hub-title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}

.ftl-hub-lead {
    margin: 0;
    max-width: 36rem;
    color: var(--muted);
    font-size: 0.925rem;
    line-height: 1.45;
}

.ftl-hub-section-title {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.ftl-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.ftl-hub-card {
    display: flex;
    flex-direction: column;
    min-height: 168px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, #fff);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    font: inherit;
    color: inherit;
}

.ftl-hub-card:hover,
.ftl-hub-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
    outline: none;
}

.ftl-hub-card-preview {
    height: 88px;
    background:
        linear-gradient(135deg, var(--accent-soft), rgba(0, 0, 0, 0.02)),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 8px,
            rgba(0, 0, 0, 0.02) 8px,
            rgba(0, 0, 0, 0.02) 9px
        );
    background-size: cover;
    background-position: center top;
    position: relative;
}

.ftl-hub-card-preview--padrao {
    background: linear-gradient(145deg, var(--accent-soft), #fff);
}

.ftl-hub-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
}

.ftl-hub-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
    align-items: flex-start;
    flex: 1;
}

.ftl-hub-card-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.ftl-hub-btn-duplicar {
    font-size: 0.8rem;
    min-height: 2rem;
}

.ftl-hub-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #f6f6f6;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.ftl-hub-card-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ftl-hub-card-text {
    min-width: 0;
    flex: 1;
}

.ftl-hub-card-title {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    word-break: break-word;
}

.ftl-hub-card-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.ftl-hub-card-meta {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.ftl-editor-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.ftl-editor-context {
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 600;
}

/* Modal Criar nova ficha */
.ftl-create-modal-card {
    max-width: 560px;
}

.ftl-create-modal-card .modal-header {
    align-items: flex-start;
}

.ftl-create-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ftl-create-subtitle {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.4;
}

.ftl-create-body {
    gap: 1.35rem;
}

.ftl-create-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.ftl-create-section + .ftl-create-section {
    padding-top: 1.15rem;
    border-top: 1px solid var(--border);
}

.ftl-create-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ftl-create-section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.ftl-create-section-hint {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.4;
}

.ftl-create-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
}

.ftl-create-option {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    min-height: 100%;
    margin: 0;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ftl-create-option:hover {
    border-color: var(--accent);
}

.ftl-create-option:has(input:checked),
.ftl-create-option.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.ftl-create-option input {
    flex-shrink: 0;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
}

.ftl-create-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.ftl-create-option-body strong {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text, #1e293b);
}

.ftl-create-option-body small {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.ftl-create-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ftl-create-fields .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}

.ftl-create-fields .field-label {
    margin: 0;
}

.ftl-create-fields .field-hint,
.ftl-create-fields .hint {
    margin: 0;
    display: block;
}

.ftl-create-fields .input,
.ftl-create-fields .input-select {
    width: 100%;
}

.ftl-create-footer {
    gap: 0.65rem;
}

.ftl-propagar-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ftl-propagar-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ftl-propagar-checklist label:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.03));
}

.ftl-propagar-checklist input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.ftl-propagar-checklist small {
    display: block;
    color: var(--text-muted, #666);
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.ftl-propagar-marcas-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ftl-propagar-marcas-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ftl-propagar-marcas-list {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.35rem;
}

@media (max-width: 560px) {
    .ftl-create-options {
        grid-template-columns: 1fr;
    }
}

.ftl-templates-bar {
    padding: 0;
    overflow: hidden;
}

/* Configurações da ficha — abas */
.ftl-config-card {
    margin-bottom: 0.85rem;
    padding: 0;
    overflow: hidden;
}

.ftl-config-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted, #f8fafc);
    padding: 0 0.35rem;
}

.ftl-config-tab {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.72rem 1rem;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ftl-config-tab:hover:not(:disabled) {
    color: var(--text, #1e293b);
    background: rgba(255, 255, 255, 0.65);
}

.ftl-config-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: #fff;
}

.ftl-config-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ftl-config-body {
    padding: 1rem 1.1rem 1.1rem;
}

.ftl-config-panel {
    display: none;
}

.ftl-config-panel.is-active {
    display: block;
}

.ftl-config-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
}

.ftl-config-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ftl-config-block-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ftl-config-block-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.ftl-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.ftl-config-actions--primary {
    margin-top: 0.15rem;
}

.ftl-config-actions--secondary {
    padding-top: 0.15rem;
    border-top: 1px dashed var(--border);
}

.ftl-config-panel-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.65rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.ftl-config-rules-scroll {
    max-height: min(42vh, 380px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.ftl-config-block--previa {
    padding-left: 1.25rem;
    border-left: 1px solid var(--border);
}

.ftl-config-block.is-config-disabled > *:not(.ftl-config-block-head):not(.hint) {
    display: none !important;
}

.ftl-config-block.is-config-disabled .ftl-config-block-head {
    margin-bottom: 0.35rem;
}

/* Barra reorganizada do editor de ficha */
.ftl-editor-panels {
    display: flex;
    flex-direction: column;
}

.ftl-editor-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    margin: 0;
    border: 0;
}

.ftl-editor-panel + .ftl-editor-panel,
.ftl-editor-panels-grid {
    border-top: 1px solid var(--border);
}

.ftl-editor-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.ftl-editor-panels-grid > .ftl-editor-panel {
    height: auto;
    min-height: 0;
}

.ftl-editor-panels-grid > .ftl-editor-panel + .ftl-editor-panel {
    border-top: 0;
    border-left: 1px solid var(--border);
}

.ftl-editor-panel--marca-cores {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-top: 1px solid var(--border) !important;
}

.ftl-editor-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ftl-editor-panel-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.ftl-editor-panel-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.ftl-editor-panel-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.65rem;
    min-width: 0;
}

.ftl-editor-panel-controls--stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.55rem;
}

/* Modelo: select e botões juntos, sem “vale” no meio */
.ftl-editor-panels > .ftl-editor-panel:first-child .ftl-editor-panel-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}

.ftl-editor-panels > .ftl-editor-panel:first-child .ftl-editor-field {
    flex: 1 1 14rem;
    max-width: min(100%, 26rem);
}

.ftl-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.ftl-editor-field .field-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.ftl-editor-field .input-select,
.ftl-editor-field .input {
    width: 100%;
    min-width: 0;
}

.ftl-editor-field-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.ftl-editor-field-row .input-select {
    flex: 1 1 auto;
    min-width: 0;
}

.ftl-editor-field-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ftl-editor-panel-actions {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0;
}

.ftl-editor-panel-controls--stack .ftl-editor-panel-actions {
    justify-content: flex-start;
}

.ftl-editor-panels .ftl-marcas-associadas-wrap {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

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

.ftl-templates-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 0.9rem 1.25rem;
}

.ftl-templates-row + .ftl-templates-row {
    border-top: 1px solid var(--border);
}

.ftl-templates-row .field {
    margin-bottom: 0;
}

.ftl-field-inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.ftl-field-inline .field-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.ftl-field-inline .input-select {
    width: 100%;
    min-width: 0;
    height: 2.375rem;
    padding: 0 0.75rem;
    line-height: 2.375rem;
    box-sizing: border-box;
}

.ftl-field-template {
    min-width: 0;
}

.ftl-field-produto {
    min-width: 0;
}

.ftl-field-marca-assoc {
    min-width: 0;
}

.ftl-marcas-associadas-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.ftl-marcas-associadas-wrap .field-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
}

.ftl-marcas-associadas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ftl-marca-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.35rem 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
}

.ftl-marca-chip-remover {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.35rem;
    border-radius: 999px;
}

.ftl-marca-chip-remover:hover {
    color: var(--error, #c41e24);
    background: rgba(0, 0, 0, 0.04);
}

.ftl-marca-chip-bg {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    border-radius: 4px;
}

.ftl-marca-chip-bg:hover {
    color: var(--primary-strong, #6b1028);
    background: rgba(0, 0, 0, 0.04);
}

.ftl-hub-card-preview {
    position: relative;
}

.ftl-hub-card-decorativo {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.ftl-toolbar-hint {
    margin: 0;
    max-width: 28rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.ftl-inspector-lead {
    margin: 0 0 0.75rem;
}

.ftl-templates-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
}

.ftl-templates-actions .btn-icon-only {
    min-width: 2.375rem;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .ftl-config-split {
        grid-template-columns: 1fr;
    }

    .ftl-config-block--previa {
        padding-left: 0;
        border-left: 0;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .ftl-config-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .ftl-config-tab {
        flex-shrink: 0;
    }

    .ftl-editor-panels-grid {
        grid-template-columns: 1fr;
    }

    .ftl-editor-panels-grid > .ftl-editor-panel + .ftl-editor-panel {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .ftl-editor-panel-controls:not(.ftl-editor-panel-controls--stack) {
        flex-direction: column;
        align-items: stretch;
    }

    .ftl-editor-field-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ftl-editor-field-row .btn {
        width: 100%;
    }

    .ftl-templates-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ftl-field-inline {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .ftl-templates-actions {
        justify-content: flex-start;
    }
}

/* Gerar ficha / cat?logo (impress?o) */
body.gerar-ficha-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 104, 165, 0.12), transparent 55%),
        linear-gradient(180deg, #e8eef6 0%, #d9e2ee 100%);
}

.gerar-doc {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(244, 247, 251, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(46, 62, 97, 0.06);
}

.gerar-doc-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0.85rem;
}

.gerar-doc-header--compact {
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.75rem 1.25rem 0.65rem;
}

.gerar-doc-header--compact .gerar-doc-header-main {
    gap: 0.2rem;
}

.gerar-doc-header--compact .gerar-doc-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.gerar-doc-header--compact .gerar-doc-title {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.gerar-doc-header--compact .gerar-doc-meta {
    margin: 0;
    font-size: 0.82rem;
}

.gerar-doc-header--compact .gerar-doc-header-actions {
    gap: 0.45rem;
}

.gerar-doc-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
}

.gerar-doc-back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sd-blue);
    text-decoration: none;
}

.gerar-doc-back:hover {
    text-decoration: underline;
}

.gerar-doc-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-blue);
}

.gerar-doc-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--sd-navy);
}

.gerar-doc-meta {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.gerar-doc-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.gerar-doc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
}

.gerar-doc-status[data-state="loading"] {
    border-color: #b6d7ef;
    background: var(--accent-soft);
    color: var(--sd-blue);
}

.gerar-doc-status[data-state="ready"] {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.gerar-doc-status[data-state="error"] {
    border-color: #fecaca;
    background: var(--highlight-soft);
    color: var(--error);
}

.gerar-doc-tip {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.65rem 1.25rem 1rem;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.45;
}

.gerar-doc-tip strong {
    color: var(--sd-navy);
}

.gerar-doc-tip kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--sd-navy);
}

.gerar-doc-tip--alerta {
    margin: 0 1.25rem 1rem;
    max-width: none;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
}

.gerar-doc-tip--alerta strong {
    color: #78350f;
}

.gerar-doc-avisos {
    max-width: 1100px;
    margin: 0 auto 1rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: var(--accent-soft);
    color: var(--sd-navy);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gerar-doc-erro {
    max-width: 640px;
    margin: 1.5rem auto;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid #fecaca;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--error);
    text-align: center;
}

.gerar-doc-stage {
    position: relative;
    min-height: 50vh;
    padding: 1.25rem 1rem 2.5rem;
}

.gerar-doc-stage--catalogo {
    padding-top: 0.5rem;
}

.gerar-doc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 280px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.gerar-doc-loading.is-hidden {
    display: none;
}

.gerar-doc-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #c5d4e6;
    border-top-color: var(--sd-blue);
    border-radius: 50%;
    animation: gerar-doc-spin 0.75s linear infinite;
}

@keyframes gerar-doc-spin {
    to { transform: rotate(360deg); }
}

/* Toolbar legada (lote / cat?logo p?blico) */
.gerar-ficha-toolbar {
    display: flex;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    max-width: 794px;
    padding: 1rem 1rem 0;
}

.gerar-ficha-wrap {
    display: flex;
    justify-content: center;
    padding: 0 1rem 2rem;
}

.gerar-ficha-canvas {
    position: relative;
    background: #fff;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 40px rgba(46, 62, 97, 0.14);
    overflow: hidden;
}

.gerar-ficha-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

.gerar-ficha-bg-decorativo {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background-color: transparent;
}

.gerar-ficha-bg-decorativo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
}

.gerar-ficha-bg-decorativo.is-fit-contain .gerar-ficha-bg-decorativo-img {
    object-fit: contain;
}

.gerar-ficha-bg-decorativo.is-fit-cover .gerar-ficha-bg-decorativo-img {
    object-fit: cover;
}

.gerar-ficha-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.gerar-ficha-elementos {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.gerar-ficha-element {
    position: absolute;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
}

.gerar-ficha-element--imagem_produto,
.gerar-ficha-element--logo_marca,
.gerar-ficha-element--imagem_formato {
    overflow: hidden;
    padding: 0;
}

.gerar-ficha-formato-mask {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.gerar-ficha-formato-mask--round {
    border-radius: 50%;
    overflow: hidden;
    /* clip-path ajuda no browser; no PDF a máscara é rasterizada antes do html2canvas */
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
}

.gerar-ficha-formato-mask--square {
    border-radius: 8px;
    clip-path: inset(0 round 8px);
    -webkit-clip-path: inset(0 round 8px);
}

.gerar-ficha-formato-mask--star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.gerar-ficha-element--imagem_formato img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
}

.gerar-ficha-element--imagem_produto img,
.gerar-ficha-element--logo_marca img,
.gerar-ficha-element img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
}

.gerar-ficha-element--linha_horizontal {
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    min-height: 1px;
    line-height: 0;
}

.gerar-fichas-lista {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 0 1rem 2rem;
}

.gerar-ficha-lote-item {
    page-break-inside: avoid;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.gerar-ficha-lote-item + .gerar-ficha-lote-item {
    page-break-before: always;
    break-before: page;
}

.gerar-ficha-lote-titulo {
    width: 100%;
    max-width: 794px;
    margin: 0 auto 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sd-navy);
}

.gerar-fichas-status {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--muted);
}

.gerar-fichas-print-hint {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

body.gerar-fichas-body .gerar-ficha-toolbar {
    max-width: 100%;
    padding: 1rem;
    flex-wrap: wrap;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body.gerar-ficha-body:not(.gerar-catalogo-body) {
        width: 210mm;
        height: auto;
        margin: 0;
        padding: 0;
        background: #fff;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .no-print,
    .app-loading-overlay,
    #gerar-ficha-erro,
    #gerar-fichas-erro,
    #gerar-catalogo-erro,
    .gerar-ficha-toolbar,
    .gerar-doc,
    .gerar-doc-loading,
    .gerar-doc-erro,
    .gerar-doc-avisos {
        display: none !important;
    }

    body.gerar-ficha-body {
        background: #fff !important;
    }

    .gerar-doc-stage {
        min-height: 0;
        padding: 0 !important;
    }

    .gerar-ficha-lote-titulo {
        display: none !important;
    }

    /* Fichas: A4 fixo. Catálogo usa o tamanho do template (outro @media print). */
    body.gerar-ficha-body:not(.gerar-catalogo-body) .gerar-ficha-wrap,
    body.gerar-ficha-body:not(.gerar-catalogo-body) .gerar-ficha-lote-item {
        width: 210mm !important;
        height: 297mm !important;
        max-width: 210mm;
        max-height: 297mm;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        overflow: hidden;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body.gerar-ficha-body:not(.gerar-catalogo-body) .gerar-fichas-lista {
        display: block;
        gap: 0;
        padding: 0;
        margin: 0;
        width: 210mm;
    }

    body.gerar-ficha-body:not(.gerar-catalogo-body) .gerar-ficha-canvas {
        width: 210mm !important;
        height: 297mm !important;
        max-width: 210mm;
        max-height: 297mm;
        margin: 0 !important;
        box-shadow: none;
        transform: none !important;
        zoom: 1 !important;
        overflow: hidden;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.gerar-ficha-body.is-printing .gerar-ficha-wrap,
    body.gerar-ficha-body.is-printing .gerar-ficha-lote-item,
    body.gerar-ficha-body.is-printing .gerar-ficha-canvas {
        transform: none !important;
        zoom: 1 !important;
    }

    body.gerar-fichas-body .gerar-ficha-lote-item {
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body.gerar-fichas-body .gerar-ficha-lote-item:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .gerar-ficha-bg,
    .gerar-ficha-bg-decorativo,
    .gerar-ficha-bg-decorativo-img,
    .gerar-ficha-bg-img,
    .gerar-ficha-element {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

.ftl-app {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ftl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.ftl-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ftl-toolbar-actions {
    margin-left: auto;
    align-items: center;
}

.ftl-toolbar .btn,
.ftl-toolbar .ftl-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}

.ftl-toolbar .btn-sm {
    font-size: 0.8125rem;
}

.ftl-upload-label {
    cursor: pointer;
    margin: 0;
}

.field-inline {
    display: flex;
    gap: 0.25rem;
    min-width: 5.5rem;
    align-items: center;
    gap: 20px;
}

.input-sm {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

.ftl-status {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.ftl-status--success {
    color: #15803d;
}

.ftl-status--info {
    color: #0369a1;
}

.ftl-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .ftl-workspace {
        grid-template-columns: 1fr;
    }
}

.ftl-palette-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ftl-palette-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ftl-palette-btn:hover {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.ftl-palette-btn strong {
    font-size: 0.9rem;
}

.ftl-palette-btn small {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

.ftl-canvas-wrap {
    padding: 1rem;
    overflow: auto;
}

#ctp-panel-bloco .ftl-canvas-wrap {
    min-height: min(70vh, 640px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ftl-canvas-scaler {
    margin: 0 auto;
    position: relative;
}

.ftl-canvas {
    position: relative;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    user-select: none;
}

#ctp-bloco-canvas,
#ctp-bloco-elements {
    overflow: hidden;
}

.ftl-canvas-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.ftl-canvas-bg.has-bg {
    background-color: #fff;
}

.ftl-canvas-bg-decorativo {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    cursor: move;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Não intercepta cliques nos textos/elementos acima; só captura quando selecionado. */
    pointer-events: none;
}

.ftl-canvas-bg-decorativo.is-hidden {
    display: none;
}

.ftl-canvas-bg-decorativo.is-selected:not(.is-locked) {
    pointer-events: auto;
}

.ftl-canvas-bg-decorativo.is-locked {
    cursor: default;
    pointer-events: none;
}

.ftl-canvas-bg-decorativo.is-locked .ftl-resize-handle-decorativo {
    display: none;
}

.ftl-canvas-bg-decorativo .ftl-resize-handle-decorativo {
    pointer-events: auto;
    z-index: 3;
}

.ftl-canvas-bg-decorativo img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
    pointer-events: none;
}

.ftl-canvas-bg-decorativo.is-fit-contain img {
    object-fit: contain;
}

.ftl-canvas-bg-decorativo.is-fit-cover img {
    object-fit: cover;
}

.ftl-field-cor-tema .input-color {
    width: 2.75rem;
    height: 2rem;
    padding: 0.1rem;
    cursor: pointer;
}

.ftl-opacity-value {
    font-weight: 600;
    color: var(--text-muted, #666);
}

.input-range {
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.ftl-decorativo-drag-handle {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 0.25rem 0.55rem;
    border: 1px dashed var(--primary, #8B1538);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary, #8B1538);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: move;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.ftl-decorativo-drag-handle.is-hidden {
    display: none;
}

.ftl-elements {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.ftl-element {
    position: absolute;
    border: 1px dashed rgba(37, 99, 235, 0.45);
    background: rgba(255, 255, 255, 0.72);
    padding: 4px 6px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: move;
    overflow: visible;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    z-index: 3;
}

.ftl-element.is-selected {
    border: 2px solid var(--primary, #2563eb);
    background: rgba(255, 255, 255, 0.92);
    z-index: 2;
}

.ftl-snap-guide {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    background: #f43f5e;
}

.ftl-snap-guide--v {
    top: 0;
    bottom: 0;
    width: 1px;
}

.ftl-snap-guide--h {
    left: 0;
    right: 0;
    height: 1px;
}

.ftl-element--imagem_produto,
.ftl-element--logo_marca,
.ftl-element--imagem_formato {
    overflow: hidden;
    padding: 0;
    background: rgba(241, 245, 249, 0.85);
}

.ftl-element--imagem_formato {
    background: transparent;
}

.ftl-element-formato {
    padding: 0;
}

.ftl-element--linha_horizontal {
    padding: 0 !important;
    border: none !important;
    min-height: 1px;
    background: #c8c8c8;
    box-shadow: none;
}

.ftl-element-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box;
}

.ftl-element-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ftl-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: var(--primary, #2563eb);
    border-radius: 2px 0 0 0;
    cursor: se-resize;
    pointer-events: auto;
}

.ftl-inspector-form .field {
    margin-bottom: 0.75rem;
}

.ftl-inspector-actions {
    margin-top: 0.5rem;
}

/* Master ? empresas, filtros e dashboard avan?ado */
.stat-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stats-grid--dashboard {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.master-filtros {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.master-filtros-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.master-filtros-busca {
    max-width: 100%;
    margin-bottom: 0;
}

.master-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.master-filtro-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.master-filtro-chip:hover {
    border-color: var(--primary);
}

.master-filtro-chip.is-active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    font-weight: 600;
}

.master-completude {
    font-weight: 600;
    font-size: 0.88rem;
}

.master-completude--ok { color: #15803d; }
.master-completude--warn { color: #b45309; }
.master-completude--bad { color: #b91c1c; }
.master-completude--empty { color: var(--text-muted); font-weight: 500; }

.master-empresa-alertas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.master-alerta-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.master-tag-warn,
.master-tag-muted {
    display: inline-flex;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.master-tag-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.master-tag-muted {
    background: var(--surface-2);
    color: var(--text-muted);
}

.data-table--master-empresas td {
    vertical-align: middle;
}

.row-muted {
    opacity: 0.65;
}

.master-alertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.master-alerta-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-1);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.master-alerta-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.master-alerta-card strong {
    font-size: 1.4rem;
    line-height: 1.1;
}

.master-alerta-card span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.master-alerta-card--warn strong { color: #b45309; }
.master-alerta-card--accent strong { color: var(--primary); }
.master-alerta-card--muted strong { color: var(--text-muted); }

.master-empresa-header {
    margin-bottom: 0;
}

.master-empresa-header-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.config-campos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.config-campo-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    margin: 0;
}

.form-subtitle {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.form-group--full {
    grid-column: 1 / -1;
}

.catalogo-ficha-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.catalogo-ficha-toolbar-info strong {
    display: block;
    font-size: 1.1rem;
    color: var(--sd-navy, #0f2744);
}

.catalogo-ficha-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
}

.catalogo-ficha-print-hint {
    margin: 0 1rem 1rem;
    max-width: none;
    padding: 0;
}


/* Cat?logo PDF */
.ctp-hub-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    width: 100%;
}

.ctp-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex-shrink: 0;
}

.ctp-hub-actions .btn,
.ctp-hub-btn {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
}

.ctp-hub-actions .btn-primary {
    box-shadow: 0 4px 14px rgba(0, 104, 165, 0.3);
}

.ctp-hub-actions .btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(0, 104, 165, 0.34);
    transform: translateY(-1px);
}

.ctp-hub-actions .btn-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ctp-hub-lista {
    width: 100%;
}

.ctp-hub-lista-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ctp-hub-filtros {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) minmax(160px, 1fr) minmax(280px, 1.3fr) auto;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
}

.ctp-hub-filtros .field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}

.ctp-hub-filtros .field-label {
    display: block;
    line-height: 1.2;
}

.ctp-hub-filtros .field .input,
.ctp-hub-filtros .field .input-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ctp-hub-filtro-periodo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    min-width: 0;
}

.ctp-hub-filtros-acoes {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 2.5rem;
}

.ctp-hub-filtros-acoes .btn {
    white-space: nowrap;
}

.ctp-detalhe-nome-box {
    margin-bottom: 0;
}

.ctp-detalhe-nome-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ctp-detalhe-nome-row .input {
    flex: 1;
}

@media (max-width: 900px) {
    .ctp-hub-filtros {
        grid-template-columns: 1fr 1fr;
    }

    .ctp-hub-filtro-q,
    .ctp-hub-filtro-periodo,
    .ctp-hub-filtros-acoes {
        grid-column: 1 / -1;
    }

    .ctp-hub-filtros-acoes {
        justify-content: flex-start;
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .ctp-hub-filtros {
        grid-template-columns: 1fr;
    }

    .ctp-hub-filtro-periodo {
        grid-template-columns: 1fr;
    }

    .ctp-detalhe-nome-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.ctp-hub-lista .table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ctp-hub-lista .data-table {
    width: 100%;
}

.ctp-hub-lista .data-table tbody tr {
    cursor: pointer;
}

.ctp-hub-lista .data-table tbody tr:hover td {
    background: rgba(37, 99, 235, 0.04);
}

.ctp-emissao-row.is-active td {
    background: rgba(37, 99, 235, 0.08);
}

.ctp-detalhe-modal-card {
    max-width: min(560px, 96vw);
}

.ctp-detalhe-modal-card .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ctp-detalhe-header {
    flex: 0 0 auto;
    align-items: flex-start;
}

.ctp-detalhe-footer {
    flex: 0 0 auto;
    gap: 0.5rem;
}

.ctp-detalhe-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
}

.ctp-detalhe-produtos {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 120px;
    max-height: min(320px, 40vh);
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.ctp-detalhe-header-text {
    min-width: 0;
    padding-right: 0.5rem;
}

.ctp-detalhe-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.ctp-detalhe-header #ctp-detalhe-titulo {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    word-break: break-word;
}

.ctp-detalhe-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ctp-detalhe-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.ctp-detalhe-meta-grid p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
    min-width: 0;
}

.ctp-detalhe-meta-grid span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.ctp-emitir-meta-grid span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctp-detalhe-meta-grid strong {
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ctp-detalhe-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
    min-width: 0;
}

.ctp-detalhe-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.ctp-detalhe-meta-value {
    font-size: 0.92rem;
    color: var(--text, #0f172a);
    line-height: 1.35;
    word-break: break-word;
}

.ctp-detalhe-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ctp-detalhe-section-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.ctp-detalhe-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
}

.ctp-detalhe-produto-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border, #eef2f7);
}

.ctp-detalhe-produto-item:last-child {
    border-bottom: none;
}

.ctp-detalhe-produto-num {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.ctp-detalhe-produto-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ctp-detalhe-produto-info strong {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text, #0f172a);
}

.ctp-detalhe-produto-info small {
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
}

.ctp-detalhe-produto-vazio {
    padding: 1rem 0.85rem;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}

.ctp-badge-congelado,
.ctp-badge-legado {
    display: inline-block;
    margin-top: 0.15rem;
    width: fit-content;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.ctp-badge-congelado {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.ctp-badge-legado {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

@media (max-width: 720px) {
    .ctp-detalhe-meta-grid {
        grid-template-columns: 1fr;
    }
}

.ctp-grade-presets {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
}

.ctp-grade-presets .field-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.ctp-grade-presets-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ctp-preset-btn {
    min-width: 2.25rem;
    justify-content: center;
}

.ctp-preset-btn.is-active {
    background: var(--primary, #1a1a1a);
    color: #fff;
    border-color: transparent;
}

/* Formulário da aba Página */
.ctp-page-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.9rem 1rem 1rem;
}

.ctp-page-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0;
    margin: 0;
    border: 0;
}

.ctp-page-section + .ctp-page-section {
    border-top: 1px solid var(--border);
}

.ctp-page-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ctp-page-section-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #1e293b);
}

.ctp-page-section-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.ctp-page-section .field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}

.ctp-page-section .field-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.ctp-page-section .input,
.ctp-page-section .input-select {
    width: 100%;
    box-sizing: border-box;
}

.ctp-page-margins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.65rem;
}

.ctp-page-margins-span {
    grid-column: 1 / -1;
}

.ctp-page-summary {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--muted);
}

.ctp-page-summary:empty {
    display: none;
}

.ctp-page-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ctp-page-status {
    font-size: 0.8rem;
    line-height: 1.35;
}

.ctp-page-inline-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.ctp-page-inline-hint .hint {
    margin: 0;
    flex: 1 1 10rem;
}

.ctp-paginacao-campos {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.15rem;
    padding: 0.65rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(15, 23, 42, 0.02);
}

.ctp-paginacao-campos.is-hidden {
    display: none;
}

.ctp-page-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.65rem;
}

.ctp-page-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.ctp-page-form .ctp-pagina-toggles {
    gap: 0.45rem;
}

.ctp-page-form .field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    flex-direction: row;
}

.ctp-page-form .field-checkbox input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.ctp-page-form .field-checkbox span {
    line-height: 1.35;
    font-size: 0.88rem;
}

.ctp-safe-area {
    position: absolute;
    border: 1px dashed rgba(220, 38, 38, 0.55);
    box-shadow: inset 0 0 0 9999px rgba(220, 38, 38, 0.04);
    pointer-events: none;
    z-index: 5;
}

.ctp-safe-area.is-hidden {
    display: none;
}

.ctp-edicao-travada .ctp-preview-slot,
.ctp-edicao-travada .ctp-capa-drag,
.ctp-edicao-travada .ftl-element,
.ctp-edicao-travada .ftl-resize-handle {
    cursor: default !important;
}

.ctp-pagina-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ctp-emitir-atalho-banner {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border, #d8dee6);
    background: var(--accent-soft, rgba(0, 104, 165, 0.08));
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text, #1e293b);
}

.ctp-emitir-atalho-banner.is-hidden {
    display: none;
}

.ctp-emitir-atalho-banner strong {
    font-size: 0.9rem;
}

.ctp-emitir-atalho-banner span {
    color: var(--muted, #64748b);
    font-size: 0.84rem;
}

.ctp-emitir-opcao-card {
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    background: #fff;
    margin: 0 0 0.5rem;
}

.ctp-emitir-opcao-card:has(input:checked) {
    border-color: var(--accent, #0068a5);
    background: var(--accent-soft, rgba(0, 104, 165, 0.08));
}

.ctp-emitir-opcao-card strong {
    display: block;
    font-size: 0.92rem;
}

.ctp-emitir-opcao-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
    line-height: 1.35;
    font-weight: 400;
}

.ctp-emitir-marcas-multi {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ctp-emitir-marcas-multi.is-hidden {
    display: none;
}

.ctp-emitir-marcas-multi-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ctp-emitir-marcas-multi-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ctp-emitir-marcas-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ctp-emitir-marcas-filtros > * {
    flex: 1 1 200px;
    min-width: 0;
}

.ctp-emitir-pais-aviso {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
}

.ctp-emitir-pais-aviso a {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.ctp-emitir-marcas-titulo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ctp-marcas-contador {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ctp-marcas-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: 400px;
    overflow: auto;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.ctp-marcas-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ctp-marcas-grupo.is-hidden {
    display: none;
}

.ctp-marcas-grupo-head {
    position: sticky;
    top: -0.65rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0 0.3rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
}

.ctp-marcas-grupo-head input {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent);
}

.ctp-marcas-grupo-nome {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctp-marcas-grupo-contagem {
    flex-shrink: 0;
    font-size: 0.73rem;
    color: var(--muted);
}

.ctp-marcas-grupo-selecao {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.ctp-marcas-grupo-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-left: 1.4rem;
}

.ctp-marcas-checkboxes--plana .ctp-marcas-grupo-head {
    display: none;
}

.ctp-marcas-checkboxes--plana .ctp-marcas-grupo-itens {
    padding-left: 0;
}

.ctp-marca-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    margin: 0;
    padding: 0.25rem 0.8rem 0.25rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.83rem;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ctp-marca-check.is-hidden {
    display: none;
}

.ctp-marca-check:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ctp-marca-check:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 5px rgba(0, 104, 165, 0.28);
}

.ctp-marca-check:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ctp-marca-chip-avatar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Iniciais ficam no fundo: se a logo não carregar, elas continuam visíveis. */
.ctp-marca-chip-avatar::before {
    content: attr(data-inicial);
}

.ctp-marca-chip-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
    background: #fff;
}

.ctp-marca-check:has(input:checked) .ctp-marca-chip-avatar {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ctp-marca-chip-nome {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctp-marca-chip-check {
    display: none;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.ctp-marca-check:has(input:checked) .ctp-marca-chip-check {
    display: inline;
}

.ctp-emitir-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.ctp-emitir-step {
    border: 1px solid var(--border, #ddd);
    background: #fff;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font: inherit;
    cursor: default;
    color: var(--text-muted, #64748b);
}

.ctp-emitir-step.is-active {
    background: var(--primary, #1a1a1a);
    color: #fff;
    border-color: transparent;
}

.ctp-emitir-step.is-done {
    border-color: var(--success, #16a34a);
    color: var(--success, #16a34a);
}

.ctp-emitir-marca-opcoes {
    border: 0;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ctp-emitir-marca-opcoes legend {
    margin-bottom: 0.35rem;
}

.ctp-emitir-marca-opcoes .field-checkbox {
    margin: 0;
}

.ctp-emitir-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-top: 1.25rem;
}

/* Números-chave em destaque no passo Revisar (reduz a densidade do grid). */
.ctp-emitir-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.ctp-emitir-stat {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--accent-soft, rgba(0, 104, 165, 0.06));
    text-align: center;
    justify-content: center;
}

.ctp-emitir-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sd-navy, #0f2744);
}

.ctp-emitir-stat-lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.ctp-emitir-stat-sub {
    font-size: 0.72rem;
    color: var(--muted, #64748b);
}

.ctp-emitir-produtos-resumo {
    margin-top: 1.25rem;
}

.ctp-emitir-resumo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ctp-emitir-resumo-head-main {
    min-width: 0;
}

.ctp-emitir-resumo-toggle {
    flex-shrink: 0;
}

.ctp-emitir-resumo-corpo.is-hidden {
    display: none;
}

.ctp-emitir-resumo-titulo {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sd-navy);
}

.ctp-emitir-marcas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
    max-height: 7.5rem;
    overflow: auto;
}

.ctp-emitir-marca-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--accent-soft, rgba(0, 104, 165, 0.08));
    color: var(--sd-navy, #1e293b);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctp-emitir-marca-chip em {
    font-style: normal;
    font-weight: 700;
    color: var(--sd-blue, #0068a5);
    opacity: 0.9;
}

.ctp-emitir-marca-chip--more {
    background: #fff;
    color: var(--muted);
    font-weight: 600;
}

.ctp-emitir-resumo-mais {
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: rgba(15, 23, 42, 0.03);
}

.ctp-emitir-produtos-resumo {
    margin-top: 1rem;
    min-width: 0;
}

.ctp-emitir-resumo-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.ctp-emitir-resumo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
}

.ctp-emitir-resumo-item:last-child {
    border-bottom: none;
}

.ctp-emitir-resumo-ordem {
    flex: 0 0 1.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}

.ctp-emitir-resumo-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctp-emitir-resumo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ctp-emitir-resumo-ph {
    color: var(--sd-blue);
    font-size: 0.85rem;
}

.ctp-emitir-resumo-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ctp-emitir-resumo-info strong {
    font-size: 0.92rem;
    color: var(--sd-navy);
    line-height: 1.3;
}

.ctp-emitir-resumo-info small {
    color: var(--muted);
    font-size: 0.8rem;
}

.ctp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.85rem 0;
    padding: 0.65rem 0.85rem;
    align-items: center;
    justify-content: flex-start;
}

.ctp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border, #ddd);
    background: transparent;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text, #1e293b);
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ctp-tab:hover {
    border-color: var(--accent, #0068a5);
}

.ctp-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.07);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.ctp-tab.is-active {
    background: var(--primary, #1a1a1a);
    color: #fff;
    border-color: transparent;
}

.ctp-tab.is-active .ctp-tab-num {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Editor catálogo: barra modelo / prévia compactas */
.ctp-app .ctp-editor-panels {
    margin: 0;
}

.ctp-app > .ctp-editor-panels {
    margin-bottom: 0;
}

.ctp-app .ctp-bloco-previa-bar {
    margin-bottom: 0.85rem;
}

.ctp-app .ctp-editor-panels > .ftl-editor-panel:first-child .ftl-editor-field {
    flex: 1 1 14rem;
    max-width: min(100%, 26rem);
}

.ctp-app .ctp-bloco-previa-bar .ftl-editor-field {
    flex: 1 1 16rem;
    max-width: min(100%, 32rem);
}

.ctp-app .ftl-editor-panel-controls {
    justify-content: flex-start;
}

.ctp-app .ftl-editor-panel-actions {
    justify-content: flex-start;
}

.ctp-form-card {
    padding: 1.25rem;
}

.ctp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.ctp-form-grid .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}

.ctp-form-grid .input,
.ctp-form-grid .input-select,
.ctp-form-grid select.input,
.ctp-form-grid textarea.input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ctp-emitir-panel .ctp-form-grid {
    max-width: 720px;
}

.ctp-produtos-filtros .input,
.ctp-produtos-filtros .input-select,
.ctp-produtos-filtros select.input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ctp-subbox {
    margin: 0.75rem 0 0 1.25rem;
    padding: 0.75rem;
    border-left: 3px solid var(--border, #ddd);
}

.ctp-capa-drag .ftl-resize-handle,
.ctp-preview-slot .ftl-resize-handle {
    z-index: 5;
}

.ctp-capa-drag.is-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.ctp-capa-drag.is-desc {
    font-size: 14px;
    text-align: center;
}

.ctp-preview-wrap-inner {
    padding: 1rem;
}

.ctp-preview-slot {
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden !important;
    contain: paint;
    isolation: isolate;
}

.ctp-preview-slot-num {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
}

.ctp-preview-slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    font-size: 0.8rem;
}

.ctp-preview-slot .catalogo-bloco-el {
    position: absolute;
    border: none;
    background: transparent;
    padding: 0;
}

.gerar-catalogo-paginas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 1rem 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.gerar-catalogo-pagina-shell {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 40px rgba(46, 62, 97, 0.14);
    background: #fff;
    max-width: 100%;
    /* Scroll mais leve em catálogos longos */
    content-visibility: auto;
    contain-intrinsic-size: 640px 900px;
}

.gerar-catalogo-pagina {
    page-break-after: always;
    break-after: page;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: #fff;
}

.gerar-catalogo-pagina .gerar-ficha-canvas {
    box-shadow: none;
    border-radius: 0;
}

.gerar-catalogo-pdf-progress {
    max-width: 1100px;
    margin: 0 auto 1rem;
    padding: 0 1.25rem;
}

.gerar-catalogo-pdf-progress.is-hidden {
    display: none !important;
}

.gerar-catalogo-pdf-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e8eef5;
    overflow: hidden;
}

.gerar-catalogo-pdf-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sd-blue, #1d6fb8), #0f4c81);
    transition: width 0.15s ease-out;
}

.gerar-catalogo-preview-omitidas {
    max-width: 640px;
    margin: 1rem auto;
    padding: 1rem 1.15rem;
    border-radius: 10px;
    border: 1px dashed #b6d7ef;
    background: #f0f7fc;
    color: var(--sd-navy, #0f2744);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.gerar-catalogo-preview-omitidas strong {
    display: block;
    margin-bottom: 0.35rem;
}

.catalogo-print-bloqueado-msg {
    display: none;
}

@media print {
    /* Ctrl+P em catálogo grande: esconde o HTML que quebra e mostra orientação */
    body.catalogo-print-bloqueado .gerar-catalogo-paginas,
    body.catalogo-print-bloqueado .gerar-doc-stage--catalogo,
    body.catalogo-print-bloqueado .gerar-doc-header,
    body.catalogo-print-bloqueado .gerar-doc-tip,
    body.catalogo-print-bloqueado .gerar-catalogo-pdf-progress,
    body.catalogo-print-bloqueado .gerar-doc-avisos {
        display: none !important;
    }

    body.catalogo-print-bloqueado .catalogo-print-bloqueado-msg {
        display: block !important;
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 2.5cm 2cm;
        background: #fff;
        color: #0f2744;
        font-size: 14pt;
        line-height: 1.5;
    }

    body.catalogo-print-bloqueado .catalogo-print-bloqueado-msg p {
        margin: 0 0 1rem;
    }
}

.catalogo-slot,
.catalogo-bloco-el,
.catalogo-capa-titulo,
.catalogo-capa-descricao,
.catalogo-capa-marca,
.catalogo-logo-pagina {
    position: absolute;
    box-sizing: border-box;
}

.catalogo-logo-pagina {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.catalogo-pais-pagina {
    position: absolute;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.catalogo-bandeira-pagina {
    position: absolute;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
    display: block;
    padding: 0;
    /* visible: html2canvas corta a base do círculo com overflow:hidden + clip-path */
    overflow: visible;
}

.catalogo-bandeira-pagina .gerar-ficha-formato-mask,
.catalogo-bloco-el--marca_bandeira .gerar-ficha-formato-mask,
.ctp-preview-bandeira-pagina .gerar-ficha-formato-mask {
    position: absolute;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

.catalogo-bandeira-pagina img,
.catalogo-bloco-el--marca_bandeira img,
.ctp-preview-bandeira-pagina img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-position: center !important;
}

.catalogo-bandeira-pagina img[data-object-fit="cover"],
.catalogo-bloco-el--marca_bandeira img[data-object-fit="cover"],
.ctp-preview-bandeira-pagina img[data-object-fit="cover"] {
    object-fit: cover !important;
}

.catalogo-bandeira-pagina img[data-object-fit="contain"],
.catalogo-bloco-el--marca_bandeira img[data-object-fit="contain"],
.ctp-preview-bandeira-pagina img[data-object-fit="contain"],
.catalogo-bandeira-pagina img:not([data-object-fit]),
.catalogo-bloco-el--marca_bandeira img:not([data-object-fit]),
.ctp-preview-bandeira-pagina img:not([data-object-fit]) {
    object-fit: contain !important;
}

.catalogo-bloco-el--marca_bandeira {
    /* visible evita corte da base do círculo no PDF (html2canvas) */
    overflow: visible !important;
    padding: 0 !important;
}

/* Divisórias internas da grade (entre produtos): traço delicado */
.catalogo-grade-linha,
.ctp-grade-linha {
    position: absolute;
    background: rgba(160, 160, 160, 0.45);
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

.catalogo-grade-linha--v,
.ctp-grade-linha--v {
    width: 1px !important;
    transform: scaleX(0.65);
    transform-origin: center top;
}

.catalogo-grade-linha--h,
.ctp-grade-linha--h {
    height: 1px !important;
    transform: scaleY(0.65);
    transform-origin: left center;
}

.ctp-grade-linha {
    background: rgba(148, 163, 184, 0.4);
}

.catalogo-capa-marca {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogo-capa-marca img {
    object-fit: contain;
    object-position: center;
}

.catalogo-bloco-el--imagem_produto,
.catalogo-bloco-el--logo_marca {
    overflow: hidden !important;
}

.catalogo-bloco-el--imagem_produto img,
.catalogo-bloco-el--logo_marca img {
    object-fit: contain;
    object-position: center;
}

.catalogo-logo-pagina img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.catalogo-logo-pagina--texto {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
}

.catalogo-paginacao {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
}

.ctp-preview-paginacao {
    position: absolute;
    z-index: 7;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    cursor: move;
    user-select: none;
    border: 1px dashed rgba(37, 99, 235, 0.45);
    background: rgba(255, 255, 255, 0.35);
    padding: 0 4px;
    pointer-events: auto;
}

.ctp-preview-paginacao .ftl-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: #2563eb;
    cursor: se-resize;
}

.ctp-preview-paginacao.is-locked {
    cursor: default;
    border-color: transparent;
    background: transparent;
}

.ctp-preview-logo-pagina {
    position: absolute;
    z-index: 6;
    border: 1px dashed rgba(37, 99, 235, 0.7);
    background: rgba(255, 255, 255, 0.72);
    box-sizing: border-box;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    padding: 0.25rem;
    user-select: none;
    overflow: hidden;
    /* Pai .ftl-elements tem pointer-events: none; a logo precisa receber o arraste. */
    pointer-events: auto;
}

.ctp-preview-logo-pagina img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    display: block;
}

.ctp-preview-logo-pagina-txt {
    pointer-events: none;
    padding: 0 0.25rem;
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
    width: 100%;
}

.ctp-preview-logo-pagina.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ctp-preview-logo-pagina .ftl-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: #2563eb;
    cursor: se-resize;
}

.catalogo-slot {
    position: absolute;
    overflow: hidden !important;
    contain: paint;
    isolation: isolate;
}

.catalogo-bloco-scale {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top left;
    pointer-events: none;
    overflow: visible;
}

.catalogo-slot .catalogo-bloco-el {
    position: absolute;
}

.catalogo-bloco-el--texto,
.catalogo-bloco-el--titulo_produto,
.catalogo-bloco-el--descricao_secao,
.catalogo-bloco-el--titulo_secao,
.catalogo-bloco-el--texto_livre,
.catalogo-bloco-el--atributo {
    overflow: visible !important;
    height: auto !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.25;
    box-sizing: border-box;
}

.catalogo-bloco-el--linha_horizontal {
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 1px;
    line-height: 0;
}

.catalogo-bloco-el img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.catalogo-capa-titulo,
.catalogo-capa-descricao {
    overflow: visible;
    height: auto !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.catalogo-capa-titulo {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

.catalogo-capa-descricao {
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
}

@media print {
    .gerar-catalogo-paginas {
        display: block !important;
        padding: 0 !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .gerar-catalogo-pagina-shell {
        display: block !important;
        width: var(--ctp-page-w, 794px) !important;
        height: var(--ctp-page-h, 1123px) !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }

    .gerar-catalogo-pagina-shell:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .gerar-catalogo-pagina {
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none !important;
        zoom: 1 !important;
        margin: 0 !important;
        width: var(--ctp-page-w, 794px) !important;
        height: var(--ctp-page-h, 1123px) !important;
        overflow: hidden !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Catálogo: NÃO forçar A4 — respeita o tamanho do background/template */
    body.gerar-catalogo-body .gerar-ficha-wrap,
    body.gerar-catalogo-body .gerar-ficha-lote-item {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    body.gerar-catalogo-body .gerar-fichas-lista,
    body.gerar-catalogo-body .gerar-catalogo-paginas {
        width: auto !important;
        max-width: none !important;
    }

    body.gerar-catalogo-body .gerar-ficha-canvas.gerar-catalogo-canvas,
    body.gerar-catalogo-body .gerar-ficha-canvas {
        width: var(--ctp-page-w, 794px) !important;
        height: var(--ctp-page-h, 1123px) !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        zoom: 1 !important;
        overflow: hidden !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    body.gerar-catalogo-body.is-printing .gerar-catalogo-pagina,
    body.gerar-catalogo-body.is-printing .gerar-catalogo-pagina-shell {
        transform: none !important;
    }

    body.gerar-catalogo-body .catalogo-bloco-el--texto,
    body.gerar-catalogo-body .catalogo-capa-titulo,
    body.gerar-catalogo-body .catalogo-capa-descricao {
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.gerar-catalogo-body .catalogo-slot {
        overflow: hidden !important;
    }
}

.ctp-produtos-modo {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.ctp-produtos-filtros {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 220px);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ctp-produtos-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--muted, #666);
}

.ctp-produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    max-height: 480px;
    overflow: auto;
    padding: 0.25rem;
}

.ctp-emitir-grid-sel-hint {
    grid-column: 1 / -1;
    margin: 0 0 0.15rem;
    padding: 0.35rem 0.15rem;
}

.ctp-emitir-pagina-info {
    margin: 0.5rem 0 0;
    text-align: center;
}

.ctp-produto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    color: inherit;
}

.ctp-produto-card.is-selected {
    border-color: #0b5fff;
    box-shadow: 0 0 0 2px rgba(11, 95, 255, 0.2);
}

.ctp-produto-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.ctp-produto-card.is-selected .ctp-produto-card-check {
    background: #0b5fff;
}

.ctp-produto-card-img {
    display: block;
    height: 110px;
    background: #f3f3f3;
}

.ctp-produto-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ctp-produto-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #aaa;
}

.ctp-produto-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem 0.75rem;
}

.ctp-produto-card-body strong {
    font-size: 0.85rem;
    line-height: 1.25;
}

.ctp-produto-card-body small {
    color: var(--muted, #666);
    font-size: 0.75rem;
}

/* Skeleton da grade de produtos: evita ver os cards "desmarcados → marcados". */
.ctp-produto-card--skeleton {
    cursor: default;
    pointer-events: none;
}

.ctp-produto-card--skeleton .ctp-produto-card-img {
    height: 110px;
}

.ctp-skeleton-box {
    display: block;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e7ee 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: ctp-skeleton-shimmer 1.3s ease-in-out infinite;
}

.ctp-skeleton-line {
    display: block;
    height: 0.7rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e7ee 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: ctp-skeleton-shimmer 1.3s ease-in-out infinite;
}

.ctp-skeleton-line--title {
    width: 80%;
    margin-bottom: 0.35rem;
}

.ctp-skeleton-line--sub {
    width: 55%;
    height: 0.6rem;
}

@keyframes ctp-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctp-skeleton-box,
    .ctp-skeleton-line {
        animation: none;
    }
}

.ctp-pagina-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ctp-preview-card {
    padding: 1rem 1.25rem 1.25rem;
    overflow: auto;
}

@media (max-width: 960px) {
    .ctp-pagina-layout {
        grid-template-columns: 1fr;
    }

    .ctp-page-margins,
    .ctp-page-type-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ctp-produtos-filtros {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .ctp-page-margins,
    .ctp-page-type-grid {
        grid-template-columns: 1fr;
    }
}

/* Labels mobile (desktop inalterado) */
.ctp-label-mob {
    display: none;
}

.ctp-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

/* Responsivo ? Cat?logo PDF / gerar (n?o altera desktop) */
@media (max-width: 768px) {
    .ctp-label-desk {
        display: none !important;
    }

    .ctp-label-mob {
        display: inline !important;
    }

    .ctp-hide-mobile,
    .app-hide-mobile {
        display: none !important;
    }

    .ctp-hub-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .ctp-hub-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .ctp-hub-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ctp-hub-lista .ctp-col-modelo,
    .ctp-hub-lista .ctp-col-autor {
        display: none;
    }

    .ctp-hub-lista .data-table th,
    .ctp-hub-lista .data-table td {
        padding: 0.65rem 0.5rem;
        font-size: 0.88rem;
    }

    .ctp-detalhe-modal-card {
        width: calc(100% - 1rem);
        max-width: none;
        max-height: calc(100vh - 1rem);
        margin: 0.5rem;
    }

    .ctp-detalhe-modal-card .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ctp-detalhe-modal-card .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .ctp-detalhe-nome-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ctp-detalhe-produtos {
        max-height: 220px;
    }

    .ctp-emitir-steps {
        justify-content: space-between;
        gap: 0.35rem;
    }

    .ctp-emitir-step {
        flex: 1 1 0;
        text-align: center;
        padding: 0.45rem 0.35rem;
        font-size: 0.85rem;
    }

    .ctp-emitir-nav {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.5rem;
    }

    .ctp-emitir-marcas-filtros > * {
        flex-basis: 100%;
    }

    .ctp-marcas-grupo-itens {
        padding-left: 0.75rem;
    }

    .ctp-emitir-nav .btn {
        width: 100%;
        justify-content: center;
    }

    .ctp-emitir-panel .ctp-form-grid {
        max-width: none;
    }

    .ctp-emitir-resumo-lista {
        max-height: 280px;
    }

    .ctp-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.35rem;
        padding: 0.55rem 0.65rem;
    }

    .ctp-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .ctp-tab-num {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.7rem;
    }

    .ctp-app .ctp-editor-panels > .ftl-editor-panel:first-child .ftl-editor-panel-controls,
    .ctp-app .ctp-bloco-previa-bar .ftl-editor-panel-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .ctp-app .ctp-editor-panels > .ftl-editor-panel:first-child .ftl-editor-field,
    .ctp-app .ctp-bloco-previa-bar .ftl-editor-field {
        max-width: none;
    }

    .ftl-templates-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
    }

    .ftl-templates-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

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

    .ftl-toolbar-actions {
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
    }

    .ftl-toolbar .btn,
    .ftl-toolbar .ftl-upload-label {
        white-space: normal;
    }

    #ctp-panel-bloco .ftl-canvas-wrap {
        min-height: min(55vh, 420px);
    }

    .ctp-subbox {
        margin-left: 0;
    }

    .ctp-form-grid {
        grid-template-columns: 1fr;
    }

    .produtos-paginacao {
        gap: 0.25rem;
    }

    .produtos-pagina-nav,
    .produtos-pagina-num {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.82rem;
    }

    .gerar-doc-header {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0.85rem 1rem 0.75rem;
        gap: 0.65rem;
    }

    .gerar-doc-header-main {
        flex: 0 0 auto;
        width: 100%;
    }

    .gerar-doc-header-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-top: 0;
    }

    .gerar-doc-header-actions .btn {
        flex: 1 1 auto;
        min-width: 10rem;
        justify-content: center;
    }

    .gerar-doc-status {
        align-self: center;
    }

    .gerar-doc-titles {
        gap: 0.2rem;
    }

    .gerar-doc-meta {
        font-size: 0.8rem;
        margin-top: 0.1rem;
    }

    .gerar-doc-tip,
    .gerar-doc-tip--alerta,
    body.gerar-ficha-body .gerar-doc-tip,
    body.gerar-catalogo-body .gerar-doc-tip {
        display: none !important;
    }

    .gerar-doc-stage {
        padding: 0.75rem 0.75rem 1.5rem;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .gerar-ficha-wrap {
        padding: 0;
        max-width: 100%;
    }

    .gerar-catalogo-paginas {
        padding: 0.25rem 0.75rem 1rem;
        overflow: visible;
        width: 100%;
    }

    .gerar-catalogo-pagina-shell {
        max-width: 100%;
    }

    .gerar-catalogo-pagina,
    .gerar-ficha-canvas {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .ctp-hub-lista .ctp-col-produtos {
        display: none;
    }

    .ctp-hub-actions {
        grid-template-columns: 1fr;
    }

    .ctp-produto-card-body small:nth-of-type(2) {
        display: none;
    }

    .ctp-emitir-resumo-ordem {
        display: none;
    }

    .gerar-doc-title {
        font-size: 1.05rem;
    }

    .page-subtitle {
        display: none;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.65rem;
    }

    .product-card-body h3 {
        font-size: 0.8rem;
    }

    .product-card-body p {
        font-size: 0.72rem;
    }

    .product-card-actions {
        padding: 0 0.65rem 0.65rem;
        gap: 0.35rem;
    }

    .product-card-download-btn {
        width: 1.85rem;
        height: 1.85rem;
    }

    .product-card-download-btn svg {
        width: 14px;
        height: 14px;
    }

    .master-context-banner-text {
        font-size: 0.85rem;
    }

    .dashboard-acoes-label {
        display: none;
    }

    #usuarios-body td:nth-child(3),
    #usuarios-wrap th:nth-child(3) {
        display: none;
    }

    #marcas-table th:nth-child(4),
    #marcas-table td:nth-child(4) {
        display: none;
    }

    .panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .panel-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ?? Responsivo global app (produtos, tabelas, modais, forms) ?? */
@media (max-width: 768px) {
    .notificacoes-panel {
        position: fixed;
        top: 4rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: none;
        max-height: min(70vh, 26rem);
    }

    .modal-overlay {
        padding: 0.5rem;
        align-items: flex-start;
    }

    .modal-card,
    .modal-card-wide,
    .modal-card-lg {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 1rem);
        margin: 0;
    }

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

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .form-actions,
    .master-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .btn,
    .master-form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .url-copy-row {
        flex-direction: column;
        align-items: stretch;
    }

    .url-copy-row .input,
    .url-copy-row .btn {
        width: 100%;
    }

    .table-wrap {
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.25rem;
    }

    .data-table td.table-actions,
    .data-table .table-actions-flex {
        min-width: 0;
    }

    .data-table .table-actions-flex {
        flex-wrap: wrap;
    }

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

    .produtos-toolbar-filtros .search-box {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .produtos-filtros-grupo {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .produtos-filtros-grupo .input-select {
        min-width: 0;
        width: 100%;
    }

    .produtos-toolbar-acoes {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .produtos-fab {
        right: 0.85rem;
        bottom: 0.85rem;
    }

    .produtos-fab-label {
        display: none;
    }

    .produtos-fab-btn {
        width: 3rem;
        height: 3rem;
        min-height: 3rem;
        padding: 0;
        justify-content: center;
    }

    .produto-fab {
        right: 0.85rem;
        bottom: 0.85rem;
    }

    .produto-fab .produtos-fab-label {
        display: none;
    }

    .produtos-toolbar-acoes .btn {
        width: 100%;
        justify-content: center;
    }

    .produtos-lista-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .produtos-per-page-label {
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .produtos-legenda-pendencia {
        display: none;
    }

    .produtos-lote-bar {
        bottom: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }

    .produtos-lote-section {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        padding: 0.7rem 0.85rem;
    }

    .produtos-lote-section-label {
        padding-top: 0;
    }

    .produtos-lote-section-content,
    .produtos-lote-acoes-grid,
    .produtos-lote-inline-field,
    .produtos-lote-exportar-acoes {
        width: 100%;
    }

    .produtos-lote-chip-group {
        width: 100%;
        border-radius: var(--radius);
        overflow: hidden;
    }

    .produtos-lote-chip {
        flex: 1 1 50%;
        border-radius: 0;
        text-align: center;
    }

    .produtos-lote-inline-field .input-select,
    .produtos-lote-inline-field .btn {
        width: 100%;
        max-width: none;
    }

    .produtos-lote-hint {
        display: block;
    }

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

    .toolbar .search-box,
    .toolbar .input-select {
        width: 100%;
        min-width: 0;
    }

    .panel-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .panel-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .solicitacoes-lote-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .solicitacoes-lote-bar .btn {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }

    .master-empresa-topbar,
    .master-empresa-topbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .master-empresa-topbar-actions .btn,
    .master-empresa-topbar-actions form {
        width: 100%;
    }

    .master-empresa-topbar-actions .btn {
        justify-content: center;
    }

    /* Tabelas: ocultar colunas secund?rias */
    #eventos-table th:nth-child(3),
    #eventos-table td:nth-child(3),
    #eventos-table th:nth-child(5),
    #eventos-table td:nth-child(5) {
        display: none;
    }

    #marcas-table th:nth-child(1),
    #marcas-table td:nth-child(1),
    #marcas-table th:nth-child(3),
    #marcas-table td:nth-child(3) {
        display: none;
    }

    #tabela-solicitacoes th:nth-child(4),
    #tabela-solicitacoes td:nth-child(4),
    #tabela-solicitacoes th:nth-child(5),
    #tabela-solicitacoes td:nth-child(5),
    #tabela-solicitacoes th:nth-child(7),
    #tabela-solicitacoes td:nth-child(7) {
        display: none;
    }

    .data-table--master-empresas th:nth-child(4),
    .data-table--master-empresas td:nth-child(4),
    .data-table--master-empresas th:nth-child(5),
    .data-table--master-empresas td:nth-child(5),
    .data-table--master-empresas th:nth-child(7),
    .data-table--master-empresas td:nth-child(7) {
        display: none;
    }

    .data-table--master-usuarios th:nth-child(3),
    .data-table--master-usuarios td:nth-child(3) {
        display: none;
    }

    #ref-atributos-table th:nth-child(3),
    #ref-atributos-table td:nth-child(3),
    #ref-campos-sistema-table th:nth-child(3),
    #ref-campos-sistema-table td:nth-child(3) {
        display: none;
    }

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

    .ftl-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.35rem;
    }

    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ---------- Help tip (ícone ? com balão) ---------- */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.35rem;
    flex-shrink: 0;
}

.help-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.help-tip-btn:hover,
.help-tip.is-open .help-tip-btn {
    background: #e2e8f0;
    border-color: #64748b;
    color: #1e293b;
}

.help-tip-balloon {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    width: max-content;
    max-width: min(280px, calc(100vw - 1.5rem));
    padding: 0.65rem 0.8rem;
    border-radius: 0.65rem;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
    white-space: normal;
    box-sizing: border-box;
}

.help-tip-balloon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: var(--help-tip-arrow-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1e293b;
}

.help-tip-balloon--portal {
    position: fixed !important;
    transform: none !important;
    z-index: 320 !important;
}

.help-tip-balloon--portal.is-above::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: #1e293b;
}

.help-tip-balloon a {
    color: #93c5fd;
}

.help-tip-balloon strong,
.help-tip-balloon code {
    color: #fff;
}

.card-title .help-tip,
.field-label .help-tip {
    margin-left: 0.3rem;
}

.help-tip-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.help-tip-bar .help-tip {
    margin-left: 0;
}

.help-tip-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ftl-toolbar-group .help-tip {
    margin-left: 0.15rem;
}

.ctp-page-nav + .help-tip-bar,
.help-tip-bar + .ctp-page-nav {
    margin-top: 0;
}

/* ---------- Layout icons (Lucide) ---------- */
.layout-el-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.layout-icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1em;
}

.layout-icon svg {
    display: block;
}

.layout-el-text {
    flex: 1;
    min-width: 0;
}

.layout-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.layout-icon-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border, #d0d7e2);
    border-radius: 0.4rem;
    background: #fff;
    color: #8B1538;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.layout-icon-picker-btn:hover {
    border-color: #8B1538;
    background: #fff5f7;
}

.layout-icon-picker-btn.is-active {
    border-color: #8B1538;
    background: #8B1538;
    color: #fff;
}

.layout-icon-picker-btn svg {
    width: 1rem;
    height: 1rem;
}

.ftl-field-icone .field-label,
.ctp-field-icone .field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ——— Experiência parceiro comercial ——— */
.sidebar-role-tag {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #d8dee6;
    opacity: 0.9;
    text-align: center;
}

.modo-parceiro .sidebar-nav {
    gap: 0.65rem;
}

.modo-parceiro .sidebar-link {
    min-height: 3.05rem;
    font-size: 1.12rem;
    padding: 0.85rem 0.9rem;
}

.modo-parceiro .sidebar-link-label {
    font-size: 1.12rem;
}

.modo-parceiro .sidebar-link--secundario {
    opacity: 0.92;
}

.modo-parceiro .page-title {
    font-size: 1.55rem;
}

.modo-parceiro .page-subtitle {
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 36rem;
}

.parceiro-guide {
    margin-bottom: 1.15rem;
    padding: 1.1rem 1.25rem;
    border-left: 4px solid var(--accent);
    background: var(--surface);
}

.parceiro-guide-title {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.parceiro-guide-steps,
.parceiro-guide-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text);
    line-height: 1.55;
    font-size: 0.95rem;
}

.parceiro-guide-steps li + li,
.parceiro-guide-list li + li {
    margin-top: 0.35rem;
}

.parceiro-guide-note {
    margin: 0.75rem 0 0;
}

.ctp-parceiro-guide {
    margin-bottom: 1rem;
}

.modo-parceiro .product-card-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem 0.85rem;
}

.modo-parceiro .product-card-ficha-btn {
    flex: 1 1 auto;
    min-height: 2.5rem;
    font-weight: 700;
}

.modo-parceiro .product-card-download-btn {
    width: 2.5rem;
    height: 2.5rem;
}

.modo-parceiro #produtos-busca {
    min-height: 2.75rem;
    font-size: 1rem;
}

.dash-parceiro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-parceiro-welcome {
    padding: 1.35rem 1.5rem;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 70%);
}

.dash-parceiro-ola {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

.dash-parceiro-titulo {
    margin: 0 0 0.45rem;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

.dash-parceiro-lead {
    margin: 0;
    max-width: 40rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
}

.dash-parceiro-busca {
    padding: 1.2rem 1.4rem 1.35rem;
}

.dash-parceiro-busca-label {
    display: block;
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.dash-parceiro-busca-row {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
}

.dash-parceiro-busca-input {
    flex: 1;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.85rem 1.05rem;
    font-size: 1.08rem;
}

.dash-parceiro-busca-hint {
    margin: 0.55rem 0 0;
}

.dash-parceiro-resultados {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.dash-parceiro-busca-loading {
    margin: 0;
    padding: 0.5rem 0;
}

.dash-parceiro-busca-meta {
    margin: 0 0 0.65rem;
}

.dash-parceiro-busca-empty {
    margin: 0;
}

.dash-parceiro-produtos {
    margin: 0;
}

.dash-parceiro-produto-item {
    padding: 0.15rem 0;
}

.dash-parceiro-produto-row {
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0;
}

.dash-parceiro-produto-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.dash-parceiro-produto-link strong {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}

.dash-parceiro-produto-link small {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.dash-parceiro-produtos .product-list-ficha-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.dash-parceiro-busca-footer {
    margin-top: 0.75rem;
    text-align: center;
}

.dash-parceiro-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.dash-parceiro-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 5.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-parceiro-card:hover,
.dash-parceiro-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
    outline: none;
}

.dash-parceiro-card--destaque {
    border-color: rgba(0, 104, 165, 0.28);
    background: linear-gradient(145deg, var(--accent-soft), var(--surface) 60%);
}

.dash-parceiro-card--compact {
    min-height: 4.25rem;
    grid-column: 1 / -1;
    background: #fafafa;
}

.dash-parceiro-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--accent-soft);
    position: relative;
}

.dash-parceiro-card-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--accent);
    border-radius: 3px;
    opacity: 0.85;
}

.dash-parceiro-card--fichas .dash-parceiro-card-icon::after {
    border-radius: 2px;
    height: 1.35rem;
    width: 1rem;
}

.dash-parceiro-card--catalogos .dash-parceiro-card-icon::after {
    width: 1.25rem;
    height: 1rem;
    border-radius: 2px;
    box-shadow: 3px 3px 0 rgba(0, 104, 165, 0.2);
}

.dash-parceiro-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dash-parceiro-card-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.dash-parceiro-card-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.4;
}

.dash-parceiro-card-go {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.dash-parceiro-panel {
    margin-top: 0;
}

.dash-parceiro-ajuda {
    margin: 0;
    padding: 0 0.15rem 0.5rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .dash-parceiro-titulo {
        font-size: 1.25rem;
    }

    .dash-parceiro-card {
        min-height: 4.75rem;
    }
}

@media (max-width: 560px) {
    .dash-parceiro-busca-row {
        flex-direction: column;
    }

    .dash-parceiro-produto-row {
        flex-wrap: wrap;
    }

    .dash-parceiro-produtos .product-list-ficha-btn {
        width: 100%;
        margin-left: calc(64px + 0.85rem);
    }
}

/* ── Botão Reportar correção (parceiro) ─────────────────────────────────── */
.btn-reportar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff3cd;
    color: #7a5c00;
    border: 1.5px solid #f0c040;
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-reportar span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #f0c040;
    color: #5a3e00;
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.btn-reportar:hover {
    background: #ffe694;
    border-color: #d4a000;
}

/* ── Modal de reporte (parceiro envia) ──────────────────────────────────── */
#modal-reporte .modal-body {
    gap: 0.85rem;
}

#modal-reporte .form-group {
    gap: 0.3rem;
}

.reporte-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #f0c040;
    color: #5a3e00;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.modal-desc {
    margin: 0;
    color: var(--muted, #666);
    font-size: 0.9rem;
}

.reporte-contador {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--muted, #888);
    text-align: right;
}

/* ── Abas de solicitações (admin) ───────────────────────────────────────── */
.solicitacoes-abas {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border, #e2e8f0);
    padding: 0 1.25rem;
    background: var(--bg-alt, #f8f9fa);
}

.solicitacoes-aba {
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 0.75rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted, #666);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: -2px;
}

.solicitacoes-aba.aba-ativa {
    color: var(--accent, #2563eb);
    border-bottom-color: var(--accent, #2563eb);
}

.solicitacoes-aba:hover:not(.aba-ativa) {
    color: var(--text, #333);
}

/* ── Tabela de reportes ─────────────────────────────────────────────────── */
.reportes-desc-cell {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Modal de detalhe do reporte (admin) ────────────────────────────────── */
.reporte-descricao-bloco,
.reporte-resposta-bloco {
    background: var(--bg-alt, #f8f9fa);
    border-left: 3px solid var(--border, #e2e8f0);
    border-radius: 0 6px 6px 0;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.reporte-descricao-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.35rem;
}

.reporte-descricao-texto {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Métricas (admin e master) */
#dashboard-metricas,
#master-metricas {
    margin-top: 1.25rem;
}

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

.metricas-lead {
    margin: 0;
    flex: 1;
    min-width: 14rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.metricas-lead strong {
    color: var(--sd-navy);
}

.metricas-periodo {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    gap: 0.15rem;
}

.metricas-periodo-btn {
    border: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
}

.metricas-periodo-btn.is-active {
    background: var(--sd-blue);
    color: #fff;
}

.metricas-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}

.metricas-kpi {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
}

.metricas-kpi-icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
}

.metricas-kpi-icon svg {
    display: block;
}

.metricas-kpi-copy {
    min-width: 0;
}

.metricas-kpi-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.metricas-kpi-value {
    display: block;
    font-size: 1.65rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--sd-navy);
}

.metricas-kpi--login .metricas-kpi-icon { background: #e8f4fc; color: var(--sd-blue); }
.metricas-kpi--telas .metricas-kpi-icon { background: #eef2ff; color: #3b4cca; }
.metricas-kpi--edits .metricas-kpi-icon { background: #eaf8f0; color: var(--success); }
.metricas-kpi--reportes .metricas-kpi-icon { background: #fff4d6; color: #9a6b00; }
.metricas-kpi--pdf .metricas-kpi-icon { background: var(--highlight-soft); color: var(--sd-red); }

.metricas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

#master-metricas .metricas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metricas-col {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.85rem 0.55rem;
    min-height: 0;
}

.metricas-col h4 {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    color: var(--sd-navy);
}

.metricas-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: metricas-rank;
}

.metricas-rank-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0 0.7rem 1.85rem;
    border-top: 1px solid var(--border);
    position: relative;
    counter-increment: metricas-rank;
}

.metricas-rank-item:first-child {
    border-top: none;
    padding-top: 0.15rem;
}

.metricas-rank-item::before {
    content: counter(metricas-rank);
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metricas-rank-item:first-child::before {
    top: 0.2rem;
}

.metricas-rank-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.metricas-rank-nome {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sd-navy);
    line-height: 1.3;
}

.metricas-rank-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sd-blue);
}

.metricas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.metricas-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
}

.metricas-rank-count {
    flex-shrink: 0;
    text-align: right;
    min-width: 3.4rem;
}

.metricas-rank-count strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--sd-blue);
}

.metricas-rank-count small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metricas-vazio {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 1100px) {
    .metricas-kpis,
    #master-metricas .metricas-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .metricas-kpis,
    .metricas-grid,
    #master-metricas .metricas-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .metricas-kpis,
    .metricas-grid,
    #master-metricas .metricas-grid {
        grid-template-columns: 1fr;
    }
}