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

:root
{
    --app-avatar-iniciais-bg: #eceff1;
    --app-avatar-iniciais-fg: #455a64;
}

html
{
    -webkit-font-smoothing: antialiased;
}

body
{
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* ——— Login ——— */
.pagina-login
{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-wrap
{
    width: 100%;
    max-width: 420px;
}

.login-cartao
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
    padding: 40px 36px 36px;
}

.login-logo
{
    margin-bottom: 26px;
}

.login-marca
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-logo-img
{
    display: block;
    max-width: min(120px, 100%);
    width: 120px;
    height: 77px;
    max-height: 77px;
    object-fit: contain;
}

.login-logo-sep
{
    flex-shrink: 0;
    width: 2px;
    height: 34px;
    background: var(--cor-primaria, #076053);
}

.login-logo-texto
{
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.015em;
    color: var(--cor-primaria, #076053);
}

.login-erro
{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(198, 40, 40, 0.12);
    border: 1px solid rgba(183, 28, 28, 0.22);
    color: #b71c1c;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 14px;
}

.login-erro-texto
{
    margin: 0;
    word-break: break-word;
}

.login-form
{
    width: 100%;
    max-width: 100%;
}

.login-ok
{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    background: linear-gradient(180deg, rgba(7, 96, 83, 0.11) 0%, rgba(7, 96, 83, 0.06) 100%);
    border: 1px solid rgba(7, 96, 83, 0.22);
    box-shadow: 0 4px 12px rgba(7, 96, 83, 0.08);
    color: #075f53;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 0 0 14px;
    line-height: 1.35;
}

.login-ok-cabecalho
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-ok-icone
{
    display: inline-flex;
    color: #0b7a69;
}

.login-ok strong
{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.login-ok p
{
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: rgba(7, 95, 83, 0.9);
}

.login-campo
{
    margin-bottom: 18px;
}

.login-campo label
{
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.login-campo input[type="email"],
.login-campo input[type="password"],
.login-campo input[type="text"]
{
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--login-borda-input, #e0e0e0);
    background: var(--login-bg-input, #fff);
    color: var(--login-texto, #1a1a1a);
    font-size: 14px;
    outline: none;
}

.login-campo input::placeholder
{
    color: var(--login-placeholder, #9e9e9e);
}

.login-campo-senha
{
    position: relative;
}

.login-campo-senha input
{
    padding-right: 42px;
}

.login-icone-cadeado
{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-icone, #9e9e9e);
    pointer-events: none;
    display: flex;
}

.login-linha-opcoes
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.login-check
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--login-texto-sec, #424242);
    cursor: pointer;
}

.login-check input
{
    width: 16px;
    height: 16px;
    accent-color: var(--cor-primaria, #076053);
    cursor: pointer;
}

.login-link-esqueci
{
    font-size: 13px;
    color: var(--cor-primaria, #076053);
    text-decoration: none;
    font-weight: 500;
}

.login-link-esqueci:hover
{
    text-decoration: underline;
}

.login-botao-entrar
{
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--cor-primaria, #076053);
    transition: filter 0.15s ease, transform 0.1s ease;
}

.login-botao-entrar:hover
{
    filter: brightness(1.06);
}

.login-botao-entrar:disabled,
.login-botao-entrar[disabled]
{
    cursor: not-allowed;
    filter: none;
    background: #9ca3af;
    color: #f9fafb;
}

.login-botao-entrar:disabled:hover
{
    filter: none;
}

/* ——— App shell ——— */
.pagina-app
{
    --app-sidebar-largura: 268px;
    --app-conteudo-lateral: 28px;
    --app-rodape-lista-altura: 58px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background: var(--app-bg-main, #fff);
    color: var(--app-texto, #1a1a1a);
}

body.pagina-app--escuro
{
    --app-avatar-iniciais-bg: #3d3d3d;
    --app-avatar-iniciais-fg: #e0e0e0;
}

.app-sidebar
{
    width: var(--app-sidebar-largura);
    flex-shrink: 0;
    background: var(--app-sidebar-bg, var(--app-bg-main, #fff));
    border-right: 1px solid var(--app-borda, #e8e8e8);
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    position: sticky;
    top: 0;
}

.app-sidebar .app-nav
{
    flex: 1;
    min-height: 0;
}

.app-sidebar-topo
{
    padding: 20px 16px 12px;
}

.app-marca
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

span.app-marca-icone
{
    display: inline-block;
    width: 20px;
    height: 20px;
    /* background: var(--cor-primaria, #076053); */
    border-radius: 6px;
}

img.app-marca-icone
{
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
}

.app-marca-sep
{
    flex-shrink: 0;
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.14);
    border-radius: 1px;
}

.app-marca-texto
{
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.app-sidebar-busca
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-sidebar-busca-campo
{
    position: relative;
    flex: 1;
}

.app-sidebar-busca input
{
    width: 100%;
    height: 34px;
    padding: 7px 12px 7px 34px;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 9px;
    font-size: 13px;
    background: #f8f8f8;
    color: #6f6f6f;
    outline: none;
}

.app-sidebar-busca input::placeholder
{
    color: #9f9f9f;
}

.app-sidebar-busca-campo:focus-within input
{
    border-color: #d3d3d3;
    background: #fff;
}

.app-sidebar-busca-icone
{
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.52;
    color: #9f9f9f;
    display: flex;
    pointer-events: none;
}

.app-sidebar-busca-atalho
{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #efefef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.app-sidebar-busca-atalho-icone
{
    width: 16px;
    height: 14px;
    display: block;
}

.app-nav
{
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 16px;
}

.app-nav-item
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
}

.app-nav-item:hover
{
    background: color-mix(in srgb, var(--cor-secundaria, #EDF7F5) 65%, transparent);
}

.app-nav-item--ativo
{
    background: var(--cor-secundaria, #EDF7F5);
    color: var(--cor-primaria, #076053);
    font-weight: 600;
    box-shadow: inset 4px 0 0 var(--cor-primaria, #076053);
}

.app-nav-sub
{
    padding-left: 28px;
    margin-top: 4px;
}

.app-nav-sub .app-nav-item
{
    font-size: 13px;
}

.app-nav-titulo-sec
{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    padding: 12px 12px 6px;
}

.app-nav-titulo-grupo
{
    padding-top: 10px;
    font-size: 11px;
    color: #777;
}

.app-etiqueta
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
}

.app-etiqueta-cor
{
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.app-sidebar-rodape
{
    margin-top: auto;
    border-top: 1px solid var(--app-borda, #e8e8e8);
    padding-top: 8px;
}

.app-btn-tema-sidebar
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 8px;
    padding: 10px 12px;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--app-texto, #1a1a1a);
    text-align: left;
    font-family: inherit;
}

.app-btn-tema-sidebar:hover
{
    background: #f5f5f5;
}

.app-btn-tema-icone
{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e 45%, var(--cor-primaria, #076053) 45%);
    flex-shrink: 0;
}

.app-sidebar-usuario
{
    position: relative;
    padding: 8px 12px 16px;
}

.app-sidebar-usuario-gatilho
{
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.app-sidebar-usuario-gatilho:hover
{
    background: rgba(13, 74, 64, 0.06);
}

.app-sidebar-usuario-gatilho:focus-visible
{
    outline: 2px solid var(--cor-primaria, #076053);
    outline-offset: 2px;
}

.app-avatar
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--app-avatar-iniciais-bg);
    color: var(--app-avatar-iniciais-fg);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-avatar--com-foto
{
    background: #eceff1;
    padding: 0;
}

.app-avatar-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-usuario-nome
{
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
}

.app-usuario-email
{
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.app-sidebar-usuario-identidade
{
    flex: 1;
    min-width: 0;
}

.app-sidebar-usuario-seta
{
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    margin-right: 2px;
    flex-shrink: 0;
    transition: transform 0.16s ease;
}

.app-sidebar-usuario.is-open .app-sidebar-usuario-seta
{
    transform: rotate(-135deg);
}

.app-sidebar-usuario-menu
{
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 100%;
    background: #fff;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    z-index: 45;
    overflow: hidden;
}

.app-sidebar-usuario.is-open .app-sidebar-usuario-menu
{
    display: block;
}

.app-sidebar-usuario-menu-link
{
    display: block;
    padding: 11px 14px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
}

.app-sidebar-usuario-menu-btn
{
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.app-sidebar-usuario-menu-link + .app-sidebar-usuario-menu-link
{
    border-top: 1px solid var(--app-borda, #ececec);
}

.app-sidebar-usuario-menu-btn + .app-sidebar-usuario-menu-link,
.app-sidebar-usuario-menu-link + .app-sidebar-usuario-menu-btn,
.app-sidebar-usuario-menu-btn + .app-sidebar-usuario-menu-btn
{
    border-top: 1px solid var(--app-borda, #ececec);
}

.app-sidebar-usuario-menu-link:hover,
.app-sidebar-usuario-menu-btn:hover
{
    background: #f6f7f8;
}

.app-sidebar-usuario-menu-link--sair
{
    color: #d32f2f;
}

.app-main
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-barra-titulo
{
    padding: 24px 28px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-titulo-pagina
{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-titulo-bloco
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-breadcrumb-wrap
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.app-breadcrumb
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
}

.app-breadcrumb-item
{
    text-decoration: none;
    color: #8a8a8a;
}

.app-breadcrumb-item--atual
{
    color: #777;
    font-weight: 500;
}

.app-breadcrumb-separador
{
    color: #b5b5b5;
}

.app-breadcrumb-item:hover
{
    text-decoration: underline;
}

.app-toolbar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.app-toolbar--perfis
{
    margin-left: auto;
    flex-shrink: 0;
}

.app-toolbar-busca
{
    position: relative;
}

.app-toolbar-busca input
{
    width: 220px;
    max-width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}

.app-toolbar-busca svg
{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
}

.app-btn-icone
{
    width: 40px;
    height: 40px;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-btn-icone:hover
{
    background: #f9f9f9;
}

.app-btn-primario
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--cor-primaria, #076053);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.app-btn-primario:hover,
.app-btn-primario:focus,
.app-btn-primario:focus-visible,
.app-btn-primario:visited
{
    color: #fff;
    text-decoration: none;
}

.app-btn-primario:hover
{
    filter: brightness(1.05);
}

.app-conteudo
{
    padding: 0 var(--app-conteudo-lateral) calc(var(--app-rodape-lista-altura) + 44px);
    flex: 1;
}

/* Cards instâncias */
.lista-instancias
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cartao-instancia
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    min-height: 120px;
    background: #fff;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-radius: 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cartao-instancia:hover,
.cartao-instancia:focus-within
{
    border-color: var(--cor-primaria, #076053);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cartao-instancia--foco
{
    border-color: var(--cor-primaria, #076053);
}

.cartao-instancia-entrada
{
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    align-self: stretch;
    border-radius: 8px;
    outline: none;
}

.cartao-instancia-entrada:focus-visible
{
    outline: 2px solid var(--app-primario, var(--cor-primaria, #076053));
    outline-offset: 2px;
}

.cartao-instancia-corpo
{
    min-width: 0;
}

.cartao-instancia-linha1
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cartao-instancia-nome
{
    font-weight: 700;
    font-size: 16px;
}

.badge-status
{
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.badge-status--ativa
{
    background: #ddf6dd;
    color: #20ba27;
}

.badge-status--bloqueada
{
    background: #fee7e5;
    color: #eb2b2b;
}

.badge-status--aguardando
{
    background: #fff8e1;
    color: #f57f17;
}

.cartao-instancia-metricas
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #777977;
}

.cartao-instancia-metricas > span
{
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.cartao-instancia-metricas > span + span::before
{
    content: "|";
    color: #DDDFDD;
    margin-right: 2px;
}

.cartao-instancia-metricas > span strong
{
    font-weight: 700;
    color: #777977;
}

.cartao-instancia-acoes
{
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-self: center;
    align-items: center;
}

.cartao-instancia-acoes button,
.cartao-instancia-btn-icone
{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
    transition: background-color .2s ease;
}

.cartao-instancia-acoes a.cartao-instancia-btn-icone
{
    background: #F3F4F5;
}

.cartao-instancia-acoes .btn-excluir-instancia,
.cartao-instancia-acoes .btn-excluir-empresa,
.cartao-instancia-acoes .btn-excluir
{
    background: #FEE7E5;
}

.cartao-instancia-acoes button svg,
.cartao-instancia-btn-icone svg,
.cartao-instancia-acoes button img,
.cartao-instancia-btn-icone img
{
    display: block;
}

.cartao-instancia-acoes button:hover,
.cartao-instancia-btn-icone:hover
{
    background: #dfe4e8;
}

.cartao-instancia-acoes a.cartao-instancia-btn-icone:hover
{
    background: #dfe4e8;
}

.cartao-instancia-acoes .btn-excluir:hover,
.cartao-instancia-acoes .btn-excluir-instancia:hover
{
    background: #ffdce2;
}

.cartao-instancia-acoes button:focus-visible,
.cartao-instancia-btn-icone:focus-visible
{
    outline: 2px solid rgba(40, 120, 220, 0.35);
    outline-offset: 2px;
}

/* Listagem usuários */
.lista-usuarios
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lista-usuarios-cabecalho
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px 12px;
    margin: 0;
    border-bottom: 1px solid var(--app-borda, #e8e8e8);
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lista-usuarios-cabecalho-principal
{
    min-width: 0;
}

.lista-usuarios-cabecalho-acoes
{
    text-align: right;
    min-width: 96px;
}

.cartao-usuario
{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    min-height: 120px;
    background: #fff;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-radius: 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cartao-usuario:hover,
.cartao-usuario:focus-within
{
    border-color: var(--cor-primaria, #076053);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cartao-usuario-avatar-col
{
    flex-shrink: 0;
}

.cartao-usuario-foto
{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--app-borda, #e8e8e8);
}

.cartao-usuario-iniciais
{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--app-avatar-iniciais-bg);
    color: var(--app-avatar-iniciais-fg);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cartao-usuario-corpo
{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cartao-usuario-linha1
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.cartao-usuario-nome
{
    font-weight: 700;
    font-size: 16px;
}

.cartao-usuario-email
{
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
}

.cartao-usuario-contexto
{
    font-size: 13px;
    color: #666;
}

.cartao-usuario-acoes
{
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    align-items: center;
}

.cartao-usuario-acoes button,
.cartao-usuario-btn-icone
{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
    transition: background-color .2s ease;
}

.cartao-usuario-acoes a.cartao-usuario-btn-icone
{
    background: #F3F4F5;
}

.cartao-usuario-acoes .btn-excluir-usuario
{
    background: #FEE7E5;
}

.cartao-usuario-acoes button svg,
.cartao-usuario-btn-icone svg,
.cartao-usuario-acoes button img,
.cartao-usuario-btn-icone img
{
    display: block;
}

.cartao-usuario-acoes button:hover,
.cartao-usuario-btn-icone:hover
{
    background: #dfe4e8;
}

.cartao-usuario-acoes .btn-excluir-usuario:hover
{
    background: #ffdce2;
}

/* Listagem perfis de acesso (lista plana + divisórias, não cartões) */
.lista-perfis-acesso
{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    overflow: hidden;
}

.lista-perfis-cabecalho
{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px 12px;
    margin: 0;
    border-bottom: 1px solid var(--app-borda, #e8e8e8);
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lista-perfis-cabecalho-nome
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    max-width: 100%;
    border-radius: 6px;
    margin: -4px -8px;
    padding: 4px 8px;
}

.lista-perfis-cabecalho-nome:hover
{
    color: var(--app-cor-primaria-texto, var(--cor-primaria, #076053));
    background: color-mix(in srgb, var(--cor-primaria, #076053) 6%, transparent);
}

.lista-perfis-icone-ordem
{
    flex-shrink: 0;
    opacity: 0.7;
}

.lista-perfis-cabecalho-acoes
{
    text-align: right;
    min-width: 96px;
}

.cartao-perfil-acesso
{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px;
    margin: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--app-borda, #e8e8e8);
    transition: background-color 0.15s ease;
}

.cartao-perfil-acesso:last-child
{
    border-bottom: none;
}

.cartao-perfil-acesso:hover,
.cartao-perfil-acesso:focus-within
{
    background: #fafbfb;
}

.cartao-perfil-acesso-corpo
{
    min-width: 0;
    flex: 1;
}

.cartao-perfil-acesso-titulo
{
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #2d2d2d;
}

.cartao-perfil-acesso-desc
{
    font-size: 13px;
    color: #227267;
    line-height: 1.35;
}

.cartao-perfil-acesso-acoes
{
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    align-items: center;
}

.cartao-perfil-acesso-acoes button,
.cartao-perfil-acesso-btn-icone
{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
    transition: background-color .2s ease;
}

.cartao-perfil-acesso-acoes a.cartao-perfil-acesso-btn-icone
{
    background: #F3F4F5;
}

.cartao-perfil-acesso-acoes .btn-excluir-perfil
{
    background: #FEE7E5;
}

.cartao-perfil-acesso-acoes button svg,
.cartao-perfil-acesso-btn-icone svg,
.cartao-perfil-acesso-acoes button img,
.cartao-perfil-acesso-btn-icone img
{
    display: block;
}

.cartao-perfil-acesso-acoes button:hover,
.cartao-perfil-acesso-btn-icone:hover
{
    background: #dfe4e8;
}

.cartao-perfil-acesso-acoes .btn-excluir-perfil:hover
{
    background: #ffdce2;
}

.badge-status--usuario-ativo
{
    background: #ddf6dd;
    color: #20ba27;
}

/* Modal usuário */
.modal-janela--usuario
{
    max-width: 520px;
    width: calc(100% - 32px);
}

.modal-corpo--usuario
{
    max-height: min(70vh, 640px);
    overflow-y: auto;
}

.modal-usuario-foto-bloco
{
    margin-bottom: 20px;
}

.modal-usuario-foto-label
{
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin: 0 0 10px;
}

.modal-usuario-foto-linha
{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.modal-usuario-avatar-wrap
{
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.modal-usuario-avatar-vazio,
.modal-usuario-avatar-preview
{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}

.modal-usuario-avatar-placeholder
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--app-avatar-iniciais-bg);
    border-radius: 50%;
    border: 1px solid var(--app-borda, #e8e8e8);
}

.modal-usuario-avatar-iniciais
{
    font-size: 28px;
    font-weight: 700;
    color: var(--app-avatar-iniciais-fg);
    line-height: 1;
}

.modal-usuario-avatar-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-usuario-foto-acoes
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.app-btn-primario--compacto
{
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

.modal-usuario-label-upload
{
    position: relative;
    overflow: hidden;
}

.modal-usuario-label-upload .upload-file-input
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.modal-usuario-remover-foto
{
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--cor-primaria, #076053);
    text-decoration: underline;
    cursor: pointer;
}

.upload-copy-linha--muteda
{
    font-size: 12px;
    color: #888;
    margin: 0;
}

.modal-campo-grid
{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Modal usuário: duas colunas (rótulo | controle), alinhado ao Figma */
.modal-corpo--usuario .modal-campo-grid > .modal-campo
{
    display: grid;
    grid-template-columns: minmax(128px, 38%) 1fr;
    column-gap: 20px;
    align-items: center;
    margin-bottom: 0;
}

.modal-corpo--usuario .modal-campo-grid > .modal-campo label,
.modal-corpo--usuario .modal-campo-grid > .modal-campo > .modal-campo-label-texto
{
    margin-bottom: 0;
}

.modal-corpo--usuario .modal-campo-grid > .modal-campo > *:nth-child(2)
{
    min-width: 0;
}

.modal-usuario-perfil-controle
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.modal-usuario-btn-permissoes
{
    align-self: flex-end;
}

.modal-corpo--usuario .modal-senha-grid-indent
{
    display: block;
    pointer-events: none;
}

.modal-campo--full
{
    grid-column: 1 / -1;
}

.modal-campo-controle.modal-campo-senha
{
    position: relative;
    width: 100%;
    min-width: 0;
}

.modal-campo-senha
{
    position: relative;
}

.modal-campo-senha input[type='password'],
.modal-campo-senha input[type='text']
{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 44px;
}

/* Evita controles nativos de revelar senha sobrepostos ao botão customizado */
.modal-campo-senha input[type='password']::-ms-reveal,
.modal-campo-senha input[type='password']::-ms-clear
{
    display: none;
    width: 0;
    height: 0;
}

.modal-campo-senha input[type='password']::-webkit-credentials-auto-fill-button
{
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    width: 0;
    height: 0;
}

.btn-toggle-senha
{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    border: none;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    color: #666;
    border-radius: 6px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
}

.btn-toggle-senha svg
{
    pointer-events: none;
    display: block;
}

.btn-toggle-senha:hover
{
    background: #f0f0f0;
    color: #333;
}

.btn-toggle-senha:focus-visible
{
    outline: 2px solid var(--cor-primaria, #076053);
    outline-offset: 2px;
}

.app-paginacao-link
{
    width: 36px;
    height: 36px;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.app-paginacao-link:hover:not(.is-disabled)
{
    background: #f5f5f5;
}

.app-paginacao-link.is-disabled
{
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Popovers toolbar */
.app-popover
{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 16px;
    z-index: 50;
}

.app-popover.aberto
{
    display: block;
}

.app-popover label
{
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.app-popover select
{
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
}

.app-popover--logs
{
    width: 800px;
    max-width: min(800px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 20px;
    border-radius: 12px;
    font-size: 13px;
}

.app-popover--logs label,
.app-popover--logs .app-popover-periodo-titulo
{
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.app-popover-periodo-bloco
{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    align-items: center;
    min-width: 0;
}

.app-popover-periodo-titulo--lateral
{
    margin: 0;
    white-space: nowrap;
}

.app-popover-periodo-linhas
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.app-popover--logs .app-popover-periodo--logs .app-popover-periodo-rotulo
{
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.app-popover.app-popover--logs .app-popover-input-nativo
{
    font-size: 13px;
}

.app-popover.app-popover--logs select.app-popover-select
{
    font-size: 13px;
}

.app-popover-logs-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
}

.app-popover-logs-divider
{
    background: var(--app-borda, #e8e8e8);
    width: 1px;
    align-self: stretch;
    min-height: 120px;
}

.app-popover-logs-campo
{
    margin-bottom: 16px;
}

.app-popover-logs-campo label
{
    margin-bottom: 8px;
}

.app-popover-input-lupa
{
    position: relative;
    display: flex;
    align-items: center;
}

.app-popover-input-lupa-ico
{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9e9e9e;
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.app-popover-periodo--logs
{
    margin-bottom: 0;
}

.app-popover-periodo--logs .app-popover-periodo-titulo:not(.app-popover-periodo-titulo--lateral)
{
    margin-bottom: 10px;
}

.app-popover-periodo--logs .app-popover-periodo-linha
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.app-popover-periodo--logs .app-popover-periodo-rotulo
{
    flex: 0 0 2.25rem;
    text-align: left;
}

.app-popover-periodo-dupla
{
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.app-popover-input-data-hora
{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.app-popover-input-nativo
{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 34px 9px 11px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #333;
}

.app-popover-input-data-hora input[type='date']::-webkit-calendar-picker-indicator,
.app-popover-input-data-hora input[type='time']::-webkit-calendar-picker-indicator
{
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.app-popover-campo-ico
{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9e9e9e;
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.app-popover-logs-col--dir
{
    min-width: 0;
}

.app-popover-logs-linha-select
{
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.app-popover-logs-linha-select:last-child
{
    margin-bottom: 0;
}

.app-popover--logs .app-popover-logs-linha-select label
{
    margin-bottom: 0;
    white-space: nowrap;
    text-align: left;
    justify-self: start;
}

.app-popover-select-wrap
{
    position: relative;
    min-width: 0;
}

.app-popover select.app-popover-select
{
    width: 100%;
    margin-bottom: 0;
    padding: 10px 36px 10px 12px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.app-popover-select-chevron
{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    display: flex;
    pointer-events: none;
}

.app-popover-limpar-filtros
{
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 500;
    color: #757575;
    cursor: pointer;
    text-decoration: none;
}

.app-popover-limpar-filtros:hover
{
    color: #555;
    text-decoration: underline;
}

.app-popover-input
{
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
    font-size: 14px;
    box-sizing: border-box;
}

.app-popover-input.app-popover-input--usuario
{
    margin-bottom: 0;
    padding: 9px 12px 9px 42px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
}

.app-popover-input.app-popover-input--usuario::placeholder
{
    color: #9e9e9e;
}

.app-popover-input.app-popover-input--usuario:focus
{
    outline: none;
}

.app-popover-input.app-popover-input--usuario:focus-visible
{
    border-color: var(--cor-primaria, #076053);
    box-shadow: 0 0 0 2px rgba(7, 96, 83, 0.2);
}

.app-popover-periodo
{
    margin-bottom: 12px;
}

.app-popover-periodo-titulo
{
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.app-popover-periodo-linha
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.app-popover-periodo-rotulo
{
    flex: 0 0 28px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.app-popover-input--data
{
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.app-popover-input--hora
{
    flex: 0 0 110px;
    margin-bottom: 0;
}

.app-popover-acoes
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 8px;
}

.app-popover-acoes.app-popover-acoes--logs
{
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    gap: 20px;
}

.app-popover-link
{
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-primaria, var(--cor-primaria, #076053));
    cursor: pointer;
    text-decoration: underline;
}

.app-popover-link:hover
{
    opacity: 0.85;
}

@media (max-width: 620px)
{
    .app-popover-logs-grid
    {
        grid-template-columns: 1fr;
    }

    .app-popover-logs-divider
    {
        display: none;
    }

    .app-popover--logs
    {
        width: min(100%, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }
}

.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;
}

.app-tabela-wrap
{
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    background: #fff;
}

.app-tabela
{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.app-tabela thead th
{
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background: #f9fafb;
    border-bottom: 1px solid var(--app-borda, #e8e8e8);
    white-space: nowrap;
}

.app-tabela-logs thead th
{
    background: #fff;
    color: #77797A;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-top: 14px;
    padding-bottom: 12px;
}

.app-tabela tbody td
{
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-borda, #eee);
    vertical-align: middle;
    color: #333;
}

.app-tabela tbody tr:last-child td
{
    border-bottom: none;
}

.app-tabela-col-mais
{
    width: 48px;
    text-align: center;
}

.app-tabela-usuario
{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-tabela-avatar
{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.app-tabela-iniciais
{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-avatar-iniciais-bg);
    color: var(--app-avatar-iniciais-fg);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-tabela-mais-vazio
{
    color: #bbb;
    font-size: 13px;
}

.app-tabela-vazia,
.app-listagem-vazia
{
    text-align: center;
    padding: 28px 16px !important;
    color: #666;
    font-size: 14px;
}

.app-btn-expandir-log
{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--app-borda, #e0e0e0);
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--app-primaria, var(--cor-primaria, #076053));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-btn-expandir-log:hover
{
    background: #f5f5f5;
}

.log-linha-detalhe td
{
    background: #fafafa;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--app-borda, #e8e8e8) !important;
}

.log-detalhe-bloco
{
    max-width: 100%;
}

/* Box único: só o conteúdo extra do log (padrão lista, como referência do painel). */
.log-detalhe-bloco--padrao
{
    margin: 0;
    padding: 0;
    border: 1px solid var(--app-borda, #e8e8e8);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.log-detalhe-lista
{
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

.log-detalhe-item .log-detalhe-rotulo,
.log-detalhe-item .log-detalhe-valor
{
    margin: 0;
    min-width: 0;
}

.log-detalhe-item
{
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 12px 20px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-borda, #ececec);
}

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

.log-detalhe-rotulo
{
    margin: 0;
    font-weight: 600;
    color: var(--app-texto, #333);
    word-break: break-word;
}

.log-detalhe-valor
{
    margin: 0;
    color: var(--app-texto-secundario, #666);
    white-space: pre-wrap;
    word-break: break-word;
}

.log-detalhe-texto-bruto
{
    margin: 0;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    color: var(--app-texto-secundario, #555);
}

.log-detalhe-sem-extra
{
    margin: 0;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--app-texto-secundario, #666);
}

.pagina-app--escuro .log-linha-detalhe td
{
    background: rgba(0, 0, 0, 0.2);
}

.pagina-app--escuro .log-detalhe-bloco--padrao
{
    background: rgba(30, 30, 30, 0.85);
    border-color: var(--app-borda, #444);
    box-shadow: none;
}

.pagina-app--escuro .log-detalhe-item
{
    border-bottom-color: var(--app-borda, #3a3a3a);
}

.pagina-app--escuro .log-detalhe-rotulo
{
    color: var(--app-texto, #e8e8e8);
}

.pagina-app--escuro .log-detalhe-valor
{
    color: var(--app-texto-secundario, #b0b0b0);
}

@media (max-width: 520px)
{
    .log-detalhe-item
    {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.app-filtro-status
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-filtro
{
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.chip-filtro--ativa
{
    background: #ddf6dd;
    color: #20ba27;
}

.chip-filtro--bloqueada
{
    background: #fee7e5;
    color: #eb2b2b;
}

.chip-filtro--aguardando
{
    background: #fff8e1;
    color: #f57f17;
}

.chip-filtro.is-selecionado
{
    box-shadow: inset 0 0 0 2px currentColor;
    font-weight: 700;
}

.pagina-app--escuro .chip-filtro.is-selecionado
{
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

/* Paginação */
.app-rodape-lista
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
    color: #666;
    position: fixed;
    left: calc(var(--app-sidebar-largura) + var(--app-conteudo-lateral));
    right: var(--app-conteudo-lateral);
    bottom: 12px;
    z-index: 40;
    background: #fafafa;
    border: 1px solid var(--app-borda, #e0e0e0);
    border-radius: 10px;
    min-height: var(--app-rodape-lista-altura);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.app-rodape-lista-contagem
{
    white-space: nowrap;
}

.app-paginacao
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.app-paginacao-info
{
    padding: 0 8px;
    font-size: 13px;
    color: #555;
}

/* Modal */
.modal-overlay
{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

/* Reforça fechado quando o overlay não deve aparecer (evita modal visível sem ?nova / ?editar) */
.modal-overlay[hidden]:not(.aberto)
{
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.modal-overlay.aberto
{
    display: flex;
}

.modal-janela
{
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.modal-janela--larga
{
    max-width: 640px;
}

.modal-janela--instancia
{
    max-width: 580px;
    height: 590px;
}

.modal-janela--instancia .modal-abas
{
    flex-wrap: wrap;
    row-gap: 2px;
}

.modal-janela--perfil-acesso
{
    max-width: 600px;
    width: calc(100% - 32px);
}

.modal-corpo--perfil-acesso
{
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding-top: 8px;
}

.modal-perfil-secao-titulo
{
    margin: 20px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.modal-perfil-atual-info
{
    margin: 4px 0 8px;
    font-size: 13px;
    color: #666;
}

.modal-perfil-lista-permissoes
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-cabecalho
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 0;
}

.modal-titulo
{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.modal-fechar
{
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: #666;
}

.modal-fechar:hover
{
    background: #f0f0f0;
}

.modal-abas
{
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 8px;
    margin-top: 12px;
}

.modal-aba
{
    padding: 12px 14px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.modal-aba:hover
{
    color: #333;
}

.modal-aba--ativa
{
    color: var(--cor-primaria, #076053);
    font-weight: 600;
    border-bottom-color: var(--cor-primaria, #076053);
}

.modal-corpo
{
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c8c8c8 transparent;
}

.modal-corpo::-webkit-scrollbar
{
    width: 8px;
}

.modal-corpo::-webkit-scrollbar-thumb
{
    background: #c8c8c8;
    border-radius: 8px;
}

.painel-aba
{
    display: none;
}

.painel-aba--visivel
{
    display: block;
}

.modal-campo-label-texto
{
    font-size: 13px;
    font-weight: 500;
}

.modal-campo
{
    margin-bottom: 16px;
}

/* Detalhes / Avançado: rótulo à esquerda, controle à direita (layout Figma) */
#aba-detalhes .modal-campo,
#aba-avancado .modal-campo,
#aba-empresa-detalhes .modal-campo,
#aba-empresa-avancado .modal-campo
{
    display: grid;
    grid-template-columns: minmax(128px, 36%) 1fr;
    column-gap: 20px;
    align-items: center;
}

#aba-detalhes .modal-campo > label,
#aba-avancado .modal-campo > label,
#aba-empresa-detalhes .modal-campo > label,
#aba-empresa-avancado .modal-campo > label,
#aba-detalhes .modal-campo > .modal-campo-label-texto,
#aba-avancado .modal-campo > .modal-campo-label-texto,
#aba-empresa-detalhes .modal-campo > .modal-campo-label-texto,
#aba-empresa-avancado .modal-campo > .modal-campo-label-texto
{
    margin-bottom: 0;
    color: #77797A;
}

#aba-detalhes .modal-campo > *:nth-child(2),
#aba-avancado .modal-campo > *:nth-child(2),
#aba-empresa-detalhes .modal-campo > *:nth-child(2),
#aba-empresa-avancado .modal-campo > *:nth-child(2)
{
    min-width: 0;
}

/* Coluna do controle: input + texto de ajuda empilhados (evita cair na coluna do rótulo no grid) */
.modal-campo-valor
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.modal-campo-valor .modal-campo-ajuda
{
    margin-top: 0;
}

#aba-detalhes .modal-campo > .modal-passos-num,
#aba-avancado .modal-campo > .modal-passos-num,
#aba-empresa-avancado .modal-campo > .modal-passos-num
{
    justify-self: end;
}

.modal-teste-conexao
{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.modal-teste-conexao-status
{
    display: block;
    font-size: 13px;
    color: #77797A;
    line-height: 1.35;
}

.modal-teste-conexao-status--sucesso
{
    color: var(--cor-primaria, #076053);
}

.modal-teste-conexao-status--erro
{
    color: #b42318;
}

.modal-campo label
{
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.modal-campo input[type="text"],
.modal-campo input[type="email"],
.modal-campo input[type="url"],
.modal-campo input[type="password"],
.modal-campo select
{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.modal-campo input[type="password"]::placeholder
{
    color: #9e9e9e;
}

.modal-radio-linha
{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.modal-radio
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.modal-radio input
{
    accent-color: var(--cor-primaria, #076053);
}

.modal-passos-num
{
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.modal-passos-num > * + *
{
    border-left: 1px solid #e0e0e0;
}

.modal-passos-num button
{
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.modal-passos-num button:hover
{
    background: #f7f7f7;
}

/* Depois de .modal-campo input[type="text"]
{ width: 100% } — mesma especificidade, esta regra vence por ordem */
.modal-passos-num input[type="text"]
{
    flex: 0 0 64px;
    width: 64px;
    max-width: 64px;
    min-width: 64px;
    text-align: center;
    padding: 8px 6px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

.modal-rodape
{
    padding: 16px 22px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #eee;
}

.modal-rodape--espacado
{
    justify-content: space-between;
    align-items: center;
}

.modal-btn-cancelar
{
    padding: 10px 16px;
    border: none;
    background: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

/* Página: configurações da instância (formulário igual ao modal) */
.app-conteudo--config-instancia
{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 20px;
}

/* Margens laterais menores que o padrão do app (28px) */
.pagina-config-instancia .app-barra-titulo
{
    padding-left: 12px;
    padding-right: 12px;
}

/* Form ocupa a coluna abaixo do título para o cartão poder esticar em altura */
.app-conteudo--config-instancia form#formConfigInstancia
{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.app-config-instancia
{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.app-config-instancia .modal-abas
{
    margin-top: 0;
    padding: 10px 16px 0;
    flex-shrink: 0;
    background: #fafafa;
    border-bottom-color: #e8e8e8;
}

/* Página só com customização (sem faixa de abas) */
.app-config-instancia .modal-corpo--pagina-customizacao
{
    border-radius: 12px 12px 0 0;
}

.app-config-instancia .modal-corpo
{
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: none;
    overflow-y: auto;
    padding: 16px 12px 20px;
}

.app-config-instancia-rodape
{
    flex-shrink: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
}

/*
 * Página de configuração (não modal): logos em linha no desktop; miolo usa largura útil.
 * Escopo: apenas .app-config-instancia — o modal de instâncias permanece igual.
 */
.app-config-instancia .painel-custom-inner--figma
{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.app-config-instancia .grid-logos
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* Mesma altura por linha + ações alinhadas na base do card */
.app-config-instancia .upload-bloco
{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.app-config-instancia .upload-bloco-card
{
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.app-config-instancia .upload-bloco-card-corpo
{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
}

/* Cartão de upload em coluna (preview em cima), adequado a colunas estreitas */
.app-config-instancia .upload-bloco-linha
{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.app-config-instancia .upload-bloco-side
{
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.app-config-instancia .upload-acoes
{
    margin-top: auto;
    padding-top: 14px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.app-config-instancia .upload-drop--principal,
.app-config-instancia .upload-drop--compacto,
.app-config-instancia .upload-drop--favicon
{
    width: 100%;
    max-width: 100%;
    min-height: 100px;
    align-self: center;
}

.app-config-instancia .upload-bloco-card-cabecalho
{
    flex-shrink: 0;
    padding: 9px 8px;
}

.app-config-instancia .upload-bloco-card-cabecalho .upload-bloco-titulo
{
    font-size: 12px;
    line-height: 1.35;
}

.app-config-instancia .mi-cores-padrao-linha
{
    max-width: 100%;
    justify-content: flex-start;
}

.app-config-instancia .cores-padrao
{
    flex: 0 1 auto;
}

.app-config-instancia .mi-custom-bloco
{
    max-width: min(960px, 100%);
}

.app-config-instancia .mi-custom-grupo
{
    align-items: start;
}

.app-config-instancia .mi-custom-linhas-cores
{
    max-width: 100%;
}

@media (max-width: 1100px) {
    .app-config-instancia .grid-logos
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .app-config-instancia .grid-logos
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .app-config-instancia .grid-logos
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-config-instancia .modal-abas
    {
        flex-wrap: wrap;
        gap: 4px;
    }

    .app-config-instancia .modal-aba
    {
        padding: 10px 10px;
        font-size: 13px;
    }
}

.modal-btn-salvar
{
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: var(--cor-primaria, #076053);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Módulos lista */
.lista-modulos-item
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.lista-modulos-titulo
{
    font-weight: 600;
    font-size: 14px;
}

.lista-modulos-desc
{
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.toggle-switch
{
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: #ccc;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.toggle-switch--on
{
    background: #2196f3;
}

.toggle-switch::after
{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.toggle-switch--on::after
{
    transform: translateX(20px);
}

.modal-modulo-cb
{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.lista-modulos-item--toggle
{
    cursor: pointer;
}

.lista-modulos-item--toggle .toggle-switch
{
    pointer-events: none;
}

.modal-modulo-cb:focus + .toggle-switch
{
    outline: 2px solid var(--cor-primaria, #076053);
    outline-offset: 2px;
}

.modal-modulo-cb:checked + .toggle-switch
{
    background: #2196f3;
}

.modal-modulo-cb:checked + .toggle-switch::after
{
    transform: translateX(20px);
}

.lista-modulos-vazio
{
    font-size: 13px;
    color: #888;
    margin: 0;
}

.modal-campo-cor input[type="color"]
{
    width: 100%;
    max-width: 120px;
    height: 40px;
    padding: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
}

.painel-custom-inner
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-custom-secao-titulo
{
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
}

.modal-custom-secao-titulo:not(:first-child)
{
    margin-top: 12px;
}

.modal-custom-secao-titulo--normal
{
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 24px;
    margin-bottom: 12px;
}

.painel-custom-inner--figma
{
    gap: 0;
}

.painel-custom-inner--figma > .modal-custom-secao-titulo--normal:first-of-type
{
    margin-top: 0;
}

.painel-custom-grid
{
    display: grid;
    gap: 16px;
}

@media (min-width: 520px)
{
    .painel-custom-grid--logos,
    .painel-custom-grid--cores
    {
        grid-template-columns: 1fr 1fr;
    }
}

.modal-campo-ajuda
{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    line-height: 1.35;
}

.modal-campo-ajuda--menor
{
    font-size: 10px;
    line-height: 1.3;
    color: #9a9c9e;
}

.modal-campo-ajuda a
{
    color: inherit;
    text-decoration: underline;
}

.modal-campo-ajuda a:hover
{
    color: #555;
}

.modal-alerta
{
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.modal-alerta--info
{
    color: #3d5a54;
    background: color-mix(in srgb, var(--cor-primaria, #076053) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--cor-primaria, #076053) 22%, #e8e8e8);
}

.modal-alerta--info a
{
    color: var(--cor-primaria, #076053);
    font-weight: 500;
    text-decoration: underline;
}

.modal-alerta--info a:hover
{
    color: #054a40;
}

/* Modal usuário inicial da empresa — aviso e rodapé */
.modal-empresa-ui-aviso[hidden],
#empresa_ui_passo_senha[hidden]
{
    display: none !important;
}

.modal-empresa-ui-aviso
{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cor-primaria, #076053) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--cor-primaria, #076053) 20%, #e8e8e8);
}

.modal-empresa-ui-aviso-icone
{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--cor-primaria, #076053);
    background: color-mix(in srgb, var(--cor-primaria, #076053) 14%, #fff);
}

.modal-empresa-ui-aviso-conteudo
{
    flex: 1;
    min-width: 0;
}

.modal-empresa-ui-aviso-titulo
{
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}

.modal-empresa-ui-aviso-texto
{
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a5a5a;
}

.modal-empresa-ui-rodape-acoes
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.modal-campo-cor-linha
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.modal-cor-picker
{
    width: 48px;
    height: 40px;
    padding: 2px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    background: #fff;
}

.modal-input-hex
{
    flex: 1;
    min-width: 0;
    max-width: 120px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: ui-monospace, monospace;
}

/* Customização uploads — layout Figma (card + coluna preview | textos) */
.upload-bloco
{
    border: none;
    padding: 0;
    min-width: 0;
}

.upload-bloco-card
{
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    min-width: 0;
    max-width: 100%;
}

.upload-bloco-card-cabecalho
{
    background: #f4f5f7;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 12px;
    text-align: center;
}

.upload-bloco-card-cabecalho .upload-bloco-titulo
{
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}

.upload-bloco-card-corpo
{
    padding: 14px 16px;
    box-sizing: border-box;
}

.upload-bloco-linha
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.upload-bloco-side
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.upload-bloco-copy
{
    font-size: 12px;
    line-height: 1.45;
    color: #757575;
    min-width: 0;
}

.upload-bloco-copy--cheio .upload-arquivo-nome
{
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.upload-copy-linha
{
    margin: 0 0 4px;
}

.upload-copy-linha:last-child
{
    margin-bottom: 0;
}

.upload-acoes
{
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
}

.btn-upload-menor
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--cor-primaria, #076053);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

/* SVG inline deixa “sobra” embaixo; block + tamanho fixo alinha com o texto no flex */
.btn-upload-icone
{
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
}

.link-remover
{
    padding: 0;
    border: none;
    background: none;
    color: #757575;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.link-remover:hover
{
    color: #333;
}

/* Linha “Padrão” + círculos (Figma: label à esquerda, swatches à direita) */
.mi-cores-padrao-linha
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 0;
}

.mi-cores-padrao-label
{
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    color: #757575;
    line-height: 1.2;
}

.mi-cores-divisor
{
    height: 1px;
    margin: 16px 0 20px;
    background: #e8e8e8;
    border: none;
}

.modal-custom-secao-titulo--normal.mi-custom-titulo
{
    margin-top: 0;
    margin-bottom: 12px;
}

.cores-padrao
{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
    align-items: center;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

.cor-preset
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    cursor: pointer;
    padding: 0;
    background-color: var(--cor-preset, #ccc);
    flex-shrink: 0;
    position: relative;
}

.cor-preset--ativa
{
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cor-primaria, #076053);
}

.cor-preset--ativa::after
{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.modal-campo--preset
{
    margin-bottom: 8px;
}

.modal-campo--preset .modal-campo-label-texto
{
    display: block;
    margin-bottom: 10px;
    color: #757575;
    font-weight: 400;
}

@media (max-width: 520px)
{
    .mi-cores-padrao-linha
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .cores-padrao
    {
        flex-wrap: wrap;
    }
}

.cor-linha
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cor-linha label
{
    min-width: 100px;
    font-size: 13px;
}

.cor-preview
{
    width: 36px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.cor-linha input[type="text"]
{
    flex: 1;
    max-width: 120px;
}

/* Customização Figma — grid upload + seletores de cor */
.grid-logos
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.upload-acoes .btn-upload-menor
{
    position: relative;
    overflow: hidden;
    display: inline-flex;
}

.upload-file-input
{
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    width: 100%;
    height: 100%;
}

.upload-bloco-titulo
{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.upload-drop
{
    border: 1px dashed #c5c5c5;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding: 12px;
    box-sizing: border-box;
    background: #fafafa;
    flex-shrink: 0;
}

/* Mesmo tamanho de área para todos os slots (Figma) */
.upload-drop--principal,
.upload-drop--compacto,
.upload-drop--favicon
{
    width: 168px;
    min-height: 112px;
}

.upload-drop-vazio
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #b0b0b0;
}

.upload-drop-icone
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: inherit;
}

.upload-drop-icone svg
{
    display: block;
    overflow: visible;
}

/* Mesma célula: só um visível por vez (evita ícone + miniatura empilhados) */
.upload-drop > .upload-drop-vazio,
.upload-drop > .upload-drop-preview
{
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* display:flex do placeholder não pode vencer [hidden] do UA/autor */
.upload-drop-vazio[hidden],
.upload-bloco--preenchido .upload-drop-vazio
{
    display: none !important;
}

.upload-drop-preview[hidden]
{
    display: none !important;
}

.upload-bloco--preenchido .upload-drop-preview:not([hidden])
{
    display: flex !important;
}

.upload-drop-preview
{
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.upload-preview-img
{
    max-width: 100%;
    /* Área útil ~88px com padding 12px + borda no min-height 112px */
    max-height: 88px;
    object-fit: contain;
    border-radius: 4px;
}

.upload-bloco--preenchido .upload-drop
{
    background: #fff;
    border-style: solid;
    border-color: #e0e0e0;
}

@media (max-width: 560px)
{
    .upload-bloco-linha
    {
        flex-direction: column;
        align-items: stretch;
    }

    .upload-drop--principal,
    .upload-drop--compacto,
    .upload-drop--favicon
    {
        width: 100%;
        min-height: 100px;
    }
}

.mi-custom-bloco
{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Figma: coluna “Tema” + bloco com sublabels alinhadas à direita + uma coluna de inputs */
.mi-custom-grupo
{
    display: grid;
    grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
}

.mi-custom-linhas-cores
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mi-cor-linha
{
    display: grid;
    grid-template-columns: minmax(88px, 110px) minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}

.mi-cor-sublabel
{
    font-size: 13px;
    font-weight: 400;
    color: #757575;
    text-align: right;
    line-height: 1.2;
}

.mi-custom-tema-label
{
    font-size: 13px;
    font-weight: 400;
    color: #757575;
    line-height: 1.3;
    align-self: center;
}

@media (max-width: 480px)
{
    .mi-custom-grupo
    {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .mi-custom-tema-label
    {
        align-self: flex-start;
    }

    .mi-cor-linha
    {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .mi-cor-sublabel
    {
        text-align: left;
    }
}

.mi-cor-pickr-btn
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    margin-top: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    font-family: inherit;
}

.mi-cor-pickr-btn:hover
{
    border-color: #ccc;
}

.mi-cor-swatch
{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.mi-cor-hex
{
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: #1a1a1a;
    text-align: center;
}

.mi-cor-chevron
{
    color: #888;
    flex-shrink: 0;
}

/* Pickr acima do overlay do modal */
.pcr-app
{
    z-index: 300 !important;
}

/* ——— Template alerta (superior direito, abaixo da barra de título) ——— */
.template-alerta-painel-area
{
    position: fixed;
    top: var(--template-alerta-top, 20px);
    right: 20px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.template-alerta-painel
{
    pointer-events: auto;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.template-alerta-painel--visivel
{
    opacity: 1;
    transform: translateX(0);
}

.template-alerta-painel--saida
{
    opacity: 0;
    transform: translateX(22px);
}

.template-alerta-painel-inner
{
    min-width: 260px;
    max-width: 340px;
}

.template-alerta-painel-cabecalho
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-alerta-painel-icone-borda
{
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.template-alerta-painel-icone-svg
{
    display: block;
}

.template-alerta-painel-titulo
{
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.template-alerta-painel-mensagem
{
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

/* Sucesso — tema claro */
.pagina-app--claro .template-alerta-painel--sucesso
{
    background: #e8f5e9;
    border: 2px solid #43a047;
}

.pagina-app--claro .template-alerta-painel--sucesso .template-alerta-painel-titulo
{
    color: #2e7d32;
}

.pagina-app--claro .template-alerta-painel--sucesso .template-alerta-painel-mensagem
{
    color: #1b5e20;
}

.pagina-app--claro .template-alerta-painel--sucesso .template-alerta-painel-icone-borda
{
    background: #43a047;
    color: #fff;
}

/* Sucesso — tema escuro */
.pagina-app--escuro .template-alerta-painel--sucesso
{
    background: #0d1a12;
    border: 2px solid #00e676;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.pagina-app--escuro .template-alerta-painel--sucesso .template-alerta-painel-titulo
{
    color: #69f0ae;
}

.pagina-app--escuro .template-alerta-painel--sucesso .template-alerta-painel-mensagem
{
    color: #c8e6c9;
}

.pagina-app--escuro .template-alerta-painel--sucesso .template-alerta-painel-icone-borda
{
    background: #00e676;
    color: #0d0d0d;
}

/* Erro — tema claro */
.pagina-app--claro .template-alerta-painel--erro
{
    background: #ffebee;
    border: 2px solid #e53935;
}

.pagina-app--claro .template-alerta-painel--erro .template-alerta-painel-titulo
{
    color: #c62828;
}

.pagina-app--claro .template-alerta-painel--erro .template-alerta-painel-mensagem
{
    color: #b71c1c;
}

.pagina-app--claro .template-alerta-painel--erro .template-alerta-painel-icone-borda
{
    background: #e53935;
    color: #fff;
}

/* Erro — tema escuro */
.pagina-app--escuro .template-alerta-painel--erro
{
    background: #1a0c0c;
    border: 2px solid #ff5252;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.pagina-app--escuro .template-alerta-painel--erro .template-alerta-painel-titulo
{
    color: #ff5252;
}

.pagina-app--escuro .template-alerta-painel--erro .template-alerta-painel-mensagem
{
    color: #ffcdd2;
}

.pagina-app--escuro .template-alerta-painel--erro .template-alerta-painel-icone-borda
{
    background: #ff5252;
    color: #141414;
}