/* Camada de TEMA — carregada por último (override).
 * Tema ÚNICO "Claro" (chave interna data-theme="light3", skin data-skin="pro"), a mesma
 * paleta slate/navy criada no Controller.Web. Esta é uma tela pública de cliente: não há
 * seletor de tema nem variante escura (mesma decisão do acesso externo do Controller.Web).
 * Trocar a paleta = editar os hex dos blocos :root / html[data-theme="light3"] abaixo.
 * Não toca em componentes/JS — só aparência.
 */

:root {
    --bg:            #eef1f5;
    --surface:       #ffffff;
    --surface-2:     #f6f8fb;
    --text:          #2b3138;
    --text-muted:    #6b7785;
    --border:        #e3e8ef;
    --accent:        #008bb9;
    --accent-2:      #337ab7;
    --accent-soft:   rgba(0,139,185,.15);
    --radius:        8px;
    --radius-sm:     6px;
    --shadow:        0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --navbar-bg:     #ffffff;
}

/* ===== Tema "Claro" (light3 — estilo "pro": acento azul-slate + chrome navy) ===== */
html[data-theme="light3"] {
    --bg:            #f5f7fb;   /* cinza-azulado bem claro */
    --surface:       #ffffff;
    --surface-2:     #eef2f8;   /* azulado claro (hover / zebra) */
    --text:          #1e293b;   /* navy slate */
    --text-muted:    #64748b;   /* slate */
    --border:        #e3e8f1;
    --accent:        #3d5d8c;   /* azul-slate dessaturado */
    --accent-2:      #324c73;   /* slate-blue mais escuro (hover / botões) */
    --accent-soft:   rgba(61,93,140,.14);
    --radius:        10px;
    --radius-sm:     8px;
    --shadow:        0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --navbar-bg:     #1e293b;   /* chrome navy (painel da marca) */

    /* Paleta semântica (família slate, p/ não competir com o navy) */
    --primary:   var(--accent);  --primary-2:  var(--accent-2);
    --success:   #45855f;  --success-2:  #386c4d;   /* verde sálvia */
    --warning:   #b27c34;  --warning-2:  #946328;   /* âmbar suave */
    --danger:    #bd534f;  --danger-2:   #a0403c;   /* vermelho tijolo */
    --info:      #4885a0;  --info-2:     #3a6c83;   /* azul-petróleo suave */
}

/* ---------- Base ---------- */
body {
    background: var(--bg) !important;
    color: var(--text);
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, label, .control-label { color: var(--text); }
.text-muted, small, .help-block { color: var(--text-muted) !important; }
a:not(.btn) { color: var(--text); }
a:not(.btn):hover, a:not(.btn):focus { color: var(--accent); }
hr { border-top-color: var(--border); }
.title-hr-separator { border-top-color: var(--border) !important; }

/* ---------- Superfícies (cards/painéis/modais/dropdowns) ---------- */
.panel, .well, .modal-content, .list-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}
.panel-default > .panel-heading,
.panel-heading {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.panel-footer { background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text); }

/* Modal (dialog do dlib): o .modal-content é arredondado (var(--radius)), mas o header
   colorido e o footer são retangulares e vazavam alguns pixels de cor nos 4 cantos.
   O overflow recorta o conteúdo no raio; o border-radius em header/footer é o reforço
   (o overflow sozinho não basta em zoom/rendering fracionado de alguns navegadores).
   Seguro aqui porque o dialog não tem dropdown/popup que precise escapar do card —
   NÃO fazer o mesmo no .panel, que contém o dropdown do chosen. */
.modal-content { overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.modal-footer { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.bs-callout { background: var(--surface) !important; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); color: var(--text); }

/* ---------- Formulários ---------- */
.form-control {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control::placeholder { color: var(--text-muted); }
.input-group-addon { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
select.form-control, textarea.form-control { background: var(--surface); color: var(--text); }
.well { background: var(--surface-2); }

/* ---------- Botões ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
html[data-skin="pro"] .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-skin="pro"] .btn-primary:hover, html[data-skin="pro"] .btn-primary:focus, html[data-skin="pro"] .btn-primary:active { background: var(--primary-2) !important; border-color: var(--primary-2) !important; }
html[data-skin="pro"] .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
html[data-skin="pro"] .btn-success:hover, html[data-skin="pro"] .btn-success:focus, html[data-skin="pro"] .btn-success:active { background: var(--success-2) !important; border-color: var(--success-2) !important; }
html[data-skin="pro"] .btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
html[data-skin="pro"] .btn-info:hover, html[data-skin="pro"] .btn-info:focus { background: var(--info-2) !important; border-color: var(--info-2) !important; }
html[data-skin="pro"] .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
html[data-skin="pro"] .btn-warning:hover, html[data-skin="pro"] .btn-warning:focus { background: var(--warning-2) !important; border-color: var(--warning-2) !important; }
html[data-skin="pro"] .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
html[data-skin="pro"] .btn-danger:hover, html[data-skin="pro"] .btn-danger:focus { background: var(--danger-2) !important; border-color: var(--danger-2) !important; }
html[data-skin="pro"] .btn-default { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-skin="pro"] .btn-default:hover, html[data-skin="pro"] .btn-default:focus { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-skin="pro"] .btn-link { color: var(--primary) !important; }

/* ---------- Texto semântico ----------
   .text-primary é usado no legado como "título de bloco" → grafite (o azul fica nas ações). */
html[data-skin="pro"] .text-primary { color: var(--text) !important; }
html[data-skin="pro"] .text-success { color: var(--success-2) !important; }
html[data-skin="pro"] .text-danger  { color: var(--danger) !important; }
html[data-skin="pro"] .text-warning { color: var(--warning-2) !important; }
html[data-skin="pro"] .text-info    { color: var(--info-2) !important; }
html[data-skin="pro"] .sub-title-label { color: var(--text) !important; }

/* ---------- Alerts / labels / badges ---------- */
html[data-skin="pro"] .alert-info    { background: rgba(72,133,160,.10) !important; border-color: rgba(72,133,160,.28) !important; color: var(--info-2) !important; }
html[data-skin="pro"] .alert-success { background: rgba(69,133,95,.10) !important; border-color: rgba(69,133,95,.28) !important; color: var(--success-2) !important; }
html[data-skin="pro"] .alert-warning { background: rgba(178,124,52,.10) !important; border-color: rgba(178,124,52,.28) !important; color: var(--warning-2) !important; }
html[data-skin="pro"] .alert-danger  { background: rgba(189,83,79,.10) !important; border-color: rgba(189,83,79,.28) !important; color: var(--danger-2) !important; }
html[data-skin="pro"] .label-primary, html[data-skin="pro"] .badge-primary { background-color: var(--primary) !important; }
html[data-skin="pro"] .label-success, html[data-skin="pro"] .badge-success { background-color: var(--success) !important; }
html[data-skin="pro"] .label-danger,  html[data-skin="pro"] .badge-danger  { background-color: var(--danger) !important; }

/* ---------- Modais (dialog do dlib) ---------- */
html[data-skin="pro"] .modal-header-primary { background-color: var(--primary) !important; }
html[data-skin="pro"] .modal-header-info { background-color: var(--info) !important; }
html[data-skin="pro"] .modal-header-success { background-color: var(--success) !important; }
html[data-skin="pro"] .modal-header-warning { background-color: var(--warning) !important; }
html[data-skin="pro"] .modal-header-danger { background-color: var(--danger) !important; }

/* ---------- Loading bar / loader ---------- */
html[data-skin="pro"] #loading-bar .bar { background: var(--primary) !important; }
html[data-skin="pro"] .loader, html[data-skin="pro"] .loader-mini { border-top-color: var(--primary) !important; }

/* ---------- Selects "chosen" (third-party) → variáveis do tema ---------- */
.chosen-container .chosen-drop { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
.chosen-container-single .chosen-single {
    background: var(--surface) !important;   /* remove o gradiente Web 2.0 */
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.chosen-container-single .chosen-default { color: var(--text-muted) !important; }
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.chosen-container-active.chosen-with-drop .chosen-single { background: var(--surface) !important; }
.chosen-container .chosen-results { background: var(--surface) !important; color: var(--text) !important; }
.chosen-container .chosen-results li,
.chosen-container .chosen-results li.active-result { background-color: transparent !important; color: var(--text) !important; }
.chosen-container .chosen-results li.highlighted,
.chosen-container .chosen-results li.active-result:hover,
.chosen-container .chosen-results li:hover { background: var(--accent) !important; color: #fff !important; }
.chosen-container .chosen-results li.result-selected { background: var(--surface-2) !important; color: var(--text) !important; }
.chosen-container .chosen-results li.no-results { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.chosen-container-single .chosen-search input[type=text],
.chosen-container .chosen-search input[type=text] {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* =====================================================================
   Layout da tela — split "branded": painel navy (identidade do Controller)
   à esquerda + o fluxo do retorno à direita. Mesma estrutura da tela de
   login do Controller.Web, com namespace próprio (.retorno-*).
   ===================================================================== */
.retorno-screen { display: flex; min-height: 100vh; background: var(--bg); }

.retorno-brand {
    flex: 0 0 38%;
    max-width: 520px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    color: #dbe3f0;
    background:
        radial-gradient(120% 80% at 18% 22%, rgba(120,160,230,.18), transparent 60%),
        linear-gradient(160deg, var(--navbar-bg), #0f1722);
    overflow: hidden;
}
.retorno-brand__inner { position: relative; z-index: 1; max-width: 380px; }
.retorno-brand__logo { display: block; color: #fff; margin-bottom: 20px; }
/* o app.css fixa o tamanho do glyphicons no ::before — o override precisa ir nele também */
.retorno-brand__logo, .retorno-brand__logo:before { font-size: 46px; line-height: 1; }
.retorno-brand__name { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.05; }
.retorno-brand__name::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 18px; border-radius: 3px; background: var(--accent); }
.retorno-brand__tagline { margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: #aab6c9; }
.retorno-brand__foot { position: relative; z-index: 1; margin-top: auto; padding-top: 28px; font-size: 13px; letter-spacing: .04em; color: #7e8ba3; }

.retorno-panel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 40px 24px; overflow-y: auto; }
.retorno-stack { width: 100%; max-width: 620px; }
.retorno-screen img { max-width: 100%; }

/* ---------- Mensagens cadastradas no Controller (markdown renderizado) ----------
   O conteúdo vem de Suporte → Atendimentos → Configurações e é escrito em markdown
   (ver mensagem-markdown-service.js). Aqui mora TODA a aparência delas: o cadastro
   define texto e estrutura, o tema define tipografia e cor. */
/* A mensagem é um recado do suporte, não parte do formulário: separa do que vem
   depois com respiro + divisória (sem isso o texto encostava no primeiro label da tela).
   :empty cobre a mensagem inativa/vazia — sem conteúdo, nem a divisória aparece. */
.msg-render {
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.msg-render:empty { display: none; }
.msg-render > *:first-child { margin-top: 0; }
.msg-render > *:last-child { margin-bottom: 0; }
.msg-render p { margin: 0 0 10px; line-height: 1.55; }
.msg-render h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.msg-render h4 { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
.msg-render h5 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: var(--text-muted); }
.msg-render ul { margin: 0 0 10px; padding-left: 20px; }
.msg-render li { margin-bottom: 4px; line-height: 1.5; }
.msg-render a { color: var(--accent); text-decoration: underline; }
.msg-render a:hover, .msg-render a:focus { color: var(--accent-2); }
.msg-render strong { font-weight: 600; }

/* Destaques (:::alerta / :::aviso / :::info / :::ok) — a cor semântica fica na BORDA e no
   título; o corpo continua no texto normal, para não virar um bloco gritante (mesma
   convenção dos callouts do Controller.Web). */
.msg-destaque {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 12px;
}
.msg-destaque > *:last-child { margin-bottom: 0; }
.msg-destaque--alerta { border-left-color: var(--danger); }
.msg-destaque--aviso  { border-left-color: var(--warning); }
.msg-destaque--info   { border-left-color: var(--info); }
.msg-destaque--ok     { border-left-color: var(--success); }
.msg-destaque--alerta h3, .msg-destaque--alerta h4 { color: var(--danger); }
.msg-destaque--aviso h3,  .msg-destaque--aviso h4  { color: var(--warning-2); }
.msg-destaque--info h3,   .msg-destaque--info h4   { color: var(--info-2); }
.msg-destaque--ok h3,     .msg-destaque--ok h4     { color: var(--success-2); }

/* Card que envolve o passo corrente do fluxo */
.retorno-card { margin-bottom: 0; }
.retorno-card > .panel-body { padding: 26px 28px; }

.retorno-footer { margin-top: 18px; text-align: center; }
.retorno-footer img { opacity: .85; }

/* Responsivo: empilha (a marca vira uma faixa compacta no topo) */
@media (max-width: 860px) {
    .retorno-screen { flex-direction: column; }
    .retorno-brand { flex: 0 0 auto; max-width: none; padding: 24px 22px; justify-content: flex-start; }
    .retorno-brand__inner { max-width: none; }
    .retorno-brand__logo, .retorno-brand__logo:before { font-size: 32px; }
    .retorno-brand__logo { margin-bottom: 10px; }
    .retorno-brand__name { font-size: 26px; }
    .retorno-brand__name::after { margin-top: 12px; }
    .retorno-brand__tagline { font-size: 14px; margin-top: 12px; }
    .retorno-brand__foot { display: none; }
    .retorno-panel { padding: 22px 14px 36px; }
    .retorno-card > .panel-body { padding: 18px 16px; }
}

/* Autofill do Chrome: por padrão pinta o input de branco com texto preto, ignorando o tema. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1e293b !important;
    caret-color: #1e293b;
    border-color: #e3e8f1 !important;
}

/* ---------- Aviso de telefonia indisponível ----------
   Porte da página estática que a infra colocava no lugar do app quando a telefonia caía.
   Mesmo conteúdo, agora dentro do card e com as cores do tema (o original trazia vermelho
   e azul próprios). Aparece quando a configuração do atendimento liga a chave. */
.aviso-fora__barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -26px -28px 20px;           /* encosta nas bordas do card, como a faixa do original */
    padding: 12px 28px;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.aviso-fora__titulo { margin: 0 0 20px; font-size: 21px; font-weight: 700; line-height: 1.35; }
/* Texto de comunicado: linhas mais soltas que as de formulário — é para ser lido corrido,
   não escaneado. (Este bloco não é .msg-render, então precisa da própria tipografia.) */
.aviso-fora p { margin: 0 0 16px; line-height: 1.7; }
.aviso-fora > p:last-of-type { margin-bottom: 0; }
.aviso-fora .msg-destaque { margin-bottom: 20px; padding: 16px 18px; }
.aviso-fora .msg-destaque p { margin: 0; line-height: 1.65; }
.aviso-fora__cta { margin: 26px 0 0; padding: 13px 16px; font-size: 16px; font-weight: 600; }
.aviso-fora__cta .glyphicons { margin-right: 6px; }
.aviso-fora p.aviso-fora__assinatura { margin: 22px 0 0; font-style: italic; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 860px) {
    .aviso-fora__barra { margin: -18px -16px 16px; padding: 10px 16px; }
    .aviso-fora__titulo { font-size: 18px; }
}