/* ================================================================
   Prontuário Eletrônico — Prefeitura de Mossoró / RN
   Sistema de Urgência e Hospitais
   ================================================================ */

/* --- Variáveis -------------------------------------------------- */
:root {
    --pe-navy:          #0d2847;
    --pe-navy-mid:      #153a5f;
    --pe-navy-light:    #1e5799;
    --pe-accent:        #c9a227;
    --pe-accent-hover:  #b8911f;
    --pe-bg:            #eef2f7;
    --pe-card:          #ffffff;
    --pe-border:        #d5dfe9;
    --pe-border-light:  #eaf0f7;
    --pe-text:          #1a2c42;
    --pe-text-muted:    #546e8a;
    --pe-radius:        10px;
    --pe-radius-sm:     6px;
    --pe-shadow-xs:     0 1px 3px rgba(13,40,71,.07);
    --pe-shadow-sm:     0 2px 8px rgba(13,40,71,.10);
    --pe-shadow:        0 4px 16px rgba(13,40,71,.13);
    --pe-shadow-lg:     0 10px 36px rgba(13,40,71,.18);
    --pe-transition:    .16s ease;
}

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

/* Skip link — WCAG 2.1 — visível apenas ao receber foco via teclado */
.pe-skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 9999;
    background: var(--pe-navy);
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 0 0 var(--pe-radius-sm) var(--pe-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: top .15s;
    text-decoration: none;
}
.pe-skip-link:focus {
    top: 0;
    outline: 3px solid var(--pe-accent);
}

.pe-body {
    font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
    background: var(--pe-bg);
    color: var(--pe-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.pe-topbar {
    background: linear-gradient(105deg, var(--pe-navy) 0%, var(--pe-navy-mid) 60%, #1b4d7a 100%);
    color: #fff;
    border-bottom: 3px solid var(--pe-accent);
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 2px 18px rgba(13,40,71,.32);
}

.pe-topbar-inner {
    padding: 0 1.75rem;
}

/* Topbar-row: flex com título absolutamente centrado */
.pe-topbar-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    min-height: 62px;
    gap: 0.75rem;
}

/* Ícone de saúde — extremo esquerdo */
.pe-brand-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.14);
    border-radius: var(--pe-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.24);
    font-size: 1.15rem;
    color: #fff;
}

/* Título — absolutamente centrado em relação ao topbar-row inteiro */
.pe-brand {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1.25;
    pointer-events: none;
    z-index: 0;
}

.pe-brand-title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pe-brand-sub {
    display: block;
    font-size: 0.75rem;
    opacity: .72;
    font-weight: 400;
    white-space: nowrap;
}

/* Área do usuário — extremo direito, 2 linhas empilhadas */
.pe-user-area {
    position: relative;
    z-index: 1;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.28rem;
}

/* Linha 1: nome + botão sair */
.pe-user-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Linha 2: unidade */
.pe-user-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Nome do usuário */
.pe-user-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(255,255,255,.92);
}

.pe-user-name i { font-size: 1rem; opacity: .85; }

/* Botão Sair */
.pe-btn-sair {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: var(--pe-radius-sm);
    border: 1px solid rgba(255,255,255,.28);
    transition: background var(--pe-transition), color var(--pe-transition), border-color var(--pe-transition);
    white-space: nowrap;
}

.pe-btn-sair:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
    border-color: rgba(255,255,255,.5);
}

.pe-btn-sair i { font-size: 0.9rem; }

/* Badge de unidade (quando só 1 estabelecimento) */
.pe-unit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,.1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--pe-radius-sm);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 0.75rem;
    font-weight: 600;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,.85);
}

.pe-unit-badge i { opacity: .8; font-size: 0.85rem; }

/* Formulário de troca de unidade (quando múltiplas) */
.pe-unit-form {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.pe-unit-form-icon {
    font-size: 0.82rem;
    opacity: .72;
    flex-shrink: 0;
    color: #fff;
}

/* Select estilizado para o topbar escuro */
.pe-topbar-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255,255,255,.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.6)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--pe-radius-sm);
    color: rgba(255,255,255,.88);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0.18rem 1.6rem 0.18rem 0.55rem;
    cursor: pointer;
    max-width: 220px;
    transition: border-color var(--pe-transition), background-color var(--pe-transition);
}

.pe-topbar-select:hover {
    background-color: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.38);
}

.pe-topbar-select:focus {
    outline: none;
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 0 0 2px rgba(255,255,255,.1);
}

.pe-topbar-select option {
    background-color: var(--pe-navy);
    color: #fff;
    font-size: 0.85rem;
}

/* Compat. legado */
.pe-topbar-sep   { display: none; }
.pe-topbar-sep-v { display: none; }

/* Compat. com links legados */
.pe-link-light {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--pe-transition);
}
.pe-link-light:hover { color: var(--pe-accent); }

/* ================================================================
   SUBNAV (Navegação principal)
   ================================================================ */
.pe-subnav {
    background: #fff;
    border-bottom: 1px solid var(--pe-border);
    box-shadow: 0 1px 4px rgba(13,40,71,.06);
}

.pe-subnav .nav {
    display: flex;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pe-subnav .nav::-webkit-scrollbar { display: none; }

.pe-subnav .nav-link {
    color: var(--pe-text-muted);
    font-weight: 600;
    font-size: 0.83rem;
    border-radius: 0;
    padding: 0.62rem 0.9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--pe-transition), background var(--pe-transition);
    border-bottom: 2px solid transparent;
    position: relative;
}

.pe-subnav .nav-link i {
    font-size: 0.95rem;
}

.pe-subnav .nav-link:hover {
    color: var(--pe-navy);
    background: rgba(13,40,71,.04);
    border-bottom-color: var(--pe-border);
}

.pe-subnav .nav-link.active {
    color: var(--pe-navy);
    background: rgba(13,40,71,.05);
    border-bottom-color: var(--pe-navy);
    font-weight: 700;
}

/* ================================================================
   (barra de contexto removida — seletor integrado ao topbar)
   ================================================================ */

/* ================================================================
   CONTEÚDO PRINCIPAL
   ================================================================ */
.pe-main {
    flex: 1;
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

.pe-main > .container-fluid,
.pe-main.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Cabeçalho de página padrão */
.pe-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--pe-border-light);
}

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

/* ================================================================
   CARDS
   ================================================================ */
.card {
    border: 1px solid var(--pe-border-light);
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow-xs);
    background: var(--pe-card);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--pe-border-light);
    padding: 0.9rem 1.25rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--pe-navy);
    border-radius: var(--pe-radius) var(--pe-radius) 0 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body { padding: 1.25rem; }
.card-footer {
    background: #fafbfc;
    border-top: 1px solid var(--pe-border-light);
    padding: 0.85rem 1.25rem;
    border-radius: 0 0 var(--pe-radius) var(--pe-radius);
}

/* Cards estatísticos do dashboard */
.pe-card-stat {
    border: none;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow-sm);
    border-left: 4px solid var(--pe-accent);
    transition: transform var(--pe-transition), box-shadow var(--pe-transition);
    background: var(--pe-card);
}

.pe-card-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow);
}

.pe-card-stat .card-body { padding: 1.25rem 1.35rem; }

.pe-card-stat .pe-stat-label {
    font-size: 0.755rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pe-text-muted);
    margin-bottom: 0.5rem;
}

.pe-card-stat h2 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pe-text-muted);
    margin-bottom: 0.45rem;
}

.pe-card-stat .display-6 {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--pe-navy);
    line-height: 1;
    letter-spacing: -.02em;
}

.pe-card-stat.pe-stat-blue   { border-left-color: #1565c0; }
.pe-card-stat.pe-stat-green  { border-left-color: #2e7d32; }
.pe-card-stat.pe-stat-red    { border-left-color: #c62828; }
.pe-card-stat.pe-stat-orange { border-left-color: #e65100; }

/* ================================================================
   FORMULÁRIOS
   ================================================================ */
.form-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--pe-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    border-color: var(--pe-border);
    border-radius: var(--pe-radius-sm);
    font-size: 0.9rem;
    color: var(--pe-text);
    background-color: #fff;
    transition: border-color var(--pe-transition), box-shadow var(--pe-transition);
    padding: 0.46rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pe-navy-light);
    box-shadow: 0 0 0 3px rgba(30,87,153,.14);
    outline: none;
}

.form-control::placeholder { color: #a8bdd1; }

.form-control-lg {
    font-size: 0.975rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--pe-radius-sm);
}

.form-text {
    font-size: 0.78rem;
    color: var(--pe-text-muted);
}

/* Cabeçalho de seção de formulário */
.pe-form-section {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--pe-border-light);
    margin-bottom: 0.25rem;
}

.pe-form-section::before {
    content: '';
    display: block;
    width: 3px;
    height: 18px;
    background: var(--pe-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.pe-form-section h2 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pe-navy);
    margin: 0;
    flex: 1;
}

.input-group .form-control { z-index: 1; }
.input-group .btn { z-index: 1; }

/* ================================================================
   BOTÕES
   ================================================================ */
.btn {
    border-radius: var(--pe-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--pe-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background: var(--pe-navy-mid);
    border-color: var(--pe-navy-mid);
    box-shadow: 0 4px 12px rgba(13,40,71,.3);
    color: #fff;
}

.btn-success {
    background: #2e7d32;
    border-color: #2e7d32;
}

.btn-success:hover {
    background: #256427;
    border-color: #256427;
    box-shadow: 0 4px 12px rgba(46,125,50,.3);
}

.btn-outline-secondary {
    border-color: var(--pe-border);
    color: var(--pe-text-muted);
}

.btn-outline-secondary:hover {
    background: var(--pe-bg);
    border-color: #b0bec5;
    color: var(--pe-text);
}

.btn-outline-info {
    border-color: #0288d1;
    color: #0277bd;
}

.btn-outline-info:hover {
    background: #e1f5fe;
    border-color: #0277bd;
    color: #01579b;
}

/* ================================================================
   BOTÕES SEMÂNTICOS — cor consistente por funcionalidade
   ================================================================
   🟢 Salvar / Confirmar / Registrar / Concluir
   🔵 Novo / Cadastrar
   🔷 Editar
   🔍 Buscar / Pesquisar / Filtrar / Atualizar
   📂 Abrir / Ver / Ir para / Iniciar
   🖨️ Imprimir / Gerar arquivo
   ➕ Adicionar linha
   💊 Usar / Copiar
   (Cancelar/Voltar → btn-outline-secondary, Excluir/Remover → btn-danger)
   ================================================================ */

/* Salvar / Confirmar / Registrar / Concluir */
.btn-pe-save {
    background: #1a7c50;
    border-color: #1a7c50;
    color: #fff;
}
.btn-pe-save:hover, .btn-pe-save:focus {
    background: #155f3e;
    border-color: #155f3e;
    color: #fff;
    box-shadow: 0 4px 12px rgba(26,124,80,.35);
}

/* Novo / Cadastrar */
.btn-pe-new {
    background: var(--pe-navy);
    border-color: var(--pe-navy);
    color: #fff;
}
.btn-pe-new:hover, .btn-pe-new:focus {
    background: var(--pe-navy-mid);
    border-color: var(--pe-navy-mid);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13,40,71,.3);
}

/* Editar */
.btn-pe-edit {
    background: #1565c0;
    border-color: #1565c0;
    color: #fff;
}
.btn-pe-edit:hover, .btn-pe-edit:focus {
    background: #0d47a1;
    border-color: #0d47a1;
    color: #fff;
    box-shadow: 0 4px 12px rgba(21,101,192,.35);
}

/* Buscar / Pesquisar / Filtrar / Atualizar */
.btn-pe-search {
    background: #546e8a;
    border-color: #546e8a;
    color: #fff;
}
.btn-pe-search:hover, .btn-pe-search:focus {
    background: #3f5369;
    border-color: #3f5369;
    color: #fff;
    box-shadow: 0 4px 12px rgba(84,110,138,.35);
}

/* Abrir / Ver / Ir para / Iniciar atendimento */
.btn-pe-open {
    background: #5c35a8;
    border-color: #5c35a8;
    color: #fff;
}
.btn-pe-open:hover, .btn-pe-open:focus {
    background: #4a2889;
    border-color: #4a2889;
    color: #fff;
    box-shadow: 0 4px 12px rgba(92,53,168,.35);
}

/* Imprimir / Gerar arquivo */
.btn-pe-print {
    background: #7b1fa2;
    border-color: #7b1fa2;
    color: #fff;
}
.btn-pe-print:hover, .btn-pe-print:focus {
    background: #6a1b9a;
    border-color: #6a1b9a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(123,31,162,.35);
}

/* Adicionar linha / Usar prescrição / Copiar — teal outline unificado */
.btn-pe-add,
.btn-pe-use {
    background: transparent;
    border-color: #00796b;
    color: #00796b;
}
.btn-pe-add:hover, .btn-pe-add:focus,
.btn-pe-use:hover, .btn-pe-use:focus {
    background: #00796b;
    border-color: #00796b;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,121,107,.3);
}

/* ================================================================
   PACIENTE NÃO IDENTIFICADO
   ================================================================ */

/* Banner de alerta do modo emergência no formulário */
.pe-nao-ident-card {
    border: 2px solid #e65100;
    border-radius: var(--pe-radius);
    background: linear-gradient(135deg, #fff8f5 0%, #fff3ee 100%);
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
}
.pe-nao-ident-card.ativo {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #e65100;
    box-shadow: 0 2px 12px rgba(230, 81, 0, 0.18);
}

/* Título do card */
.pe-nao-ident-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #b71c1c;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.pe-nao-ident-titulo i {
    font-size: 1.25rem;
    color: #e65100;
}

/* Badge inline na listagem */
.badge-nao-ident {
    background: #e65100;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22em 0.6em;
    border-radius: 999px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    white-space: nowrap;
}

/* Banner de aviso no prontuário */
.pe-nao-ident-banner {
    background: linear-gradient(90deg, #fff3e0, #fff8f5);
    border-left: 5px solid #e65100;
    border-radius: var(--pe-radius-sm);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.pe-nao-ident-banner-icon {
    font-size: 1.75rem;
    color: #e65100;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 0.1rem;
}
.pe-nao-ident-banner-body strong {
    color: #b71c1c;
    display: block;
    font-size: 0.95rem;
}
.pe-nao-ident-banner-body p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #5d4037;
}

/* Formulário no modo não identificado: borda laranja sutil nos campos */
.form-nao-ident .form-control,
.form-nao-ident .form-select {
    border-color: #ffccbc;
    background-color: #fffaf8;
}

/* ================================================================
   TABELAS
   ================================================================ */
.table {
    font-size: 0.875rem;
    color: var(--pe-text);
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    padding: 0.65rem 0.9rem;
    vertical-align: middle;
}

.table thead th {
    font-size: 0.755rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0.6rem 0.9rem;
    border-bottom: 0;
    white-space: nowrap;
}

.table.pe-table thead th {
    background: var(--pe-navy);
    color: #fff;
}

.table-hover > tbody > tr {
    transition: background var(--pe-transition);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(13,40,71,.04);
    --bs-table-hover-bg: rgba(13,40,71,.04);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(13,40,71,.022);
}

.table-bordered {
    border-color: var(--pe-border-light);
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--pe-border-light);
}

.table-sm > :not(caption) > * > * {
    padding: 0.45rem 0.75rem;
}

/* ================================================================
   BADGES
   ================================================================ */
.badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 0.32em 0.62em;
    border-radius: 4px;
}

.badge-pe-psych { background: #5c2d7a; color: #fff; }
.badge-pe-upa   { background: #1565c0; color: #fff; }
.badge-pe-hosp  { background: #2e7d32; color: #fff; }

/* ================================================================
   ALERTAS / FLASH
   ================================================================ */
.alert {
    border-radius: var(--pe-radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
}

.alert i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

.alert-success {
    background: #f1faf3;
    border-color: #2e7d32;
    color: #1b5e20;
}

.alert-danger {
    background: #fdf2f2;
    border-color: #c62828;
    color: #7f1d1d;
}

.alert-warning {
    background: #fffbf0;
    border-color: var(--pe-accent);
    color: #5c3a00;
}

.alert-info {
    background: #f0f6ff;
    border-color: #1565c0;
    color: #0d3b7a;
}

/* ================================================================
   PÁGINA DE LOGIN
   ================================================================ */
.pe-login-outer {
    min-height: calc(100vh - 61px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(13,40,71,.07) 0%, transparent 70%);
}

/* manter compatibilidade com nome antigo */
.pe-login-wrap {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.pe-login-card {
    max-width: 420px;
    width: 100%;
    border-radius: 14px;
    box-shadow: var(--pe-shadow-lg);
    border: 1px solid var(--pe-border-light);
    overflow: hidden;
    background: #fff;
}

.pe-login-header {
    background: linear-gradient(105deg, var(--pe-navy) 0%, var(--pe-navy-mid) 100%);
    color: #fff;
    padding: 1.6rem 1.75rem;
    border-bottom: 3px solid var(--pe-accent);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pe-login-header-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.2);
    flex-shrink: 0;
    overflow: hidden;
}

.pe-login-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.pe-login-header small {
    font-size: 0.79rem;
    opacity: .72;
    display: block;
}

.pe-login-body {
    padding: 1.75rem;
}

/* ================================================================
   RODAPÉ
   ================================================================ */
.pe-footer {
    background: var(--pe-navy);
    color: rgba(255,255,255,.6);
    border-top: 3px solid var(--pe-accent);
    margin-top: auto;
}

.pe-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    font-size: 0.79rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.pe-footer-brand {
    font-weight: 600;
    color: rgba(255,255,255,.82);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pe-footer-dev {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255,255,255,.55);
    font-size: 0.76rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

.pe-footer-dev i {
    color: var(--pe-accent);
    font-size: 0.85rem;
}

.pe-footer-dev strong {
    color: rgba(255,255,255,.82);
    font-weight: 600;
}

.pe-footer-dev-role {
    display: block;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,.42);
    font-size: 0.72rem;
    margin-top: -0.1rem;
}

/* ================================================================
   AUTOCOMPLETE — FARMÁCIA
   ================================================================ */
.pe-farmacia-ac-list {
    background: #fff;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-sm);
    box-shadow: var(--pe-shadow);
    max-height: 220px;
    overflow-y: auto;
}

.pe-farmacia-ac-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--pe-border-light);
    padding: 0.42rem 0.7rem;
    font-size: 0.825rem;
    background: #fff;
    cursor: pointer;
    transition: background var(--pe-transition);
}

.pe-farmacia-ac-item:last-child { border-bottom: 0; }
.pe-farmacia-ac-item:hover      { background: #eaf1f8; }

/* ================================================================
   UTILITÁRIOS
   ================================================================ */

/* Título de seção (texto pequeno com acento à esquerda) */
.pe-section-title {
    font-size: 0.765rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pe-navy);
    border-left: 3px solid var(--pe-accent);
    padding-left: 0.6rem;
    margin-bottom: 1rem;
}

/* Scrollbar sutil */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #b8cfe0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8aacc8; }

/* ================================================================
   RESPONSIVIDADE
   ================================================================ */
@media (max-width: 575.98px) {
    .pe-topbar-inner          { padding: 0 0.75rem; }
    .pe-topbar-row            { gap: 0.5rem; min-height: 56px; }
    .pe-brand-icon            { width: 30px; height: 30px; font-size: 0.95rem; }
    .pe-brand-title           { font-size: 0.82rem; }
    .pe-brand-sub             { display: none; }
    .pe-user-name             { font-size: 0.72rem; }
    .pe-topbar-select         { max-width: 130px; font-size: 0.7rem; }
    .pe-unit-badge            { max-width: 130px; font-size: 0.7rem; }
    .pe-main.container-fluid  { padding-left: 0.85rem; padding-right: 0.85rem; }
    .pe-subnav .nav-link span { display: none; }
    .pe-subnav .nav-link      { padding: 0.62rem 0.7rem; }
    .pe-subnav .nav-link i    { font-size: 1.05rem; }
}

@media (max-width: 767.98px) {
    .pe-topbar-inner { padding: 0 1rem; }
    .pe-brand-sub    { font-size: 0.7rem; }
}

@media (min-width: 1400px) {
    .pe-topbar-inner,
    .pe-main.container-fluid,
    .pe-main > .container-fluid {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}