@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-family: 'Manrope', Arial, Helvetica, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-family);
}

.fa,
.fa-classic,
.fa-regular,
.fa-solid,
.fas,
.far {
    font-family: "Font Awesome 6 Free" !important;
}

.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

.fa-regular,
.far {
    font-weight: 400 !important;
}

.fa-solid,
.fas {
    font-weight: 900 !important;
}

.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}

/* Mantem iniciais centralizadas em avatares de texto no sistema inteiro. */
.main :where(
    .patient-initials,
    .selected-patient-avatar,
    .avatar-circle,
    .avatar:not(img),
    .user-avatar:not(img)
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

button:not(.fa):not(.fa-classic):not(.fa-regular):not(.fa-solid):not(.fas):not(.far):not(.fa-brands):not(.fab):not(.bi),
a:not(.fa):not(.fa-classic):not(.fa-regular):not(.fa-solid):not(.fas):not(.far):not(.fa-brands):not(.fab):not(.bi),
label,
p,
span:not(.fa):not(.fa-classic):not(.fa-regular):not(.fa-solid):not(.fas):not(.far):not(.fa-brands):not(.fab):not(.bi),
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
small,
strong,
em {
    font-family: var(--font-family);
}

/* Refinamento visual leve para o conteudo dos paineis ADM/PRO.
   Escopo intencionalmente limitado a .main para nao alterar navbar/sidebar. */
.main {
    --panel-primary: #0056b3;
    --panel-primary-dark: #003d82;
    --panel-text: #0f172a;
    --panel-muted: #64748b;
    --panel-border: rgba(210, 224, 240, 0.86);
    --panel-surface: rgba(255, 255, 255, 0.94);
    --panel-soft: #f6f9fd;
    --panel-radius: 18px;
    --panel-radius-lg: 22px;
    --panel-shadow: 0 16px 38px rgba(20, 41, 74, 0.07);
    --panel-shadow-hover: 0 18px 42px rgba(20, 41, 74, 0.1);
    color: var(--panel-text);
    font-size: 15px;
    line-height: 1.55;
}

.main :where(h1, h2, h3, h4, h5, h6) {
    color: var(--panel-text) !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
}

.main :where(h1) {
    font-size: clamp(1.65rem, 1.3rem + 0.7vw, 2.1rem) !important;
    font-weight: 800 !important;
}

.main :where(h2) {
    font-size: clamp(1.15rem, 1rem + 0.32vw, 1.38rem) !important;
    font-weight: 800 !important;
}

.main :where(h3) {
    font-size: 1.05rem !important;
    font-weight: 750 !important;
}

.main :where(p, small, label, td, th, li) {
    line-height: 1.55 !important;
}

.main :where(.subtitle, .text-muted, small, .stat-label, .metric-label, .card p, .header-titles p) {
    color: var(--panel-muted) !important;
}

.main :where(.top-header) {
    margin-bottom: 28px !important;
    gap: 18px !important;
    align-items: flex-start !important;
}

.main :where(.header-titles) {
    display: grid !important;
    gap: 7px !important;
}

.main :where(.header-titles h1) {
    margin: 0 !important;
}

.main :where(.header-titles p) {
    margin: 0 !important;
    font-size: 0.98rem !important;
}

.main :where(.header-actions) {
    gap: 12px !important;
    align-items: center !important;
}

.main :where(
    .card,
    .card-panel,
    .stat-card,
    .metric-card,
    .queue-card,
    .filters-card,
    .users-card,
    .profile-card,
    .security-card,
    .notification-card,
    .chart-card,
    .access-distribution-card,
    .system-status-bar,
    .patient-results-card,
    .appointment-summary-card,
    .appointment-section,
    .panel,
    .completion-card,
    .risk-card,
    .settings-group
) {
    background: var(--panel-surface) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-lg) !important;
    box-shadow: var(--panel-shadow) !important;
}

.main :where(.card, .card-panel, .stat-card, .metric-card, .queue-card, .filters-card, .users-card) {
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease !important;
}

.main :where(.card, .card-panel, .stat-card, .metric-card, .queue-card, .filters-card, .users-card):hover {
    border-color: rgba(0, 86, 179, 0.16) !important;
    box-shadow: var(--panel-shadow-hover) !important;
}

.main :where(.card-header, .card-header-simple, .panel-header, .modal-header) {
    gap: 14px !important;
    padding-bottom: 14px !important;
    border-color: var(--panel-border) !important;
}

.main :where(.stats-row, .stats-grid, .metrics-grid, .dashboard-grid, .content-grid, .form-grid, .config-grid) {
    gap: 22px !important;
}

.main :where(
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-save,
    .btn-cancel,
    .btn-submit,
    .btn-action
) {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    transition: transform 170ms ease, box-shadow 170ms ease, background-color 170ms ease, border-color 170ms ease !important;
}

.main :where(.btn-primary, .btn-save, .btn-submit, .btn-action):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(0, 86, 179, 0.18) !important;
}

.main :where(.btn-primary, .btn-save, .btn-submit, .btn-action):active {
    transform: translateY(0) scale(0.99) !important;
}

.main :where(button:disabled, .disabled) {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
    box-shadow: none !important;
}

.main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .select-dropdown
) {
    min-height: 44px !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 13px !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: var(--panel-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease !important;
}

.main :where(textarea) {
    min-height: 112px !important;
    padding-top: 12px !important;
    resize: vertical;
}

.main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .select-dropdown
):focus {
    border-color: rgba(0, 86, 179, 0.42) !important;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1) !important;
    outline: none !important;
}

.main :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--panel-primary);
}

.main :where(.input-group, .form-group, .appointment-field, .agenda-field, .field-group) {
    gap: 8px !important;
}

.main :where(.input-group label, .form-group label, .appointment-field label, .agenda-field label) {
    color: var(--panel-text) !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
}

.main :where(.table-responsive, .table-container, .users-table-wrapper) {
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    overflow: hidden !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.main :where(table, .table, .queue-table, .users-table) {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.main :where(th) {
    height: 48px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    background: rgba(246, 249, 253, 0.92) !important;
}

.main :where(td) {
    height: 58px !important;
    font-size: 0.93rem !important;
}

.main :where(th, td) {
    padding: 14px 18px !important;
    border-color: rgba(210, 224, 240, 0.72) !important;
    vertical-align: middle !important;
}

.main :where(tbody tr) {
    transition: background-color 160ms ease !important;
}

.main :where(tbody tr:hover) {
    background-color: rgba(0, 86, 179, 0.035) !important;
}

.main :where(.badge, .status-badge, .tag, .pill) {
    border-radius: 999px !important;
    padding: 6px 11px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.main :where(.modal-content) {
    border: 1px solid var(--panel-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 80px rgba(20, 41, 74, 0.2) !important;
}

.main :where(.modal-header, .modal-footer) {
    padding: 18px 22px !important;
}

.main :where(.modal-body) {
    padding: 22px !important;
}

body.dark-theme .main {
    --panel-text: #f8fafc;
    --panel-muted: #94a3b8;
    --panel-border: rgba(51, 65, 85, 0.86);
    --panel-surface: rgba(15, 23, 42, 0.92);
    --panel-soft: #111827;
    --panel-shadow: none;
    --panel-shadow-hover: none;
}

body.dark-theme .main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .select-dropdown
) {
    background-color: rgba(15, 23, 42, 0.92) !important;
}

body.dark-theme .main :where(th) {
    background: rgba(30, 41, 59, 0.92) !important;
    color: #cbd5e1 !important;
}

@media (max-width: 768px) {
    .main {
        font-size: 14px;
    }

    .main :where(.top-header) {
        margin-bottom: 22px !important;
    }

    .main :where(.stats-row, .stats-grid, .metrics-grid, .dashboard-grid, .content-grid, .form-grid, .config-grid) {
        gap: 16px !important;
    }

    .main :where(.card, .card-panel, .stat-card, .metric-card, .queue-card, .filters-card, .users-card) {
        border-radius: 18px !important;
    }

    .main :where(th, td) {
        padding: 12px 14px !important;
    }
}

/* Padronizacao visual global de botoes.
   Mantem textos, classes, eventos e rotas intactos; altera apenas a apresentacao. */
:root {
    --ui-button-primary: #0057b8;
    --ui-button-primary-hover: #004b93;
    --ui-button-primary-strong: #003d82;
    --ui-button-success: #2fbf67;
    --ui-button-success-hover: #259f55;
    --ui-button-danger: #dc3545;
    --ui-button-danger-hover: #b92533;
    --ui-button-text: #071739;
    --ui-button-muted: #52637d;
    --ui-button-border: #cfdced;
    --ui-button-surface: rgba(255, 255, 255, 0.94);
    --ui-button-shadow: 0 12px 24px rgba(0, 87, 184, 0.18);
    --ui-button-soft-shadow: 0 8px 18px rgba(20, 41, 74, 0.08);
    --ui-button-radius: 14px;
}

:where(
    button,
    a.btn,
    a.btn-primary,
    a.btn-secondary,
    a.btn-outline,
    a.btn-danger,
    a.btn-success,
    a.btn-custom,
    a.btn-details,
    a.btn-back,
    a.btn-back-home,
    a.patient-back-button,
    a.patient-schedule-button
):not(.nav-link):not(.dropdown-item) {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: var(--ui-button-radius) !important;
    border: 1px solid transparent !important;
    font-family: var(--font-family) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        background-color 170ms ease,
        border-color 170ms ease,
        color 170ms ease,
        filter 170ms ease !important;
}

:where(
    .btn-primary,
    .btn-login,
    .btn-submit,
    .btn-save,
    .btn-add,
    .btn-action,
    .start-button,
    .submit-button,
    .call-button,
    .new-consultation-button,
    .change-room-button,
    .patient-schedule-button,
    .btn-password,
    .btn-manage-groups,
    .btn-back-home,
    .btn-custom
):not(.nav-link) {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-button-primary-strong), var(--ui-button-primary)) !important;
    border-color: rgba(0, 87, 184, 0.28) !important;
    box-shadow: var(--ui-button-shadow) !important;
}

:where(
    .btn-secondary,
    .btn-outline,
    .btn-cancel,
    .btn-back,
    .gov-btn,
    .reset-button,
    .btn-details,
    .patient-back-button,
    .queue-actions button
):not(.nav-link) {
    color: var(--ui-button-text) !important;
    background: var(--ui-button-surface) !important;
    border-color: var(--ui-button-border) !important;
    box-shadow: var(--ui-button-soft-shadow) !important;
}

:where(
    .btn-success,
    .btn-action.success,
    .btn-save.success
):not(.nav-link) {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-button-success-hover), var(--ui-button-success)) !important;
    border-color: rgba(47, 191, 103, 0.35) !important;
    box-shadow: 0 12px 24px rgba(47, 191, 103, 0.2) !important;
}

:where(
    .btn-danger,
    .btn-restart-system,
    .btn-remove,
    button.danger
):not(.nav-link) {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-button-danger-hover), var(--ui-button-danger)) !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
    box-shadow: 0 12px 24px rgba(220, 53, 69, 0.18) !important;
}

:where(
    .btn-icon,
    .btn-icon-small,
    .btn-page,
    .btn-voltar,
    .appointment-actions button,
    .action-buttons button
):not(.nav-link) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    color: var(--ui-button-primary) !important;
    background: var(--ui-button-surface) !important;
    border-color: var(--ui-button-border) !important;
    border-radius: var(--ui-button-radius) !important;
    box-shadow: var(--ui-button-soft-shadow) !important;
}

:where(.btn-icon-small, .btn-page) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
}

:where(.btn-icon-small.active, .btn-page.active):not(.nav-link) {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-button-primary-strong), var(--ui-button-primary)) !important;
    border-color: rgba(0, 87, 184, 0.28) !important;
}

:where(button, a[class*="btn"], a[class*="button"]):not(.nav-link):not(.dropdown-item):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.02) !important;
}

:where(
    .btn-primary,
    .btn-login,
    .btn-submit,
    .btn-save,
    .btn-add,
    .btn-action,
    .start-button,
    .submit-button,
    .call-button,
    .new-consultation-button,
    .change-room-button,
    .patient-schedule-button,
    .btn-password,
    .btn-manage-groups,
    .btn-back-home,
    .btn-custom
):not(.nav-link):hover {
    background: linear-gradient(135deg, var(--ui-button-primary-strong), #0d6fe8) !important;
    box-shadow: 0 15px 28px rgba(0, 87, 184, 0.24) !important;
}

:where(
    .btn-secondary,
    .btn-outline,
    .btn-cancel,
    .btn-back,
    .gov-btn,
    .reset-button,
    .btn-details,
    .patient-back-button,
    .queue-actions button,
    .btn-icon,
    .btn-icon-small,
    .btn-page,
    .btn-voltar
):not(.nav-link):hover {
    color: var(--ui-button-primary-hover) !important;
    background: #fff !important;
    border-color: rgba(0, 87, 184, 0.28) !important;
    box-shadow: 0 12px 24px rgba(20, 41, 74, 0.12) !important;
}

:where(button, a[class*="btn"], a[class*="button"]):not(.nav-link):not(.dropdown-item):active {
    transform: translateY(0) scale(0.99) !important;
}

:where(button, a[class*="btn"], a[class*="button"]):not(.nav-link):not(.dropdown-item):focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(0, 87, 184, 0.16),
        var(--ui-button-soft-shadow) !important;
}

:where(button, a[class*="btn"], a[class*="button"]):disabled,
:where(button, a[class*="btn"], a[class*="button"]).disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.dark-theme {
    --ui-button-text: #f8fafc;
    --ui-button-muted: #94a3b8;
    --ui-button-border: rgba(71, 85, 105, 0.9);
    --ui-button-surface: rgba(15, 23, 42, 0.92);
    --ui-button-soft-shadow: none;
}

/* Avatares institucionais sem fotos externas/personagens. */
:where(.avatar-initials, .user-initials, .profile-initials, .avatar-placeholder) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    color: #0057b8 !important;
    background: linear-gradient(180deg, #ffffff, #eef4ff) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

.sidebar :where(.avatar-initials) {
    width: 48px !important;
    height: 48px !important;
    font-size: 0.88rem !important;
}

.main :where(.user-initials) {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
}

.main :where(.foto-perfil.profile-initials) {
    width: 130px !important;
    height: 130px !important;
    margin: 0 auto !important;
    font-size: 2rem !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #003d82, #2563eb) !important;
}

.main :where(.avatar-edit .profile-initials, .avatar-preview .profile-initials, .avatar-placeholder) {
    width: 100% !important;
    height: 100% !important;
    font-size: 1.25rem !important;
}

.main :where(.avatar-container .profile-initials) {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #003d82, #2563eb) !important;
    font-size: 1.8rem !important;
}

.main :where(.header-actions, .form-actions) .config-icon-button {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.main :where(.header-actions, .form-actions) .config-icon-button i {
    margin: 0 !important;
}