/* ==========================================================================
   ER CLINIC 2 — global_v2.css
   Camada de restilização. Carregar DEPOIS de theme-1, styles, custom e records.
   Não altera HTML nem JS: só reestiliza as classes que já existem.
   Seções:
   0. Tokens          6. Botões           12. Alertas (er-alerta + .alert)
   1. Base            7. Formulários      13. Badges / labels
   2. Header          8. Tabelas          14. Paginação
   3. Sidebar         9. Cards / painéis  15. Componentes de terceiros
   4. Conteúdo       10. Modais           16. Utilitários novos (opt-in)
   5. Footer         11. Abas / dropdown
   ========================================================================== */


/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root {
    /* Marca */
    --er-primaria: #29a9d0;
    --er-primaria-hover: #2192b6;
    --er-primaria-escura: #1674a5;
    --er-primaria-clara: #e2f4fb;
    --er-primaria-fundo: #f4faff;
    --er-primaria-borda: #cce5f2;

    /* Interação (hover / ativo) sobre superfícies claras */
    --er-hover-marca: rgba(41, 169, 208, .10);
    --er-hover-marca-forte: rgba(41, 169, 208, .14);
    --er-ativo-marca: rgba(41, 169, 208, .20);

    /* Estados */
    --er-sucesso: #28a745;
    --er-sucesso-fundo: #f4fbf6;
    --er-sucesso-borda: #c8e8cf;
    --er-sucesso-texto: #287d3c;
    --er-aviso: #d89b00;
    --er-aviso-fundo: #fffaf0;
    --er-aviso-borda: #ffe4a3;
    --er-aviso-texto: #856404;
    --er-perigo: #dc3545;
    --er-perigo-fundo: #fff7f7;
    --er-perigo-borda: #f3c5c9;
    --er-perigo-texto: #c82333;

    /* Neutros */
    --er-texto: #2b3a42;
    --er-texto-suave: #59636d;
    --er-texto-mudo: #8a959e;
    --er-borda: #dce6eb;
    --er-borda-forte: #c3d1d9;
    --er-fundo: #f6f9fb;
    --er-superficie: #ffffff;
    --er-hover: #f0f6f9;

    /* Forma */
    --er-raio-sm: 6px;
    --er-raio-md: 10px;
    --er-raio-lg: 16px;
    --er-raio-pill: 999px;

    /* Profundidade */
    --er-sombra-sm: 0 1px 2px rgba(20, 60, 80, .06);
    --er-sombra-md: 0 4px 14px rgba(20, 60, 80, .08);
    --er-sombra-lg: 0 12px 32px rgba(20, 60, 80, .14);
    --er-foco: 0 0 0 3px rgba(41, 169, 208, .22);

    /* Tipografia (Arial só tem 400 e 700) */
    --er-fonte: Helvetica, Arial, sans-serif;
    --er-peso-normal: 400;
    --er-peso-forte: 700;

    --er-transicao: .15s ease-in-out;

    /* Cor de fundo sidebar */
    --er-fundo-menu: #edf2f5;
}


/* ==========================================================================
   1. BASE
   ========================================================================== */
body {
    font-family: var(--er-fonte);
    font-size: 13px;
    color: var(--er-texto-suave);
    background: var(--er-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 991px) {
    .app-content { background: var(--er-fundo); }
}

h1, h2, h3, h4, h5 {
    font-family: var(--er-fonte);
    font-weight: var(--er-peso-normal);
    color: var(--er-texto);
    letter-spacing: -.01em;
}

a { color: var(--er-primaria); transition: color var(--er-transicao); }
a:hover, a:focus, a:active { color: var(--er-primaria-escura); }

::selection { background: var(--er-primaria); color: #fff; }
::-moz-selection { background: var(--er-primaria); color: #fff; }

#nprogress .bar { background: var(--er-primaria) !important; }

.text-muted { color: var(--er-texto-mudo); }
.text-primary { color: var(--er-primaria) !important; }
.text-dark { color: var(--er-texto) !important; }

:focus-visible {
    outline: 2px solid var(--er-primaria);
    outline-offset: 2px;
}

/* scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--er-borda-forte) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--er-borda-forte); border-radius: var(--er-raio-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--er-texto-mudo); }


/* ==========================================================================
   2. HEADER
   ========================================================================== */
header .navbar-header {
    background: var(--er-superficie) !important;
    border-bottom: 1px solid var(--er-borda) !important;
}

header .container-navbar-right,
.navbar .navbar-collapse {
    background: var(--er-superficie);
    border-bottom: 1px solid var(--er-borda);
    box-shadow: var(--er-sombra-sm);
}

header .navbar-header .sidebar-toggler,
header .navbar-header .sidebar-mobile-toggler,
header .navbar-header .menu-toggler {
    color: var(--er-primaria) !important;
}

header .container-navbar-right .navbar-right > li > a {
    color: var(--er-texto-suave);
    border-radius: var(--er-raio-sm);
    transition: background var(--er-transicao);
}

header .container-navbar-right .navbar-right > li > a i {
    color: var(--er-primaria) !important;
}

header .container-navbar-right .navbar-right > li > a:hover,
header .container-navbar-right .navbar-right > li > a:focus,
header .container-navbar-right .navbar-right > li > a:active,
header .container-navbar-right .navbar-right > li.open > a {
    background: var(--er-hover) !important;
}

.navbar-right .badge { background-color: var(--er-perigo); }

.navbar-right > li.current-user > a img { border-radius: var(--er-raio-md); }

header .dropdown-off-sidebar {
    background: var(--er-superficie) !important;
    border-left-color: var(--er-borda) !important;
    color: var(--er-primaria) !important;
}


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */
#sidebar { background: var(--er-fundo) !important; }

#sidebar:before,
#sidebar nav { border-right-color: var(--er-borda) !important; }

#sidebar nav .navbar-title {
    color: var(--er-texto-mudo);
    font-weight: var(--er-peso-forte);
    letter-spacing: .04em;
}

#sidebar nav > ul {
    background: var(--er-superficie) !important;
    border-top-color: var(--er-borda) !important;
    border-bottom-color: var(--er-borda) !important;
    border-radius: 0;
}

#sidebar nav > ul > li > a .item-media > i,
#sidebar nav > ul > li > a .item-media .fa-stack .fa-square {
    color: var(--er-primaria) !important;
}

#sidebar nav > ul > li > a .item-inner {
    color: var(--er-texto-suave) !important;
    border-bottom-color: var(--er-hover);
}

/* item principal: hover / aberto */
#sidebar nav > ul > li.hover,
#sidebar nav > ul > li.open,
.no-touch #sidebar nav > ul > li:hover,
#sidebar nav ul > li.hover,
#sidebar nav ul > li.open,
.no-touch #sidebar nav ul > li:hover {
    background: var(--er-hover-marca) !important;
}

/* item principal: ativo (fundo suave + barra lateral) */
#sidebar nav > ul > li.active,
#sidebar nav > ul > li.active:hover {
    background: var(--er-primaria-clara) !important;
    box-shadow: inset 3px 0 0 var(--er-primaria);
}

#sidebar nav > ul > li.active > a:active:focus {
    background: var(--er-primaria-clara) !important;
}

#sidebar nav > ul > li.active > a .item-inner {
    color: var(--er-primaria-escura) !important;
    font-weight: var(--er-peso-forte);
}

#sidebar nav > ul > li.active > a .item-media > i,
#sidebar nav > ul > li.active > a .item-media .fa-stack .fa-square {
    color: var(--er-primaria-escura) !important;
}

/* submenu: o <li> não pinta, quem pinta é o link */
#sidebar nav > ul .sub-menu,
#sidebar nav > ul > li.active .sub-menu {
    background: var(--er-fundo);
}

ul.sub-menu li.active,
ul.sub-menu li.open,
#sidebar nav > ul .sub-menu > li.open {
    background: transparent !important;
}

#sidebar nav > ul .sub-menu > li > a {
    position: relative;
    color: var(--er-texto-suave);
    transition: background var(--er-transicao), color var(--er-transicao);
}

#sidebar nav > ul .sub-menu > li:hover a,
#sidebar nav > ul .sub-menu > li:focus a,
#sidebar nav > ul .sub-menu > li:active a {
    background: var(--er-hover-marca-forte) !important;
    color: var(--er-primaria-escura);
}

#sidebar nav > ul .sub-menu > li.active a {
    background: var(--er-ativo-marca) !important;
    color: var(--er-primaria-escura);
    font-weight: var(--er-peso-forte);
    box-shadow: inset 3px 0 0 var(--er-primaria);
}

#sidebar nav .button-o {
    border-color: var(--er-primaria) !important;
    color: var(--er-primaria) !important;
    border-radius: var(--er-raio-sm);
}

/* sidebar recolhida */
@media (min-width: 992px) {
    .app-sidebar-closed .app-aside .sub-menu {
        background: var(--er-superficie);
        border-radius: 0 var(--er-raio-md) var(--er-raio-md) 0;
        box-shadow: var(--er-sombra-md);
    }
    .app-sidebar-closed .app-aside .sub-menu li a.hover,
    .no-touch .app-sidebar-closed .app-aside .sub-menu li a:hover,
    .app-sidebar-closed .app-aside .sub-menu li.active > a,
    .app-sidebar-closed .app-aside .sub-menu li.open > a {
        background: var(--er-hover-marca-forte) !important;
    }
}

/* busca do menu */
.navbar-form { background: var(--er-hover) !important; }
.navbar-form .form-control { border-radius: var(--er-raio-sm) !important; }

/* ---- SIDEBAR: mais contraste ---- */

/* título da seção (RELATÓRIOS etc.) */
#sidebar nav .navbar-title { color: #6b7780; }

/* itens principais */
#sidebar nav > ul > li > a .item-inner { color: var(--er-texto) !important; }

/* submenu: fundo cinza marcado + texto escuro */
#sidebar nav > ul .sub-menu,
#sidebar nav > ul > li.active .sub-menu { background: var(--er-fundo-menu); }

#sidebar nav > ul .sub-menu > li > a { color: var(--er-texto); }


/* ==========================================================================
   4. CONTEÚDO
   ========================================================================== */
.main-content > .container { padding-bottom: 60px; }

.mainTitle { font-weight: var(--er-peso-forte); color: var(--er-texto); }

.ct-callout {
    border-left-color: var(--er-primaria);
    border-radius: 0 var(--er-raio-sm) var(--er-raio-sm) 0;
    background: var(--er-primaria-fundo);
}

fieldset {
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
    background: var(--er-superficie);
}

fieldset legend {
    font-family: var(--er-fonte);
    color: var(--er-primaria-escura);
    font-weight: var(--er-peso-forte);
}

.well {
    background: var(--er-fundo);
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
}

.progress {
    background: var(--er-hover);
    border-radius: var(--er-raio-pill);
    overflow: hidden;
}
.progress-bar { background-color: var(--er-primaria); }
.progress-bar-success { background-color: var(--er-sucesso); }
.progress-bar-warning { background-color: var(--er-aviso); }
.progress-bar-danger  { background-color: var(--er-perigo); }

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--er-primaria);
    border-color: var(--er-primaria);
}


/* ==========================================================================
   5. FOOTER
   ========================================================================== */
#app > footer {
    background: var(--er-superficie) !important;
    border-top: 1px solid var(--er-borda) !important;
    color: var(--er-texto-mudo);
}


/* ==========================================================================
   6. BOTÕES
   ========================================================================== */
.btn {
    border-radius: var(--er-raio-sm);
    font-weight: var(--er-peso-normal);
    letter-spacing: .01em;
    transition: background-color var(--er-transicao),
                border-color var(--er-transicao),
                color var(--er-transicao),
                box-shadow var(--er-transicao),
                transform var(--er-transicao) !important;
}

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

.btn:focus-visible { box-shadow: var(--er-foco) !important; }

.btn-default {
    background-color: var(--er-superficie);
    border-color: var(--er-borda-forte);
    color: var(--er-texto-suave);
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--er-hover);
    border-color: var(--er-borda-forte);
    color: var(--er-texto) !important;
}

.btn-primary {
    background-color: var(--er-primaria);
    border-color: var(--er-primaria);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--er-primaria-hover) !important;
    border-color: var(--er-primaria-hover);
    color: #fff;
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(41, 169, 208, .32) !important; }

.btn-primary.btn-o,
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--er-primaria);
    color: var(--er-primaria);
}
.btn-primary.btn-o:hover,
.btn-outline-primary:hover {
    background: var(--er-primaria-clara) !important;
    border-color: var(--er-primaria-hover);
    color: var(--er-primaria-escura);
}

.btn-success { background-color: var(--er-sucesso); border-color: var(--er-sucesso); }
.btn-success:hover { background-color: #23923d !important; border-color: #23923d; }

.btn-danger { background-color: var(--er-perigo); border-color: var(--er-perigo); }
.btn-danger:hover { background-color: #c62d3b !important; border-color: #c62d3b; }

.btn-warning { background-color: var(--er-aviso); border-color: var(--er-aviso); }
.btn-warning:hover { background-color: #c08800 !important; border-color: #c08800; }

.btn-outline-danger  { color: var(--er-perigo); border-color: var(--er-perigo); }
.btn-outline-warning { color: var(--er-aviso);  border-color: var(--er-aviso); }

.btn-link { color: var(--er-primaria); }

.btn-squared { border-radius: 0 !important; }

.input-group-append .btn {
    border-top-right-radius: var(--er-raio-sm) !important;
    border-bottom-right-radius: var(--er-raio-sm) !important;
}

.btn-icon {
    border-radius: var(--er-raio-md);
    border-color: var(--er-borda);
    box-shadow: var(--er-sombra-sm);
}
.btn-icon:hover {
    border-color: var(--er-primaria);
    box-shadow: var(--er-sombra-md);
}

.button-o { border-color: var(--er-primaria); color: var(--er-primaria); border-radius: var(--er-raio-sm); }


/* ==========================================================================
   7. FORMULÁRIOS
   ========================================================================== */
label { color: var(--er-texto-suave); font-weight: var(--er-peso-normal); }

:is(textarea, select, input[type="text"], input[type="password"], input[type="datetime"],
    input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], input[type="url"],
    input[type="search"], input[type="tel"]) {
    border: 1px solid var(--er-borda-forte);
    border-radius: var(--er-raio-sm) !important;
    background-color: var(--er-superficie);
    color: var(--er-texto);
    padding: 6px 10px;
    transition: border-color var(--er-transicao), box-shadow var(--er-transicao), background-color var(--er-transicao);
}

:is(textarea, select, input[type="text"], input[type="password"], input[type="datetime"],
    input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], input[type="url"],
    input[type="search"], input[type="tel"]):hover {
    border-color: var(--er-texto-mudo);
}

:is(textarea, select, input[type="text"], input[type="password"], input[type="datetime"],
    input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], input[type="url"],
    input[type="search"], input[type="tel"]):focus {
    border-color: var(--er-primaria) !important;
    background-color: var(--er-superficie) !important;
    box-shadow: var(--er-foco) !important;
}

/* variante sublinhada existente */
:is(textarea, select, input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="search"], input[type="tel"]).underline {
    border-radius: 0 !important;
}
:is(textarea, select, input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="search"], input[type="tel"]).underline:focus {
    box-shadow: none !important;
    background-color: transparent !important;
}

.form-control::placeholder { color: #a9b3ba; opacity: 1; }

textarea[disabled], input[disabled], select[disabled] {
    background: var(--er-fundo) !important;
    border-color: var(--er-borda) !important;
    color: var(--er-texto-mudo);
}

.form-control-input {
    border-color: var(--er-borda-forte);
    border-radius: var(--er-raio-sm);
    color: var(--er-texto);
}

/* validação */
.has-error .form-control,
.is-invalid {
    border: 1px solid var(--er-perigo) !important;
    border-style: solid !important;
}
.has-error label { color: var(--er-perigo-texto) !important; }
.has-success .form-control { border: 1px solid var(--er-sucesso) !important; border-style: solid !important; }
.has-warning .form-control { border: 1px solid var(--er-aviso) !important;   border-style: solid !important; }
.invalid-feedback { color: var(--er-perigo-texto); font-size: 12px; }

.input-icon > [class*="fa-"],
.input-icon > [class*="ti-"] { color: var(--er-primaria); }

/* checkbox / radio "clip" */
.clip-check label:before {
    border-color: var(--er-borda-forte);
    border-radius: 4px;
}
.clip-check.check-primary input[type="checkbox"]:checked + label:before { border-color: var(--er-primaria); }
.clip-radio.radio-primary input[type="radio"]:checked + label:before { background: var(--er-primaria); }

/* toggle */
.tgl .tgl_bgd { background: var(--er-primaria); }

/* select2 (tema bootstrap4) */
.select2-container--bootstrap4 .select2-selection {
    border-color: var(--er-borda-forte);
    border-radius: var(--er-raio-sm);
    transition: border-color var(--er-transicao), box-shadow var(--er-transicao);
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--er-primaria);
    box-shadow: var(--er-foco);
}
.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: var(--er-primaria) !important;
}
.select2-dropdown {
    border-color: var(--er-borda);
    border-radius: var(--er-raio-sm);
    box-shadow: var(--er-sombra-md);
}

/* datepicker */
.datepicker.dropdown-menu {
    border-radius: var(--er-raio-md);
    border-color: var(--er-borda);
    box-shadow: var(--er-sombra-lg);
    padding: 8px;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--er-primaria) !important;
    background-image: none !important;
    border-radius: var(--er-raio-sm);
}


/* ==========================================================================
   8. TABELAS
   ========================================================================== */
.table,
table.table,
table.dataTable {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* sem divisórias verticais */
.table th,
.table td,
.table-bordered th,
.table-bordered td,
table.dataTable th,
table.dataTable td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* cabeçalho */
.table > thead > tr > th,
table.dataTable > thead > tr > th {
    padding: 12px 14px;
    background: var(--er-fundo);
    color: var(--er-texto-suave) !important;
    font-size: 12px;
    font-weight: var(--er-peso-forte);
    letter-spacing: .03em;
    line-height: 1.3;
    text-align: left;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--er-borda) !important;
}

.table > thead > tr > th:first-child { border-top-left-radius: var(--er-raio-sm); }
.table > thead > tr > th:last-child  { border-top-right-radius: var(--er-raio-sm); }

/* linhas */
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--er-texto) !important;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--er-hover) !important;
}

.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    color: var(--er-texto) !important;
    border-bottom: 1px solid var(--er-hover);
}

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

.table > tbody > tr { transition: background var(--er-transicao); }

.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: var(--er-primaria-fundo);
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th {
    background-color: var(--er-primaria-clara) !important;
    color: var(--er-texto) !important;
}
.table > tbody > tr.active:hover > td,
.table > tbody > tr.active:hover > th {
    background-color: var(--er-primaria-borda) !important;
}

.table-striped > tbody > tr:nth-child(2n+1) { background-color: var(--er-fundo); }

.odd  { background: var(--er-fundo); }
.even { background: var(--er-superficie); }

.table-responsive { border-radius: var(--er-raio-md); }

/* tabela compacta (opt-in): <table class="table table-sm"> */
.table-sm > thead > tr > th { padding: 8px 10px; }
.table-sm > tbody > tr > td { padding: 6px 10px; }

/* sem quebra de linha (opt-in): class="nowrap" no <td>/<th> */
.table td.nowrap, .table th.nowrap { white-space: nowrap; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--er-raio-sm) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--er-texto-mudo); }


/* ==========================================================================
   9. CARDS / PAINÉIS
   ========================================================================== */
.card {
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
    background: var(--er-superficie);
    box-shadow: var(--er-sombra-sm);
}
.card-header {
    background: var(--er-superficie);
    border-bottom: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md) var(--er-raio-md) 0 0;
    font-weight: var(--er-peso-forte);
    color: var(--er-texto);
}
.card-footer {
    background: var(--er-fundo);
    border-top: 1px solid var(--er-borda);
    border-radius: 0 0 var(--er-raio-md) var(--er-raio-md);
}

/* painéis legados */
.panel-white,
.partition-white {
    background: var(--er-superficie);
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
    box-shadow: var(--er-sombra-sm);
    color: var(--er-texto-suave);
}
.panel { border-radius: var(--er-raio-md); }
.panel-title { color: var(--er-texto); font-weight: var(--er-peso-forte); }

.panel-primary,
.partition-primary,
.panel-primary .panel-heading { background-color: var(--er-primaria); }

/* accordion: itens planos, separados por linha fina */
.accordion .card,
.accordion .card-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.accordion .card + .card,
.accordion.card-group .card + .card {
    margin-top: 0;
    border-top: 1px solid var(--er-borda);
}

.accordion .card-header .accordion-toggle {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: var(--er-peso-normal);
    color: var(--er-texto);
    background: transparent;
    transition: background var(--er-transicao), color var(--er-transicao);
}

.accordion .card-header .accordion-toggle:hover {
    background: var(--er-hover);
    color: var(--er-primaria-escura);
}

.accordion .card-header .accordion-toggle > .icon-arrow {
    margin-right: 6px;
    font-size: 13px;
}
.accordion .card-header .accordion-toggle > .icon-arrow:before { color: var(--er-primaria); }

.accordion .card-body { padding: 4px 16px 18px; }

/* timeline do prontuário (records.css) */
.list-records .item-records:first-child .date-record .date,
.form-exam-procedures .page-separator .page-number {
    background-color: var(--er-primaria);
}
.list-records .item-records:first-child .date-record .date:before { border-color: var(--er-primaria); }
.list-records .date-record .date { border-radius: var(--er-raio-sm); }
.list-records .content-record .content-record-inner { border-radius: var(--er-raio-md); }

/* carousel do prontuário */
.carousel-wrapper { position: relative; }
.card-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 1rem;
}
.card-carousel::-webkit-scrollbar { display: none; }
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--er-superficie);
    border: 1px solid var(--er-borda);
    border-radius: 50%;
    box-shadow: var(--er-sombra-md);
    z-index: 2;
    padding: .5rem;
    cursor: pointer;
    display: none;
}
.carousel-arrow.left  { left: .5rem; }
.carousel-arrow.right { right: .5rem; }
.fade-left, .fade-right {
    position: absolute;
    top: 0; bottom: 0;
    width: 50px;
    z-index: 1;
    pointer-events: none;
    display: none;
}
.fade-left  { left: 0;  background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.fade-right { right: 0; background: linear-gradient(to left,  #fff, rgba(255,255,255,0)); }
.card-interno-carousel {
    min-width: 300px;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    background-color: var(--er-superficie);
    background-clip: border-box;
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
    box-shadow: var(--er-sombra-sm);
}


/* ==========================================================================
   10. MODAIS
   ========================================================================== */
.modal-backdrop.show { opacity: .45; }

.modal-content {
    border: none;
    border-radius: var(--er-raio-lg);
    box-shadow: var(--er-sombra-lg);
    overflow: visible !important; /* intl-tel-input precisa */
}
.modal-header {
    border-bottom: 1px solid var(--er-borda);
    border-radius: var(--er-raio-lg) var(--er-raio-lg) 0 0;
    padding: 16px 20px;
}
.modal-title { font-weight: var(--er-peso-forte); color: var(--er-texto); }
.modal-footer {
    border-top: 1px solid var(--er-borda);
    border-radius: 0 0 var(--er-raio-lg) var(--er-raio-lg);
    padding: 12px 20px;
}
.modal-aside.horizontal .modal-dialog .modal-content,
.modal-aside.vertical .modal-dialog .modal-content { border-radius: 0; }

/* SweetAlert2 */
.swal2-popup { border-radius: var(--er-raio-lg) !important; font-family: var(--er-fonte); }


/* ==========================================================================
   11. ABAS / DROPDOWN / TOOLTIP
   ========================================================================== */
.nav-tabs > li > a { color: var(--er-texto-mudo); transition: color var(--er-transicao); }
.nav-tabs > li > a:hover { color: var(--er-primaria); }
.nav-tabs > .active a,
.nav-tabs > .active a:hover,
.nav-tabs > .active a:focus {
    color: var(--er-primaria-escura);
    box-shadow: inset 0 -2px 0 var(--er-primaria);
}
.tab-content { background-color: var(--er-superficie); }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.nav-pills .nav-link.active { background-color: var(--er-primaria); }

.dropdown-menu {
    border: 1px solid var(--er-borda);
    border-radius: var(--er-raio-md);
    box-shadow: var(--er-sombra-md);
    padding: 6px;
}
.dropdown-item { border-radius: var(--er-raio-sm); color: var(--er-texto); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--er-hover-marca-forte); color: var(--er-primaria-escura); }

.tooltip-inner { border-radius: var(--er-raio-sm); }
.popover { border-radius: var(--er-raio-md); border-color: var(--er-borda); box-shadow: var(--er-sombra-md); }


/* ==========================================================================
   12. ALERTAS  (.er-alerta do base.html + .alert global)
   ========================================================================== */
.alert {
    position: relative;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--er-raio-md);
    font-size: 12px;
    line-height: 18px;
    box-shadow: none;
}
.alert a:not(.btn) { color: inherit; font-weight: var(--er-peso-forte); text-decoration: underline; }
.alert a:not(.btn):hover { color: inherit; opacity: .8; }
.alert .btn { padding: 4px 9px; font-size: 11px; white-space: nowrap; }

.alert-dismissable, .alert-dismissible { padding-right: 38px; }
.alert-dismissable .close,
.alert-dismissible .close {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 0;
    transform: translateY(-50%);
    color: inherit;
    font-size: 18px;
    line-height: 18px;
    opacity: .55;
}
.alert-dismissable .close:hover,
.alert-dismissible .close:hover { opacity: .9; }

.alert-primary, .alert-info { color: var(--er-primaria-escura) !important; background-color: var(--er-primaria-fundo) !important; border-color: var(--er-primaria-borda) !important; }
.alert-success   { color: var(--er-sucesso-texto) !important; background-color: var(--er-sucesso-fundo) !important; border-color: var(--er-sucesso-borda) !important; }
.alert-warning   { color: var(--er-aviso-texto) !important;   background-color: var(--er-aviso-fundo) !important;   border-color: var(--er-aviso-borda) !important; }
.alert-danger    { color: var(--er-perigo-texto) !important;  background-color: var(--er-perigo-fundo) !important;  border-color: var(--er-perigo-borda) !important; }
.alert-secondary, .alert-light { color: var(--er-texto-suave) !important; background-color: var(--er-fundo) !important; border-color: var(--er-borda) !important; }
.alert-dark      { color: var(--er-texto) !important; background-color: #f1f2f3 !important; border-color: #ced4da !important; }
.alert.d-flex { gap: 12px; }

.alert-destaque { display: flex; align-items: center; gap: 10px; }
.alert-destaque-icone {
    display: flex; align-items: center; justify-content: center;
    width: 30px; min-width: 30px; height: 30px;
    border-radius: 50%; font-size: 14px;
}
.alert-destaque-conteudo { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.alert-destaque-conteudo > strong { margin-bottom: 1px; font-size: 12px; font-weight: var(--er-peso-forte); }
.alert-destaque-conteudo > span { font-size: 11px; opacity: .85; }
.alert-danger  .alert-destaque-icone { color: var(--er-perigo);  background: #fde8ea; }
.alert-warning .alert-destaque-icone { color: var(--er-aviso);   background: #fff0c7; }
.alert-success .alert-destaque-icone { color: var(--er-sucesso); background: #e2f3e6; }
.alert-info .alert-destaque-icone,
.alert-primary .alert-destaque-icone { color: var(--er-primaria); background: var(--er-primaria-clara); }

/* .er-alerta */
.er-alerta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--er-raio-md);
    font-size: 12px;
}
.er-alerta-icone {
    display: flex; align-items: center; justify-content: center;
    width: 32px; min-width: 32px; height: 32px;
    border-radius: 50%; font-size: 15px;
}
.er-alerta-conteudo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.er-alerta-conteudo > strong { margin-bottom: 1px; font-size: 12px; font-weight: var(--er-peso-forte); }
.er-alerta-conteudo > span { opacity: .85; font-size: 11px; line-height: 15px; }
.er-alerta-conteudo a { color: inherit; font-weight: var(--er-peso-forte); text-decoration: underline; }

.er-alerta-btn {
    flex-shrink: 0;
    padding: 4px 9px;
    color: inherit !important;
    background: rgba(255, 255, 255, .55);
    border: 1px solid currentColor;
    font-size: 11px;
    white-space: nowrap;
}
.er-alerta-btn:hover { color: inherit !important; background: rgba(255, 255, 255, .95); }

.er-alerta-fechar {
    position: relative;
    top: auto; right: auto;
    flex-shrink: 0;
    margin-left: 2px;
    padding: 0;
    font-size: 18px;
    line-height: 18px;
}

.er-alerta-primary, .er-alerta-info { color: var(--er-primaria-escura); background: var(--er-primaria-fundo); border-color: var(--er-primaria-borda); }
.er-alerta-primary .er-alerta-icone, .er-alerta-info .er-alerta-icone { color: var(--er-primaria); background: var(--er-primaria-clara); }
.er-alerta-warning { color: var(--er-aviso-texto); background: var(--er-aviso-fundo); border-color: var(--er-aviso-borda); }
.er-alerta-warning .er-alerta-icone { color: var(--er-aviso); background: #fff0c7; }
.er-alerta-danger  { color: var(--er-perigo-texto); background: var(--er-perigo-fundo); border-color: var(--er-perigo-borda); }
.er-alerta-danger .er-alerta-icone  { color: var(--er-perigo); background: #fde8ea; }
.er-alerta-success { color: var(--er-sucesso-texto); background: var(--er-sucesso-fundo); border-color: var(--er-sucesso-borda); }
.er-alerta-success .er-alerta-icone { color: var(--er-sucesso); background: #e2f3e6; }

@media (max-width: 767px) {
    .er-alerta { gap: 8px; padding: 7px 9px; }
    .er-alerta-icone { width: 28px; min-width: 28px; height: 28px; font-size: 13px; }
    .er-alerta-btn { padding: 3px 7px; }
}
@media (max-width: 575px) {
    .alert { padding: 8px 10px; font-size: 11px; line-height: 16px; }
    .alert-dismissable, .alert-dismissible { padding-right: 34px; }
    .alert-dismissable .close, .alert-dismissible .close { right: 9px; }

    .er-alerta { align-items: flex-start; flex-wrap: wrap; }
    .er-alerta-conteudo { width: calc(100% - 40px); }
    .er-alerta-btn { margin-left: 40px; }
    .er-alerta-fechar { position: absolute; top: 7px; right: 8px; }
    .er-alerta.alert-dismissable .er-alerta-conteudo { padding-right: 18px; }
}


/* ==========================================================================
   13. BADGES / LABELS
   ========================================================================== */
.label, .badge {
    border-radius: var(--er-raio-pill);
    font-weight: var(--er-peso-forte);
    letter-spacing: .01em;
}
.label-primary, .badge-primary, .label-default, .badge-new { background-color: var(--er-primaria); }
.label-success { background-color: var(--er-sucesso); }
.label-warning { background-color: var(--er-aviso); }
.label-danger  { background-color: var(--er-perigo); }
.label-info    { background-color: #46b8da; }

.item-tag { font-size: 100% !important; }


/* ==========================================================================
   14. PAGINAÇÃO
   ========================================================================== */
.pagination > li > a,
.pagination > li > span,
.page-link {
    color: var(--er-primaria);
    border-radius: var(--er-raio-sm);
    border-color: var(--er-borda);
    transition: background var(--er-transicao), color var(--er-transicao);
}
.pagination > li > a:hover,
.page-link:hover { background: var(--er-hover-marca-forte); color: var(--er-primaria-escura); }

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.page-item.active .page-link {
    background-color: var(--er-primaria);
    border-color: var(--er-primaria);
    color: #fff;
}


/* ==========================================================================
   15. COMPONENTES DE TERCEIROS (movido do <style> do _head_meta)
   ========================================================================== */

/* select2 — altura da lista */
.select2-container--bootstrap4 .select2-results > .select2-results__options {
    max-height: 24em;
    overflow-y: auto;
}

/* TinyMCE / CKEditor */
.tox.tox-tinymce-aux { z-index: 10000; }
.tox .tox-editor-header { display: grid; grid-template-columns: 1fr min-content; z-index: 1 !important; }
.ck-editor__editable { min-height: 320px; }
.ck.ck-editor__main { font-size: 16px; }

/* intl-tel-input */
.form-group { flex-direction: column; }
.form-group label,
.form-group .control-label { display: block !important; width: 100%; margin-bottom: .5rem; }
.form-group .iti { display: block !important; width: 100% !important; }
.form-group .iti .form-control { width: 100% !important; }
.iti--container, .iti__country-list { z-index: 20000 !important; }
.iti__search-input {
    padding-left: 36px !important;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    border-radius: var(--er-raio-sm);
    font-size: .875rem;
}
.iti__search-icon {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%);
    pointer-events: none;
}

/* wPaint — ícones em Font Awesome 4 (o sistema carrega FA4, não FA6) */
.wPaint-menu { min-width: 440px !important; }
.wPaint-menu-icon {
    background: var(--er-superficie) !important;
    border: 1px solid var(--er-borda) !important;
    border-radius: var(--er-raio-sm) !important;
    box-shadow: none !important;
    transition: var(--er-transicao);
}
.wPaint-menu-icon:hover {
    background: var(--er-hover-marca-forte) !important;
    border-color: var(--er-primaria-borda) !important;
}
.wPaint-menu-icon.active {
    background: var(--er-primaria) !important;
    border-color: var(--er-primaria) !important;
    color: #fff !important;
}
.wPaint-menu-icon.wPaint-menu-icon-name-pencil  .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-eraser  .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-text    .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-line    .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-ellipse .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-rect    .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-bucket  .wPaint-menu-icon-img,
.wPaint-menu-icon.wPaint-menu-icon-name-clear   .wPaint-menu-icon-img { opacity: 0 !important; }

.wPaint-menu-icon-name-pencil::before,
.wPaint-menu-icon-name-eraser::before,
.wPaint-menu-icon-name-text::before,
.wPaint-menu-icon-name-line::before,
.wPaint-menu-icon-name-ellipse::before,
.wPaint-menu-icon-name-rect::before,
.wPaint-menu-icon-name-bucket::before,
.wPaint-menu-icon-name-clear::before {
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 1;
    color: var(--er-texto-suave);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wPaint-menu-icon.active::before { color: #fff !important; }

/* códigos FA4: pencil, eraser, font, minus, circle-o, square-o, tint, trash-o */
.wPaint-menu-icon-name-pencil::before  { content: "\f040"; }
.wPaint-menu-icon-name-eraser::before  { content: "\f12d"; }
.wPaint-menu-icon-name-text::before    { content: "\f031"; }
.wPaint-menu-icon-name-line::before    { content: "\f068"; }
.wPaint-menu-icon-name-ellipse::before { content: "\f10c"; }
.wPaint-menu-icon-name-rect::before    { content: "\f096"; }
.wPaint-menu-icon-name-bucket::before  { content: "\f043"; }
.wPaint-menu-icon-name-clear::before   { content: "\f014"; }

.wColorPicker-theme-classic .wColorPicker-bg { background-color: var(--er-hover) !important; }

/* utilitários que estavam no <style> inline */
.item-readonly { pointer-events: none; opacity: .7; }
.hidden-important { display: none !important; }
.text-decoration-line-through { text-decoration: line-through; }
.no-line-through { text-decoration: none !important; display: inline-block; }
.font-italic { font-style: italic !important; }
.no-italic { font-style: normal !important; }
.botoes-controles-itens-prontuario { cursor: pointer; padding: 0; width: 20px; height: 20px; }

select#whatsapp-select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background-image: initial;
}


/* ==========================================================================
   16. UTILITÁRIOS NOVOS (opt-in, para usar nos templates quando quiser)
   ========================================================================== */
.botao_arredondado  { border-radius: var(--er-raio-pill) !important; padding-left: 1.1rem; padding-right: 1.1rem; }
.botao_suave        { border-radius: var(--er-raio-md) !important; }

.card_arredondado   { border-radius: var(--er-raio-lg) !important; }
.card_elevado       { box-shadow: var(--er-sombra-md) !important; border-color: transparent !important; }
.card_interativo    { transition: box-shadow var(--er-transicao), transform var(--er-transicao); }
.card_interativo:hover { box-shadow: var(--er-sombra-md); transform: translateY(-2px); }

.input_arredondado  { border-radius: var(--er-raio-pill) !important; padding-left: 14px; padding-right: 14px; }

.superficie         { background: var(--er-superficie); border: 1px solid var(--er-borda); border-radius: var(--er-raio-md); }
.texto_suave        { color: var(--er-texto-suave) !important; }
.texto_mudo         { color: var(--er-texto-mudo) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}









/* GAMBIARRA AGENDA */
/* barra de ações do modal de agendamento: sempre em uma linha */
.form-group.barra-acoes-agenda {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.barra-acoes-agenda > .btn,
.barra-acoes-agenda > .btn-group {
    flex: 0 0 auto;
    margin: 0;
}

.barra-acoes-agenda .btn {
    white-space: nowrap;
    letter-spacing: 0;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* histórico: botão compacto, só ícone, na ponta esquerda */
.barra-acoes-agenda > a.float-left {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0 auto 0 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.barra-acoes-agenda > a.float-left i {
    margin: 0 auto;
    font-size: 12px;
}