/* =====================================================================
   Alvra - Tema único (cores, botões, formulários, tabelas, responsivo)
   Carregue DEPOIS do Bootstrap e ANTES dos estilos específicos da página.
   Cor principal: #3d63f5  |  Para trocar a identidade visual, edite só as variáveis abaixo.
   ===================================================================== */
:root {
    --od-primary: #3d63f5;
    --od-primary-dark: #2f4fd6;
    --od-primary-darker: #0e1a3a;
    --od-primary-soft: #eef2ff;
    --od-primary-soft-2: #e0e7ff;
    --od-bg: #f1f5f9;
    --od-surface: #ffffff;
    --od-border: #e2e8f0;
    --od-border-strong: #cbd5e1;
    --od-text: #0f172a;
    --od-text-2: #334155;
    --od-muted: #64748b;
    --od-success: #16a34a;
    --od-warning: #d97706;
    --od-danger: #dc2626;
    --od-radius: 12px;
    --od-radius-sm: 8px;
    --od-btn-h: 40px;
    --od-btn-h-sm: 34px;
    --od-btn-h-lg: 48px;

    /* Faz TODO o Bootstrap (bg-primary, text-primary, links, bordas...) usar o azul do sistema */
    --bs-primary: #3d63f5;
    --bs-primary-rgb: 61, 99, 245;
    --bs-primary-text-emphasis: #0e1a3a;
    --bs-primary-bg-subtle: #e0e7ff;
    --bs-primary-border-subtle: #c7d2fe;
    --bs-link-color: #3d63f5;
    --bs-link-color-rgb: 61, 99, 245;
    --bs-link-hover-color: #2f4fd6;
    --bs-link-hover-color-rgb: 47, 79, 214;
    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-border-radius: .5rem;
    --bs-body-bg: #f1f5f9;
    --bs-body-color: #0f172a;
}

html { -webkit-text-size-adjust: 100%; }
body { background-color: var(--od-bg); color: var(--od-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
img, video, svg { max-width: 100%; }

/* ---------- Cabeçalho / rodapé únicos (sistema, login, portal) ---------- */
.brand-header, .brand-footer, .offcanvas-header-custom, .patient-header {
    background-color: var(--od-primary) !important;
    background-image: none;
    color: #fff;
}

/* ---------- Botões: mesma altura, raio e peso em todo o sistema ---------- */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-font-size: .9rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 10px;
    min-height: var(--od-btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    line-height: 1.25;
    white-space: normal;
}
.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-font-size: .8rem;
    --bs-btn-border-radius: 8px;
    min-height: var(--od-btn-h-sm);
}
.btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 12px;
    min-height: var(--od-btn-h-lg);
}
.btn-icon, .btn.btn-icon { width: var(--od-btn-h); padding: 0; }
.btn-sm.btn-icon { width: var(--od-btn-h-sm); }
.btn.rounded-circle { padding: 0; width: var(--od-btn-h); height: var(--od-btn-h); min-height: 0; }
.btn-sm.rounded-circle { width: var(--od-btn-h-sm); height: var(--od-btn-h-sm); }
.btn-close { min-height: 0; }
.input-group > .btn { min-height: 0; }

.btn-primary {
    --bs-btn-bg: #3d63f5; --bs-btn-border-color: #3d63f5; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2f4fd6; --bs-btn-hover-border-color: #2f4fd6; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0e1a3a; --bs-btn-active-border-color: #0e1a3a; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #3d63f5; --bs-btn-disabled-border-color: #3d63f5;
    --bs-btn-focus-shadow-rgb: 61, 99, 245;
}
.btn-outline-primary {
    --bs-btn-color: #3d63f5; --bs-btn-border-color: #3d63f5;
    --bs-btn-hover-bg: #3d63f5; --bs-btn-hover-border-color: #3d63f5; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2f4fd6; --bs-btn-active-border-color: #2f4fd6; --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #3d63f5; --bs-btn-disabled-border-color: #3d63f5;
    --bs-btn-focus-shadow-rgb: 61, 99, 245;
}
.btn-success { --bs-btn-bg:#16a34a; --bs-btn-border-color:#16a34a; --bs-btn-hover-bg:#15803d; --bs-btn-hover-border-color:#15803d; --bs-btn-active-bg:#166534; --bs-btn-active-border-color:#166534; --bs-btn-disabled-bg:#16a34a; --bs-btn-disabled-border-color:#16a34a; }
.btn-outline-success { --bs-btn-color:#16a34a; --bs-btn-border-color:#16a34a; --bs-btn-hover-bg:#16a34a; --bs-btn-hover-border-color:#16a34a; --bs-btn-active-bg:#15803d; --bs-btn-active-border-color:#15803d; }
.btn-danger { --bs-btn-bg:#dc2626; --bs-btn-border-color:#dc2626; --bs-btn-hover-bg:#b91c1c; --bs-btn-hover-border-color:#b91c1c; --bs-btn-active-bg:#991b1b; --bs-btn-active-border-color:#991b1b; --bs-btn-disabled-bg:#dc2626; --bs-btn-disabled-border-color:#dc2626; }
.btn-outline-danger { --bs-btn-color:#dc2626; --bs-btn-border-color:#dc2626; --bs-btn-hover-bg:#dc2626; --bs-btn-hover-border-color:#dc2626; --bs-btn-active-bg:#b91c1c; --bs-btn-active-border-color:#b91c1c; }
.btn-warning { --bs-btn-bg:#f59e0b; --bs-btn-border-color:#f59e0b; --bs-btn-color:#1f2937; --bs-btn-hover-bg:#d97706; --bs-btn-hover-border-color:#d97706; --bs-btn-hover-color:#fff; }
.btn-outline-secondary { --bs-btn-color:#475569; --bs-btn-border-color:#cbd5e1; --bs-btn-hover-bg:#f1f5f9; --bs-btn-hover-border-color:#94a3b8; --bs-btn-hover-color:#0f172a; --bs-btn-active-bg:#e2e8f0; --bs-btn-active-border-color:#94a3b8; --bs-btn-active-color:#0f172a; }

/* ---------- Formulários ---------- */
.form-control, .form-select { min-height: var(--od-btn-h); border-color: var(--od-border-strong); border-radius: 10px; font-size: .92rem; }
.form-control-sm, .form-select-sm { min-height: var(--od-btn-h-sm); font-size: .85rem; border-radius: 8px; }
.form-control-lg, .form-select-lg { min-height: var(--od-btn-h-lg); font-size: 1rem; }
textarea.form-control { min-height: 0; }
.form-control:focus, .form-select:focus { border-color: #7fa0ff; box-shadow: 0 0 0 .22rem rgba(61, 99, 245, .18); }
.form-check-input:checked { background-color: #3d63f5; border-color: #3d63f5; }
.form-check-input:focus { border-color: #7fa0ff; box-shadow: 0 0 0 .22rem rgba(61, 99, 245, .18); }
.form-label { font-weight: 600; color: var(--od-text-2); }
.input-group-text { border-color: var(--od-border-strong); background: #f8fafc; }

/* ---------- Cartões, abas, tabelas, paginação ---------- */
.card { border: 1px solid var(--od-border); border-radius: var(--od-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px -4px rgba(15, 23, 42, .06); }
.card-header { background: #fff; border-bottom: 1px solid var(--od-border); }
.nav-pills { --bs-nav-pills-link-active-bg: #3d63f5; }
.nav-tabs .nav-link.active { color: #3d63f5; border-bottom-color: #3d63f5; }
.page-link { color: #3d63f5; }
.page-item.active .page-link { background-color: #3d63f5; border-color: #3d63f5; }
.progress-bar { background-color: #3d63f5; }
.table > :not(caption) > * > * { padding: .65rem .75rem; vertical-align: middle; }
.table thead th { font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--od-muted); white-space: nowrap; }
.badge { font-weight: 600; }
.dropdown-item.active, .dropdown-item:active { background-color: #3d63f5; }

/* ---------- Responsivo ---------- */
.table-responsive { -webkit-overflow-scrolling: touch; }
.od-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 991.98px) {
    main.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 767.98px) {
    /* 16px evita o zoom automático do iOS ao focar campos */
    .form-control, .form-select, textarea.form-control { font-size: 16px; }
    .btn { --bs-btn-font-size: .92rem; }
    h1, .h1 { font-size: 1.6rem; } h2, .h2 { font-size: 1.4rem; } .h4, h4 { font-size: 1.15rem; }
    .modal-dialog:not(.modal-fullscreen) { margin: .5rem; }
    .modal-dialog-scrollable .modal-body { -webkit-overflow-scrolling: touch; }
    .d-flex.justify-content-between.align-items-center:not(.flex-nowrap) { flex-wrap: wrap; gap: .5rem; }
    .btn-toolbar, .page-actions { gap: .5rem; flex-wrap: wrap; }
    .page-actions > .btn { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
    .card-body { padding: 1rem; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer > .btn { flex: 1 1 auto; }
    .swal2-popup { width: calc(100% - 1.5rem) !important; }
}
/* Alvos de toque confortáveis em telas sensíveis ao toque */
@media (pointer: coarse) {
    .btn-sm { min-height: 38px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* SweetAlert2 - padrao do sistema */
.swal2-container { z-index: 20000 !important; }
.alvra-swal { border-radius: 16px !important; font-family: inherit; }
.alvra-swal-toast { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .15) !important; }
.swal2-popup .swal2-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.swal2-popup .swal2-html-container { font-size: .95rem; color: #475569; }
.swal2-actions .btn { min-height: 40px; }
@media (max-width: 575.98px) { .swal2-popup:not(.swal2-toast) { width: 92vw !important; } .swal2-actions { width: 100%; } .swal2-actions .btn { flex: 1; } }

/* Utilitarios de largura responsiva (Bootstrap nao possui): cheio no celular, automatico a partir de tablet */
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }
@media (min-width: 992px) { .w-lg-auto { width: auto !important; } }

/* Botoes de acao do cabecalho de pagina (Novo Cadastro, Novo Agendamento...): padrao unico.
   Desktop/tablet: tamanho natural, alinhados a direita. Celular: ocupam a largura toda (alvo de toque confortavel). */
@media (max-width: 767.98px) {
    .page-actions { width: 100%; }
    .page-actions > .btn,
    .page-actions > a.btn,
    .page-actions > form { flex: 1 1 auto; justify-content: center; text-align: center; }
    .btn.page-actions { display: flex !important; justify-content: center; }
    .page-actions .btn { min-height: 40px; }
}

.btn-group-sm > .btn, .btn-group-sm .btn { min-height: 34px; }
@media (max-width: 767.98px) { .btn.page-actions { min-height: 40px; } }