:root {
    --ink: #17272b;
    --muted: #63777c;
    --line: #dbe5e7;
    --panel: #ffffff;
    --teal: #2f716b;
    --teal-dark: #235754;
    --blue: #285f8f;
    --amber: #a86719;
    --red: #a33b3b;
}

html, body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #f5f7f9;
}

a {
    color: var(--teal-dark);
    text-decoration: none;
}

a:hover {
    color: var(--teal);
}

h1, h2, h3, p {
    margin-top: 0;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7f9;
}

.page > main {
    flex: 1;
}

.page > .sidebar {
    background: #163235;
    min-height: 100vh;
}

.page > main > .top-row {
    min-height: 3.75rem;
    background-color: #ffffff;
    border-bottom: 1px solid #dfe7ea;
    justify-content: flex-end;
    gap: 1rem;
    display: flex;
    align-items: center;
    color: #4d6064;
}

.page > main > .top-row strong {
    color: #183236;
    font-weight: 700;
}

.sidebar .top-row {
    min-height: 3.75rem;
    background-color: #163235;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .navbar-brand {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
}

.sidebar .navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.25rem;
    height: 2.4rem;
    color: white;
    position: absolute;
    top: 0.65rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
}

.sidebar .navbar-toggler::before {
    content: "";
    width: 1.15rem;
    height: 0.12rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 -0.42rem 0 currentColor, 0 0.42rem 0 currentColor;
}

.sidebar .nav-scrollable {
    display: none;
    background: #163235;
    padding-bottom: 1rem;
    scrollbar-width: none;
}

.sidebar .nav-scrollable::-webkit-scrollbar {
    display: none;
}

.sidebar .navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

.sidebar .nav-icon {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.6rem;
    margin-right: 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    line-height: 1;
}

.sidebar .nav-icon i {
    display: block;
    line-height: 1;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.2rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-link {
    color: #d9e5e6;
    border-radius: 6px;
    height: 2.65rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.75rem;
}

.sidebar a.nav-link.active {
    background-color: #2f716b;
    color: white;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.content {
    padding-top: 1.1rem;
}

.page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.page-header.compact {
    align-items: center;
}

.page-header h1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1;
    margin-bottom: 0.6rem;
    color: var(--ink);
}

.page-header.compact h1 {
    font-size: 2.25rem;
}

.page-header p {
    max-width: 660px;
    color: var(--muted);
    font-size: 1.02rem;
    margin-bottom: 0;
}

.eyebrow {
    color: var(--teal);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.primary-action,
.secondary-action {
    border: 0;
    border-radius: 6px;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.quick-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quick-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.quick-link-grid a {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.9rem;
    font-weight: 800;
}

.next-step-panel {
    margin-bottom: 1rem;
    border-color: rgba(47, 113, 107, 0.35);
}

.next-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.alert-panel {
    margin-bottom: 1rem;
    border-color: rgba(163, 59, 59, 0.35);
}

.context-strip {
    margin-bottom: 1rem;
}

.template-picker {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
}

.medication-lines {
    display: grid;
    gap: 0.75rem;
}

.medication-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem;
    background: #fbfcfc;
}

.closure-checklist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.closure-checklist article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: #ffffff;
}

.closure-checklist span {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.closure-checklist strong {
    display: block;
    margin-top: 0.25rem;
}

.checklist-ok {
    border-color: rgba(47, 113, 107, 0.35) !important;
}

.checklist-pending {
    border-color: rgba(163, 59, 59, 0.35) !important;
}

.chip-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip-list span {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fbfcfc;
    color: var(--ink);
    padding: 0.45rem 0.7rem;
    font-weight: 700;
}

.pending-list {
    margin-top: 1rem;
}

.pending-board {
    display: grid;
    gap: 0.65rem;
}

.pending-item,
.empty-mini {
    display: grid;
    gap: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.8rem;
}

.pending-item strong,
.pending-item span,
.pending-item small {
    display: block;
}

.pending-item span,
.pending-item small,
.empty-mini {
    color: var(--muted);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #eef4f4;
}

.login-panel {
    width: min(440px, 100%);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.4rem;
    box-shadow: 0 14px 40px rgba(23, 39, 43, 0.12);
}

.demo-request-form {
    position: relative;
}

.loading-button {
    gap: 0.55rem;
}

.primary-action:disabled,
.secondary-action:disabled {
    cursor: wait;
    opacity: 0.72;
}

.demo-loading-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    border: 1px solid #cfe0e2;
    border-radius: 8px;
    background: #f3f8f8;
    color: var(--ink);
    margin-top: 1rem;
    padding: 0.9rem;
}

.demo-loading-panel strong,
.demo-loading-panel span {
    display: block;
}

.demo-loading-panel span {
    color: var(--muted);
    font-size: 0.9rem;
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--teal-dark);
    font-weight: 800;
    padding: 0;
}

.nav-section {
    padding: 0.7rem 1rem 0.25rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.primary-action {
    background: var(--teal);
    color: #ffffff;
}

.primary-action:hover {
    background: var(--teal-dark);
    color: #ffffff;
}

.secondary-action {
    background: #e8f1f1;
    color: var(--teal-dark);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card,
.panel,
.record-summary article {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metric-card {
    padding: 1rem;
}

.metric-card span,
.metric-card small,
.schedule-row span,
.record-row span,
.patient-row span,
.note-card span,
.note-card small,
.record-summary span,
.panel-heading span {
    color: var(--muted);
}

.metric-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1.2;
}

.dashboard-grid,
.workspace-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.4fr);
    gap: 1rem;
    align-items: start;
}

.stacked-workspace {
    display: grid;
    gap: 1rem;
}

.panel {
    padding: 1rem;
}

.wide-panel {
    min-width: 0;
}

.page-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.form-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.42);
}

.form-dialog {
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
    padding: 1rem;
}

.form-dialog.wide-dialog {
    width: min(980px, 100%);
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}

.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
}

.confirm-dialog {
    width: min(440px, 100%);
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.confirm-dialog-header {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.confirm-dialog h2 {
    margin-bottom: 0.35rem;
    font-size: 1.08rem;
}

.confirm-dialog p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.45;
}

.confirm-dialog-icon {
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 1.2rem;
}

.tone-warning .confirm-dialog-icon {
    background: #fff7e8;
    color: var(--amber);
}

.tone-danger .confirm-dialog-icon {
    background: #fde8e8;
    color: var(--red);
}

.tone-success .confirm-dialog-icon {
    background: #e8f5ef;
    color: var(--teal);
}

.tone-neutral .confirm-dialog-icon {
    background: #e8f1f1;
    color: var(--teal-dark);
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.confirm-action {
    border: 0;
    border-radius: 6px;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: var(--teal);
    color: #ffffff;
}

.confirm-action:hover {
    background: var(--teal-dark);
    color: #ffffff;
}

.danger-confirm-action {
    background: var(--red);
}

.danger-confirm-action:hover {
    background: #7f2929;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-heading h2 {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.timeline-list,
.patient-list,
.schedule-table,
.record-list,
.note-list {
    display: grid;
    gap: 0.75rem;
}

.timeline-item,
.schedule-row,
.record-row,
.patient-row {
    display: grid;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
}

.timeline-item {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
}

.schedule-row {
    grid-template-columns: 6rem minmax(10rem, 1fr) minmax(9rem, 0.7fr) auto;
}

.schedule-row.waitlist-row {
    grid-template-columns: auto minmax(12rem, 1fr) minmax(10rem, 0.7fr) auto;
}

.record-row {
    grid-template-columns: auto minmax(10rem, 1fr) minmax(8rem, 0.7fr) auto;
    color: var(--ink);
}

.patient-row {
    grid-template-columns: auto 1fr;
    color: var(--ink);
}

.timeline-item strong,
.timeline-item span,
.schedule-row strong,
.schedule-row span,
.record-row strong,
.record-row span,
.patient-row strong,
.patient-row span {
    display: block;
}

.avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #e4f0ef;
    color: var(--teal-dark);
    font-weight: 900;
}

.status-pill {
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-scheduled {
    background: #e8f1f1;
    color: var(--teal-dark);
}

.status-confirmed {
    background: #e8eef8;
    color: var(--blue);
}

.status-waiting {
    background: #f3ead7;
    color: #7b5a1a;
}

.status-progress {
    background: #fff1dc;
    color: var(--amber);
}

.status-done {
    background: #e7f3e9;
    color: #2c6a38;
}

.status-cancelled {
    background: #f7e4e4;
    color: var(--red);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.compact-form-grid {
    grid-template-columns: minmax(220px, 1.25fr) minmax(140px, 0.6fr) minmax(140px, 0.6fr) minmax(160px, 0.75fr);
}

fieldset.form-grid {
    border: 0;
    margin: 0;
    padding: 0;
}

fieldset.form-grid:disabled {
    opacity: 0.78;
}

.form-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.span-2 {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: end;
    gap: 0.75rem;
}

.country-code-control {
    position: relative;
    z-index: 8;
}

.country-code-button {
    width: 100%;
    min-height: 2.6rem;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 400;
}

.country-code-button small {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 400;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-code-button img,
.country-code-option img {
    width: 1.65rem;
    height: 1.15rem;
    display: block;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.country-code-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 70;
    width: min(18rem, 92vw);
    max-height: 16rem;
    overflow-y: auto;
    display: grid;
    gap: 0.2rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.country-code-option {
    min-height: 2.25rem;
    display: grid;
    grid-template-columns: auto 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.country-code-option span {
    font-weight: 800;
}

.country-code-option small {
    color: var(--muted);
    font-weight: 700;
}

.country-code-option:hover,
.country-code-option.selected {
    background: #edf5f4;
}

.phone-input {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    min-height: 2.6rem;
    position: relative;
}

.phone-validation {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    color: var(--red);
    font-size: 0.78rem;
    font-weight: 700;
}

.phone-input .phone-number[aria-invalid="True"],
.phone-input .phone-number[aria-invalid="true"] {
    border-color: var(--red);
}

.phone-country-picker {
    min-height: 2.6rem;
    position: relative;
    z-index: 9;
}

.phone-country-button {
    width: 100%;
    height: 100%;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 400;
}

.phone-country-button img,
.phone-country-option img {
    width: 1.55rem;
    height: 1.05rem;
    display: block;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.phone-number.form-control {
    border-radius: 0 6px 6px 0;
}

.phone-country-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 80;
    min-width: 8rem;
    max-height: 16rem;
    overflow-y: auto;
    display: grid;
    gap: 0.2rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.phone-country-option {
    min-height: 2.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-weight: 400;
}

.phone-country-option:hover,
.phone-country-option.selected {
    background: #edf5f4;
}

.country-code-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.country-flag {
    width: 1.55rem;
    height: 1.05rem;
    display: inline-block;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.flag-mx {
    background: linear-gradient(90deg, #006847 0 33.33%, #ffffff 33.33% 66.66%, #ce1126 66.66% 100%);
}

.flag-us {
    background:
        linear-gradient(90deg, #3c3b6e 0 42%, transparent 42%),
        repeating-linear-gradient(180deg, #b22234 0 7.7%, #ffffff 7.7% 15.4%);
}

.flag-co {
    background: linear-gradient(180deg, #fcd116 0 50%, #003893 50% 75%, #ce1126 75% 100%);
}

.flag-ar {
    background: linear-gradient(180deg, #74acdf 0 33.33%, #ffffff 33.33% 66.66%, #74acdf 66.66% 100%);
}

.flag-cl {
    background:
        linear-gradient(90deg, #0039a6 0 35%, transparent 35%),
        linear-gradient(180deg, #ffffff 0 50%, #d52b1e 50% 100%);
}

.flag-pe {
    background: linear-gradient(90deg, #d91023 0 33.33%, #ffffff 33.33% 66.66%, #d91023 66.66% 100%);
}

.flag-es {
    background: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.form-control {
    border: 1px solid var(--line);
    border-radius: 6px;
    min-height: 2.6rem;
}

textarea.form-control {
    min-height: 5.5rem;
}

.checkbox-line {
    display: flex !important;
    align-items: center;
    gap: 0.5rem !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
}

.checkbox-grid {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfcfc;
}

.checkbox-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.permission-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    display: grid;
    gap: 0.45rem;
    background: #fbfcfc;
}

.permission-group strong {
    font-size: 0.85rem;
}

.compact-area {
    min-height: 4rem !important;
}

.agenda-toolbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.agenda-toolbar label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.agenda-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.agenda-stats article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fbfcfc;
}

.agenda-stats span,
.agenda-stats strong {
    display: block;
}

.agenda-stats span {
    color: var(--muted);
    font-size: 0.82rem;
}

.agenda-stats strong {
    font-size: 1.35rem;
}

.segmented-control {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.segmented-control button {
    border: 0;
    background: transparent;
    padding: 0.65rem 1rem;
    font-weight: 800;
    color: var(--muted);
}

.segmented-control button.active {
    background: var(--teal);
    color: #ffffff;
}

.screen-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf9;
}

.screen-tabs button {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    padding: 0.65rem 0.9rem;
    font-weight: 700;
}

.screen-tabs button.active {
    background: #ffffff;
    color: var(--teal-dark);
    box-shadow: 0 1px 4px rgba(20, 41, 40, 0.08);
}

.sub-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: -0.35rem 0 1rem;
}

.sub-tabs button {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    padding: 0.5rem 0.85rem;
    font-weight: 700;
}

.sub-tabs button.active {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}

.single-focus {
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
}

.focus-panel,
.settings-focus > .panel {
    max-width: 980px;
}

.settings-focus {
    display: block;
}

.subsection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.subsection-heading h3 {
    font-size: 1rem;
    margin-bottom: 0;
}

.subsection-heading span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.work-calendar {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.85rem;
}

.workday-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0;
    border-top: 1px solid var(--line);
}

.workday-row:first-of-type {
    border-top: 0;
}

.hidden-section {
    display: none !important;
}

.agenda-workspace {
    grid-template-columns: minmax(330px, 0.65fr) minmax(560px, 1.6fr);
}

.agenda-calendar-workspace {
    display: block;
}

.agenda-calendar-panel {
    max-width: none;
    width: 100%;
}

.professional-row {
    grid-template-columns: 5.5rem minmax(12rem, 1fr) minmax(12rem, 0.9fr) auto;
    align-items: start;
}

.professional-row .row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
}

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

.edit-appointment-row label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.35rem;
}

.row-actions button,
.row-actions a {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.row-actions .primary-action {
    border-color: transparent;
    background: var(--teal);
    color: #ffffff;
}

.row-actions .secondary-action {
    border-color: transparent;
    background: #e8f1f1;
    color: var(--teal-dark);
}

.reminder-channel-actions {
    flex-wrap: nowrap;
}

.row-actions .icon-action,
.icon-action {
    width: 2.15rem;
    height: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 1rem;
    line-height: 1;
}

.whatsapp-action {
    color: #128c7e;
    border-color: #b9e5dc;
    background: #f0fbf8;
}

.sms-action {
    color: #315ea8;
    border-color: #c8d6f0;
    background: #f3f6fc;
}

.email-action {
    color: #8a5b12;
    border-color: #ead9b4;
    background: #fff9ed;
}

.week-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.day-column {
    min-width: 0;
    min-height: 22rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.75rem;
}

.day-column header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
}

.day-column header span {
    color: var(--muted);
    font-weight: 800;
}

.mini-appointment {
    display: grid;
    gap: 0.2rem;
    border-left: 3px solid var(--teal);
    background: #ffffff;
    border-radius: 6px;
    padding: 0.6rem;
    margin-bottom: 0.55rem;
    box-shadow: 0 1px 0 rgba(23, 39, 43, 0.05);
}

.mini-appointment strong {
    overflow-wrap: anywhere;
}

.mini-appointment time,
.mini-appointment span {
    color: var(--muted);
    font-size: 0.82rem;
}

.week-timeline {
    display: grid;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.week-timeline-header,
.week-timeline-row {
    display: grid;
    grid-template-columns: 5rem repeat(7, minmax(9.5rem, 1fr));
    gap: 0.35rem;
    min-width: 78rem;
}

.week-timeline-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel);
}

.week-timeline-header strong {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fbfcfc;
    color: var(--ink);
    padding: 0.55rem 0.65rem;
}

.week-timeline-header strong span {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
}

.week-timeline-row > time {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    color: var(--muted);
    display: grid;
    align-content: center;
    gap: 0.1rem;
    padding: 0.5rem;
}

.week-timeline-row > time strong {
    color: var(--teal-dark);
    font-size: 0.95rem;
}

.week-timeline-row > time span {
    font-size: 0.76rem;
    font-weight: 800;
}

.week-timeline-cell {
    min-height: 4.6rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 0.4rem;
}

.week-timeline-cell.available {
    border-style: dashed;
    border-color: #c9dfd2;
    background: #f7fbf8;
}

.week-timeline-cell.has-appointment {
    border-color: rgba(47, 113, 107, 0.28);
    background: #fbfcfc;
}

.week-timeline-cell.blocked {
    background: #f3f6f7;
}

.week-available-slot {
    width: 100%;
    min-height: 3.65rem;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    gap: 0.1rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.week-available-slot i {
    font-size: 1rem;
}

.week-appointment-card {
    border-left: 3px solid var(--teal);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    display: grid;
    gap: 0.18rem;
    padding: 0.45rem;
    box-shadow: 0 1px 0 rgba(23, 39, 43, 0.05);
}

.week-appointment-card + .week-appointment-card {
    margin-top: 0.35rem;
}

.week-appointment-card span,
.week-appointment-card small {
    color: var(--muted);
    font-size: 0.76rem;
}

.week-appointment-card strong {
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.week-appointment-card em {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    justify-self: start;
    padding: 0.18rem 0.45rem;
}

.week-slot-blocked {
    color: var(--muted);
    display: grid;
    align-content: center;
    min-height: 3.65rem;
    gap: 0.1rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.day-timeline {
    display: grid;
    gap: 0.55rem;
}

.timeline-slot {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 0.65rem;
}

.timeline-slot > time {
    border-right: 1px solid var(--line);
    color: var(--muted);
    display: grid;
    align-content: center;
    gap: 0.1rem;
    padding-right: 0.75rem;
}

.timeline-slot > time strong {
    color: var(--teal-dark);
    font-size: 1rem;
}

.timeline-slot > time span {
    font-size: 0.78rem;
    font-weight: 800;
}

.timeline-slot.available {
    background: #f7fbf8;
    border-style: dashed;
    border-color: #c9dfd2;
}

.timeline-slot.has-appointment {
    border-color: rgba(47, 113, 107, 0.28);
    background: #fbfcfc;
}

.timeline-slot.blocked {
    background: #f7f8f8;
}

.timeline-available-slot {
    border: 1px solid #c9dfd2;
    border-radius: 7px;
    background: #ffffff;
    color: var(--teal-dark);
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: flex-start;
    padding: 0.65rem 0.85rem;
    font-weight: 900;
}

.timeline-available-slot small {
    color: var(--muted);
    font-weight: 800;
    margin-left: auto;
}

.timeline-appointments {
    display: grid;
    gap: 0.55rem;
}

.timeline-appointment-card {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 0.9fr) auto;
    gap: 0.75rem;
    align-items: start;
    border-left: 4px solid var(--teal);
    border-radius: 7px;
    background: #ffffff;
    padding: 0.7rem;
    box-shadow: 0 1px 0 rgba(23, 39, 43, 0.05);
}

.timeline-appointment-card strong,
.timeline-appointment-card span,
.timeline-appointment-card a {
    display: block;
}

.timeline-appointment-card span {
    color: var(--muted);
}

.timeline-appointment-card .row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.timeline-slot-blocked {
    border-radius: 7px;
    background: #edf2f3;
    color: var(--muted);
    display: grid;
    align-content: center;
    padding: 0.65rem 0.85rem;
}

.timeline-slot-blocked strong {
    color: var(--ink);
}

.inline-alert {
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.inline-alert.success {
    background: #e7f3e9;
    color: #2c6a38;
    border: 1px solid #c8e3ce;
}

.inline-alert.warning {
    background: #fff1dc;
    color: var(--amber);
    border: 1px solid #ecd1a9;
}

.inline-alert.neutral {
    background: #eef4f7;
    color: var(--ink);
    border: 1px solid #d8e4e9;
}

.inline-alert.danger {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f5c2c2;
}

.form-note {
    align-self: end;
    color: var(--muted);
    font-weight: 800;
    padding: 0.7rem 0;
}

.search-panel {
    margin-bottom: 1rem;
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
}

.global-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem) auto auto;
}

.pager-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--muted);
    font-weight: 800;
}

.compact-filter {
    margin-top: 0.75rem;
}

.reception-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.reception-list {
    display: grid;
    gap: 0.75rem;
}

.reception-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.85rem;
}

.active-consultation-panel {
    border-color: rgba(40, 95, 143, 0.28);
}

.consultation-card {
    border-color: rgba(40, 95, 143, 0.24);
    background: #f7fbfd;
    box-shadow: 0 10px 24px rgba(23, 39, 43, 0.06);
}

.reception-card time {
    color: var(--teal-dark);
    font-weight: 900;
}

.reception-card a,
.reception-card span {
    display: block;
}

.reception-card span {
    color: var(--muted);
}

.reception-card-action {
    grid-column: 1 / -1;
    gap: 0.45rem;
    width: 100%;
}

.reception-card-action i,
.reception-card-action span {
    display: inline-flex;
}

.patient-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.reception-card .patient-line a {
    font-size: 1rem;
    font-weight: 900;
}

.status-pill {
    border: 1px solid rgba(40, 95, 143, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}

.reception-card .status-pill,
.reception-card .status-pill i {
    display: inline-flex;
}

.appointment-detail {
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.reception-card .appointment-detail,
.reception-card .appointment-detail i {
    display: flex;
}

.consultation-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding-top: 0.2rem;
}

.catalog-filter {
    max-width: 13rem;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.catalog-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 1rem;
}

.catalog-card span,
.catalog-card strong {
    display: block;
}

.catalog-card span {
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.catalog-card p {
    color: var(--muted);
    margin: 0.45rem 0 0;
}

.catalog-card button {
    margin-top: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    min-height: 2.25rem;
    font-weight: 800;
}

.inline-check {
    display: flex !important;
    align-items: center;
    gap: 0.55rem !important;
}

.form-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.option-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.75rem;
}

.schedule-editor {
    display: grid;
    gap: 0.65rem;
}

.doctor-shift-add,
.doctor-shift-list article {
    display: grid;
    grid-template-columns: 1fr 1.15fr 0.8fr 0.8fr auto;
    gap: 0.55rem;
    align-items: end;
}

.doctor-shift-list {
    display: grid;
    gap: 0.45rem;
}

.doctor-shift-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 0.55rem;
}

.doctor-shift-list button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    min-height: 2.35rem;
    font-weight: 800;
}

.doctor-shift-add small,
.doctor-shift-list article small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-weight: 800;
}

.file-hint {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    color: var(--muted);
    padding: 0.65rem 0.8rem;
    font-weight: 700;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wide-report {
    grid-column: 1 / -1;
}

.report-bars {
    display: grid;
    gap: 1rem;
}

.report-bars article {
    display: grid;
    gap: 0.45rem;
}

.report-bars article > div:first-child,
.report-table article {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.report-bars span,
.report-table span {
    color: var(--muted);
}

.bar-track {
    height: 0.65rem;
    border-radius: 999px;
    background: #e8f1f1;
    overflow: hidden;
}

.bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.report-table {
    display: grid;
    gap: 0.65rem;
}

.report-table article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.8rem;
}

.billing-workspace {
    grid-template-columns: minmax(330px, 0.65fr) minmax(560px, 1.6fr);
}

.invoice-list {
    display: grid;
    gap: 0.85rem;
}

.invoice-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 1rem;
}

.invoice-head,
.invoice-lines,
.invoice-totals,
.payment-row {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.invoice-head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.invoice-lines {
    grid-template-columns: minmax(0, 1fr) auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 0;
}

.invoice-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-row {
    grid-template-columns: minmax(7rem, 0.6fr) minmax(9rem, 0.8fr) auto;
}

.payment-history {
    display: grid;
    gap: 0.55rem;
}

.payment-history article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 0.7rem;
}

.payment-row button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    min-height: 2.6rem;
    padding: 0 0.75rem;
    font-weight: 800;
}

.invoice-card span,
.cash-grid span {
    color: var(--muted);
}

.cash-panel {
    margin-top: 1rem;
}

.cash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cash-close-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    margin-bottom: 1rem;
    padding: 1rem;
}

.cash-close-panel strong,
.cash-close-panel span {
    display: block;
}

.cash-close-panel span {
    color: var(--muted);
}

.backup-restore-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.7fr);
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    margin-top: 1rem;
    padding: 1rem;
}

.backup-restore-box strong,
.backup-restore-box span {
    display: block;
}

.backup-restore-box span {
    color: var(--muted);
}

.cash-grid article {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.85rem;
}

.cash-grid strong,
.cash-grid span,
.invoice-head strong,
.invoice-head span {
    display: block;
}

.consent-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1fr);
    gap: 1rem;
}

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

.vitals-list {
    display: grid;
    gap: 0.65rem;
}

.vital-row {
    display: grid;
    grid-template-columns: 110px 1fr 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
}

.vital-row span {
    color: var(--muted);
    font-size: 0.9rem;
}

.toolbar-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-list {
    display: grid;
    gap: 0.75rem;
}

.timeline-item {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
}

.timeline-item time,
.timeline-item span,
.consent-card small {
    color: var(--muted);
    font-size: 0.88rem;
}

.logo-preview {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
}

.logo-preview img,
.print-logo {
    max-height: 64px;
    max-width: 180px;
    object-fit: contain;
}

.support-heading {
    margin-top: 1.25rem;
}

.consent-list {
    display: grid;
    gap: 0.75rem;
}

.consent-card {
    display: grid;
    gap: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 1rem;
}

.consent-card span {
    color: var(--muted);
}

.consent-sheet {
    width: min(8.5in, 100%);
    min-height: 10.5in;
    margin: 0 auto;
    padding: 0.55in;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #17272b;
}

.consent-sheet header {
    border-bottom: 2px solid var(--teal);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.consent-sheet header span,
.consent-sheet strong,
.signature-note {
    color: var(--muted);
}

.consent-sheet section {
    margin-bottom: 1rem;
}

.consent-sheet footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.consent-sheet footer div {
    border-top: 1px solid var(--ink);
    padding-top: 0.55rem;
    text-align: center;
}

.consent-sheet footer span,
.consent-sheet footer strong,
.consent-sheet footer small {
    display: block;
}

.audit-list {
    display: grid;
    gap: 0.75rem;
}

.audit-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.85rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.85rem;
}

.audit-row time {
    color: var(--teal-dark);
    font-weight: 900;
}

.audit-row span,
.audit-row p {
    color: var(--muted);
}

.audit-row p {
    margin: 0;
}

.change-diff {
    display: grid;
    gap: 0.35rem;
}

.change-diff span,
.change-diff strong {
    display: block;
    word-break: break-word;
}

.change-diff span {
    color: var(--muted);
}

.compact-audit .audit-row {
    grid-template-columns: 6rem minmax(0, 1fr);
}

.record-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.record-summary article {
    padding: 1rem;
}

.record-summary strong,
.record-summary span {
    display: block;
}

.note-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 1rem;
}

.note-card p {
    margin: 0.7rem 0 0;
    color: #33464a;
}

.record-panel {
    margin-bottom: 1rem;
}

.clinical-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.clinical-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.clinical-note {
    display: grid;
    gap: 0.75rem;
}

.note-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.note-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 8rem;
}

.clinical-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #d9e5e3;
    border-radius: 8px;
    background: #f4f8f7;
    padding: 0.65rem 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.addendum-form {
    border-top: 1px solid var(--line);
    padding-top: 0.85rem;
}

.clinical-note dl {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.55rem 1rem;
    margin: 0;
}

.clinical-note dt {
    color: var(--muted);
    font-weight: 800;
}

.clinical-note dd {
    margin: 0;
    color: #33464a;
}

.prescription-workspace {
    margin-top: 1rem;
}

.prescription-list {
    display: grid;
    gap: 0.75rem;
}

.prescription-card {
    display: grid;
    gap: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 1rem;
}

.prescription-card strong,
.prescription-card span {
    display: block;
}

.prescription-card span {
    color: var(--muted);
}

.prescription-card dl {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.45rem 0.8rem;
    margin: 0;
}

.prescription-card dt {
    color: var(--muted);
    font-weight: 800;
}

.prescription-card dd {
    margin: 0;
}

.print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.prescription-sheet,
.clinical-note-sheet,
.clinical-order-sheet,
.record-print-sheet {
    width: min(8.5in, 100%);
    min-height: 10.5in;
    margin: 0 auto;
    padding: 0.55in;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #17272b;
}

.receipt-sheet {
    width: min(8.5in, 100%);
    min-height: 10.5in;
    margin: 0 auto;
    padding: 0.55in;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #17272b;
}

.receipt-lines,
.receipt-payments {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.receipt-lines div,
.receipt-payments div,
.receipt-totals {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.receipt-lines div,
.receipt-payments div {
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.65rem;
}

.receipt-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
}

.receipt-totals span,
.receipt-lines span,
.receipt-payments span {
    color: var(--muted);
    display: block;
}

.rx-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    border-bottom: 2px solid var(--teal);
    padding-bottom: 1rem;
}

.rx-header > div {
    min-width: 0;
}

.rx-header .print-logo {
    display: block;
    margin-bottom: 0.45rem;
}

.rx-header span,
.rx-patient span,
.rx-body span,
.rx-footer span {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.rx-header h1 {
    margin: 0.15rem 0;
    font-size: 2rem;
}

.rx-header p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.rx-header > div:last-child {
    text-align: right;
}

.rx-header strong,
.rx-header span {
    display: block;
}

.rx-patient {
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.55fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.prescription-patient {
    grid-template-columns: minmax(0, 1.35fr) 0.45fr 0.55fr minmax(0, 0.85fr);
}

.rx-patient strong,
.rx-patient span {
    display: block;
    overflow-wrap: anywhere;
}

.rx-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 0 1.25rem;
}

.rx-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.rx-summary article {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    padding: 0.85rem 1rem;
}

.rx-summary article:only-child {
    grid-column: 1 / -1;
}

.rx-body p {
    margin: 0.35rem 0 0;
    font-size: 0.98rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.rx-prescription {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.rx-symbol {
    font-family: Georgia, serif;
    font-size: 2.5rem;
    color: var(--teal);
    line-height: 1;
    padding-top: 0.35rem;
    text-align: center;
}

.rx-medication-list {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.rx-medication {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.rx-medication-note {
    background: #fbfcfc;
}

.rx-medication h2 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.85rem;
    overflow-wrap: anywhere;
}

.rx-medication dl {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.55rem 1rem;
    margin: 0;
}

.rx-medication dt {
    color: var(--muted);
    font-weight: 800;
}

.rx-medication dd {
    margin: 0;
    border-bottom: 1px solid #eef3f4;
    padding-bottom: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.rx-footer {
    margin-top: 2.5rem;
    display: grid;
    gap: 1rem;
}

.rx-footer div {
    width: 18rem;
    margin-left: auto;
    border-top: 1px solid var(--ink);
    padding-top: 0.45rem;
    text-align: center;
}

.rx-footer p {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0;
}

.clinical-patient {
    grid-template-columns: 1fr 0.45fr 0.45fr 0.65fr;
}

.clinical-print-alert {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 1rem;
    border: 1px solid #f0d7a7;
    border-radius: 8px;
    background: #fff8ea;
    padding: 0.85rem 1rem;
}

.clinical-print-alert span {
    color: var(--muted);
}

.clinical-note-body {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.clinical-note-body dl,
.clinical-order-body dl {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.75rem 1rem;
    margin: 0;
}

.clinical-note-body dt,
.clinical-order-body dt {
    color: var(--muted);
    font-weight: 900;
}

.clinical-note-body dd,
.clinical-order-body dd {
    margin: 0;
    color: #17272b;
    white-space: pre-wrap;
}

.clinical-order-body {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.clinical-order-instructions {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    margin-top: 1rem;
    padding: 1rem;
}

.clinical-order-instructions p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.clinical-note-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.clinical-note-footer > div {
    border-top: 1px solid var(--ink);
    padding-top: 0.55rem;
    text-align: center;
}

.clinical-note-footer span,
.clinical-note-footer strong,
.clinical-note-footer small {
    display: block;
}

.clinical-note-footer aside {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem;
    color: var(--muted);
}

.record-print-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.record-print-summary article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fbfcfc;
}

.record-print-summary span,
.record-print-table span,
.record-print-list span,
.record-print-timeline span,
.record-print-footer span {
    color: var(--muted);
}

.record-print-summary span,
.record-print-summary strong {
    display: block;
}

.record-print-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.record-print-section h2 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.record-print-dl {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.65rem 1rem;
    margin: 0;
}

.record-print-dl dt {
    color: var(--muted);
    font-weight: 900;
}

.record-print-dl dd {
    margin: 0;
    white-space: pre-wrap;
}

.record-print-table {
    display: grid;
    gap: 0.35rem;
}

.record-print-table > div {
    display: grid;
    grid-template-columns: 1fr 0.65fr 0.5fr 0.5fr 0.8fr;
    gap: 0.5rem;
    border-bottom: 1px solid #eef3f4;
    padding-bottom: 0.35rem;
}

.record-print-table-head {
    font-weight: 900;
}

.record-print-list {
    display: grid;
    gap: 0.65rem;
}

.record-print-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
}

.record-print-list strong,
.record-print-list span {
    display: block;
}

.record-print-list p {
    margin: 0.35rem 0 0;
}

.record-print-timeline {
    display: grid;
    gap: 0.55rem;
}

.record-print-timeline article {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
}

.record-print-timeline time {
    color: var(--muted);
    font-weight: 800;
}

.record-print-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    font-size: 0.85rem;
}

.page-break-avoid {
    break-inside: avoid;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: 1rem;
}

.btn:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 113, 107, 0.2);
    border-color: var(--teal);
}

.blazor-error-boundary {
    background: #a33b3b;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ocurrio un error.";
}

#blazor-error-ui {
    display: none;
}

@media (max-width: 640.98px) {
    .page > .sidebar {
        min-height: auto;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .page > main > .top-row {
        justify-content: space-between;
    }

    .sidebar .nav-scrollable {
        max-height: calc(100dvh - 3.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 1rem 1.5rem rgba(12, 31, 34, 0.18);
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .page > .sidebar {
        width: 250px;
        min-height: 100vh;
        position: sticky;
        top: 0;
        align-self: flex-start;
    }

    .page > main > .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .page > main > .top-row,
    article {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sidebar .navbar-toggler {
        display: none;
    }

    .sidebar .nav-scrollable {
        display: block;
        min-height: calc(100vh - 3.75rem);
        overflow-y: visible;
    }
}

@media (min-width: 900px) {
    .context-strip {
        position: sticky;
        top: 4.5rem;
        z-index: 2;
    }
}

@media (max-width: 980px) {
    .metric-grid,
    .closure-checklist,
    .record-summary,
    .agenda-toolbar,
    .agenda-stats,
    .reception-board,
    .catalog-grid,
    .reports-grid,
    .cash-grid,
    .cash-close-panel,
    .backup-restore-box,
    .consent-layout,
    .dashboard-grid,
    .workspace-grid,
    .compact-form-grid {
        grid-template-columns: 1fr;
    }

    .schedule-row,
    .professional-row,
    .timeline-slot,
    .timeline-appointment-card,
    .invoice-head,
    .invoice-lines,
    .invoice-totals,
    .payment-row,
    .payment-history article,
    .cash-grid article,
    .audit-row,
    .consent-sheet footer,
    .clinical-patient,
    .prescription-patient,
    .rx-summary,
    .rx-prescription,
    .clinical-note-footer,
    .record-print-summary,
    .record-print-table > div,
    .record-print-timeline article,
    .record-row,
    .timeline-item {
        grid-template-columns: 1fr;
    }

    .row-actions {
        justify-content: start;
    }

    .patient-line,
    .consultation-actions {
        grid-template-columns: 1fr;
    }

    .timeline-slot > time {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 0.5rem;
    }

    .timeline-available-slot {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeline-available-slot small {
        margin-left: 0;
    }

    .rx-symbol {
        text-align: left;
        padding-top: 0;
    }

    .patient-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-actions {
        justify-content: stretch;
    }

.form-actions .primary-action {
    width: 100%;
}

.note-header,
.clinical-lock {
        align-items: flex-start;
        flex-direction: column;
    }

    .note-status {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .page-header {
        align-items: stretch;
        flex-direction: column;
    }

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

    .medication-line {
        grid-template-columns: 1fr;
    }

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

    .search-row {
        grid-template-columns: 1fr;
    }

    .clinical-grid,
    .clinical-note dl,
    .clinical-note-body dl,
    .clinical-order-body dl,
    .rx-medication dl,
    .record-print-dl,
    .prescription-card dl {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }
}

@media print {
    body {
        background: #ffffff;
    }

    .sidebar,
    .top-row,
    .no-print,
    #blazor-error-ui {
        display: none !important;
    }

    .page,
    main,
    article.content {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .prescription-sheet,
    .clinical-note-sheet,
    .clinical-order-sheet,
    .record-print-sheet {
        width: 100%;
        min-height: auto;
        border: 0;
        border-radius: 0;
        padding: 0.35in;
        margin: 0;
    }

    .receipt-sheet {
        width: 100%;
        min-height: auto;
        border: 0;
        border-radius: 0;
        padding: 0.35in;
        margin: 0;
    }

    .prescription-patient {
        grid-template-columns: minmax(0, 2.2fr) 0.55fr 0.75fr minmax(0, 1fr);
        gap: 0.65rem;
    }

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

    .rx-prescription {
        grid-template-columns: 0.55in minmax(0, 1fr);
    }

    .rx-medication {
        box-shadow: none;
    }

    .consent-sheet {
        width: 100%;
        min-height: auto;
        border: 0;
        border-radius: 0;
        padding: 0.35in;
        margin: 0;
    }

    @page {
        size: letter;
        margin: 0.35in;
    }
}
.patient-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.patient-picker-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.patient-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    background: #f8fafc;
    color: #0f172a;
}

.patient-picker-selected button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
}

.patient-picker-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.patient-picker-results button {
    width: 100%;
    display: block;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.65rem 0.75rem;
    background: #fff;
    color: #0f172a;
    text-align: left;
}

.patient-picker-results button:hover,
.patient-picker-results button:focus {
    background: #eff6ff;
}

.patient-picker-empty {
    display: block;
    padding: 0.75rem;
    color: #64748b;
}

.medication-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.medication-picker-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.medication-picker-results {
    position: absolute;
    z-index: 35;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.medication-picker-results button {
    width: 100%;
    display: block;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.65rem 0.75rem;
    background: #fff;
    color: #0f172a;
    text-align: left;
}

.medication-picker-results button strong,
.medication-picker-results button small {
    display: block;
}

.medication-picker-results button small {
    margin-top: 0.15rem;
    color: #64748b;
}

.medication-picker-results button:hover,
.medication-picker-results button:focus {
    background: #eff6ff;
}

.medication-picker-empty {
    display: block;
    padding: 0.75rem;
    color: #64748b;
}