:root{--primary:#10b7b1;--primary-dark:#0a8f8b;--secondary:#123b5d;--body:#f4f7fb;--text:#1f2937;--muted:#6b7280;--white:#fff;--sidebar:#0f2f4a}*{box-sizing:border-box}body{margin:0;background:var(--body);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);border-color:var(--primary-dark)}.auth-body{min-height:100vh;background:radial-gradient(circle at top left,rgba(16,183,177,.25),transparent 35%),linear-gradient(135deg,#eefafa,#f6f8fb)}.auth-wrapper{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:100%;max-width:430px;background:var(--white);padding:34px;border-radius:24px}.brand-circle,.brand-mark{display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:800}.brand-circle{width:76px;height:76px;border-radius:22px;font-size:34px}.layout{display:flex;min-height:100vh}.sidebar{width:270px;background:var(--sidebar);color:#fff;padding:22px 16px;position:fixed;top:0;bottom:0;left:0;overflow:auto}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px}.brand-mark{width:44px;height:44px;border-radius:14px;font-size:20px}.sidebar-brand span{display:block;font-size:13px;color:rgba(255,255,255,.7)}.sidebar-menu{display:flex;flex-direction:column;gap:4px}.sidebar-menu a{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.78);padding:11px 12px;border-radius:14px;transition:.18s ease}.sidebar-menu a:hover{background:rgba(255,255,255,.1);color:white}.sidebar-menu i{font-size:18px}.main{margin-left:270px;width:calc(100% - 270px)}.topbar{height:72px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.content{padding:28px}.stat-card{background:#fff;border-radius:22px;padding:22px;min-height:126px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 25px rgba(15,47,74,.06)}.stat-card span{display:block;color:var(--muted);font-size:14px;margin-bottom:8px}.stat-card strong{display:block;font-size:25px}.stat-card i{font-size:34px;color:var(--primary)}.card{border-radius:22px}.card-header{border-top-left-radius:22px!important;border-top-right-radius:22px!important}.table th{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase}.odontogram-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.tooth{border:1px solid #dbe3ea;background:#fff;border-radius:14px;padding:14px 0;font-weight:700}.tooth:hover{border-color:var(--primary);color:var(--primary)}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.permission-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:14px;height:100%}

.patient-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
}

.patient-tabs {
    gap: 6px;
    flex-wrap: wrap;
}

.patient-tabs .nav-link {
    border-radius: 999px;
    color: var(--secondary);
}

.patient-tabs .nav-link.active {
    background: var(--primary);
}

.mini-stat {
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
}

.mini-stat span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.mini-stat strong {
    font-size: 28px;
}

.clinical-alert {
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 14px;
}

.clinical-alert-danger {
    background: #fff7ed;
    border-color: #fed7aa;
}

.clinical-form {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 18px;
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline-item {
    padding: 14px;
    border-left: 4px solid var(--primary);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 47, 74, .05);
}

.timeline-date {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.consent-preview {
    min-height: 220px;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    line-height: 1.55;
}

.acceptance-box {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 16px;
    padding: 14px 14px 14px 40px;
}

.signature-wrapper {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    touch-action: none;
}

.signature-wrapper canvas {
    width: 100%;
    height: 220px;
    display: block;
    cursor: crosshair;
}

.odontogram-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.odontogram-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 13px;
}

.odontogram-legend i,
.legend-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 999px;
}

.legend-dot {
    margin-right: 8px;
    vertical-align: middle;
}

.odontogram-board {
    display: grid;
    gap: 18px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
}

.odontogram-section-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--secondary);
    margin-bottom: 8px;
}

.teeth-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tooth-btn {
    width: 54px;
    min-height: 72px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: .15s ease;
}

.tooth-btn:hover,
.tooth-btn.active {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(16, 183, 177, .18);
}

.tooth-icon {
    width: 30px;
    height: 40px;
    display: block;
    position: relative;
    border: 2px solid #475569;
    border-radius: 44% 44% 38% 38% / 34% 34% 46% 46%;
    background: linear-gradient(180deg, #ffffff 0%, var(--tooth-color) 82%);
    box-shadow: inset 0 -6px 0 rgba(255,255,255,.35);
}

.tooth-icon:before,
.tooth-icon:after {
    content: '';
    position: absolute;
    bottom: -9px;
    width: 9px;
    height: 16px;
    background: linear-gradient(180deg, var(--tooth-color) 0%, #ffffff 100%);
    border: 2px solid #475569;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.tooth-icon:before {
    left: 4px;
    transform: rotate(7deg);
}

.tooth-icon:after {
    right: 4px;
    transform: rotate(-7deg);
}

.tooth-btn small {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary);
}

.odontogram-form {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 14px;
}

.print-body {
    background: #f3f4f6;
}

.print-page {
    width: 210mm;
    min-height: 297mm;
    margin: 20px auto;
    background: #fff;
    padding: 22mm;
    box-shadow: 0 10px 35px rgba(0,0,0,.12);
    color: #111827;
}

.print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.print-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.print-date {
    font-weight: 700;
    white-space: nowrap;
}

.consent-print-content {
    text-align: justify;
    line-height: 1.65;
}

.acceptance-print {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.signature-print {
    display: flex;
    justify-content: center;
    text-align: center;
}

.signature-image {
    max-width: 330px;
    max-height: 130px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px;
}

.signature-line {
    width: 360px;
    border-bottom: 1px solid #111827;
    margin: 10px auto 8px;
}

@media print {
    body {
        background: #fff !important;
    }

    .no-print {
        display: none !important;
    }

    .print-page {
        margin: 0;
        width: auto;
        min-height: auto;
        box-shadow: none;
        padding: 0;
    }
}

/* Agenda tipo Outlook */
.agenda-page .card {
    overflow: hidden;
}

.agenda-toolbar {
    border-radius: 22px;
}

.agenda-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    border-radius: 999px;
}

.agenda-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

#agendaCalendar {
    min-height: 720px;
}

#agendaCalendar .fc-toolbar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary);
}

#agendaCalendar .fc-button-primary {
    background: var(--secondary);
    border-color: var(--secondary);
    border-radius: 12px;
    text-transform: capitalize;
}

#agendaCalendar .fc-button-primary:not(:disabled).fc-button-active,
#agendaCalendar .fc-button-primary:not(:disabled):active {
    background: var(--primary);
    border-color: var(--primary);
}

#agendaCalendar .fc-event {
    cursor: pointer;
    border-radius: 10px;
    border: none;
    padding: 2px 4px;
    box-shadow: 0 6px 16px rgba(15, 47, 74, .10);
}

#agendaCalendar .fc-event-title,
#agendaCalendar .fc-event-time {
    font-weight: 600;
}

#agendaCalendar .fc-timegrid-slot {
    height: 42px;
}

.detail-box,
.notes-box {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
}

.detail-box h6 {
    color: var(--secondary);
    font-weight: 800;
    margin-bottom: 14px;
}

.detail-box p {
    margin-bottom: 8px;
}

.notes-box {
    min-height: 90px;
}

/* Paciente v6 */
.section-title {
    color: var(--secondary);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.patient-photo-editor {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    padding: 20px;
}

.patient-photo-preview,
.patient-photo-placeholder {
    width: 170px;
    height: 170px;
    border-radius: 28px;
    margin: 0 auto;
    object-fit: cover;
    background: white;
    border: 1px solid #e5e7eb;
}

.patient-photo-placeholder {
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 70px;
}

.patient-avatar-img {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    object-fit: cover;
    border: 3px solid #e9fbfa;
}

.patient-mini-photo,
.patient-mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex: 0 0 auto;
}

.patient-mini-photo {
    object-fit: cover;
}

.patient-mini-avatar {
    display: grid;
    place-items: center;
    background: #e9fbfa;
    color: var(--secondary);
    font-weight: 800;
}

.patient-info-list p {
    margin-bottom: 7px;
    color: #4b5563;
}

.patient-info-list i {
    color: var(--primary);
    width: 22px;
}

.clinical-alert-warning {
    border-color: #fbbf24;
    background: #fffbeb;
}

.info-panel {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    background: #f8fafc;
    min-height: 150px;
}

.info-panel h6 {
    color: var(--secondary);
    font-weight: 800;
    margin-bottom: 10px;
}

.info-panel p {
    margin-bottom: 6px;
}

.document-upload-form {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 18px;
    padding: 18px;
}

.print-actions {
    max-width: 960px;
    margin: 20px auto 0;
    text-align: right;
}

.print-sheet {
    max-width: 960px;
    background: white;
    margin: 20px auto;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.print-patient-photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
}

.print-box {
    border: 1px solid #e5e7eb;
    min-height: 90px;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

@media print {
    .no-print,
    .print-actions {
        display: none !important;
    }

    .print-sheet {
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }
}


/* V8 - Odontograma visual tipo tarjetas */
.odontogram-card-board {
    display: grid;
    gap: 18px;
}

.odontogram-card-section {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 16px;
}

.tooth-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}

.tooth-card,
.tooth-card.tooth-btn {
    width: 100%;
    min-height: 106px;
    border: 1px solid color-mix(in srgb, var(--status-color) 24%, #dbeafe);
    background: color-mix(in srgb, var(--status-color) 16%, #ffffff);
    border-radius: 18px;
    padding: 12px 10px;
    display: grid;
    place-items: center;
    gap: 2px;
    transition: .16s ease;
}

.tooth-card:hover,
.tooth-card.active {
    border-color: var(--status-color);
    background: color-mix(in srgb, var(--status-color) 23%, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 47, 74, .12);
}

.tooth-card .tooth-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .16));
}

.tooth-card strong {
    display: block;
    color: #000;
    font-size: 14px;
    line-height: 1;
}

.tooth-card span {
    display: block;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.15;
}

@supports not (background: color-mix(in srgb, #22c55e 16%, #fff)) {
    .tooth-card,
    .tooth-card.tooth-btn {
        background: #eafaf2;
        border-color: #d1f4df;
    }

    .tooth-card:hover,
    .tooth-card.active {
        background: #dcfce7;
    }
}

@media (max-width: 576px) {
    .tooth-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Smalto v9 - diseño responsivo y menú móvil
   ========================================================= */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.sidebar-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

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

.layout,
.main,
.content,
.card,
.card-body,
.tab-content,
.tab-pane,
.row > * {
    min-width: 0;
}

.sidebar {
    z-index: 1040;
    transition: transform .24s ease, box-shadow .24s ease;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sidebar-head .sidebar-brand {
    min-width: 0;
    padding-bottom: 12px;
}

.sidebar-close,
.sidebar-toggle {
    border: 0;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sidebar-close {
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: 12px;
    font-size: 20px;
}

.sidebar-close:hover,
.sidebar-close:focus-visible {
    background: rgba(255,255,255,.12);
}

.sidebar-toggle {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--secondary);
    background: #eef5f8;
    font-size: 27px;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    background: #dff7f5;
    color: var(--primary-dark);
}

.sidebar-menu a.active {
    background: rgba(16,183,177,.22);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    border: 0;
    padding: 0;
    background: rgba(3, 15, 28, .58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.topbar-start {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-title {
    min-width: 0;
}

.topbar-title h5 {
    max-width: min(52vw, 720px);
}

.user-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 260px;
}

.user-menu-button .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content {
    max-width: 100%;
}

.content .card-header.d-flex,
.content .card-footer.d-flex,
.content .d-flex.justify-content-between,
.content .list-group-item.d-flex {
    gap: .75rem;
    flex-wrap: wrap;
}

.card-header,
.card-body,
.card-footer {
    overflow-wrap: anywhere;
}

.card-header .btn,
.card-footer .btn,
.list-group-item .btn {
    flex-shrink: 0;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table td,
.table th {
    vertical-align: middle;
}

.table td.text-end {
    white-space: nowrap;
}

.form-control,
.form-select,
.btn {
    min-height: 42px;
}

.btn-sm {
    min-height: 34px;
}

textarea.form-control {
    min-height: 96px;
}

.dropdown-menu {
    max-width: calc(100vw - 24px);
}

.patient-info-list p,
.detail-box p,
.notes-box,
.clinical-alert,
.info-panel,
.list-group-item,
.consent-preview {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chart-container,
canvas[id^="chart"] {
    min-height: 280px;
}

.modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

.modal-body {
    overflow-x: hidden;
}

/* FullCalendar: evita desbordes y mejora controles táctiles */
#agendaCalendar,
#agendaCalendar .fc,
#agendaCalendar .fc-view-harness,
#agendaCalendar .fc-view-harness-active {
    max-width: 100%;
}

#agendaCalendar .fc-toolbar {
    gap: 10px;
}

#agendaCalendar .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

#agendaCalendar .fc-button {
    min-height: 38px;
    touch-action: manipulation;
}

#agendaCalendar .fc-event-title,
#agendaCalendar .fc-list-event-title {
    overflow-wrap: anywhere;
}

/* Impresiones visibles en pantalla chica */
@media screen and (max-width: 767.98px) {
    .print-page,
    .print-sheet {
        width: calc(100% - 16px);
        min-height: auto;
        margin: 8px auto;
        padding: 18px;
    }

    .print-actions {
        width: calc(100% - 16px);
        margin: 8px auto;
        padding: 0;
    }

    .print-header {
        flex-wrap: wrap;
    }

    .signature-line {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .layout {
        display: block;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 310px);
        max-width: 310px;
        padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
        transform: translateX(-105%);
        box-shadow: none;
    }

    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 18px 0 48px rgba(0,0,0,.28);
    }

    .sidebar-close,
    .sidebar-toggle {
        display: inline-flex;
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .topbar {
        height: auto;
        min-height: 66px;
        padding: 10px 14px;
        gap: 10px;
    }

    .content {
        padding: 18px;
    }

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

    .patient-profile-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .content {
        padding: 14px;
    }

    .content > .row {
        --bs-gutter-x: .85rem;
    }

    .card {
        border-radius: 17px;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .stat-card {
        min-height: 104px;
        padding: 18px;
        border-radius: 17px;
    }

    .stat-card strong {
        font-size: 22px;
        overflow-wrap: anywhere;
    }

    .table-responsive .table {
        min-width: 660px;
    }

    .patient-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        margin-left: -4px;
        margin-right: -4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .patient-tabs .nav-item {
        flex: 0 0 auto;
    }

    .patient-tabs .nav-link {
        white-space: nowrap;
    }

    .patient-photo-preview,
    .patient-photo-placeholder {
        width: 145px;
        height: 145px;
    }

    .odontogram-card-section,
    .odontogram-board,
    .clinical-form,
    .document-upload-form {
        padding: 13px;
        border-radius: 16px;
    }

    .tooth-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .tooth-card,
    .tooth-card.tooth-btn {
        min-height: 94px;
        padding: 9px 5px;
        border-radius: 14px;
    }

    .signature-wrapper canvas {
        height: 180px;
    }

    .agenda-page .card-body {
        padding: 12px;
    }

    .agenda-toolbar .card-body {
        align-items: stretch !important;
    }

    .agenda-legend {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-legend span {
        flex: 0 0 auto;
    }

    #agendaCalendar {
        min-height: 520px;
    }

    #agendaCalendar .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #agendaCalendar .fc-toolbar-chunk {
        justify-content: center;
    }

    #agendaCalendar .fc-toolbar-title {
        font-size: 17px;
        text-align: center;
    }

    #agendaCalendar .fc-button {
        font-size: 13px;
        padding: .4em .62em;
    }

    #agendaCalendar .fc-list-table {
        font-size: 13px;
    }

    .modal-dialog {
        margin: 10px;
    }

    .modal-dialog-scrollable,
    .modal-dialog-centered {
        min-height: calc(100% - 20px);
    }

    .modal-content {
        max-height: calc(100dvh - 20px);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 14px;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        min-height: 62px;
        padding: 8px 10px;
    }

    .topbar-title h5 {
        max-width: 49vw;
        font-size: 1rem;
    }

    .topbar-date,
    .user-menu-button .user-name {
        display: none;
    }

    .user-menu-button {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
    }

    .user-menu-button::after {
        display: none;
    }

    .content {
        padding: 10px;
    }

    .auth-wrapper {
        padding: 12px;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .content .card-header.d-flex > .btn,
    .content .card-footer.d-flex > .btn,
    .content .d-flex.justify-content-between > .btn {
        flex: 1 1 auto;
    }

    .content .card-header.d-flex > div,
    .content .d-flex.justify-content-between > div {
        min-width: 0;
        flex: 1 1 180px;
    }

    .list-group-item .btn {
        max-width: 100%;
    }

    .table-responsive .table {
        min-width: 620px;
        font-size: 13px;
    }

    .form-control,
    .form-select {
        font-size: 16px;
    }

    .patient-avatar-img,
    .patient-avatar {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    .mini-stat {
        padding: 14px;
    }

    .mini-stat strong {
        font-size: 23px;
    }

    .odontogram-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .odontogram-legend span {
        flex: 0 0 auto;
    }

    .print-patient-photo {
        width: 80px;
        height: 80px;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 359.98px) {
    .topbar-title h5 {
        max-width: 43vw;
    }

    .tooth-card-grid {
        grid-template-columns: 1fr;
    }

    .modal-footer {
        grid-template-columns: 1fr;
    }
}