:root{--p:#006a68;--p2:#008c84;--bg:#f3f7f7;--line:#dce7e7;--ink:#173536}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Arial,sans-serif}aside{position:fixed;inset:0 auto 0 0;width:235px;background:#064f50;padding:25px 15px;color:white}
.logo{font-size:21px;font-weight:bold;margin:0 12px 28px}.logo small{display:block;color:#bfe2df;margin-top:5px}aside a{display:block;color:#e8ffff;text-decoration:none;padding:13px;border-radius:8px;margin:4px 0}aside a:hover{background:#ffffff18}
main{margin-left:235px;padding:28px;max-width:1400px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}header h1{margin:0 0 5px}.card{background:white;border-radius:14px;padding:22px;box-shadow:0 5px 22px #002b2b12;margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stats .card{display:flex;flex-direction:column;color:#687b7b}.stats b{font-size:32px;color:var(--p);margin-bottom:5px}.cols{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}
label{display:block;font-weight:bold;margin:13px 0}input,textarea,select{display:block;width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;margin-top:6px}textarea{min-height:90px}button,.button{display:inline-block;background:var(--p);color:white;border:0;border-radius:8px;padding:11px 15px;text-decoration:none;font-weight:bold;cursor:pointer}.secondary{background:#e5f2f1;color:var(--p)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line)}th{color:#6a7c7c}.pill{padding:5px 9px;border-radius:20px;background:#ddf3ed;color:#08705f}.row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0}.row small{display:block;color:#718080;margin-top:5px}.flash{padding:12px;background:#e1f4ef;border-radius:8px;margin-bottom:15px}.search{display:flex;gap:8px}.search input{margin:0}.history p{line-height:1.5}
.login{min-height:100vh;background:white;display:grid;grid-template-columns:1.1fr .9fr}.hero{background:linear-gradient(145deg,#004f50,#008c84);color:white;padding:9vw;display:flex;justify-content:center;flex-direction:column}.hero>b{border:3px solid white;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;font-size:20px}.hero h1{font-size:45px;margin:20px 0}.login-card{align-self:center;justify-self:center;width:min(430px,85%);padding:30px;box-shadow:0 8px 30px #002b2b18;border-radius:15px}.login-card small{display:block;margin-top:18px;color:#777}
@media(max-width:800px){main{margin:0;padding:16px}.cols,.stats,.login{grid-template-columns:1fr}.hero{display:none}header span{display:none}}
.hero-logo{width:min(520px,88%);height:auto;object-fit:contain;margin-bottom:28px}.login-links{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 20px}.login-links a,.auth-card>a{color:#007a73;text-decoration:none;font-weight:700}.auth-page{min-height:100vh;background:#f3f7f7;display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:min(620px,100%);background:#fff;border-radius:18px;padding:30px;box-shadow:0 12px 35px #0001}.auth-logo{display:block;width:min(390px,90%);height:auto;margin:0 auto 24px}.brand-preview{max-width:100%;max-height:180px;object-fit:contain;background:#f8faf9;border:1px solid #dde8e6;border-radius:12px;padding:14px;margin-bottom:16px}@media(max-width:800px){.login{display:block}.hero{min-height:auto;padding:38px 24px}.hero-logo{width:min(430px,95%)}.login-card{margin:28px auto}.cols{grid-template-columns:1fr}}
/* V1 — interface profissional */
.brand-side{display:flex;align-items:center;gap:12px;margin:0 8px 28px}.brand-side img{width:64px;height:52px;object-fit:contain;background:white;border-radius:10px;padding:5px}.brand-side b{display:block;font-size:17px}.brand-side small{display:block;color:#bfe2df;margin-top:4px}.nav-label{display:block;font-size:10px;letter-spacing:1.4px;color:#8fc5c2;margin:22px 12px 7px;font-weight:700}header{background:#fff;margin:-28px -28px 26px;padding:18px 28px;border-bottom:1px solid var(--line)}.userbox{display:flex;align-items:center;gap:10px}.userbox span{display:flex;flex-direction:column}.userbox small{color:#708383;margin-top:3px}.avatar,.profile-avatar{display:grid;place-items:center;border-radius:50%;background:#dff1ef;color:var(--p);font-weight:800}.avatar{width:38px;height:38px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,#fff,#eef8f7);border:1px solid #dcebea;border-radius:16px;padding:24px;margin-bottom:18px}.welcome h2{font-size:25px;margin:4px 0 5px}.welcome p,.section-title p{margin:0;color:#708383}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--p2)}.quick{display:flex;gap:9px}.stats.four{grid-template-columns:repeat(4,1fr)}.metric{border:1px solid #e4eeee;box-shadow:0 3px 14px #002b2b0a}.metric span{color:#6d8080}.metric b{font-size:30px;margin-top:10px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.section-title h2{margin:0 0 4px}.section-title a{color:var(--p);font-weight:700;text-decoration:none}.muted{display:block;color:#788;margin-top:3px}.empty{text-align:center;padding:34px;color:#778b8b;background:#f8fbfb;border-radius:10px}.profile-grid{display:grid;grid-template-columns:300px 1fr;gap:18px}.profile-card{text-align:center}.profile-avatar{width:82px;height:82px;font-size:32px;margin:4px auto 15px}.profile-card h2{margin:0 0 6px}.profile-card p{color:#708383}.readonly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.readonly-grid input:disabled{background:#f4f7f7;color:#607070}@media(max-width:1050px){.stats.four{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:1fr}}@media(max-width:800px){header{margin:-16px -16px 20px;padding:16px}.welcome{align-items:flex-start;flex-direction:column}.stats.four{grid-template-columns:1fr 1fr}.quick{width:100%;flex-wrap:wrap}.readonly-grid{grid-template-columns:1fr}.brand-side img{width:52px}}

/* =========================================================
   AGENDA - BOTÕES DE AÇÃO
   ========================================================= */

.agenda-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 210px;
}

.agenda-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.agenda-actions .agenda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    margin: 0;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Editar usa a identidade visual do sistema */
.agenda-actions a.agenda-btn {
    background: #00766f;
    color: #fff;
}

/* Mantém os demais botões com o padrão do sistema */
.agenda-actions button.agenda-btn {
    width: auto;
}

/* Melhor adaptação para celular */
@media (max-width: 700px) {
    .agenda-actions {
        min-width: 150px;
        gap: 5px;
    }

    .agenda-actions .agenda-btn {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12px;
    }
}


/* =========================================================
   E-PRONTUÁRIO CREFITO-20 - CALENDÁRIO
   ========================================================= */

.agenda-page {
    overflow: hidden;
}

.agenda-top,
.agenda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.agenda-top {
    margin-bottom: 20px;
}

.agenda-top h2 {
    margin-bottom: 3px;
}

.agenda-subtitle {
    margin: 0;
    opacity: .7;
}

.agenda-new-btn {
    width: auto;
    white-space: nowrap;
}

.agenda-new-panel {
    margin: 15px 0 25px;
    padding: 20px;
    border: 1px solid #dce5e5;
    border-radius: 12px;
}

.agenda-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 14px;
}

.agenda-form-full {
    grid-column: 1 / -1;
}

.agenda-form-buttons {
    display: flex;
    gap: 8px;
}

.agenda-form-buttons button {
    width: auto;
}

.agenda-toolbar {
    margin: 15px 0;
}

.agenda-toolbar h3 {
    margin: 0;
    text-align: center;
}

.agenda-navigation,
.agenda-views {
    display: flex;
    gap: 5px;
}

.agenda-navigation button,
.agenda-views button {
    width: auto;
    min-width: 42px;
    padding: 8px 12px;
}

.agenda-views button.active {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #dce5e5;
    border-bottom: 0;
}

.calendar-weekdays div {
    padding: 10px 5px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    border-top: 1px solid #dce5e5;
    border-left: 1px solid #dce5e5;
}

.calendar-day {
    position: relative;
    min-height: 125px;
    padding: 7px;
    border-right: 1px solid #dce5e5;
    border-bottom: 1px solid #dce5e5;
    overflow: hidden;
}

.calendar-day.outside {
    opacity: .35;
}

.calendar-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
}

.calendar-day.today .calendar-number {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.calendar-event {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    margin: 3px 0;
    padding: 6px 7px;
    border: 0;
    border-radius: 7px;
    text-align: left;
    font-size: 11px;
    line-height: 1.25;
    cursor: pointer;
}

.calendar-event strong,
.calendar-event span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-cancelado {
    opacity: .55;
    text-decoration: line-through;
}

.status-concluido {
    opacity: .75;
}

.calendar-week-view .calendar-day {
    min-height: 300px;
}

.calendar-day-view {
    border: 1px solid #dce5e5;
    border-radius: 8px;
    overflow: hidden;
}

.calendar-day-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #dce5e5;
}

.calendar-hour {
    font-weight: 700;
    text-align: center;
}

.calendar-empty {
    padding: 40px;
    text-align: center;
    opacity: .65;
}

.agenda-table-wrap {
    overflow-x: auto;
}

.agenda-modal[hidden] {
    display: none;
}

.agenda-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
}

.agenda-modal-card {
    position: relative;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 25px;
    border-radius: 14px;
    background: white;
    color: #183536;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.agenda-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 25px;
}

.appointment-details {
    margin: 20px 0;
}

.agenda-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.agenda-modal-actions form {
    display: inline-flex;
    margin: 0;
}

.agenda-modal-actions .agenda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    padding: 7px 11px;
    border: 0;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}


/* TABLET */
@media (max-width: 1000px) {

    .agenda-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    #agendaCalendar {
        overflow-x: auto;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 760px;
    }
}


/* CELULAR */
@media (max-width: 700px) {

    .agenda-top {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-new-btn {
        width: 100%;
    }

    .agenda-form-grid {
        grid-template-columns: 1fr;
    }

    .agenda-form-full {
        grid-column: auto;
    }

    .agenda-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .agenda-toolbar h3 {
        order: -1;
        margin-bottom: 5px;
    }

    .agenda-navigation,
    .agenda-views {
        justify-content: center;
        flex-wrap: wrap;
    }

    .agenda-navigation button,
    .agenda-views button {
        flex: 1;
    }

    .agenda-modal {
        padding: 8px;
    }

    .agenda-modal-card {
        padding: 20px 15px;
    }

    .agenda-modal-actions {
        flex-direction: column;
    }

    .agenda-modal-actions form,
    .agenda-modal-actions .agenda-btn {
        width: 100%;
    }
}

/* =========================================================
   RESUMO DE ATENDIMENTOS ABAIXO DO CALENDÁRIO
   ========================================================= */

.calendar-summary {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #dce5e5;
}

.calendar-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendar-summary-header h3 {
    margin: 0 0 3px;
}

.calendar-summary-header small {
    opacity: .65;
}

.calendar-summary-item {
    display: grid;
    grid-template-columns: 150px minmax(220px, 1fr) 130px;
    align-items: center;
    gap: 15px;

    width: 100%;
    margin: 0;
    padding: 12px 14px;

    border: 0;
    border-bottom: 1px solid #e6ecec;
    border-radius: 0;

    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.calendar-summary-item:hover {
    background: rgba(0, 0, 0, .035);
}

.summary-date,
.summary-patient {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-date span,
.summary-patient span {
    font-size: 12px;
    opacity: .7;
}

.summary-status {
    justify-self: end;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.summary-status.status-cancelado {
    text-decoration: none;
}

.calendar-summary-empty {
    padding: 25px;
    text-align: center;
    opacity: .6;
}


/* CELULAR */
@media (max-width: 700px) {

    .calendar-summary-item {
        grid-template-columns: 85px 1fr;
        gap: 10px;
    }

    .summary-status {
        grid-column: 2;
        justify-self: start;
    }
}


/* AÇÕES DA LISTA DE PACIENTES */
.patient-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.patient-actions .button {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .patient-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
}


/* =========================================================
   LOGOMARCA DO PROFISSIONAL
   E-Prontuário CREFITO-20
   ========================================================= */

.professional-logo-card {
    grid-column: 1 / -1;
}

.professional-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 16px 0 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #d9e2e3;
    border-radius: 12px;
}

.professional-logo-preview img {
    display: block;
    max-width: 380px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.professional-logo-card form {
    margin-bottom: 14px;
}

@media (max-width: 700px) {
    .professional-logo-preview img {
        max-width: 100%;
        max-height: 120px;
    }
}

/* =========================================================
   EXPORTAÇÃO DO PRONTUÁRIO
   E-Prontuário CREFITO-20
   ========================================================= */

.record-export-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.record-export-toolbar .button {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .record-export-toolbar {
        align-items: stretch;
    }

    .record-export-toolbar .button {
        flex: 1 1 45%;
        text-align: center;
    }
}

/* Mostrar / ocultar senha */
.password-field {
    position: relative;
    width: 100%;
}

.password-field input {
    width: 100%;
    padding-right: 52px;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover,
.password-toggle:focus {
    background: transparent;
    outline: none;
}

/* Correção visual do ícone mostrar/ocultar senha */
.password-toggle {
    color: #4b5563 !important;
    opacity: 1 !important;
    z-index: 10;
}

.password-toggle .eye-icon {
    display: block;
    width: 22px;
    height: 22px;
    color: #4b5563;
    stroke: #4b5563;
    opacity: 1;
    pointer-events: none;
}

.password-toggle .eye-closed {
    display: none;
}

.password-toggle:hover {
    color: #111827 !important;
}

.password-toggle:hover .eye-icon {
    color: #111827;
    stroke: #111827;
}


/* Histórico do prontuário - dropdown */
.history-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.history-summary-info {
    flex: 1;
}

.history-summary-info small {
    display: block;
    margin-top: 4px;
}

.history-state {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.history-dropdown .state-open {
    display: none;
}

.history-dropdown[open] .state-closed {
    display: none;
}

.history-dropdown[open] .state-open {
    display: inline;
}

.history-content {
    margin-top: 15px;
}

/* Botão PDF individual no histórico */
.history-pdf {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================
   PADRAO-FORMULARIOS-CLINICOS-V1
   PRONTUÁRIO ELETRÔNICO
   Padrão institucional dos formulários
   Fonte: Times New Roman
   Tamanho: 12 pt
   Espaçamento: 1,5
   Idioma da aplicação: Português (pt-BR)
   ========================================================== */


/* ----------------------------------------------------------
   1. TIPOGRAFIA GERAL DOS FORMULÁRIOS
   ---------------------------------------------------------- */

form,
.form,
.form-group,
.form-row,
.field,
.field-group,
fieldset,
legend,
label,
input,
select,
textarea,
button,
.form-control {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   2. FORMULÁRIOS
   ---------------------------------------------------------- */

form {
    width: 100%;
    box-sizing: border-box;
}

fieldset {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 18px 0;
    padding: 15px;
}

legend {
    font-weight: bold;
    padding: 0 6px;
}


/* ----------------------------------------------------------
   3. RÓTULOS DOS CAMPOS
   ---------------------------------------------------------- */

form label,
.form label,
.form-group label,
.field label,
.field-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: left;
}


/* ----------------------------------------------------------
   4. CAMPOS DE ENTRADA
   ---------------------------------------------------------- */

form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form select,
form textarea,
.form-control {
    width: 100%;
    box-sizing: border-box;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;

    padding: 8px 10px;
    margin: 0;

    text-align: left;
    vertical-align: middle;
}


/* ----------------------------------------------------------
   5. CAMPOS DE TEXTO LONGO
   ---------------------------------------------------------- */

form textarea {
    min-height: 110px;
    resize: vertical;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;

    text-align: left;
}


/* ----------------------------------------------------------
   6. SELECT
   ---------------------------------------------------------- */

form select {
    min-height: 40px;
}


/* ----------------------------------------------------------
   7. INPUT
   ---------------------------------------------------------- */

form input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 40px;
}


/* ----------------------------------------------------------
   8. CHECKBOX E RADIO
   ---------------------------------------------------------- */

form input[type="checkbox"],
form input[type="radio"] {
    width: auto;
    min-height: auto;
    margin-right: 6px;
    vertical-align: middle;
}

form label:has(input[type="checkbox"]),
form label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}


/* ----------------------------------------------------------
   9. ESPAÇAMENTO ENTRE CAMPOS
   ---------------------------------------------------------- */

.form-group,
.field,
.field-group {
    margin-bottom: 15px;
}


/* ----------------------------------------------------------
   10. PARÁGRAFOS E TEXTOS DENTRO DOS FORMULÁRIOS
   ---------------------------------------------------------- */

form p,
.form p,
form li,
.form li,
form span:not(.icon),
.form span:not(.icon) {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   11. TÍTULOS DOS FORMULÁRIOS
   Mantém hierarquia, mas usa a mesma família tipográfica.
   ---------------------------------------------------------- */

form h1,
form h2,
form h3,
form h4,
form h5,
form h6,
.form h1,
.form h2,
.form h3,
.form h4,
.form h5,
.form h6 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   12. TABELAS CLÍNICAS
   ---------------------------------------------------------- */

form table,
.form table,
.clinical-table,
.record-table {
    width: 100%;
    border-collapse: collapse;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}

form table th,
form table td,
.form table th,
.form table td,
.clinical-table th,
.clinical-table td,
.record-table th,
.record-table td {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;

    padding: 8px;
    text-align: left;
    vertical-align: top;
}


/* ----------------------------------------------------------
   13. BOTÕES
   ---------------------------------------------------------- */

form button,
form .button,
form input[type="submit"],
form input[type="button"],
.form button,
.form .button {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   14. PLACEHOLDERS
   ---------------------------------------------------------- */

form input::placeholder,
form textarea::placeholder {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
}


/* ----------------------------------------------------------
   15. CAMPOS DESABILITADOS / SOMENTE LEITURA
   ---------------------------------------------------------- */

form input[readonly],
form textarea[readonly],
form select[disabled],
form input[disabled],
form textarea[disabled] {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   16. MENSAGENS DE AJUDA / ORIENTAÇÃO
   ---------------------------------------------------------- */

form small,
.form small,
.help-text,
.field-help,
.form-text {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   17. REGISTRO CLÍNICO
   ---------------------------------------------------------- */

.record-content,
.clinical-content,
.clinical-form,
.patient-form,
.professional-form {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   18. HISTÓRICO CLÍNICO
   ---------------------------------------------------------- */

.history,
.history-content,
.history-summary-info {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   19. TEXTO CLÍNICO
   ---------------------------------------------------------- */

.clinical-text,
.record-text,
.report-text {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   20. RESPONSIVIDADE
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    form,
    .form,
    form input,
    form select,
    form textarea,
    form button,
    form label {
        box-sizing: border-box;
        max-width: 100%;
    }

    form textarea {
        min-height: 120px;
    }
}


/* ----------------------------------------------------------
   21. IMPRESSÃO
   ---------------------------------------------------------- */

@media print {

    form,
    .form,
    .record-content,
    .clinical-content,
    .clinical-text,
    .record-text,
    .report-text,
    table,
    th,
    td {
        font-family: "Inter", Arial, Helvetica, sans-serif !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }

}


/* ==========================================================
   FIM - PADRAO-FORMULARIOS-CLINICOS-V1
   ========================================================== */


/* ==========================================================
   PADRAO-TIPOGRAFICO-GLOBAL-V1
   PRONTUÁRIO ELETRÔNICO CREFITO-20

   Aplicação: sistema inteiro
   Fonte: Inter
   Tamanho-base: 12 pt
   Espaçamento: 1,5
   Idioma: Português do Brasil (pt-BR)
   ========================================================== */


/* ----------------------------------------------------------
   1. PADRÃO GLOBAL
   ---------------------------------------------------------- */

html,
body {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   2. ELEMENTOS GERAIS
   ---------------------------------------------------------- */

body,
main,
aside,
header,
footer,
section,
article,
nav,
div,
span,
p,
a,
label,
input,
textarea,
select,
button,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
fieldset,
legend,
details,
summary,
small,
strong,
b,
em,
i {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   3. TEXTO BASE DO SISTEMA
   ---------------------------------------------------------- */

body,
p,
a,
label,
input,
textarea,
select,
button,
table,
th,
td,
li,
dt,
dd,
legend {
    font-size: 12pt;
}


/* ----------------------------------------------------------
   4. CAMPOS
   ---------------------------------------------------------- */

input,
textarea,
select {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   5. BOTÕES
   ---------------------------------------------------------- */

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   6. TABELAS
   ---------------------------------------------------------- */

table,
thead,
tbody,
tfoot,
tr,
th,
td {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   7. MENU LATERAL
   ---------------------------------------------------------- */

aside,
aside a,
aside span,
aside small,
aside b,
.nav-label,
.brand-side,
.brand-side b,
.brand-side small {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* Menu principal no padrão 12 pt */
aside a {
    font-size: 12pt !important;
}


/* ----------------------------------------------------------
   8. CABEÇALHO E USUÁRIO
   ---------------------------------------------------------- */

header,
header span,
header small,
.userbox,
.userbox span,
.userbox small {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   9. CARDS E PAINEL
   ---------------------------------------------------------- */

.card,
.stats,
.metric,
.welcome,
.section-title,
.profile-card,
.readonly-grid {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   10. LOGIN / PRIMEIRO ACESSO / RECUPERAÇÃO
   ---------------------------------------------------------- */

.login,
.hero,
.login-card,
.auth-page,
.auth-card,
.login-links {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   11. AGENDA
   ---------------------------------------------------------- */

.agenda-page,
.agenda-top,
.agenda-toolbar,
.agenda-actions,
.agenda-actions .agenda-btn,
.agenda-form-grid,
.agenda-form-buttons,
.agenda-navigation,
.agenda-views,
.calendar-weekdays,
.calendar-grid {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}

.agenda-actions .agenda-btn,
.agenda-navigation button,
.agenda-views button {
    font-size: 12pt !important;
}


/* ----------------------------------------------------------
   12. PRONTUÁRIO / HISTÓRICO
   ---------------------------------------------------------- */

.history,
.history-content,
.history-summary,
.history-summary-info,
.history-state,
.record-content,
.record-text,
.clinical-content,
.clinical-text,
.clinical-form {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   13. FORMULÁRIOS
   ---------------------------------------------------------- */

form,
.form,
.form-group,
.form-row,
.field,
.field-group,
.patient-form,
.professional-form {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   14. TEXTAREAS / TEXTO CLÍNICO
   ---------------------------------------------------------- */

textarea,
.clinical-text,
.record-text,
.report-text {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   15. PLACEHOLDERS
   ---------------------------------------------------------- */

input::placeholder,
textarea::placeholder {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
}


/* ----------------------------------------------------------
   16. TÍTULOS
   Mantém hierarquia visual dos títulos.
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   17. TEXTOS AUXILIARES

   Permanecem menores que o texto principal para preservar
   a hierarquia visual e evitar quebra do layout.
   ---------------------------------------------------------- */

small,
.muted,
.eyebrow,
.nav-label,
.help-text,
.field-help,
.form-text {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   18. PÁGINA PÚBLICA DE VERIFICAÇÃO
   ---------------------------------------------------------- */

.verification,
.verify,
.verify-card,
.verification-card {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   19. IMPRESSÃO HTML
   ---------------------------------------------------------- */

@media print {

    html,
    body,
    main,
    section,
    article,
    div,
    p,
    span,
    table,
    th,
    td,
    label,
    input,
    textarea,
    select,
    .record-content,
    .clinical-content,
    .clinical-text,
    .record-text,
    .report-text {
        font-family: "Inter", Arial, Helvetica, sans-serif !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }

}


/* ==========================================================
   FIM - PADRAO-TIPOGRAFICO-GLOBAL-V1
   ========================================================== */


/* =========================================================
   AJUDA DE SENHA — PADRÃO GLOBAL
========================================================= */

.password-help {
    display: block;
    margin-top: 6px;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}


/* ==========================================================
   PADRONIZAÇÃO GLOBAL — TELEFONE E SENHA
   ========================================================== */

.password-standard-wrap {
    position: relative;
    width: 100%;
    display: block;
}

.password-standard-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 48px !important;
}

.password-toggle-global {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 16pt !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-global:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px;
}

.password-toggle-global:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    border-radius: 6px;
}

.password-eye-icon {
    display: block;
    line-height: 1;
}

.password-strength-box {
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    background: #fafbfc;
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-strength-title {
    margin-bottom: 5px;
    font-weight: bold;
}

.password-rule {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0;
    color: #606770;
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-rule-icon {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-weight: bold;
}

.password-rule.password-rule-ok {
    color: #198754;
}

.password-rule.password-rule-ok .password-rule-icon {
    color: #198754;
}

.password-strength-result {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid #e4e7eb;
    color: #606770;
    font-weight: bold;
}

.password-strength-result.strong {
    color: #198754;
}

input.password-strong {
    border-color: #198754 !important;
    box-shadow: 0 0 0 1px #198754 !important;
}

input.password-strong:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.18) !important;
}

/*
   A senha incompleta não recebe borda vermelha automaticamente.
   O objetivo é orientar o usuário progressivamente.
*/
input.password-weak {
    box-shadow: none;
}

/* Telefones seguem o mesmo padrão tipográfico global. */
input[name="phone"],
input[name="legal_guardian_phone"],
input[name*="telefone"],
input[name*="celular"],
input[name*="whatsapp"] {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

@media (max-width: 600px) {
    .password-strength-box {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================
   FIM — PADRONIZAÇÃO GLOBAL TELEFONE/SENHA
   ========================================================== */


/* ==========================================================
   CORREÇÃO — OLHO DENTRO DO CAMPO DE SENHA
   ========================================================== */

.password-standard-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.password-standard-wrap > input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 46px !important;
}

.password-standard-wrap > .password-toggle-global {
    position: absolute !important;

    /*
       O botão fica preso ao campo e não ao quadro
       de requisitos.
    */
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline-offset: 1px;

    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 5 !important;
}

.password-standard-wrap > .password-toggle-global:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.password-standard-wrap > .password-toggle-global .password-eye-icon {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15pt !important;
    line-height: 1 !important;
}


/*
   No login os requisitos são orientativos.
   A senha antiga continua podendo autenticar normalmente.
*/
.password-strength-login {
    margin-top: 8px !important;
}


/*
   Esconde a ajuda antiga quando estiver imediatamente
   depois do novo componente.
*/
.password-strength-box + .password-help {
    display: none !important;
}

/* ==========================================================
   FIM — CORREÇÃO OLHO/LOGIN
   ========================================================== */


/* ==========================================================
   OLHO DE SENHA — DENTRO DO INPUT
   ========================================================== */

.password-standard-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.password-standard-wrap > input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 48px !important;
}

.password-standard-wrap > .password-toggle-global {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    z-index: 30 !important;
}

.password-eye-svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    color: #555 !important;
    pointer-events: none !important;
}

/* ==========================================================
   FIM — OLHO DE SENHA
   ========================================================== */


/* ==========================================================
   PADRÃO FINAL GLOBAL — SENHAS
   Este bloco prevalece sobre regras antigas.
   ========================================================== */

.password-standard-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.password-standard-wrap > input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 50px !important;
}

.password-standard-wrap > .password-toggle-global {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #555 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    z-index: 50 !important;
}

.password-standard-wrap >
.password-toggle-global:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

.password-standard-wrap >
.password-toggle-global:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 1px !important;
}

.password-eye-svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
}

/* Esconde botões antigos que eventualmente restarem no HTML. */
.password-toggle {
    display: none !important;
}

/* ---------- Quadro de requisitos ---------- */

.password-strength-box {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 8px 0 10px 0 !important;
    padding: 10px 12px !important;

    border: 1px solid #d8dde3 !important;
    border-radius: 8px !important;

    background: #fafbfc !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-strength-title {
    display: block !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    font-weight: bold !important;
}

.password-rule {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 2px 0 !important;

    color: #666 !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-rule-icon {
    display: inline-flex !important;
    width: 18px !important;
    min-width: 18px !important;

    align-items: center !important;
    justify-content: center !important;

    font-weight: bold !important;
}

.password-rule.ok {
    color: #198754 !important;
}

.password-strength-result {
    display: block !important;
    min-height: 24px !important;

    margin-top: 5px !important;

    color: #666 !important;
    font-weight: bold !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-strength-result.ok {
    color: #198754 !important;
}

/* ---------- Campo forte ---------- */

.password-standard-wrap >
input.password-strong-input {
    border-color: #198754 !important;
    box-shadow: 0 0 0 1px #198754 !important;
}

/* ---------- Confirmação ---------- */

.password-confirm-feedback {
    display: block !important;
    min-height: 24px !important;

    margin: 4px 0 8px 0 !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
}

.password-confirm-feedback.ok {
    color: #198754 !important;
}

.password-confirm-feedback.error {
    color: #b42318 !important;
}

.password-standard-wrap >
input.password-confirm-ok {
    border-color: #198754 !important;
}

.password-standard-wrap >
input.password-confirm-error {
    border-color: #b42318 !important;
}

/* Ajuda antiga não deve reaparecer. */
.password-help {
    display: none !important;
}

/* ==========================================================
   FIM — PADRÃO FINAL GLOBAL DE SENHAS
   ========================================================== */


/* ==========================================================
   AGENDA CLÍNICA v2
   Calendário compacto + status + notificações
   ========================================================== */

/* ---------- Calendário aproximadamente 20% mais compacto ---------- */

.agenda-page #agendaCalendar {
    width: 100%;
    max-width: 100%;
}

.agenda-page .calendar-weekdays div {
    padding: 7px 4px;
}

.agenda-page .calendar-grid {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
}

.agenda-page .calendar-day {
    min-height: 98px;
    padding: 5px;
}

.agenda-page .calendar-number {
    min-width: 24px;
    height: 24px;
    margin-bottom: 3px;
}

.agenda-page .calendar-event {
    margin: 2px 0;
    padding: 4px 5px;
    border-radius: 6px;
    line-height: 1.2;
}

/*
 * Mantém semana suficientemente alta para visualizar
 * os compromissos, mas menor que os 300px anteriores.
 */
.agenda-page .calendar-week-view .calendar-day {
    min-height: 235px;
}

/* ---------- Dia que possui agendamento ---------- */

.agenda-page .calendar-day.has-appointments {
    background: rgba(0, 0, 0, 0.018);
}

.agenda-page .calendar-day.has-appointments::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #6c757d;
}

.agenda-page .calendar-day.has-status-agendado::after {
    background: #0d6efd;
}

.agenda-page .calendar-day.has-status-confirmado::after {
    background: #198754;
}

.agenda-page .calendar-day.has-status-cancelado::after {
    background: #dc3545;
}

.agenda-page .calendar-day.has-status-concluido::after {
    background: #6c757d;
}

/* ---------- Cores dos eventos ---------- */

.agenda-page .calendar-event.status-agendado {
    background: #e7f1ff;
    color: #084298;
    border-left: 4px solid #0d6efd;
}

.agenda-page .calendar-event.status-confirmado {
    background: #e8f5ee;
    color: #0f5132;
    border-left: 4px solid #198754;
}

.agenda-page .calendar-event.status-cancelado {
    background: #f8d7da;
    color: #842029;
    border-left: 4px solid #dc3545;

    opacity: .72;
    text-decoration: line-through;
}

.agenda-page .calendar-event.status-concluido {
    background: #e9ecef;
    color: #41464b;
    border-left: 4px solid #6c757d;

    opacity: .9;
}

/* ---------- Notificações ---------- */

.agenda-notifications {
    margin: 12px 0 14px;
}

.agenda-notification-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.agenda-notification-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: auto;
    min-height: 36px;

    padding: 7px 11px;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;

    cursor: pointer;
}

.agenda-bell {
    font-size: 17px;
    line-height: 1;
}

.agenda-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    border-radius: 999px;

    background: #dc3545;
    color: white;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.agenda-notification-count[hidden] {
    display: none !important;
}

/* ---------- Legenda ---------- */

.agenda-status-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px 14px;
}

.agenda-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
}

.agenda-legend-dot {
    display: inline-block;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.agenda-legend-dot.status-agendado {
    background: #0d6efd;
}

.agenda-legend-dot.status-confirmado {
    background: #198754;
}

.agenda-legend-dot.status-cancelado {
    background: #dc3545;
}

.agenda-legend-dot.status-concluido {
    background: #6c757d;
}

/* ---------- Painel ---------- */

.agenda-notification-panel[hidden] {
    display: none !important;
}

.agenda-notification-panel {
    margin-top: 10px;
    padding: 14px;

    border: 1px solid #dce5e5;
    border-radius: 10px;

    background: #fafcfc;
}

.agenda-notification-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.agenda-notification-section h3 {
    margin: 0 0 8px;
}

.agenda-notification-item {
    display: grid;
    grid-template-columns: 58px minmax(120px, 1fr) auto;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-height: 38px;

    margin: 0 0 5px;
    padding: 6px 8px;

    border: 1px solid #e1e7e7;
    border-left-width: 4px;
    border-radius: 7px;

    background: white;
    color: inherit;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.35;

    text-align: left;
    cursor: pointer;
}

.agenda-notification-item.status-agendado {
    border-left-color: #0d6efd;
}

.agenda-notification-item.status-confirmado {
    border-left-color: #198754;
}

.agenda-notification-item.status-cancelado {
    border-left-color: #dc3545;
}

.agenda-notification-item.status-concluido {
    border-left-color: #6c757d;
}

.agenda-notification-time {
    font-weight: 700;
}

.agenda-notification-patient {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-notification-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.agenda-notification-status.status-agendado {
    background: #e7f1ff;
    color: #084298;
}

.agenda-notification-status.status-confirmado {
    background: #e8f5ee;
    color: #0f5132;
}

.agenda-notification-status.status-cancelado {
    background: #f8d7da;
    color: #842029;
}

.agenda-notification-status.status-concluido {
    background: #e9ecef;
    color: #41464b;
}

.agenda-notification-empty {
    padding: 10px;

    border: 1px dashed #dce5e5;
    border-radius: 7px;

    text-align: center;
    opacity: .7;
}

/* ---------- Status no resumo já existente ---------- */

.agenda-page .summary-status.status-agendado {
    color: #084298;
}

.agenda-page .summary-status.status-confirmado {
    color: #0f5132;
}

.agenda-page .summary-status.status-cancelado {
    color: #842029;
    text-decoration: none;
}

.agenda-page .summary-status.status-concluido {
    color: #41464b;
}

/* ---------- Responsividade ---------- */

@media (max-width: 1000px) {

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        min-width: 650px;
    }

    .agenda-notification-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .agenda-notification-top {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-notification-button {
        width: 100%;
    }

    .agenda-status-legend {
        justify-content: center;
    }

    .agenda-notification-panel {
        padding: 10px;
    }

    .agenda-notification-item {
        grid-template-columns: 52px minmax(100px, 1fr);
    }

    .agenda-notification-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* ==========================================================
   FIM — AGENDA CLÍNICA v2
   ========================================================== */


/* ==========================================================
   AGENDA CLÍNICA v2 — AJUSTE FINAL DE TAMANHO
   ========================================================== */

@media (min-width: 1001px) {

    .agenda-page #agendaCalendar,
    .agenda-page #calendarSummary {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .agenda-page #agendaCalendar {
        margin-top: 8px;
    }

    .agenda-page #calendarSummary {
        margin-top: 14px;
    }
}

/*
 * Tablet e celular continuam utilizando toda a largura
 * disponível para preservar a legibilidade.
 */
@media (max-width: 1000px) {

    .agenda-page #agendaCalendar,
    .agenda-page #calendarSummary {
        width: 100%;
    }
}

/* ==========================================================
   FIM — AJUSTE FINAL DA AGENDA
   ========================================================== */


/* ==========================================================
   AGENDA CLÍNICA v2 — BOTÕES DO MODAL
   ========================================================== */

/*
 * Organiza todas as ações do agendamento horizontalmente.
 */
.agenda-modal .agenda-modal-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    margin-top: 18px;
}

/*
 * Os formulários não devem ocupar uma linha inteira.
 */
.agenda-modal .agenda-modal-actions form {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

/*
 * Links e botões passam a ter o mesmo tamanho visual.
 */
.agenda-modal .agenda-modal-actions .agenda-btn,
.agenda-modal .agenda-modal-actions form .agenda-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 82px;
    min-height: 36px;

    margin: 0 !important;
    padding: 7px 12px !important;

    border-radius: 7px;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    cursor: pointer;
}

/*
 * Editar e Abrir prontuário também recebem aparência
 * de botão, evitando os links soltos vistos anteriormente.
 */
.agenda-modal .agenda-modal-actions > a.agenda-btn {
    border: 1px solid #087a78;
    background: white;
    color: #087a78;
}

/*
 * Ações principais.
 */
.agenda-modal .agenda-modal-actions form .agenda-btn {
    border: 1px solid #087a78;
    background: #087a78;
    color: white;
}

/*
 * Cancelar recebe identificação própria.
 */
.agenda-modal .agenda-modal-actions form:has(
    input[name="status"][value="Cancelado"]
) .agenda-btn {
    border-color: #b42318;
    background: #b42318;
    color: white;
}

/*
 * Concluir recebe identificação própria.
 */
.agenda-modal .agenda-modal-actions form:has(
    input[name="status"][value="Concluído"]
) .agenda-btn {
    border-color: #356859;
    background: #356859;
    color: white;
}

/*
 * Hover discreto.
 */
.agenda-modal .agenda-modal-actions .agenda-btn:hover {
    filter: brightness(.95);
}

/* CELULAR */
@media (max-width: 700px) {

    .agenda-modal .agenda-modal-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 7px !important;
    }

    .agenda-modal .agenda-modal-actions form {
        width: 100% !important;
    }

    .agenda-modal .agenda-modal-actions .agenda-btn,
    .agenda-modal .agenda-modal-actions form .agenda-btn {
        width: 100% !important;
        min-width: 0;
    }
}

/* ==========================================================
   FIM — BOTÕES DO MODAL DA AGENDA
   ========================================================== */

/* ==========================================================
   ETAPA 33C.4K.2 — SCROLL DO MENU LATERAL
   Permite acessar todos os itens quando o menu ultrapassar
   a altura disponível da tela.
   ========================================================== */

aside {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

aside nav {
    padding-bottom: 25px;
}

/* Em telas pequenas, a sidebar volta ao fluxo normal */
@media (max-width: 800px) {
    aside {
        position: static;
        width: auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

/* ==========================================================
   ETAPA 33C.4L — PADRONIZAÇÃO GERAL DE ROLAGEM
   ========================================================== */

/* Página */
html,
body {
    min-height: 100%;
}

/* Conteúdo principal:
   permite que a página cresça naturalmente */
main {
    min-width: 0;
    min-height: 0;
}

/* Tabelas e áreas extensas */
.table-responsive,
.table-container,
.data-table-container,
.list-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabelas muito largas */
table {
    max-width: 100%;
}

/* Evita que tabelas estourem a tela */
.table-responsive table,
.table-container table,
.data-table-container table,
.list-container table {
    min-width: max-content;
}

/* Conteúdo de texto extenso */
.content-scroll,
.text-scroll,
.document-content {
    max-width: 100%;
    overflow-x: auto;
}

/* Modais */
.modal,
.modal-content,
.dialog {
    max-height: 90vh;
}

.modal-content,
.dialog {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Formulários extensos */
.form-container,
.form-content {
    max-width: 100%;
}

/* Imagens e conteúdo incorporado */
img,
iframe,
video {
    max-width: 100%;
}

/* Código/preformatted */
pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media (max-width: 800px) {

    main {
        width: 100%;
        min-width: 0;
    }

    .table-responsive,
    .table-container,
    .data-table-container,
    .list-container {
        width: 100%;
        overflow-x: auto;
    }

    .modal,
    .modal-content,
    .dialog {
        max-height: 85vh;
    }
}

/* Telas grandes:
   barras somente quando o conteúdo realmente ultrapassar */
@media (min-width: 801px) {

    .table-responsive,
    .table-container,
    .data-table-container,
    .list-container {
        scrollbar-width: thin;
    }

    .modal-content,
    .dialog {
        scrollbar-width: thin;
    }
}


/* ==========================================================
   ETAPA 34A.3 — BOTÃO LOGIN PORTAL DO PACIENTE
   ========================================================== */

.patient-portal-login-button {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 18px 0 14px;
    padding: 11px 18px;

    box-sizing: border-box;

    text-align: center;
    white-space: normal;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.5;

    cursor: pointer;
}

@media (max-width: 800px) {
    .patient-portal-login-button {
        width: 100%;
        min-height: 46px;
    }
}

/* ==========================================================
   ETAPA 34B.2 — BOTÃO ESQUECI MINHA SENHA
   ========================================================== */

.patient-portal-forgot-button {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 18px;

    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    white-space: normal;

    border: 1px solid var(--p);
    border-radius: 8px;

    background: transparent;
    color: var(--p);

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.5;

    cursor: pointer;
}

.patient-portal-forgot-button:hover,
.patient-portal-forgot-button:focus {
    text-decoration: none;
}

@media (max-width: 800px) {
    .patient-portal-forgot-button {
        width: 100%;
        min-height: 46px;
    }
}

.patient-portal-forgot-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================
   ETAPA 34D.3A — ENVIAR INSTRUÇÕES MESMO TAMANHO
   ========================================================== */

.patient-portal-recovery-submit {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0 0 14px 0;
    padding: 11px 18px;

    box-sizing: border-box;

    text-align: center;
    white-space: normal;

    border-radius: 8px;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.5;

    cursor: pointer;
}

@media (max-width: 800px) {
    .patient-portal-recovery-submit {
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        padding: 11px 18px;
        box-sizing: border-box;
    }
}

/* ==========================================================
   ETAPA 34D.6 — CENTRALIZAÇÃO DOS BOTÕES DE RECUPERAÇÃO
   ========================================================== */

.patient-portal-recovery-actions {
    width: 100%;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    gap: 14px;
}

.patient-portal-recovery-actions .patient-portal-recovery-submit,
.patient-portal-recovery-actions .patient-portal-forgot-button {
    width: 100%;
    max-width: 100%;
    min-height: 46px;

    margin: 0;
    padding: 11px 18px;

    box-sizing: border-box;

    text-align: center;
}

@media (max-width: 800px) {
    .patient-portal-recovery-actions {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================================
   ETAPA 41B — LOGIN CENTRALIZADO DO PORTAL DO PACIENTE
   ========================================================== */

.auth-wrap {
    width: 100%;
    max-width: none;

    min-height: 100vh;

    margin: 0;
    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-wrap .patient-portal-login-card {
    width: 100%;
    max-width: 560px;

    margin: 0;
    padding: 28px;

    box-sizing: border-box;
}

.auth-wrap .patient-portal-login-card h1 {
    margin-top: 0;
}

.auth-wrap .patient-portal-login-card form,
.auth-wrap .patient-portal-login-card input,
.auth-wrap .patient-portal-login-card button,
.auth-wrap .patient-portal-forgot-container,
.auth-wrap .patient-portal-forgot-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {

    .auth-wrap {
        min-height: 100vh;
        padding: 16px;
    }

    .auth-wrap .patient-portal-login-card {
        max-width: 100%;
        padding: 22px 18px;
    }
}

/* ==========================================================
   ETAPA 43B — PORTAL DO PACIENTE CENTRALIZADO E COMPACTO
   ========================================================== */

main.patient-portal-main {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.patient-portal-main > .card {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
    box-sizing: border-box;
}

.patient-portal-main h1 {
    margin-top: 0;
}

.patient-portal-main .history,
.patient-portal-main .history-summary,
.patient-portal-main .history-content {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 860px) {
    main.patient-portal-main {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 16px;
    }

    .patient-portal-main > .card {
        padding: 20px 18px;
    }
}


/* ==========================================================
   AGENDA — LAYOUT PROFISSIONAL v3
   Calendário principal + atendimentos do período à direita
   ========================================================== */

.agenda-page .agenda-professional-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: stretch;
    width: 100%;
    margin-top: 10px;
}

.agenda-page .agenda-professional-layout #agendaCalendar {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.agenda-page .agenda-professional-layout #calendarSummary {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid #d8e2e2;
    border-radius: 8px;
    background: #fff;
    align-self: stretch;
}

.agenda-page .agenda-professional-layout .calendar-weekdays,
.agenda-page .agenda-professional-layout .calendar-grid {
    width: 100%;
}

.agenda-page .agenda-professional-layout .calendar-day {
    min-height: 104px;
}

.agenda-page .agenda-professional-layout .calendar-number {
    font-size: 0.88rem;
}

.agenda-page .agenda-professional-layout .calendar-event {
    font-size: 0.84rem;
    padding: 6px 7px;
}

.agenda-page .agenda-professional-layout .calendar-summary-header {
    margin-top: 0;
}

.agenda-page .agenda-professional-layout .calendar-summary-header h3 {
    margin-top: 0;
    font-size: 1rem;
}

.agenda-page .agenda-professional-layout .calendar-summary-item {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 11px 8px;
}

.agenda-page .agenda-professional-layout .calendar-summary-item > * {
    min-width: 0;
}

.agenda-page .agenda-professional-layout .summary-status {
    justify-self: start;
}

/* Visão Lista não precisa reservar espaço lateral */
.agenda-page .agenda-professional-layout:has(#agendaCalendar[hidden]) {
    display: block;
}

.agenda-page .agenda-professional-layout:has(#agendaCalendar[hidden])
#calendarSummary {
    display: none !important;
}

/* Notebook / tablet */
@media (max-width: 1100px) {
    .agenda-page .agenda-professional-layout {
        grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
        gap: 14px;
    }

    .agenda-page .agenda-professional-layout .calendar-day {
        min-height: 92px;
    }
}

/* Celular: resumo volta para baixo do calendário */
@media (max-width: 800px) {
    .agenda-page .agenda-professional-layout {
        display: block;
    }

    .agenda-page .agenda-professional-layout #calendarSummary {
        margin-top: 16px;
    }

    .agenda-page .agenda-professional-layout .calendar-day {
        min-height: 78px;
    }
}

/* ==========================================================
   FIM — AGENDA LAYOUT PROFISSIONAL v3
   ========================================================== */

/* ==========================================================
   AGENDA PROFISSIONAL v3.1 — PROPORÇÃO FINAL
   Calendário mais amplo e painel lateral compacto
   ========================================================== */

@media (min-width: 1101px) {

    .agenda-page .agenda-professional-layout {
        grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
        gap: 18px;
    }

    .agenda-page .agenda-professional-layout .calendar-day {
        min-height: 104px;
    }

    .agenda-page .agenda-professional-layout #calendarSummary {
        padding: 16px;
    }

}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.1
   ========================================================== */

/* ==========================================================
   AGENDA PROFISSIONAL v3.2
   Scroll interno em "Atendimentos do período"
   ========================================================== */

/* Desktop */
@media (min-width: 801px) {

    .agenda-page .agenda-professional-layout #calendarSummary {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummary .calendar-summary-header {
        flex: 0 0 auto;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 5px;
        scrollbar-gutter: stable;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent::-webkit-scrollbar {
        width: 7px;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent::-webkit-scrollbar-thumb {
        background: #b8c7c7;
        border-radius: 10px;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Celular: mantém fluxo natural */
@media (max-width: 800px) {

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent {
        max-height: 360px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.2
   ========================================================== */

/* ==========================================================
   AGENDA PROFISSIONAL v3.3
   Altura controlada do painel "Atendimentos do período"
   ========================================================== */

@media (min-width: 1101px) {

    .agenda-page .agenda-professional-layout {
        align-items: start;
    }

    .agenda-page .agenda-professional-layout #calendarSummary {
        height: 660px;
        max-height: 660px;
        align-self: start;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummary .calendar-summary-header {
        flex: 0 0 auto;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {

    .agenda-page .agenda-professional-layout {
        align-items: start;
    }

    .agenda-page .agenda-professional-layout #calendarSummary {
        height: 560px;
        max-height: 560px;
        align-self: start;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.3
   ========================================================== */

/* ==========================================================
   AGENDA PROFISSIONAL v3.4
   Limite visual de atendimentos por dia na visão mensal
   ========================================================== */

.agenda-page .calendar-more-events {
    margin-top: 4px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f2f6f6;
    color: #486060;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.4
   ========================================================== */

/* ==========================================================
   AGENDA PROFISSIONAL v3.5
   Painel lateral acompanha exatamente a altura do calendário
   ========================================================== */

@media (min-width: 801px) {

    .agenda-page .agenda-professional-layout {
        align-items: stretch;
    }

    .agenda-page .agenda-professional-layout #agendaCalendar {
        align-self: stretch;
    }

    .agenda-page .agenda-professional-layout #calendarSummary {
        height: auto;
        max-height: none;
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummary .calendar-summary-header {
        flex: 0 0 auto;
    }

    .agenda-page .agenda-professional-layout
    #calendarSummaryContent {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.5
   ========================================================== */


/* ==========================================================
   AGENDA PROFISSIONAL v3.6
   +N atendimentos clicável
   ========================================================== */

.agenda-page button.calendar-more-events {
    display: block;
    width: 100%;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.agenda-page button.calendar-more-events:hover {
    background: #e2eeee;
    color: #006f69;
}

.agenda-page button.calendar-more-events:focus-visible {
    outline: 2px solid #007a73;
    outline-offset: 2px;
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.6
   ========================================================== */


/* ==========================================================
   AGENDA PROFISSIONAL v3.7
   Refinamento visual da visão Dia
   ========================================================== */

.agenda-page .calendar-day-view {
    border: 1px solid #dce5e5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.agenda-page .calendar-day-view .calendar-day-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 10px 12px;
    border-bottom: 1px solid #e5ecec;
}

.agenda-page .calendar-day-view .calendar-day-row:last-child {
    border-bottom: 0;
}

.agenda-page .calendar-day-view .calendar-hour {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 6px;
    border-right: 1px solid #dce5e5;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.agenda-page .calendar-day-view .calendar-event {
    justify-content: center;
    min-height: 52px;
    margin: 0;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.3;
}

.agenda-page .calendar-day-view .calendar-event strong {
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.agenda-page .calendar-day-view .calendar-event span {
    font-size: 0.95rem;
    font-weight: 700;
}

.agenda-page .calendar-day-view .calendar-day-row:hover {
    background: #fafcfc;
}

@media (max-width: 600px) {

    .agenda-page .calendar-day-view .calendar-day-row {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .agenda-page .calendar-day-view .calendar-hour {
        min-height: 48px;
        padding: 6px 4px;
        font-size: 0.9rem;
    }

    .agenda-page .calendar-day-view .calendar-event {
        min-height: 48px;
        padding: 8px;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.7
   ========================================================== */


/* ==========================================================
   AGENDA PROFISSIONAL v3.8
   Refinamento visual da visão Semana
   ========================================================== */

.agenda-page .calendar-week-view {
    align-items: stretch;
}

.agenda-page .calendar-week-view .calendar-day {
    min-height: 260px;
    padding: 8px;
    background: #fff;
}

.agenda-page .calendar-week-view .calendar-number {
    display: flex;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
}

.agenda-page .calendar-week-view .calendar-day.today {
    background: #f8fbfb;
}

.agenda-page .calendar-week-view .calendar-day.today .calendar-number {
    border: 2px solid currentColor;
}

.agenda-page .calendar-week-view .calendar-event {
    min-height: 46px;
    margin: 5px 0;
    padding: 7px 8px;
    justify-content: center;
    font-size: 0.78rem;
    line-height: 1.25;
}

.agenda-page .calendar-week-view .calendar-event strong {
    margin-bottom: 2px;
    font-size: 0.74rem;
}

.agenda-page .calendar-week-view .calendar-event span {
    font-size: 0.78rem;
    font-weight: 700;
}

.agenda-page .calendar-week-view .calendar-event:hover {
    filter: brightness(0.97);
}

@media (max-width: 1000px) {

    .agenda-page .calendar-week-view .calendar-day {
        min-height: 230px;
    }

    .agenda-page .calendar-week-view .calendar-event {
        min-height: 42px;
        padding: 6px;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.8
   ========================================================== */


/* ==========================================================
   AGENDA PROFISSIONAL v3.9
   Refinamento visual da visão Lista
   ========================================================== */

.agenda-page #agendaList {
    width: 100%;
}

.agenda-page #agendaList .agenda-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce5e5;
    border-radius: 10px;
    background: #fff;
}

.agenda-page #agendaList .agenda-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.agenda-page #agendaList .agenda-table th {
    padding: 12px 14px;
    border-bottom: 1px solid #dce5e5;
    background: #f3f7f7;
    color: #294747;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.agenda-page #agendaList .agenda-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e8eeee;
    vertical-align: middle;
    font-size: 0.88rem;
}

.agenda-page #agendaList .agenda-table tbody tr:last-child td {
    border-bottom: 0;
}

.agenda-page #agendaList .agenda-table tbody tr:hover {
    background: #fafcfc;
}

.agenda-page #agendaList .agenda-table td:nth-child(1),
.agenda-page #agendaList .agenda-table td:nth-child(2) {
    white-space: nowrap;
    font-weight: 600;
}

.agenda-page #agendaList .agenda-table td:nth-child(3) {
    font-weight: 700;
}

.agenda-page #agendaList .agenda-table td:nth-child(5) strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef3f3;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
}

.agenda-page #agendaList .agenda-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.agenda-page #agendaList .agenda-actions form {
    margin: 0;
}

.agenda-page #agendaList .agenda-actions .agenda-btn {
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 700px) {

    .agenda-page #agendaList .agenda-table {
        min-width: 760px;
    }

    .agenda-page #agendaList .agenda-table th,
    .agenda-page #agendaList .agenda-table td {
        padding: 10px;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v3.9
   ========================================================== */



/* ==========================================================
   AGENDA PROFISSIONAL v4.0
   Central de notificações
   ========================================================== */

.agenda-page .agenda-notification-button[aria-expanded="true"] {
    background: #f3f7f7;
}

.agenda-page .agenda-notification-button[aria-expanded="true"] .agenda-bell {
    transform: scale(1.08);
}

.agenda-page .agenda-bell {
    transition: transform .15s ease;
}

.agenda-page .agenda-notification-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.agenda-page .agenda-notification-section {
    min-width: 0;
}

.agenda-page .agenda-notification-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.agenda-page .agenda-notification-section-header h3 {
    margin: 0;
}

.agenda-page .agenda-notification-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef3f3;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.agenda-page .agenda-notification-item {
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.agenda-page .agenda-notification-item:hover {
    background: #f8fbfb;
    transform: translateY(-1px);
}

.agenda-page .agenda-notification-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.agenda-page .agenda-notification-date {
    font-size: .72rem;
    line-height: 1.15;
    opacity: .7;
    white-space: nowrap;
}

.agenda-page .agenda-notification-time {
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 700px) {

    .agenda-page .agenda-notification-section-count {
        min-width: 25px;
        height: 25px;
    }

    .agenda-page .agenda-notification-item {
        align-items: start;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v4.0
   ========================================================== */


/* ==========================================================
   AGENDA PROFISSIONAL v4.1
   Novo Agendamento
   ========================================================== */

.agenda-page .agenda-new-appointment-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(150px, .8fr)
        minmax(130px, .65fr)
        minmax(190px, 1fr);
    gap: 14px;
    align-items: end;
}

.agenda-page .agenda-new-appointment-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
}

.agenda-page .agenda-new-appointment-form input,
.agenda-page .agenda-new-appointment-form select,
.agenda-page .agenda-new-appointment-form textarea {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}

.agenda-page .agenda-new-appointment-form textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.4;
}

.agenda-page .agenda-new-appointment-form input:focus,
.agenda-page .agenda-new-appointment-form select:focus,
.agenda-page .agenda-new-appointment-form textarea:focus {
    outline: 2px solid #007a73;
    outline-offset: 1px;
}

.agenda-page .agenda-new-appointment-form
:is(input, select, textarea):required:invalid:not(:focus) {
    border-color: #c9d5d5;
}

.agenda-page .agenda-new-appointment-form button[type="submit"] {
    min-height: 42px;
    align-self: end;
}

@media (max-width: 1050px) {
    .agenda-page .agenda-new-appointment-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .agenda-page .agenda-new-appointment-form {
        grid-template-columns: 1fr;
    }

    .agenda-page .agenda-new-appointment-form button[type="submit"] {
        width: 100%;
    }
}

/* ==========================================================
   FIM — AGENDA PROFISSIONAL v4.1
   ========================================================== */

/* ==========================================================
   TIPOGRAFIA GLOBAL DA INTERFACE
   Prontuário Eletrônico CREFITO-20
   ========================================================== */

html,
body,
input,
textarea,
select,
button {
    font-family: "Inter", Arial, Helvetica, sans-serif;
}

body {
    font-size: 16px;
    line-height: 1.5;
}

input,
textarea,
select {
    font-size: 16px;
    line-height: 1.4;
}

button,
.button {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 15px;
}

label {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 14px;
}

table,
th,
td {
    font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* ==========================================================
   FIM — TIPOGRAFIA GLOBAL DA INTERFACE
   ========================================================== */

/* ==========================================================
   INTER — FONTE LOCAL DO SISTEMA
   ========================================================== */

@font-face {
    font-family: "Inter";
    src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/static/fonts/Inter-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* ==========================================================
   FIM — INTER
   ========================================================== */

/* ==========================================================
   RESPONSIVIDADE GLOBAL — FUNDAÇÃO
   Desktop / Tablet / Dispositivo móvel
   ========================================================== */

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

main,
.card,
section,
form,
fieldset,
header,
.row,
.cols,
.stats,
.profile-grid,
.readonly-grid,
.welcome,
.section-title {
    min-width: 0;
}

input,
textarea,
select,
button,
.button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* Evita que textos longos forcem largura da página */
.card,
.row,
.section-title,
.welcome,
header,
td,
th,
label,
p,
a,
span,
strong,
small {
    overflow-wrap: anywhere;
}

/* ---------- TABLET ---------- */

@media (max-width: 1024px) {

    main {
        max-width: none;
    }

    .cols {
        grid-template-columns: 1fr;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .readonly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .welcome,
    .section-title {
        min-width: 0;
    }
}

/* ---------- CELULAR ---------- */

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    main {
        width: 100%;
        margin-left: 0;
        padding: 14px;
    }

    header {
        margin: -14px -14px 18px;
        padding: 14px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .card {
        width: 100%;
        padding: 16px;
        border-radius: 12px;
    }

    .cols,
    .stats,
    .stats.four,
    .profile-grid,
    .readonly-grid {
        grid-template-columns: 1fr;
    }

    .welcome,
    .section-title {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .quick {
        width: 100%;
        flex-wrap: wrap;
    }

    input,
    textarea,
    select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    button,
    .button {
        min-height: 44px;
    }

    .search {
        width: 100%;
        flex-wrap: wrap;
    }

    .search input {
        flex: 1 1 100%;
    }

    .search button,
    .search .button {
        flex: 1 1 auto;
    }

    .row {
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .auth-page {
        padding: 14px;
    }

    .auth-card,
    .login-card {
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }
}

/* ---------- CELULAR PEQUENO ---------- */

@media (max-width: 480px) {

    main {
        padding: 10px;
    }

    header {
        margin: -10px -10px 15px;
        padding: 12px 10px;
    }

    .card {
        padding: 14px;
        border-radius: 10px;
    }

    .welcome {
        padding: 16px;
    }

    .welcome h2 {
        font-size: 21px;
    }

    button,
    .button {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .quick {
        flex-direction: column;
    }

    .quick .button,
    .quick button {
        width: 100%;
    }
}

/* ==========================================================
   FIM — RESPONSIVIDADE GLOBAL
   ========================================================== */


/* ==========================================================
   RESPONSIVIDADE — MENU MOBILE + AGENDA DO DASHBOARD
   ========================================================== */

@media (max-width: 767px) {

    /* Sidebar deixa de ocupar grande área vertical */
    aside {
        position: static;
        width: 100%;
        padding: 14px;
    }

    aside .brand-side {
        margin: 0 0 12px;
        gap: 10px;
    }

    aside .brand-side img {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    aside .brand-side b {
        font-size: 16px;
        line-height: 1.2;
    }

    aside .brand-side small {
        margin-top: 2px;
        font-size: 12px;
    }

    aside nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    aside nav .nav-label {
        grid-column: 1 / -1;
        margin: 8px 4px 1px;
        font-size: 9px;
    }

    aside nav a {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 9px 10px;
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Tabela da Agenda: rolagem apenas dentro do card */
    .dashboard-agenda {
        overflow: hidden;
    }

    .dashboard-agenda-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-agenda table {
        min-width: 620px;
    }

    .dashboard-agenda th,
    .dashboard-agenda td,
    .dashboard-agenda .pill {
        overflow-wrap: normal;
        word-break: normal;
    }

    .dashboard-agenda th {
        white-space: nowrap;
    }

    .dashboard-agenda td:nth-child(1),
    .dashboard-agenda td:nth-child(2),
    .dashboard-agenda td:nth-child(4),
    .dashboard-agenda .pill {
        white-space: nowrap;
    }

    .dashboard-agenda .pill {
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 480px) {

    aside {
        padding: 12px 10px;
    }

    aside nav {
        gap: 5px;
    }

    aside nav a {
        min-height: 40px;
        padding: 8px;
        font-size: 13px;
    }

    .dashboard-agenda table {
        min-width: 580px;
    }
}

/* ==========================================================
   FIM — MENU MOBILE + AGENDA DO DASHBOARD
   ========================================================== */


/* ==========================================================
   RESPONSIVIDADE — PACIENTES / PRONTUÁRIOS / HISTÓRICO
   ========================================================== */

@media (max-width: 1024px) {

    .patient-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .history-summary {
        flex-wrap: wrap;
        gap: 10px;
    }

    .history-summary-info {
        flex: 1 1 320px;
        min-width: 0;
    }

    .history-state {
        flex: 0 0 auto;
    }

    .history-pdf {
        flex: 0 0 auto;
    }
}

@media (max-width: 767px) {

    /* Pesquisa e listagem de pacientes/prontuários */
    .search {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search input,
    .search select,
    .search button,
    .search .button {
        width: 100%;
        min-width: 0;
    }

    .row {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .patient-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .patient-actions .button,
    .patient-actions button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    /* Formulário clínico */
    form label {
        min-width: 0;
    }

    form input:not([type="radio"]):not([type="checkbox"]),
    form textarea,
    form select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    form textarea {
        min-height: 110px;
    }

    form input[type="radio"],
    form input[type="checkbox"] {
        width: auto;
        max-width: none;
    }

    /* Histórico clínico */
    .history-dropdown {
        padding: 14px;
    }

    .history-summary {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 9px;
    }

    .history-summary-info {
        width: 100%;
        min-width: 0;
    }

    .history-summary-info strong,
    .history-summary-info small,
    .record-status {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .history-state {
        width: 100%;
        justify-content: flex-start;
    }

    .history-pdf {
        width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    .history-content {
        width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .history-content p,
    .history-content small {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Tabelas clínicas: rolagem fica no conteúdo, não na página */
    .clinical-table,
    .record-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .clinical-table th,
    .clinical-table td,
    .record-table th,
    .record-table td {
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 480px) {

    .history-dropdown {
        padding: 12px;
    }

    .history-summary-info strong {
        font-size: 14px;
        line-height: 1.35;
    }

    .history-summary-info small {
        font-size: 12px;
    }

    .record-status {
        max-width: 100%;
        white-space: normal;
    }

    .history-content {
        font-size: 14px;
    }
}

/* ==========================================================
   FIM — RESPONSIVIDADE TELAS CLÍNICAS
   ========================================================== */

/* ==========================================================
   RESPONSIVIDADE — AGENDA COMPLETA
   Tablet / Dispositivo móvel
   ========================================================== */

@media (max-width: 1024px) {

    .agenda-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .agenda-page .agenda-top,
    .agenda-page .agenda-toolbar {
        min-width: 0;
        flex-wrap: wrap;
        gap: 12px;
    }

    .agenda-page .agenda-professional-layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .agenda-page #agendaCalendar,
    .agenda-page #calendarSummary {
        min-width: 0;
        max-width: 100%;
    }

    .agenda-page .agenda-table-wrap {
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    /* Cabeçalho e controles */

    .agenda-page .agenda-top,
    .agenda-page .agenda-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .agenda-page .agenda-new-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }

    .agenda-page .agenda-navigation,
    .agenda-page .agenda-views {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .agenda-page .agenda-navigation button,
    .agenda-page .agenda-views button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-left: 8px;
        padding-right: 8px;
        white-space: normal;
    }

    /* Calendário */

    .agenda-page #agendaCalendar {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        min-width: 620px;
    }

    .agenda-page .calendar-day,
    .agenda-page .calendar-event,
    .agenda-page .calendar-event strong,
    .agenda-page .calendar-event span {
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Resumo */

    .agenda-page #calendarSummary {
        width: 100%;
        max-width: 100%;
    }

    .agenda-page .calendar-summary-item {
        min-width: 0;
    }

    .agenda-page .calendar-summary-item *,
    .agenda-page .summary-status {
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Lista:
       mantém a tabela legível e desloca somente dentro do card */

    .agenda-page #agendaList {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .agenda-page #agendaList .agenda-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-page #agendaList .agenda-table {
        width: 760px;
        min-width: 760px;
    }

    .agenda-page #agendaList .agenda-table th,
    .agenda-page #agendaList .agenda-table td,
    .agenda-page #agendaList .agenda-table strong,
    .agenda-page #agendaList .agenda-table span,
    .agenda-page #agendaList .agenda-table .pill {
        overflow-wrap: normal;
        word-break: normal;
    }

    .agenda-page #agendaList .agenda-table th,
    .agenda-page #agendaList .agenda-table td:nth-child(1),
    .agenda-page #agendaList .agenda-table td:nth-child(2),
    .agenda-page #agendaList .agenda-table td:nth-child(5),
    .agenda-page #agendaList .agenda-table .pill {
        white-space: nowrap;
    }

    /* Ações */

    .agenda-page #agendaList .agenda-actions {
        min-width: 150px;
    }

    .agenda-page #agendaList .agenda-actions .agenda-btn {
        width: auto;
        min-height: 40px;
        white-space: nowrap;
    }

    /* Notificações */

    .agenda-page .agenda-notification-panel {
        width: 100%;
        max-width: 100%;
    }

    .agenda-page .agenda-notification-columns {
        grid-template-columns: 1fr;
    }

    .agenda-page .agenda-notification-item {
        min-width: 0;
    }

    /* Modal */

    .agenda-page .agenda-modal {
        padding: 12px;
    }

    .agenda-page .agenda-modal-card {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .agenda-page .agenda-modal-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .agenda-page .agenda-modal-actions form,
    .agenda-page .agenda-modal-actions .agenda-btn,
    .agenda-page .agenda-modal-actions form .agenda-btn {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {

    .agenda-page {
        padding: 12px;
    }

    .agenda-page .agenda-navigation,
    .agenda-page .agenda-views {
        grid-template-columns: 1fr;
    }

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        min-width: 560px;
    }

    .agenda-page #agendaList .agenda-table {
        width: 720px;
        min-width: 720px;
    }

    .agenda-page .agenda-table th,
    .agenda-page .agenda-table td {
        font-size: 13px;
    }
}

/* ==========================================================
   FIM — RESPONSIVIDADE DA AGENDA COMPLETA
   ========================================================== */

/* ==========================================================
   RESPONSIVIDADE — CONTROLES COMPACTOS DA AGENDA
   ========================================================== */

@media (max-width: 767px) {

    /* Navegação: anterior | hoje | próximo */
    .agenda-page .agenda-navigation {
        width: 100%;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        gap: 8px;
        align-items: stretch;
    }

    .agenda-page .agenda-navigation button,
    .agenda-page .agenda-navigation .agenda-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        white-space: normal;
    }

    /* Visualizações: Mês/Semana + Dia/Lista */
    .agenda-page .agenda-views {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
    }

    .agenda-page .agenda-views button,
    .agenda-page .agenda-views .agenda-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        white-space: normal;
    }

    /* Notificações permanece em uma linha própria */
    .agenda-page .agenda-notification-button {
        width: 100%;
        min-height: 44px;
        margin: 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    /*
       Sobrescreve a regra anterior que colocava
       navegação e visualizações em uma única coluna.
    */
    .agenda-page .agenda-navigation {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        gap: 6px;
    }

    .agenda-page .agenda-views {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .agenda-page .agenda-navigation button,
    .agenda-page .agenda-navigation .agenda-btn,
    .agenda-page .agenda-views button,
    .agenda-page .agenda-views .agenda-btn {
        min-height: 44px;
        padding: 7px 8px;
    }
}

/* ==========================================================
   FIM — CONTROLES COMPACTOS DA AGENDA
   ========================================================== */

/* ==========================================================
   RESPONSIVIDADE — ADMINISTRAÇÃO / AUDITORIA
   ========================================================== */

.admin-audit-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.admin-audit-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-audit-table {
    width: 100%;
}

@media (max-width: 767px) {

    .admin-audit-table {
        width: 720px;
        min-width: 720px;
    }

    .admin-audit-table th,
    .admin-audit-table td,
    .admin-audit-table span,
    .admin-audit-table strong {
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-audit-table th,
    .admin-audit-table td:first-child,
    .admin-audit-table td:last-child {
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    .admin-audit-table {
        width: 680px;
        min-width: 680px;
    }

    .admin-audit-table th,
    .admin-audit-table td {
        font-size: 13px;
    }
}

/* ==========================================================
   FIM — ADMINISTRAÇÃO / AUDITORIA
   ========================================================== */


/* ==========================================================
   RESPONSIVIDADE FINAL — SISTEMA COMPLETO
   Tablets e dispositivos móveis
   ========================================================== */

/*
 * Esta camada complementa as regras específicas existentes
 * de Agenda, área clínica, histórico e Administração.
 * Não modifica a apresentação destinada a impressão/PDF.
 */

html {
    width: 100%;
    max-width: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

main {
    box-sizing: border-box;
    min-width: 0;
}

main *,
main *::before,
main *::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.card,
section,
form,
fieldset,
.profile-grid,
.readonly-grid,
.form-grid,
.cols,
.row,
.stats,
.welcome,
.section-title,
.quick,
.actions {
    min-width: 0;
}

/* ---------- formulários ---------- */

input,
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* ---------- tabelas genéricas ---------- */

table {
    max-width: 100%;
}

/*
 * Tabelas que já possuem wrappers específicos continuam
 * obedecendo suas próprias regras.
 */

.table-responsive,
.dashboard-agenda-scroll,
.admin-audit-table-wrap,
.agenda-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- conteúdo textual ---------- */

.card p,
.card small,
.card label,
.card a,
.card strong {
    max-width: 100%;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    main {
        max-width: 100%;
    }

    .cols,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .stats.four {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .welcome,
    .section-title {
        min-width: 0;
    }

    .quick {
        flex-wrap: wrap;
    }

    .form-grid {
        min-width: 0;
    }

    .card {
        max-width: 100%;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden;
    }

    main {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    header {
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .cols,
    .profile-grid,
    .readonly-grid,
    .form-grid,
    .stats,
    .stats.four {
        grid-template-columns: 1fr;
    }

    .welcome,
    .section-title {
        flex-direction: column;
        align-items: stretch;
    }

    .quick,
    .actions {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Formulários */

    form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    form label {
        max-width: 100%;
        min-width: 0;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    textarea {
        min-height: 110px;
    }

    button,
    .button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        max-width: 100%;
        touch-action: manipulation;
    }

    /* Dashboard */

    .dashboard-agenda-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-agenda-scroll table {
        min-width: 620px;
    }

    .dashboard-agenda-scroll th,
    .dashboard-agenda-scroll td {
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Tabelas administrativas/genéricas */

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        width: max-content;
        min-width: 680px;
        max-width: none;
    }

    .table-responsive th,
    .table-responsive td {
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Perfil / conta */

    .profile-grid,
    .readonly-grid {
        width: 100%;
    }

    .profile-card {
        max-width: 100%;
    }

    /* autenticação */

    .auth-page {
        width: 100%;
        max-width: 100%;
        padding: 16px;
    }

    .auth-card,
    .login-card {
        width: 100%;
        max-width: 620px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-logo,
    .brand-preview {
        max-width: 100%;
        height: auto;
    }

    /* modal */

    [role="dialog"],
    .modal,
    .agenda-modal {
        max-width: 100%;
    }

    /* textos longos */

    td,
    th,
    p,
    label,
    small {
        word-break: normal;
    }
}

/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 480px) {

    main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .auth-page {
        padding: 12px;
    }

    .auth-card,
    .login-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    /*
     * Botões comuns ocupam a largura disponível.
     * Excluímos explicitamente os controles especializados
     * da Agenda, que já possuem layout próprio.
     */

    form button:not(.agenda-btn):not(.agenda-modal-close),
    form .button:not(.agenda-btn),
    .validation-actions .button {
        max-width: 100%;
    }

    .stats,
    .stats.four {
        grid-template-columns: 1fr;
    }

    .table-responsive table {
        min-width: 640px;
    }
}

/* ==========================================================
   AJUSTES DE PÁGINAS ADMINISTRATIVAS
   ========================================================== */

@media (max-width: 767px) {

    /* Profissionais */

    body table th,
    body table td {
        vertical-align: top;
    }

    /* Configurações */

    .form-grid {
        width: 100%;
        max-width: 100%;
    }

    /* Regionais */

    .table-responsive input:not([type="checkbox"]):not([type="radio"]),
    .table-responsive select {
        max-width: none;
    }

    /* ações dentro de cards */

    .card .actions {
        gap: 8px;
    }

    /* recuperação / portal */

    .patient-portal-login-card,
    .patient-portal-recovery-actions {
        max-width: 100%;
    }
}

/* ==========================================================
   PRESERVAR REGRAS ESPECÍFICAS DA AGENDA
   ========================================================== */

@media (max-width: 767px) {

    .agenda-page .agenda-navigation {
        grid-template-columns:
            52px minmax(0, 1fr) 52px;
    }

    .agenda-page .agenda-views {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .agenda-page .agenda-navigation button,
    .agenda-page .agenda-views button,
    .agenda-page .agenda-notification-button {
        min-height: 44px;
    }
}

@media (max-width: 480px) {

    .agenda-page .agenda-navigation {
        grid-template-columns:
            48px minmax(0, 1fr) 48px;
    }

    .agenda-page .agenda-views {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   FIM — RESPONSIVIDADE FINAL DO SISTEMA COMPLETO
   ========================================================== */


/* ==========================================================
   RESPONSIVIDADE — LISTA DE PRONTUÁRIOS
   ========================================================== */

.records-table-wrap {
    width: 100%;
    max-width: 100%;
}

.records-list-table {
    width: 100%;
}

@media (max-width: 767px) {

    .records-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .records-list-table {
        width: 600px;
        min-width: 600px;
        max-width: none;
        table-layout: fixed;
    }

    .records-list-table th,
    .records-list-table td {
        padding: 10px 8px;
        overflow-wrap: normal;
        word-break: normal;
        vertical-align: middle;
    }

    .records-list-table th:nth-child(1),
    .records-list-table td:nth-child(1) {
        width: 175px;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .records-list-table th:nth-child(2),
    .records-list-table td:nth-child(2) {
        width: 80px;
        white-space: nowrap;
        text-align: center;
    }

    .records-list-table th:nth-child(3),
    .records-list-table td:nth-child(3) {
        width: 185px;
        white-space: nowrap;
    }

    .records-list-table th:nth-child(4),
    .records-list-table td:nth-child(4) {
        width: 160px;
        white-space: nowrap;
        text-align: center;
    }

    .records-list-table .button {
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .records-list-table {
        width: 560px;
        min-width: 560px;
    }

    .records-list-table th,
    .records-list-table td {
        padding: 9px 6px;
    }

    .records-list-table th:nth-child(1),
    .records-list-table td:nth-child(1) {
        width: 155px;
    }

    .records-list-table th:nth-child(2),
    .records-list-table td:nth-child(2) {
        width: 75px;
    }

    .records-list-table th:nth-child(3),
    .records-list-table td:nth-child(3) {
        width: 175px;
    }

    .records-list-table th:nth-child(4),
    .records-list-table td:nth-child(4) {
        width: 155px;
    }

    .records-list-table .button {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
}

/* ==========================================================
   FIM — RESPONSIVIDADE LISTA DE PRONTUÁRIOS
   ========================================================== */

/* ==========================================================
   ACABAMENTO — CABEÇALHOS / DATA DA LISTA DE PRONTUÁRIOS
   ========================================================== */

.records-list-table .records-last-date {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {

    .records-list-table th:nth-child(2) {
        padding-right: 14px;
    }

    .records-list-table th:nth-child(3) {
        padding-left: 14px;
    }

    .records-list-table th:nth-child(2),
    .records-list-table td:nth-child(2) {
        border-right: 1px solid var(--line);
    }

    .records-list-table .records-last-date {
        white-space: nowrap;
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    .records-list-table th:nth-child(2) {
        padding-right: 10px;
        font-size: 13px;
    }

    .records-list-table th:nth-child(3) {
        padding-left: 10px;
        font-size: 13px;
    }

    .records-list-table .records-last-date {
        font-size: 13px;
    }
}

/* ==========================================================
   FIM — ACABAMENTO LISTA DE PRONTUÁRIOS
   ========================================================== */

/* ==========================================================
   ACABAMENTO — LOGIN COMPACTO + LOGO PRIMEIRO ACESSO
   ========================================================== */

/*
 * Desktop:
 * reduz a escala visual da tela de login sem alterar
 * autenticação, campos ou comportamento.
 */
@media (min-width: 801px) {
    body.login {
        grid-template-columns: 1fr 1fr;
    }

    body.login .hero {
        padding: clamp(48px, 7vw, 92px);
    }

    body.login .hero-logo {
        width: min(400px, 78%);
        max-height: 230px;
        margin-bottom: 18px;
    }

    body.login .hero h1 {
        font-size: clamp(34px, 3vw, 42px);
        line-height: 1.12;
        margin: 16px 0;
    }

    body.login .hero p {
        margin-top: 14px;
    }

    body.login .login-card {
        width: min(400px, 82%);
        padding: 24px 26px;
        border-radius: 15px;
    }

    body.login .login-card h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 25px;
    }

    body.login .login-card label {
        margin-bottom: 12px;
    }

    body.login .login-card input {
        min-height: 42px;
    }

    body.login .login-links {
        margin: 12px 0 16px;
        gap: 10px 14px;
    }

    body.login .login-card small {
        margin-top: 14px;
    }
}

/*
 * Primeiro acesso:
 * mantém a logo configurável em proporção adequada.
 */
.auth-page .auth-card .auth-logo {
    width: min(360px, 82%);
    max-height: 150px;
    object-fit: contain;
}

/*
 * Mobile continua responsivo e com área de toque confortável.
 */
@media (max-width: 800px) {
    body.login .login-card {
        width: min(430px, calc(100% - 32px));
        margin: 20px auto;
        padding: 22px;
    }

    .auth-page .auth-card .auth-logo {
        width: min(330px, 88%);
        max-height: 140px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    body.login .login-card {
        width: calc(100% - 24px);
        padding: 18px;
        margin: 12px auto;
    }

    .auth-page .auth-card .auth-logo {
        width: min(290px, 90%);
        max-height: 125px;
        margin-bottom: 16px;
    }
}

/* ==========================================================
   FIM — LOGIN COMPACTO + LOGO PRIMEIRO ACESSO
   ========================================================== */

/* ==========================================================
   USUÁRIOS CADASTRADOS — CARDS + BUSCA POR CREFITO
   ========================================================== */

.professionals-crefito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.professionals-crefito-card {
    appearance: none;
    width: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.professionals-crefito-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.09);
}

.professionals-crefito-card.is-active {
    border-color: currentColor;
    background: #f3f8f8;
}

.professionals-crefito-card-icon {
    font-size: 24px;
    line-height: 1;
}

.professionals-crefito-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.professionals-crefito-card-content strong {
    font-size: 17px;
}

.professionals-crefito-card-content span {
    font-size: 14px;
    font-weight: 500;
}

.professionals-crefito-card-content small {
    margin-top: 4px;
    font-weight: 600;
}

.professionals-crefito-card-action {
    font-size: 13px;
    font-weight: 700;
}

.professionals-crefito-panels {
    margin-top: 20px;
}

.professionals-regional-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.professionals-regional-panel[hidden] {
    display: none !important;
}

.professionals-regional-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #f3f8f8;
    border-bottom: 1px solid var(--line);
}

.professionals-regional-header strong {
    font-size: 16px;
}

.professionals-regional-header span {
    font-size: 14px;
}

.professionals-regional-header small {
    white-space: nowrap;
    font-weight: 600;
}

.professionals-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 16px;
}

.professionals-search-icon {
    position: absolute;
    left: 13px;
    pointer-events: none;
    font-size: 16px;
}

.professionals-search-input {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px 10px 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.professionals-search-input:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.professionals-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.professionals-regional-table {
    width: 100%;
    margin: 0;
}

.professionals-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.professionals-search-empty {
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    font-weight: 600;
}

@media (max-width: 767px) {

    .professionals-crefito-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .professionals-crefito-card {
        min-height: 0;
        padding: 15px;
    }

    .professionals-regional-header {
        align-items: flex-start;
        padding: 12px;
    }

    .professionals-search {
        margin: 12px;
    }

    .professionals-regional-table {
        min-width: 720px;
    }

    .professionals-regional-table th,
    .professionals-regional-table td {
        white-space: nowrap;
    }
}

/* ==========================================================
   FIM — CARDS + BUSCA POR CREFITO
   ========================================================== */

/* ==========================================================
   BOTÕES — RESPONSIVIDADE GLOBAL
   Mantém ações visíveis dentro da tela do usuário.
   ========================================================== */

button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Containers de ações podem quebrar linha em vez de empurrar
 * os botões para fora da área visível.
 */
.actions,
.form-actions,
.professionals-actions,
.agenda-form-buttons,
.quick {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Botões comuns:
     * texto pode quebrar e nunca ultrapassa o espaço disponível.
     */
    main button:not(.password-toggle):not(.professionals-crefito-card),
    main .button,
    main a.button {
        max-width: 100%;
        min-width: 0;
        height: auto;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        text-align: center;
        line-height: 1.25;
    }

    /*
     * Formulários:
     * botão de ação principal fica confortável para toque.
     * Só afeta botão direto do formulário; controles especiais
     * recebem exceções abaixo.
     */
    main form > button:not(.password-toggle):not(.agenda-btn) {
        min-height: 42px;
    }

    /*
     * Grupos de ações das telas administrativas e clínicas.
     */
    .professionals-actions,
    .agenda-form-buttons,
    .quick {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }

    .professionals-actions > *,
    .agenda-form-buttons > *,
    .quick > * {
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Profissionais:
     * ações continuam dentro da coluna e podem quebrar linha.
     */
    .professionals-actions .button,
    .professionals-actions button {
        width: auto;
        max-width: 100%;
        white-space: normal;
    }

    /*
     * Botões de dashboard / atalhos rápidos.
     */
    .quick .button {
        flex: 1 1 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /*
     * Botões comuns isolados em cards/formulários.
     * Evita larguras rígidas maiores que a tela.
     */
    .card button:not(.password-toggle):not(.agenda-btn):not(.professionals-crefito-card),
    .card .button {
        max-width: 100%;
    }

    /*
     * Exceções: controles compactos que NÃO devem virar
     * botões largos.
     */
    .password-toggle,
    .agenda-navigation button,
    .agenda-views button,
    .agenda-notification-button,
    .professionals-crefito-card {
        flex: none;
    }

    /*
     * Agenda mantém a grade própria de navegação.
     */
    .agenda-navigation button,
    .agenda-views button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

    /*
     * Modal/formulários da Agenda: ações ocupam o espaço
     * disponível sem ultrapassar o viewport.
     */
    .agenda-modal-actions button,
    .agenda-form-buttons button {
        max-width: 100%;
        white-space: normal;
    }
}

/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 480px) {

    /*
     * Em telas estreitas, grupos principais passam a usar
     * uma ação por linha para manter texto totalmente visível.
     */
    .quick,
    .agenda-form-buttons,
    .agenda-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quick .button,
    .agenda-form-buttons button,
    .agenda-modal-actions button,
    .agenda-modal-actions .button {
        width: 100%;
        max-width: 100%;
    }

    /*
     * Ações dentro das tabelas permanecem compactas,
     * porém podem quebrar para a próxima linha.
     */
    .professionals-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .professionals-actions > a,
    .professionals-actions > form {
        width: 100%;
        max-width: 100%;
    }

    .professionals-actions > form > button,
    .professionals-actions > a.button {
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }
}

/* ==========================================================
   FIM — BOTÕES RESPONSIVOS GLOBAIS
   ========================================================== */

/* ==========================================================
   AÇÕES DE TABELA — PRESERVAR PALAVRAS DOS BOTÕES
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Nunca comprimir uma ação a ponto de quebrar
     * Editar / Bloquear / Excluir / Desativar letra por letra.
     */
    td button,
    td .button,
    td a.button,
    td .btn {
        width: auto;
        min-width: max-content;
        max-width: none;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        flex-shrink: 0;
    }

    /*
     * Formulários dentro de células não devem esmagar
     * o botão que contêm.
     */
    td form {
        flex-shrink: 0;
    }
}

/* ==========================================================
   FIM — AÇÕES DE TABELA / PALAVRAS INTEIRAS
   ========================================================== */

/* ==========================================================
   ADMINISTRADORES — AÇÕES RESPONSIVAS
   ========================================================== */

.administrator-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.administrator-actions > button,
.administrator-actions > form {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
}

.administrator-actions > form {
    margin: 0;
}

.administrator-actions > button,
.administrator-actions > form > button {
    width: auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    flex-shrink: 0;
}

@media (max-width: 767px) {

    .administrator-actions {
        max-width: 100%;
        justify-content: flex-end;
    }

    .administrator-actions > button,
    .administrator-actions > form,
    .administrator-actions > form > button {
        min-width: max-content;
        max-width: none;
        white-space: nowrap;
    }
}

/* ==========================================================
   FIM — ADMINISTRADORES / AÇÕES RESPONSIVAS
   ========================================================== */

/* ==========================================================
   ESCALA VISUAL COMPACTA — DESKTOP EM 100%
   Objetivo:
   - navegador permanece em 100%;
   - reduzir excesso de escala visual;
   - preservar mobile e áreas de toque;
   - preservar Agenda, login e controles especiais.
   ========================================================== */

@media (min-width: 768px) {

    /*
     * Tipografia-base do sistema autenticado.
     * Não aplica escala/zoom artificial.
     */
    body:not(.login) {
        font-size: 14px;
        line-height: 1.4;
    }

    /*
     * Títulos mais proporcionais ao desktop.
     */
    body:not(.login) main h1 {
        font-size: 26px;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: 14px;
    }

    body:not(.login) main h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    body:not(.login) main h3 {
        font-size: 16px;
        line-height: 1.3;
    }

    /*
     * Cards e painéis:
     * reduz espaços excessivos sem retirar separação visual.
     */
    body:not(.login) main .card {
        padding: 18px;
    }

    /*
     * Campos de formulário.
     */
    body:not(.login) main input:not([type="checkbox"]):not([type="radio"]),
    body:not(.login) main select,
    body:not(.login) main textarea {
        font-size: 14px;
    }

    body:not(.login) main input:not([type="checkbox"]):not([type="radio"]),
    body:not(.login) main select {
        min-height: 38px;
    }

    body:not(.login) main textarea {
        line-height: 1.4;
    }

    body:not(.login) main label {
        font-size: 13px;
    }

    /*
     * Botões globais:
     * compactos, porém legíveis.
     * Palavras permanecem inteiras.
     */
    body:not(.login) main button:not(.password-toggle):not(.professionals-crefito-card),
    body:not(.login) main .button,
    body:not(.login) main a.button {
        width: auto;
        min-width: max-content;
        max-width: 100%;
        min-height: 36px;
        height: auto;
        padding: 8px 13px;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }

    /*
     * Tabelas administrativas e clínicas.
     */
    body:not(.login) main table {
        font-size: 13px;
    }

    body:not(.login) main table th,
    body:not(.login) main table td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /*
     * Ações administrativas:
     * sempre lado a lado quando houver espaço.
     */
    .administrator-actions {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .administrator-actions > button,
    .administrator-actions > form,
    .administrator-actions > form > button {
        width: auto;
        min-width: max-content;
        max-width: none;
        margin: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /*
     * Profissionais — cards regionais mais compactos.
     */
    .professionals-crefito-grid {
        gap: 12px;
        margin-top: 14px;
    }

    .professionals-crefito-card {
        min-height: 125px;
        padding: 15px;
        gap: 9px;
    }

    .professionals-crefito-card-icon {
        font-size: 21px;
    }

    .professionals-crefito-card-content strong {
        font-size: 15px;
    }

    .professionals-crefito-card-content span {
        font-size: 13px;
    }

    /*
     * Busca dos usuários.
     */
    .professionals-search-input {
        min-height: 38px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /*
     * Agenda possui controles próprios.
     * Mantém dimensões adequadas para navegação.
     */
    .agenda-page .agenda-navigation button,
    .agenda-page .agenda-views button,
    .agenda-page .agenda-notification-button {
        min-height: 40px;
    }
}

/* ==========================================================
   FIM — ESCALA VISUAL COMPACTA DESKTOP 100%
   ========================================================== */

/* ==========================================================
   PACIENTES — CADASTRO COMPACTO EM DESKTOP
   ========================================================== */

.patient-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 0;
}

.patient-create-grid > h3 {
    grid-column: 1 / -1;
    margin-top: 16px;
    margin-bottom: 2px;
}

.patient-create-grid > h3:first-child {
    margin-top: 4px;
}

.patient-create-grid > label {
    min-width: 0;
}

/* Campos que se beneficiam da largura completa. */
.patient-create-grid > label:has(input[name="name"]),
.patient-create-grid > label:has(input[name="address"]),
.patient-create-grid > label:has(input[name="legal_guardian_name"]),
.patient-create-grid > label:has(textarea[name="notes"]) {
    grid-column: 1 / -1;
}

.patient-create-grid textarea[name="notes"] {
    min-height: 80px;
}

.patient-create-submit {
    margin-top: 14px;
}

/* Tablet/mobile continuam em uma coluna. */
@media (max-width: 800px) {
    .patient-create-grid {
        grid-template-columns: 1fr;
    }

    .patient-create-grid > h3,
    .patient-create-grid > label:has(input[name="name"]),
    .patient-create-grid > label:has(input[name="address"]),
    .patient-create-grid > label:has(input[name="legal_guardian_name"]),
    .patient-create-grid > label:has(textarea[name="notes"]) {
        grid-column: 1;
    }

    .patient-create-submit {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================
   FIM — PACIENTES / CADASTRO COMPACTO
   ========================================================== */

/* ==========================================================
   PORTAL DO PACIENTE — LOGIN COMPACTO E BOTÕES UNIFORMES
   ========================================================== */

@media (min-width: 641px) {
    .auth-wrap .patient-portal-login-card {
        max-width: 500px;
        padding: 22px;
    }
}

.auth-wrap .patient-portal-login-button,
.auth-wrap .patient-portal-forgot-button {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    height: 46px;
    margin: 0;
    padding: 0 18px;

    box-sizing: border-box;

    align-items: center;
    justify-content: center;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    border-radius: 8px;
}

.auth-wrap .patient-portal-forgot-container {
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
}

@media (max-width: 640px) {
    .auth-wrap .patient-portal-login-card {
        max-width: 100%;
        padding: 20px 18px;
    }

    .auth-wrap .patient-portal-login-button,
    .auth-wrap .patient-portal-forgot-button {
        width: 100%;
        min-height: 46px;
        height: 46px;
    }
}


/* ==========================================================
   PORTAL DO PACIENTE — FORÇAR LARGURA DO BOTÃO PRINCIPAL
   A especificidade supera a regra global de desktop.
   ========================================================== */

body:not(.login) main.auth-wrap
.patient-portal-login-card
form > button.patient-portal-login-button {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    height: 46px;
    margin: 0;
    padding: 0 18px;

    box-sizing: border-box;

    align-items: center;
    justify-content: center;

    white-space: normal;
    text-align: center;
}


/* ==========================================================
   Portal do Paciente — ferramentas à direita do prontuário
   ========================================================== */

.patient-portal-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 32px;
    align-items: start;
}

.patient-portal-card-info,
.patient-portal-card-tools {
    min-width: 0;
}

.patient-portal-card-info h2 {
    margin-top: 0;
}

.patient-portal-card-tools {
    justify-self: end;
    width: 100%;
    max-width: 360px;
}

.patient-portal-card-description {
    margin-top: 0;
    line-height: 1.5;
}

.patient-portal-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 760px) {
    .patient-portal-card-top {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .patient-portal-card-tools {
        justify-self: stretch;
        max-width: none;
    }

    .patient-portal-card-actions {
        width: 100%;
    }
}

/* ==========================================================
   PRIVACIDADE / LGPD — TABELA DE DOCUMENTOS
   Evita quebra de palavras e mantém rolagem horizontal
   apenas quando a largura disponível não comportar a tabela.
   ========================================================== */

.privacy-documents-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.privacy-documents-table {
    width: 100%;
    min-width: 900px;
}

.privacy-documents-table th,
.privacy-documents-table td {
    vertical-align: middle;
}

.privacy-documents-table th:nth-child(1),
.privacy-documents-table td:nth-child(1),
.privacy-documents-table th:nth-child(2),
.privacy-documents-table td:nth-child(2),
.privacy-documents-table th:nth-child(4),
.privacy-documents-table td:nth-child(4),
.privacy-documents-table th:nth-child(5),
.privacy-documents-table td:nth-child(5),
.privacy-documents-table th:nth-child(6),
.privacy-documents-table td:nth-child(6),
.privacy-documents-table th:nth-child(7),
.privacy-documents-table td:nth-child(7) {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.privacy-documents-table th:nth-child(3),
.privacy-documents-table td:nth-child(3) {
    min-width: 300px;
}

.privacy-documents-table td:nth-child(7) form {
    margin: 0;
}

@media (max-width: 767px) {
    .privacy-documents-table {
        min-width: 900px;
    }
}

/* ==========================================================
   FIM — PRIVACIDADE / LGPD — TABELA DE DOCUMENTOS
   ========================================================== */

/* ---------------------------------------------------------
   Rodapé institucional das páginas de login
   --------------------------------------------------------- */
.login-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #777;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid #e5e5e5;
    z-index: 100;
}

@media (max-width: 800px) {
    .login-footer {
        position: static;
        font-size: 11px;
        padding: 14px 16px;
    }
}


/* ---------------------------------------------------------
   Botões do formulário de Primeiro Acesso
   --------------------------------------------------------- */
.register-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-width: 180px;
}

.register-btn-primary {
    background: #007a73;
    color: #ffffff;
}

.register-btn-primary:hover {
    background: #005f5a;
}

.register-btn-secondary {
    background: transparent;
    color: #007a73;
    border: 1px solid #007a73;
}

.register-btn-secondary:hover {
    background: #f0f9f8;
}

@media (max-width: 500px) {
    .register-actions {
        flex-direction: column-reverse;
    }
    .register-btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   MENU HAMBÚRGUER — TABLET E CELULAR
   --------------------------------------------------------- */

/* Botão hambúrguer (escondido no desktop) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: 12px;
  flex-direction: column;
  gap: 5px;
  z-index: 1100;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #064f50;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Overlay (fundo escurecido) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
  display: block;
  opacity: 1;
}

/* Sidebar deslizante no mobile */
@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85%;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding-top: 70px;
  }

  aside.open {
    transform: translateX(0);
  }

  main {
    margin-left: 0;
    padding: 16px;
  }

  header {
    margin: -16px -16px 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  header h1 {
    font-size: 20px;
  }

  header small {
    font-size: 12px;
  }

  .userbox {
    margin-left: auto;
  }

  .userbox span {
    display: none;
  }

  /* Quando o menu está aberto, trava o scroll */
  body.sidebar-open {
    overflow: hidden;
  }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
  aside {
    width: 85%;
  }

  header h1 {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------
   MENU MOBILE — LISTA VERTICAL ORGANIZADA
   --------------------------------------------------------- */

/* No mobile, o menu é uma lista vertical limpa */
@media (max-width: 1024px) {

  /* Sidebar deslizante */
  aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85%;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 70px 12px 24px;
    -webkit-overflow-scrolling: touch;
  }

  aside.open {
    transform: translateX(0);
  }

  /* Cada link é um bloco em linha inteira */
  aside nav a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin: 2px 0;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  /* Rótulos das seções */
  .nav-label {
    display: block;
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #8fc5c2;
    margin: 22px 16px 8px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Brand (logo) */
  .brand-side {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 8px 24px;
  }

  .brand-side img {
    width: 52px;
    height: 44px;
  }

  .brand-side b {
    font-size: 16px;
  }

  .brand-side small {
    font-size: 12px;
  }
}

/* Botão de fechar no topo do menu */
.sidebar-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  transition: background 0.2s ease;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 1024px) {
  .sidebar-close {
    display: flex;
  }
}

/* Header mais compacto no mobile */
@media (max-width: 1024px) {
  main {
    margin-left: 0 !important;
    padding: 16px;
  }

  header {
    margin: -16px -16px 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  header h1 {
    font-size: 18px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header small {
    display: none;
  }

  .userbox span {
    display: none;
  }

  .userbox {
    margin-left: auto;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}

/* Ajuste em telas muito pequenas */
@media (max-width: 480px) {
  aside {
    width: 88%;
    padding: 64px 10px 20px;
  }

  aside nav a {
    padding: 13px 14px;
    font-size: 14px;
  }
}

/* Botão de fechar no topo do menu */
.sidebar-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

@media (max-width: 1024px) {
  .sidebar-close {
    display: flex;
  }
}

/* CREFITO20_LOGIN_RESPONSIVO_INICIO */

/* Regras exclusivas da tela de login profissional */
@media screen and (max-width: 1024px) {
  body.login {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: #f7faf9;
  }

  body.login .hero {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 26px 20px 24px;
    text-align: center;
    background: linear-gradient(145deg, #004f50, #008c84);
    color: #fff;
  }

  body.login .hero-logo {
    display: block;
    width: min(240px, 75%);
    max-height: 100px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 12px;
  }

  body.login .hero h1 {
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1.2;
    margin: 8px 0;
    color: #fff;
  }

  body.login .hero p {
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0 0;
    color: #e5f5f3;
  }

  body.login .login-card {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    justify-self: auto;
    width: min(520px, calc(100% - 32px));
    max-width: 100%;
    margin: 20px auto;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 43, 43, 0.10);
  }

  body.login .login-card input {
    max-width: 100%;
    font-size: 16px;
  }

  body.login .login-footer {
    position: static !important;
    width: 100%;
    max-width: 100%;
    margin-top: auto;
    padding: 14px 18px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  body.login .hero {
    padding: 20px 16px;
  }

  body.login .hero-logo {
    width: min(190px, 72%);
    max-height: 76px;
    margin-bottom: 8px;
  }

  body.login .hero h1 {
    font-size: 22px;
  }

  body.login .hero p {
    font-size: 12px;
  }

  body.login .login-card {
    width: calc(100% - 24px);
    margin: 14px auto;
    padding: 20px 16px;
  }

  body.login .login-card h2 {
    font-size: 23px;
  }
}

/* CREFITO20_LOGIN_RESPONSIVO_FIM */

/* CREFITO20_MENU_MOBILE_INICIO */
@media screen and (max-width: 1024px) {

  body:not(.login) aside {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: min(340px, 88vw) !important;
    max-width: 100vw;
    padding: 66px 14px 18px !important;
    overflow: hidden !important;
    box-sizing: border-box;
    z-index: 1050;
  }

  body:not(.login) aside .brand-side {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    width: 100%;
    margin: 0 0 16px !important;
    gap: 10px;
  }

  body:not(.login) aside .brand-side img {
    flex-shrink: 0;
  }

  body:not(.login) aside .brand-side b,
  body:not(.login) aside .brand-side small {
    overflow-wrap: anywhere;
  }

  body:not(.login) aside nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px 18px 0;
    gap: 2px;
  }

  body:not(.login) aside nav > a {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 12px !important;
    font-size: 15px !important;
    line-height: 1.45;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  body:not(.login) aside nav > .nav-label {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100%;
    margin: 18px 0 6px !important;
    padding: 0 12px;
    text-align: left;
  }

  body:not(.login) aside .sidebar-close {
    display: flex !important;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1100;
  }
}
/* CREFITO20_MENU_MOBILE_FIM */

/* CREFITO20_BOTAO_VOLTAR_INICIO */
body.auth-page .auth-card form > button,
body.auth-page .auth-card > a.forgot-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: #00766f;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

body.auth-page .auth-card > a.forgot-back-btn {
    margin-top: 10px;
}

body.auth-page .auth-card > a.forgot-back-btn:hover,
body.auth-page .auth-card form > button:hover {
    background: #005e59;
}

body.auth-page .auth-card > a.forgot-back-btn:focus-visible,
body.auth-page .auth-card form > button:focus-visible {
    outline: 3px solid #63c8be;
    outline-offset: 2px;
}
/* CREFITO20_BOTAO_VOLTAR_FIM */


/* CREFITO20-RECORDS-RESPONSIVE-FINAL */

/* Listagem de prontuários: layout adaptativo */

.records-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.records-list-table {
    width: 100%;
    max-width: 100%;
}

/* TABLETS */

@media (min-width: 768px) and (max-width: 1024px) {

    .records-table-wrap {
        overflow-x: auto;
    }

    .records-list-table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .records-list-table th,
    .records-list-table td {
        padding: 10px 8px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .records-list-table .button {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* CELULARES */

@media (max-width: 767px) {

    .records-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .records-list-table,
    .records-list-table tbody,
    .records-list-table tr,
    .records-list-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .records-list-table {
        table-layout: auto;
        border: 0;
    }

    .records-list-table tr:has(th) {
        display: none;
    }

    .records-list-table tr:has(td) {
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid #dce7e6;
        border-radius: 12px;
        background: #fff;
    }

    .records-list-table td,
    .records-list-table td:nth-child(1),
    .records-list-table td:nth-child(2),
    .records-list-table td:nth-child(3),
    .records-list-table td:nth-child(4) {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border: 0;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .records-list-table td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-weight: 600;
        color: #607574;
    }

    .records-list-table td:first-child {
        font-size: 16px;
        font-weight: 700;
    }

    .records-list-table .records-last-date {
        font-size: 14px;
        white-space: normal;
    }

    .records-list-table td.records-action {
        display: block;
        padding-top: 14px;
    }

    .records-list-table td.records-action::before {
        display: none;
    }

    .records-list-table .records-action .button {
        display: block;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 12px;
        text-align: center;
        white-space: normal;
    }
}

/* CELULARES PEQUENOS */

@media (max-width: 480px) {

    .records-list-table tr:has(td) {
        padding: 12px;
    }

    .records-list-table td::before {
        flex-basis: 40%;
        font-size: 13px;
    }

    .records-list-table .records-last-date {
        font-size: 13px;
    }
}

/* FIM CREFITO20-RECORDS-RESPONSIVE-FINAL */


/* CREFITO20-AGENDA-MOBILE-7COL-V1 */

/* Calendário mensal: sete dias visíveis */

@media (max-width: 1024px) {

    .agenda-page,
    .agenda-page #agendaCalendar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .agenda-page #agendaCalendar {
        overflow-x: hidden;
    }

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        display: grid;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .agenda-page .calendar-day {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .agenda-page .calendar-event {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .agenda-page .calendar-event strong,
    .agenda-page .calendar-event span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        min-width: 0;
    }

    .agenda-page .calendar-weekdays > * {
        min-width: 0;
        padding: 8px 0;
        font-size: 11px;
        text-align: center;
    }

    .agenda-page .calendar-day {
        min-width: 0;
        min-height: 75px;
        padding: 4px 2px;
    }

    .agenda-page .calendar-number {
        font-size: 13px;
    }

    .agenda-page .calendar-event {
        width: 100%;
        max-width: 100%;
        padding: 3px 2px;
        border-radius: 4px;
        font-size: 10px;
    }

    .agenda-page .calendar-event strong,
    .agenda-page .calendar-event span {
        font-size: 10px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {

    .agenda-page .calendar-weekdays,
    .agenda-page .calendar-grid {
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .agenda-page .calendar-day {
        min-height: 65px;
        padding: 3px 1px;
    }

    .agenda-page .calendar-number {
        font-size: 12px;
    }

    .agenda-page .calendar-event {
        padding: 2px 1px;
        font-size: 9px;
    }

    .agenda-page .calendar-event strong,
    .agenda-page .calendar-event span {
        font-size: 9px;
    }
}

/* FIM CREFITO20-AGENDA-MOBILE-7COL-V1 */


/* CREFITO20-DASHBOARD-AGENDA-CARDS-V1 */

@media (max-width: 767px) {

    .dashboard-agenda,
    .dashboard-agenda-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-agenda-scroll {
        overflow: visible;
    }

    .dashboard-agenda table,
    .dashboard-agenda tbody {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border: 0;
    }

    .dashboard-agenda table tr:has(th) {
        display: none;
    }

    .dashboard-agenda table tr:has(td) {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #dce7e6;
        border-radius: 12px;
        background: #fff;
    }

    .dashboard-agenda table td,
    .dashboard-agenda table td:nth-child(1),
    .dashboard-agenda table td:nth-child(2),
    .dashboard-agenda table td:nth-child(3),
    .dashboard-agenda table td:nth-child(4) {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .dashboard-agenda table td::before {
        content: attr(data-label);
        flex: 0 0 35%;
        text-align: left;
        font-weight: 600;
        color: #607574;
    }

    .dashboard-agenda table td .pill {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* FIM CREFITO20-DASHBOARD-AGENDA-CARDS-V1 */

/* CREFITO20-DASHBOARD-AGENDA-LABELS-V2 */

@media (max-width: 767px) {

    .dashboard-agenda table tr:has(td) {
        padding: 10px 14px;
        margin-bottom: 10px;
    }

    .dashboard-agenda table td {
        position: relative;
        min-height: 36px;
        padding: 7px 0;
        gap: 10px;
        align-items: center;
    }

    .dashboard-agenda table td[data-label]::before {
        content: attr(data-label) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 32%;
        min-width: 0;
        color: #607574;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        white-space: normal;
    }

    .dashboard-agenda table td > b,
    .dashboard-agenda table td > .pill {
        max-width: 68%;
        overflow-wrap: anywhere;
    }
}

/* FIM CREFITO20-DASHBOARD-AGENDA-LABELS-V2 */