:root { /* Medical teal + slate admin palette */ --color-sidebar: #0f2a33; --color-sidebar-2: #0b2129; --color-header: #0f2a33; --color-primary: #0e7c7b; --color-primary-dark: #0b6161; --color-primary-soft: #e3f3f2; --color-accent: #14b8a6; --color-bg: #eef3f5; --color-surface: #ffffff; --color-surface-alt: #f4f8f9; --color-border: #e4eaed; --color-border-strong: #d4dde1; --color-text: #1e293b; --color-text-muted: #64748b; --color-text-subtle: #94a3b8; --color-success: #0e9f6e; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0e7c7b; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px; --font-size-md: 13px; --font-size-lg: 15px; --font-size-xl: 18px; --font-size-xxl: 22px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 42, 50, 0.05), 0 1px 3px rgba(16, 42, 50, 0.04); --shadow-md: 0 4px 12px rgba(16, 42, 50, 0.08); --shadow-lg: 0 14px 34px rgba(16, 42, 50, 0.16); --shadow-card: 0 1px 2px rgba(16, 42, 50, 0.04), 0 4px 16px rgba(16, 42, 50, 0.05); --sidebar-width: 244px; --topbar-height: 60px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; } /* Utility: hide any element (used for conditional form rows/fields). */ .is-hidden { display: none !important; } /* Keep protected page content concealed until Firebase Auth resolves, while leaving the sidebar, topbar, and content-area loader visible. The loader therefore stays in its normal right-side shell position throughout load. */ html.auth-checking .content > * { visibility: hidden; } /* ---------- Content-area loader ---------- Shown until a page's own data has loaded and rendered (see pageLoader.js). `page-loading` ships as a static class on , so the spinner is what paints first — no flash of empty content before scripts run. The sidebar and topbar (see chrome.js) render synchronously and have nothing to wait for, so only `.content` blanks out — the shell around it stays visible and usable while the page's own data loads. */ .page-loader { position: fixed; inset: 0; z-index: 4000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: var(--color-bg); } html.page-loading .page-loader { display: flex; } /* Admin shell pages: cover only the content column, right of the sidebar and below the topbar. */ .page-loader--shell { top: var(--topbar-height); left: var(--sidebar-width); } @media (max-width: 900px) { /* The sidebar is off-canvas below this width, so content fills the row. */ .page-loader--shell { left: 0; } } html.page-loading .content > * { visibility: hidden; } /* login.html has no shell chrome around it, so its loader still covers the whole screen and the form stays hidden until auth state is known. */ html.page-loading .login-page { visibility: hidden; } .page-loader-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border-strong); border-top-color: var(--color-primary); border-radius: 50%; animation: page-loader-spin 0.75s linear infinite; } .page-loader-text { color: var(--color-text-muted); font-size: var(--font-size-sm); } @keyframes page-loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .page-loader-spinner { animation-duration: 1.8s; } } /* ---------- Layout (sidebar admin shell) ---------- */ .app-shell { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: linear-gradient(180deg, var(--color-sidebar), var(--color-sidebar-2)); color: rgba(255, 255, 255, 0.72); display: flex; flex-direction: column; padding: var(--space-5) var(--space-4); position: sticky; top: 0; height: 100vh; z-index: 30; } .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-5); margin-bottom: var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .brand-mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4); flex-shrink: 0; } .brand-text-group { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .sidebar .brand-title { font-weight: 700; color: #fff; font-size: var(--font-size-md); white-space: nowrap; } .sidebar .brand-sub { font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.5); white-space: nowrap; } .nav-section-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.34); padding: var(--space-3) var(--space-3) var(--space-2); font-weight: 600; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-nav .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: var(--font-size-sm); font-weight: 500; border: none; background: transparent; text-align: left; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .sidebar-nav .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .sidebar-nav .nav-item.active { background: linear-gradient(90deg, rgba(20, 184, 166, 0.24), rgba(20, 184, 166, 0.06)); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); } .nav-icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; } .nav-label { white-space: nowrap; } .sidebar-footer { margin-top: auto; font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.42); padding: var(--space-4) var(--space-2) var(--space-1); border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ---------- Main column ---------- */ .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--topbar-height); background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); position: sticky; top: 0; z-index: 20; } .topbar-menu { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: 18px; } /* Back arrow, sitting immediately left of the breadcrumb. */ .topbar-back { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; margin-right: calc(var(--space-4) * -1 + var(--space-2)); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .topbar-back svg { width: 17px; height: 17px; } .topbar-back:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); } .topbar-back:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15); } .topbar-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .topbar-title .crumb-muted { color: var(--color-text-muted); font-weight: 500; } .topbar-title .crumb-sep { color: var(--color-text-subtle); margin: 0 var(--space-2); } .topbar-spacer { margin-left: auto; } .topbar-actions { display: flex; align-items: center; gap: var(--space-3); } .language-switcher { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); } .language-switcher-icon { font-size: 15px; line-height: 1; } .language-switcher select { min-width: 69px; padding: 4px 20px 4px 2px; border: 0; outline: 0; color: var(--color-text); background: transparent; font: inherit; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; } .language-switcher:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.12); } .user-chip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: var(--font-size-xs); } .content { flex: 1; width: 100%; max-width: 1240px; margin: 0; padding: var(--space-4) var(--space-7) var(--space-8); overflow-y: auto; } /* Off-canvas backdrop (mobile) */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 42, 51, 0.5); z-index: 25; } .app-shell.sidebar-open .sidebar-backdrop { display: block; } /* ---------- Page head (large title + subtitle) ---------- */ .page-head { margin-bottom: var(--space-3); } /* Descriptive subtitle under page titles is intentionally hidden. */ .page-head p { display: none; } .page-head h1 { font-size: 28px; font-weight: 600; margin: 0 0 var(--space-2); color: var(--color-text); letter-spacing: -0.01em; } .page-head p { margin: 0; font-size: var(--font-size-lg); color: var(--color-text-muted); } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-7); } .stat-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); min-height: 96px; display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .stat-card .stat-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1.1; letter-spacing: -0.02em; } .stat-card .stat-value.status-active { color: var(--color-success); font-size: 23px; } .stat-card .stat-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: auto; } @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Sections / routing ---------- */ .view { display: none; animation: fade-in 0.2s ease; } .view.active { display: flex; flex-direction: column; } /* Back button sits at the very top of every page, above the title. */ .view.active > *:has(> .btn-back) { order: -1; margin-bottom: var(--space-3) !important; } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Cards ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); } .card + .card { margin-top: var(--space-5); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .card-title { font-size: var(--font-size-xl); font-weight: 600; margin: 0; } .card-subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0; display: none; } .section-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .section-title { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); margin: 0; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); } .form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-group { display: flex; flex-direction: column; gap: var(--space-1); } .form-group.span-2 { grid-column: span 2; } .form-group.is-hidden { display: none; } .form-group.span-3 { grid-column: span 3; } .form-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; } .form-control, .form-select, .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--font-size-base); color: var(--color-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15); } .form-textarea { min-height: 90px; resize: vertical; } .form-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text); } .form-static { padding: 10px 12px; background: var(--color-surface-alt); border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); font-weight: 600; color: var(--color-primary); font-family: 'Consolas', 'Courier New', monospace; } /* ---------- Filled inputs (Power Apps form style) ---------- */ .form-filled .form-control, .form-filled .form-select, .form-filled .form-textarea { background: #eef3f4; border-color: transparent; } .form-filled .form-control:focus, .form-filled .form-select:focus, .form-filled .form-textarea:focus { background: #fff; border-color: var(--color-primary); } .form-control[readonly] { color: var(--color-text-muted); cursor: default; } /* ---------- Horizontal form rows (label left, input right) ---------- */ .section-block { margin-bottom: var(--space-6); } .form-h-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); } .form-h-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--space-4); } .form-h-row.full { grid-column: span 2; align-items: start; } .form-h-label { font-size: var(--font-size-md); color: var(--color-text); } .form-h-control { min-width: 0; } /* Keep single-column stacked fields from stretching across the whole card. Dropdowns and text inputs share one cap so they line up at the same width; fields whose column is already narrower than the cap are unaffected. The composite date-of-birth field and full-width textarea rows opt out. */ .form-h-control:not(.birth-control) > .form-control, .form-h-control:not(.birth-control) > .form-select { max-width: 288px; } .form-h-row.full .form-control, .form-h-row.full .form-select { max-width: none; } .birth-control { display: flex; align-items: center; gap: var(--space-4); } .birth-control .date-input { max-width: 200px; } .age-display { font-size: var(--font-size-md); color: var(--color-text-muted); white-space: nowrap; } @media (max-width: 900px) { .form-h-grid { grid-template-columns: 1fr; } .form-h-row.full { grid-column: auto; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 16px; font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn:hover { background: var(--color-surface-alt); } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(14, 124, 123, 0.28); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-ghost { background: transparent; border-color: transparent; color: var(--color-primary); } .btn-ghost:hover { background: var(--color-primary-soft); } .btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn-danger:hover { filter: brightness(0.95); } .btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); } .btn-warning { background: var(--color-warning); color: #fff; border-color: var(--color-warning); } .btn-sm { padding: 6px 10px; font-size: var(--font-size-xs); } .btn-block { width: 100%; } .button-row { display: flex; gap: var(--space-3); flex-wrap: wrap; } .button-row.right { justify-content: flex-end; } .payments-page-actions { margin-top: var(--space-6); margin-bottom: var(--space-4); } /* ---------- Search bar ---------- */ .search-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-5); } .search-bar .search-input { flex: 1 1 260px; min-width: 200px; background: var(--color-surface-alt); border-color: transparent; padding: 13px 14px; } .search-bar .btn-primary { padding: 13px 20px; } .contact-search-bar { align-items: flex-end; } .contact-search-bar .search-input { flex: 1 1 180px; min-width: 160px; } .contact-filter-date { display: inline-flex; flex-direction: column; gap: 4px; } .contact-filter-date-label { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; } .contact-filter-date input[type="date"] { min-width: 150px; } .contact-filter-clear { padding: 13px 16px; } /* ---------- Tables ---------- */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-sm); background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; } .data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .data-table th { background: var(--color-surface-alt); color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); } .data-table tr:last-child td { border-bottom: none; } .data-table tr.row-clickable { cursor: pointer; } .data-table tr.row-clickable:hover td { background: var(--color-primary-soft); } .data-table tr.row-hover-only:hover td { background: var(--color-primary-soft); } .data-table tr.row-selected td { background: transparent; } .table-wrap { border: none; border-radius: 0; overflow-x: auto; } /* Scrollable patients list with a sticky header. */ .patients-table-wrap { max-height: 460px; overflow-y: auto; } .patients-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface); } .empty-state { padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } /* ---------- Status badges ---------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; background: var(--color-primary-soft); color: var(--color-primary); } .badge-success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); } .badge-warning { background: rgba(245, 158, 11, 0.15); color: #b45309; } .badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--color-danger); } .badge-muted { background: #eef1f6; color: var(--color-text-muted); } .badge-info { background: rgba(59, 130, 246, 0.12); color: var(--color-info); } /* ---------- Patient detail ---------- */ .patient-header { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, #ffffff, #eff8f7); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .patient-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-size: var(--font-size-xl); font-weight: 700; flex-shrink: 0; } .patient-summary { display: flex; flex-direction: column; gap: 4px; flex: 1; } .patient-name { font-size: var(--font-size-xl); font-weight: 600; margin: 0; } .patient-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); } .patient-meta span strong { color: var(--color-text); font-weight: 600; } .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .action-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; text-align: left; font-family: inherit; color: inherit; } .action-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .action-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; font-size: var(--font-size-lg); } .action-card-title { font-size: var(--font-size-md); font-weight: 600; } .action-card-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ---------- Patient detail (profile / contact / address) ---------- */ .profile-id { font-size: var(--font-size-xxl); font-weight: 700; color: var(--color-primary); line-height: 1.2; } .profile-name { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin-top: var(--space-1); } .profile-meta { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--font-size-md); color: var(--color-text-muted); } .detail-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); margin: var(--space-5) 0; } /* Patient profile is narrowed and the Contact / Address cards sit beside it. */ .detail-top-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); align-items: stretch; } /* Cancel the stacked-card top margin so the three cards align and match height. */ .detail-top-grid > .card + .card { margin-top: 0; } @media (max-width: 900px) { .detail-top-grid { grid-template-columns: 1fr; } } /* Cancel the stacked-card top margin so both row cards align top and share the same stretched height. */ .detail-two-col > .card + .card { margin-top: 0; } @media (max-width: 900px) { .detail-two-col { grid-template-columns: 1fr; } } .detail-list { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-md); } .detail-line .dl-label { color: var(--color-text-muted); } .detail-line .dl-value { color: var(--color-text); } .detail-line .dl-gap { display: inline-block; width: 28px; } /* ---------- Process detail (summary + workflow modules) ---------- */ .process-summary { display: flex; flex-direction: column; gap: var(--space-2); } /* Compact process-summary card: narrower and stacked vertically. */ .process-summary-card { max-width: 380px; } .process-summary .ps-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); } .process-summary .ps-id { min-width: 0; } .ps-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } .ps-id { color: var(--color-primary); font-size: var(--font-size-xxl); font-weight: 700; min-width: 0; } .ps-number { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); } .ps-label, .ps-patient, .ps-proc-ref { font-size: var(--font-size-md); color: var(--color-text-muted); } /* ---------- New process ---------- */ .new-process-page-head { margin-bottom: 28px; } .new-process-back-row { margin-bottom: 28px; } .new-process-back { min-width: 0; min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); } .new-process-back:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); } .new-process-info-card { padding: var(--space-6); } .new-process-card-heading .card-subtitle { margin-top: 3px; font-size: 18px; } .new-process-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; } .new-process-form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 20px; } .new-process-form-row-split { grid-template-columns: 160px minmax(0, 1fr) 150px minmax(0, 1fr); } .new-process-form-label { color: var(--color-text-muted); font-size: var(--font-size-md); font-weight: 400; } .new-process-static { width: 100%; min-height: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: #eef3f4; color: var(--color-text); font-size: var(--font-size-base); font-weight: 400; } .new-process-notes-row { align-items: start; } .new-process-notes-row .new-process-form-label { padding-top: 10px; } .new-process-actions { display: flex; justify-content: flex-end; margin-top: 32px; } @media (max-width: 900px) { .new-process-form-row, .new-process-form-row-split { grid-template-columns: 1fr; gap: 8px; } .new-process-form-row-split .new-process-form-label:nth-of-type(2) { margin-top: 8px; } .new-process-notes-row .new-process-form-label { padding-top: 0; } } @media (max-width: 620px) { .new-process-info-card { padding: 24px 20px; } .new-process-actions .btn { width: 100%; } } /* ---------- Consultations ---------- */ .consultations-page-head { margin-bottom: 28px; } .consultations-back-row { margin-bottom: 28px; } .consultations-back { min-width: 136px; min-height: 47px; padding: 0 26px; border-color: #e4eaed; border-radius: 11px; color: var(--color-primary); font-size: 18px; background: var(--color-surface); } .consultations-back:hover { background: var(--color-primary-soft); border-color: #d4dde1; } .consultations-selected-card, .consultations-data-card, .consultations-next-card { padding: 26px 34px; } .consultations-selected-card { min-height: 154px; } .consultations-selected-card .card-title, .consultations-data-card .card-title, .consultations-presupuesto-card .card-title, .consultations-next-card .card-title { font-size: 26px; } .consultations-selected-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: 24px; } .consultations-selected-patient { color: var(--color-primary); font-size: 24px; font-weight: 700; } .consultations-selected-process { color: var(--color-text-muted); font-size: 20px; } .consultations-data-card + .consultations-next-card { margin-top: 32px; } .consultations-data-card { padding-bottom: 29px; } .consultation-fields { display: flex; flex-direction: column; /* Conditional labels sit above their controls without changing the row height. This gap reserves room for those labels consistently. */ gap: 30px; margin-top: 24px; } .consultation-field-row { display: grid; grid-template-columns: 250px minmax(300px, 372px); align-items: center; gap: 20px; } /* Conditional field placed to the right of the control that reveals it. */ .consultation-field-row.cond-row { grid-template-columns: 250px minmax(220px, 340px) minmax(220px, 360px); } /* Keep conditional controls aligned with the main control. Their labels are visual headings above the field and must not make the grid item taller. */ .consultation-field-row.cond-row > .cond-field { position: relative; display: block; min-width: 0; } .consultation-field-row.cond-row > .cond-field > .consultation-field-label { position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - 6px)); white-space: nowrap; } .consultation-field-row.cond-row > .cond-field > .form-control, .consultation-field-row.cond-row > .cond-field > .form-select { width: 100%; } .consultation-field-label { color: var(--color-text-muted); font-size: 19px; font-weight: 400; } .consultation-record-id, .consultations-view .form-control, .consultations-view .form-select, .consultations-view .form-textarea { border: 1px solid transparent; border-radius: 5px; background: #eef3f4; color: var(--color-text); font-size: 14px; } .consultation-record-id { min-height: 46px; padding: 14px; } .consultations-view .form-control, .consultations-view .form-select { min-height: 46px; padding: 12px 14px; } .consultations-view .form-control:focus, .consultations-view .form-select:focus, .consultations-view .form-textarea:focus { background: var(--color-surface); } .consultation-surgery-row { grid-template-columns: 250px minmax(300px, 372px) minmax(300px, 1fr); gap: 20px 32px; } .consultation-comments { width: 100%; min-height: 67px; margin-top: 26px; padding: 14px; resize: vertical; } .consultations-next-card { padding-top: 34px; padding-bottom: 5px; } .consultation-next-main { margin: 24px 0 0 0; } .consultation-next-controls { display: flex; flex-direction: column; gap: 18px; } .consultation-next-field-row { display: grid; grid-template-columns: 250px minmax(260px, 372px) minmax(220px, 360px); align-items: center; gap: 20px; } .consultation-next-field-row > .form-group { min-width: 0; } .consultation-next-field-row > .form-group .form-control { width: 100%; } .consultation-next-observation-row .consultation-next-observations { grid-column: 2 / 4; width: 100%; } .consultation-next-observations { min-height: 46px !important; } .consultation-next-comments { width: 100%; min-height: 68px; margin-top: 42px; padding: 14px; resize: vertical; } .consultations-actions { display: flex; justify-content: flex-end; margin-top: 55px; padding-right: 28px; } .consultations-actions .btn { min-width: 0; min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } @media (max-width: 980px) { .consultations-selected-summary { grid-template-columns: 1fr; gap: 10px; } .consultation-field-row, .consultation-field-row.cond-row { grid-template-columns: 220px minmax(0, 1fr); } .consultation-field-row.cond-row .cond-field { grid-column: 2; } .consultation-field-row.cond-row > .cond-field { display: grid; gap: 6px; } .consultation-field-row.cond-row > .cond-field > .consultation-field-label { position: static; transform: none; } .consultation-surgery-row { grid-template-columns: 220px minmax(0, 1fr); } .consultation-surgery-observations { grid-column: 2; } .consultation-next-main { grid-template-columns: 1fr; } .consultation-next-field-row { grid-template-columns: 220px minmax(0, 1fr); } .consultation-next-field-row > .form-group, .consultation-next-observation-row .consultation-next-observations { grid-column: 2; } .consultation-next-observations { min-height: 46px !important; } } @media (max-width: 700px) { .consultations-selected-card, .consultations-data-card, .consultations-next-card { padding: 24px 20px; } .consultation-field-row, .consultation-field-row.cond-row, .consultation-surgery-row { grid-template-columns: 1fr; gap: 8px; } .consultation-field-row.cond-row .cond-field, .consultation-surgery-observations { grid-column: auto; } .consultation-next-field-row { grid-template-columns: 1fr; gap: 8px; } .consultation-next-field-row > .form-group, .consultation-next-observation-row .consultation-next-observations { grid-column: auto; } .consultations-actions { padding-right: 0; } .consultations-actions .btn { width: 100%; } } /* ---------- Coded procedures catalog ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .procedure-catalog-head { margin-bottom: 26px; } .procedure-catalog-toolbar, .procedure-catalog-card-head, .procedure-search-row, .procedure-editor-actions { display: flex; align-items: center; } .procedure-catalog-toolbar { justify-content: space-between; gap: 16px; margin-bottom: 28px; } .procedure-catalog-toolbar .btn, .procedure-catalog-card-head > .btn, .procedure-editor-actions .btn { min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } .procedure-catalog-back { min-width: 0; } .procedure-family-card, .procedure-coded-card { padding: 28px; } .procedure-coded-card { margin-top: 32px; } .procedure-catalog-card-head { justify-content: space-between; gap: 24px; margin-bottom: 28px; } .procedure-catalog-card-head .card-title { font-size: 25px; } .procedure-catalog-card-head .card-subtitle { margin-top: 4px; font-size: 16px; } .procedure-family-layout { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr); align-items: start; gap: 44px; } .procedure-table-shell { overflow: auto; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); } .procedure-family-table-shell { max-height: 330px; } .procedure-coded-table-shell { max-height: 410px; } .procedure-catalog-table { min-width: 100%; } .procedure-catalog-table thead { position: sticky; top: 0; z-index: 2; background: #f7f4f3; } .procedure-catalog-table th, .procedure-catalog-table td { padding: 14px 18px; } .procedure-catalog-table tbody tr { cursor: pointer; } .procedure-catalog-table tbody tr:hover td { background: var(--color-primary-soft); } .procedure-catalog-table tbody tr.row-selected td { background: rgba(14, 124, 123, 0.12); } .procedure-code-cell { color: var(--color-primary-dark); font-weight: 700; white-space: nowrap; } .procedure-editor { min-width: 0; } .procedure-editor h3 { margin: 2px 0 24px; color: var(--color-text); font-size: 22px; font-weight: 600; } .procedure-editor .form-group label { display: block; margin-bottom: 7px; color: var(--color-text-muted); font-size: 14px; font-weight: 600; } .procedure-editor .form-control, .procedure-editor .form-select, .procedure-search-row .form-control { min-height: 46px; border-color: transparent; border-radius: 7px; background: #eef3f4; } .procedure-editor .form-control:focus, .procedure-editor .form-select:focus, .procedure-search-row .form-control:focus { border-color: var(--color-primary); background: var(--color-surface); } .procedure-family-form-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; } .procedure-editor-actions { justify-content: flex-end; margin-top: 24px; } .procedure-editor-actions .btn { min-width: 0; } .procedure-search-row { gap: 14px; margin-bottom: 22px; } .procedure-search-row .form-control { width: min(100%, 520px); } .procedure-result-count { color: var(--color-text-muted); font-size: 14px; white-space: nowrap; } .procedure-coded-editor { margin-top: 30px; } .procedure-form-grid { display: grid; grid-template-columns: 190px 260px minmax(300px, 1fr); gap: 18px; } .procedure-catalog-loading, .procedure-catalog-empty { padding: 30px 18px !important; color: var(--color-text-muted); text-align: center; } .campaign-hint { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; } @media (max-width: 1050px) { .procedure-family-layout { grid-template-columns: 1fr; } .procedure-form-grid { grid-template-columns: 180px 220px minmax(240px, 1fr); } } @media (max-width: 760px) { .procedure-family-card, .procedure-coded-card { padding: 22px 18px; } .procedure-catalog-card-head { align-items: flex-start; flex-direction: column; } .procedure-catalog-card-head > .btn { width: 100%; } .procedure-family-form-grid, .procedure-form-grid { grid-template-columns: 1fr; } .procedure-search-row { align-items: flex-start; flex-direction: column; } .procedure-search-row .form-control { width: 100%; } .procedure-editor-actions .btn { width: 100%; } } /* ---------- Pre-op checks ---------- */ .preop-page-head { margin-bottom: 28px; } .preop-back-row { margin-bottom: 28px; } .preop-back { min-width: 136px; min-height: 47px; padding: 0 26px; border-color: #e4eaed; border-radius: 11px; color: var(--color-primary); font-size: 18px; background: var(--color-surface); } .preop-back:hover { background: var(--color-primary-soft); border-color: #d4dde1; } .preop-selected-card, .preop-tests-card, .preop-questionnaire-card, .preop-complementary-card { padding: 26px 34px; } .preop-selected-card { min-height: 154px; } .preop-selected-card .card-title, .preop-tests-card .card-title, .preop-questionnaire-card .card-title, .preop-complementary-card .card-title { font-size: 26px; } .preop-selected-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: 24px; } .preop-selected-patient { color: var(--color-primary); font-size: 24px; font-weight: 700; } .preop-selected-process { color: var(--color-text-muted); font-size: 20px; } .preop-selected-card + .preop-tests-card, .preop-tests-card + .preop-questionnaire-card, .preop-questionnaire-card + .preop-complementary-card { margin-top: 32px; } .preop-card-heading .card-subtitle { margin-top: 3px; font-size: 18px; } .preop-fields-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.55fr) minmax(0, 1.35fr); align-items: stretch; gap: 18px; margin-top: 22px; } .preop-field { min-width: 0; padding: 20px; border: 1px solid #e4eaed; border-radius: 11px; background: #fbfcfc; } .preop-field-label { display: block; color: var(--color-text-muted); font-size: 19px; font-weight: 600; } .preop-checkbox-field { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; min-height: 0; padding: 14px 16px; } .preop-checkbox-field .preop-check { width: fit-content; min-width: 0; padding: 8px 12px; border-radius: 9px; background: var(--color-primary-soft); } .preop-check { display: inline-flex; align-items: center; gap: 13px; color: var(--color-text-muted); font-size: 16px; cursor: pointer; } .preop-check input { width: 21px; height: 21px; margin: 0; accent-color: var(--color-primary); } .preop-check input:disabled { cursor: default; opacity: 1; } /* The attachment area is split into two separate cards placed side by side: a scrollable file table (left) and a card that only holds the Subir button (right). Both turn red when the field has no file attached. */ .preop-file-table-field, .preop-file-button-field { display: flex; flex-direction: column; min-height: 0; transition: border-color 0.15s ease, background-color 0.15s ease; } .preop-file-table-field { gap: 10px; } .preop-file-button-field { align-items: center; justify-content: center; gap: 10px; } .preop-file-table-field.is-empty, .preop-file-button-field.is-empty { border-color: var(--color-danger); background: var(--color-danger-soft, rgba(220, 38, 38, 0.06)); } .preop-file-table-field > .preop-field-label { width: 100%; } /* Scrollable list of files attached to a preop field. The height is fixed so the card never grows as files are added — the list scrolls inside instead. */ .preop-file-table-wrap { width: 100%; flex: none; height: 112px; overflow-y: auto; border: 1px solid #e4eaed; border-radius: 8px; background: var(--color-surface); } .preop-file-table { width: 100%; border-collapse: collapse; font-size: 14px; } .preop-file-table-row + .preop-file-table-row td { border-top: 1px solid #eef1f2; } .preop-file-table td { padding: 8px 12px; vertical-align: middle; } .preop-file-empty-row td { color: var(--color-text-muted); font-size: 14px; } .preop-file-action-cell { width: 32px; text-align: right; } .preop-file-link { max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--color-primary-dark); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; } .preop-file-link:hover, .preop-file-link:focus-visible { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .preop-file-remove { flex: none; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; cursor: pointer; } .preop-file-remove:hover, .preop-file-remove:focus-visible { color: var(--color-danger); background: var(--color-danger-soft, rgba(220, 38, 38, 0.08)); } .preop-file-button { min-width: 112px; min-height: 44px; border-color: #e4eaed; border-radius: 11px; color: var(--color-primary); font-size: 17px; background: var(--color-surface); } .preop-file-button:hover { background: var(--color-primary-soft); } .preop-questionnaire-card { min-height: 226px; } .preop-status-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: 22px; margin-top: 28px; padding: 20px; border: 1px solid #e4eaed; border-radius: 11px; background: #fbfcfc; } .preop-auto-status .preop-check { cursor: default; } .preop-complementary-card { padding-top: 34px; } .preop-photos-field { grid-column: 1 / -1; min-height: 124px; } .preop-comments-label { display: block; margin-top: 30px; color: var(--color-text-muted); font-size: 19px; font-weight: 600; } .preop-comments { width: 100%; min-height: 101px; margin-top: 10px; padding: 14px; border: 1px solid transparent; border-radius: 5px; background: #eef3f4; font-size: 14px; resize: vertical; } .preop-comments:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15); } .preop-actions { display: flex; justify-content: flex-end; margin-top: 36px; } .preop-actions .btn { min-width: 0; min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } @media (max-width: 850px) { .preop-selected-summary { grid-template-columns: 1fr; gap: 10px; } .preop-fields-grid { grid-template-columns: 1fr; } .preop-photos-field { grid-column: auto; } .preop-status-row { grid-template-columns: 1fr auto; } } @media (max-width: 620px) { .preop-selected-card, .preop-tests-card, .preop-questionnaire-card, .preop-complementary-card { padding: 24px 20px; } .preop-file-button { width: 100%; } .preop-status-row { grid-template-columns: 1fr; } .preop-actions .btn { width: 100%; } } /* ---------- Surgery planning ---------- */ .surgery-page-head { margin-bottom: 28px; } .surgery-back-row { margin-bottom: 28px; } .surgery-back { min-width: 136px; min-height: 47px; padding: 0 26px; border-color: #e4eaed; border-radius: 11px; color: var(--color-primary); font-size: 18px; background: var(--color-surface); } .surgery-back:hover { background: var(--color-primary-soft); border-color: #d4dde1; } .surgery-selected-card, .surgery-planned-card, .surgery-performed-card { padding: 26px 34px; } .surgery-selected-card { min-height: 154px; } .surgery-selected-card .card-title, .surgery-planned-card .card-title, .surgery-performed-card .card-title { font-size: 26px; } .surgery-selected-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: 24px; } .surgery-selected-patient { color: var(--color-primary); font-size: 24px; font-weight: 700; } .surgery-selected-process { color: var(--color-text-muted); font-size: 20px; } .surgery-selected-card + .surgery-planned-card, .surgery-planned-card + .surgery-performed-card { margin-top: 32px; } .surgery-planned-card { padding-bottom: 57px; } .surgery-plan-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .surgery-field-row { display: grid; grid-template-columns: 250px minmax(300px, 372px); align-items: center; gap: 20px; } .surgery-place-row { grid-template-columns: 250px minmax(300px, 372px) minmax(260px, 362px); } .surgery-place-row #surgeryLugarOtro { margin-left: 47px; background: var(--color-surface); border-color: var(--color-border); } .surgery-place-row #surgeryLugarOtro.is-hidden { display: none; } .surgery-field-label { color: var(--color-text-muted); font-size: 19px; } .surgery-view .form-control, .surgery-view .form-select { min-height: 46px; padding: 12px 14px; border: 1px solid transparent; border-radius: 5px; background: #eef3f4; color: var(--color-text); font-size: 14px; } .surgery-view .form-control:focus, .surgery-view .form-select:focus, .surgery-view .form-textarea:focus { background: var(--color-surface); } .surgery-procedures-heading { display: flex; align-items: center; gap: 28px; margin-top: 50px; } .surgery-procedures-heading h3 { min-width: 350px; margin: 0; font-size: 24px; font-weight: 600; } .surgery-procedures-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-top: 28px; max-width: 440px; } .surgery-procedure-field { min-width: 0; } .surgery-procedure-field > label { display: block; margin-bottom: 8px; color: var(--color-text-muted); font-size: 16px; font-weight: 600; } /* ---------- Procedure combobox (Cirugía prevista) ---------- Styled as one of the page's ordinary filled inputs so the procedure rows read as part of the same form; the only extra affordance is a quiet chevron that opens the full catalog. */ .surgery-procedure-control { position: relative; } .surgery-procedure-search { width: 100%; padding: 10px 34px 10px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: #eef3f4; color: var(--color-text); font-family: inherit; font-size: var(--font-size-base); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .surgery-procedure-search::placeholder { color: var(--color-text-muted); } .surgery-procedure-search:focus { outline: none; background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15); } /* Keep the typed value clear of the Código2 chip when one is showing. */ .surgery-procedure-search.has-code { padding-right: 96px; } .surgery-procedure-control > button { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); cursor: pointer; } .surgery-procedure-control > button:hover, .surgery-procedure-control.is-open > button { color: var(--color-primary); } /* Chevron drawn from borders, so there is no font glyph to nudge onto the optical centre and the flip stays symmetrical. */ .surgery-procedure-control > button::before { content: ''; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; } .surgery-procedure-control.is-open > button::before { margin-top: 3px; transform: rotate(225deg); } /* Código2 of the entry currently in the field, so a code lookup stays verifiable after the menu closes and only the denominación is visible. */ .surgery-procedure-code { position: absolute; top: 50%; right: 34px; transform: translateY(-50%); max-width: 56px; padding: 2px 8px; overflow: hidden; border-radius: var(--radius-pill); color: var(--color-primary-dark); background: var(--color-primary-soft); font-size: var(--font-size-xs); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; } .surgery-procedure-menu { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 50; max-height: min(320px, 46vh); padding: var(--space-1); overflow-y: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); scrollbar-width: thin; } .surgery-procedure-menu[hidden] { display: none; } /* Each option leads with its Código2 so a code search can be scanned down the left edge, with Código1 + family name underneath for context. The grid keeps long denominaciones wrapping under themselves rather than under the code. */ .surgery-procedure-option { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); width: 100%; padding: 8px 28px 8px 10px; border: 0; border-radius: var(--radius-sm); color: var(--color-text); background: transparent; font: inherit; font-size: var(--font-size-base); line-height: 1.35; text-align: left; cursor: pointer; } .surgery-procedure-option:hover, .surgery-procedure-option.is-active { background: var(--color-primary-soft); } .surgery-procedure-option-code { grid-column: 1; grid-row: 1; padding-right: 8px; overflow-wrap: anywhere; color: var(--color-primary-dark); font-weight: 700; } .surgery-procedure-option-name { grid-column: 2; grid-row: 1; } .surgery-procedure-option-family { grid-column: 2; grid-row: 2; margin-top: 1px; color: var(--color-text-muted); font-size: var(--font-size-sm); } .surgery-procedure-option.is-selected .surgery-procedure-option-name { font-weight: 700; } .surgery-procedure-option.is-selected::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--color-primary); } .surgery-procedure-empty { padding: var(--space-4) var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-base); text-align: center; } .surgery-planned-comments, .surgery-performed-comments { width: 100%; padding: 14px; border: 1px solid transparent; border-radius: 5px; background: #eef3f4; font-size: 14px; resize: vertical; } .surgery-comments-label { display: block; margin-top: 34px; color: var(--color-text-muted); font-size: 19px; font-weight: 600; } .surgery-planned-comments { min-height: 87px; margin-top: 10px; } .surgery-performed-card { padding-top: 26px; padding-bottom: 42px; } .surgery-performed-checks { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; } .surgery-performed-row { display: grid; grid-template-columns: 210px minmax(120px, 1fr); align-items: center; gap: 22px; } .surgery-check { display: inline-flex; align-items: center; gap: 13px; color: var(--color-text-muted); font-size: 16px; cursor: pointer; } .surgery-check input { width: 19px; height: 19px; margin: 0; accent-color: var(--color-primary); } .surgery-check-automatic { cursor: default; } .surgery-check input:disabled { cursor: default; opacity: 1; } .surgery-report-field { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 22px; margin-top: 34px; padding: 22px; border: 1px solid #e4eaed; border-radius: 11px; background: #fbfcfc; } .surgery-report-field p { margin: 0 0 16px; color: var(--color-text-muted); font-size: 16px; line-height: 1.5; } .surgery-report-link { min-height: 44px; border-color: #e4eaed; border-radius: 9px; color: var(--color-primary); background: var(--color-surface); } .surgery-report-link:hover { background: var(--color-primary-soft); } .surgery-performed-comments { min-height: 141px; margin-top: 10px; } .surgery-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-right: 43px; } .surgery-actions .btn { min-width: 0; min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } @media (max-width: 1050px) { .surgery-selected-summary { grid-template-columns: 1fr; gap: 10px; } .surgery-place-row { grid-template-columns: 220px minmax(0, 1fr); } .surgery-place-row #surgeryLugarOtro { grid-column: 2; margin-left: 0; } .surgery-field-row { grid-template-columns: 220px minmax(0, 1fr); } .surgery-procedures-grid { gap: 18px 28px; } } @media (max-width: 700px) { .surgery-selected-card, .surgery-planned-card, .surgery-performed-card { padding: 24px 20px; } .surgery-field-row, .surgery-place-row { grid-template-columns: 1fr; gap: 8px; } .surgery-place-row #surgeryLugarOtro { grid-column: auto; } .surgery-procedures-heading { align-items: flex-start; flex-direction: column; } .surgery-procedures-heading h3 { min-width: 0; } .surgery-procedures-grid { grid-template-columns: 1fr; } .surgery-performed-row { grid-template-columns: 1fr auto; } .surgery-report-field { grid-template-columns: 1fr; gap: 12px; } .surgery-actions { padding-right: 0; } .surgery-actions .btn { width: 100%; } } /* Two cards sitting side by side (used where a card leaves empty space on its right and the next card can fill it). Wraps on narrow screens. */ .crm-cards-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: stretch; margin-top: var(--space-5); } .crm-cards-row > .card { flex: 1 1 360px; min-width: 0; margin-top: 0; } .crm-full-width-card { width: 100%; margin-top: var(--space-5); } /* ---------- CRM Sales form ---------- */ .form-stack { display: flex; flex-direction: column; gap: var(--space-4); max-width: 780px; } .form-stack .form-h-row { grid-template-columns: 230px minmax(0, 1fr); } /* Conditional fields sit to the right of the control that reveals them, in the same row, instead of dropping onto a new line below. */ .form-stack .form-h-row.cond-row { grid-template-columns: 230px 288px minmax(0, 1fr); align-items: center; } .cond-field { min-width: 0; } .crm-lead-stack { max-width: none; } .crm-lead-stack .form-h-row.cond-row { grid-template-columns: 230px 288px minmax(320px, 1fr); } .crm-lead-stack .form-h-row.cond-row.publicidad-active { align-items: start; } .crm-lead-stack .form-h-row.cond-row.publicidad-active > .form-h-label { padding-top: 13px; } .crm-publicidad-options { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: var(--space-4); align-items: start; } .crm-publicidad-field { position: relative; min-width: 0; } .crm-publicidad-field .form-h-label { position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - var(--space-2))); width: auto; white-space: nowrap; } .crm-publicidad-field > div:not(.is-hidden) { margin-top: var(--space-2); } .crm-star-rating { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; } .crm-star { padding: 0; border: 0; background: transparent; color: var(--color-border); font-size: 32px; line-height: 1; cursor: pointer; transition: color 120ms ease, transform 120ms ease; } .crm-star:hover, .crm-star:focus-visible { color: var(--color-primary); transform: scale(1.08); outline: none; } .crm-star.is-selected { color: var(--color-primary); } .star-filter { display: flex; align-items: center; gap: var(--space-2); } .star-filter-label { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; } .star-filter .crm-star-rating { min-height: auto; gap: 2px; } .star-filter .crm-star { font-size: 20px; } .star-filter-clear { padding: 4px 10px; } .form-full-field { margin-top: var(--space-4); } .form-full-field .form-control { max-width: 288px; } /* Two-column contact form: narrower controls and tighter rows. */ .form-h-grid.contact-grid { grid-template-columns: 1fr; gap: var(--space-4); max-width: 940px; } .contact-grid .form-h-row { grid-template-columns: 280px minmax(0, 360px); } .contact-grid .form-h-row.contact-other-row, .contact-next-stack .form-h-row.contact-other-row { grid-template-columns: 280px minmax(0, 360px) minmax(0, 280px); } /* Full-width (label-less) inputs interspersed in a single-column stack. */ .form-stack .stack-full { max-width: 530px; } .contact-next-stack { max-width: 940px; } .contact-next-stack .form-h-row { grid-template-columns: 280px minmax(0, 360px); } .contact-probability-control { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; max-width: 360px; } .contact-probability-range { --range-progress: 0%; width: 100%; height: 4px; margin: 0; border: 0; border-radius: var(--radius-pill); appearance: none; background: linear-gradient( to right, var(--color-primary) 0, var(--color-primary) var(--range-progress), var(--color-border-strong) var(--range-progress), var(--color-border-strong) 100% ); cursor: pointer; } .contact-probability-range::-webkit-slider-thumb { width: 18px; height: 18px; border: 3px solid var(--color-surface); border-radius: 50%; appearance: none; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm); } .contact-probability-range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm); } .contact-probability-range:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 6px; } .contact-probability-value { min-width: 48px; color: var(--color-primary-dark); font-weight: 700; text-align: right; } .crm-conditional-body { min-height: 100px; } .interes-grid { display: flex; flex-direction: column; gap: var(--space-3); max-width: 440px; } .attach-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .crm-attachment-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: 900px; } .crm-attachment-empty { margin: 0; color: var(--color-text-muted); } .crm-attachment-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); } .crm-attachment-name { min-width: 0; overflow-wrap: anywhere; } .crm-attachment-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } /* Compact attachment: buttons only, plus a single status line when a file is attached. The grey placeholder card is intentionally removed. */ .attach-status { display: none; order: -1; flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--font-size-md); } .attach-status.has-file { display: block; color: var(--color-primary-dark); font-weight: 600; } @media (max-width: 900px) { .interes-grid { grid-template-columns: 1fr; } .form-stack .form-h-row, .form-stack .form-h-row.cond-row, .crm-lead-stack .form-h-row.cond-row, .contact-grid .form-h-row, .contact-grid .form-h-row.contact-other-row, .contact-next-stack .form-h-row.contact-other-row { grid-template-columns: 1fr; } .crm-publicidad-options { grid-template-columns: 1fr; } } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, 210px); gap: var(--space-4); } .module-card { display: flex; flex-direction: column; gap: var(--space-1); min-height: 118px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .module-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .module-title { margin: 0; color: var(--color-primary); font-size: var(--font-size-lg); font-weight: 700; } .module-desc { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); flex: 1; } .module-actions { display: flex; justify-content: flex-end; } /* External-links: clean form list + inline generated-link row. */ .form-list { display: flex; flex-direction: column; } .form-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); } .form-list-row:first-child { padding-top: 0; } .form-list-row:last-child { border-bottom: 0; padding-bottom: 0; } .form-list-main { min-width: 0; } .form-list-heading { display: flex; align-items: center; gap: var(--space-3); } .form-list-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); } .form-list-desc { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .generated-link-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .generated-link-row .form-control { flex: 1; min-width: 0; } .generated-link-row .btn { flex-shrink: 0; } @media (max-width: 620px) { .form-list-row { flex-direction: column; align-items: stretch; } .generated-link-row { flex-wrap: wrap; } .generated-link-row .form-control { flex-basis: 100%; } } @media (max-width: 960px) { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-id { min-width: 0; } .ps-row { gap: var(--space-6); } } @media (max-width: 620px) { .module-grid { grid-template-columns: 1fr; } } /* ---------- Context strip (selected process / consultation) ---------- */ /* ---------- Payments and transfers ---------- */ .payments-page-head { margin-bottom: 26px; } .payments-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .payments-toolbar .btn, .payments-form-actions .btn, .payments-transfer-save-row .btn { min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } .payments-back { min-width: 0; } .payments-view > .card + .card { margin-top: 28px; } .payments-selected-card, .payments-overview-card, .payments-add-card, .payments-finance-lines-card, .payments-transfers-card { padding: 28px; } .payments-selected-summary { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 24px; margin-top: 22px; font-size: 17px; } .payments-selected-patient { color: var(--color-primary-dark); font-weight: 700; } .payments-selected-process { color: var(--color-text-muted); } .payments-consultation-hint { margin: 18px 0 0; color: var(--color-text-muted); font-size: 13px; } .payments-card-heading { margin-bottom: 30px; } .payments-card-heading .card-title { font-size: 25px; } .payments-card-heading .card-subtitle { margin-top: 5px; font-size: 15px; } .payments-group h3, .payments-remaining h3 { margin: 0 0 18px; color: var(--color-text); font-size: 20px; font-weight: 650; } .payments-group + .payments-remaining, .payments-remaining + .payments-group { margin-top: 30px; } .payment-entry-form { margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); } .payment-schema-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); align-items: end; gap: var(--space-4); } .payment-schema-comments { grid-column: span 2; } .payment-schema-comments .form-textarea { min-height: 46px; } .payment-entry-form .form-control, .payment-entry-form .form-select, .payment-entry-form .form-textarea { border-color: transparent; background: var(--color-surface); } .payment-entry-form .form-control.payment-reconciliation-match { border-color: var(--color-success); background: rgba(14, 159, 110, 0.13); } .payment-entry-form .form-control.payment-reconciliation-mismatch { border-color: var(--color-danger); background: rgba(220, 38, 38, 0.11); } .payments-table-check { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .payments-table-check input { width: 18px; height: 18px; accent-color: var(--color-primary); } .payments-table-shell { min-height: 174px; overflow: auto; border: 1px solid var(--color-border-strong); border-radius: 9px; background: var(--color-surface); } .payments-table { min-width: 1080px; } .payments-table th, .payments-table td { padding: 15px 18px; } .payments-table thead { background: var(--color-surface-alt); } .payments-table tbody tr.is-paid td:first-child { box-shadow: inset 3px 0 0 var(--color-success); } .payments-table tbody tr.is-pending td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); } .payments-id-cell { color: var(--color-primary-dark); font-weight: 700; } .payments-empty { height: 120px; color: var(--color-text-muted); text-align: center; } .payments-remaining { padding: 24px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-alt); } .payments-remaining-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(150px, 0.7fr); align-items: stretch; gap: 18px; } .payments-metric, .payments-paid-status { min-height: 78px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); } .payments-metric { display: flex; flex-direction: column; justify-content: center; gap: 7px; } .payments-metric span { color: var(--color-text-muted); font-size: 13px; } .payments-metric strong { font-size: 18px; } .payments-metric strong.is-outstanding { color: var(--color-danger); } .payments-metric strong.is-settled { color: var(--color-success); } .payments-paid-status { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-text-muted); font-weight: 600; } .payments-paid-status input, .payments-form-check input, .payments-transfer-check input { width: 18px; height: 18px; accent-color: var(--color-primary); } .payments-type-grid { display: grid; grid-template-columns: minmax(180px, 0.85fr) minmax(240px, 1.1fr) minmax(200px, 0.9fr) 120px; gap: 18px; } .payments-details-grid { display: grid; grid-template-columns: 120px minmax(170px, 0.8fr) minmax(170px, 0.8fr) minmax(190px, 1fr); align-items: end; gap: 20px; margin-top: 28px; } .payments-form-check { display: flex; align-items: center; align-self: center; gap: 10px; min-height: 46px; cursor: pointer; } .payment-checkbox-field .payments-form-check { align-self: flex-start; justify-content: flex-start; } .payments-comments-field { grid-column: 1 / span 2; } .payments-comments-field .form-textarea { min-height: 92px; } .payments-add-card .form-control, .payments-add-card .form-select, .payments-add-card .form-textarea { border-color: transparent; background: var(--color-surface-alt); } .payments-add-card .form-control:focus, .payments-add-card .form-select:focus, .payments-add-card .form-textarea:focus { border-color: var(--color-primary); background: var(--color-surface); } .payments-add-card input[readonly] { color: var(--color-text-muted); cursor: default; } .payments-form-actions, .payments-transfer-save-row { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: 28px; } .payments-general-table { min-width: 1640px; } .payments-form-actions .btn, .payments-transfer-save-row .btn { min-width: 0; } .payments-transfer-list { display: flex; flex-direction: column; gap: 14px; } .payments-transfer-row { display: grid; grid-template-columns: minmax(130px, 0.6fr) 90px minmax(280px, 1.5fr) minmax(230px, 0.9fr); align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--color-border); } .payments-transfer-row:last-child { border-bottom: 0; } .payments-transfer-name { font-size: 16px; font-weight: 600; } .payments-transfer-check { display: flex; align-items: center; gap: 9px; color: var(--color-text-muted); cursor: pointer; } /* Compact attachment: grey card removed. Only the status line remains, shown once a file is attached; the Subir button opens the picker. */ .payments-transfer-file { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 10px; } .payments-transfer-file > span { display: none; color: var(--color-text-subtle); overflow-wrap: anywhere; white-space: normal; } .payments-transfer-file > span.has-file { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--color-primary-dark); font-weight: 600; } .payments-transfer-attachment-title { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; } .payments-transfer-file label { display: none; } .payments-transfer-file input { display: none; } .payments-transfer-actions { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px; } .payments-transfer-actions .btn { min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); } /* Green/red match indicator on payment amounts (Cantidad vs Presupuestado). */ .payments-amount-match { background: rgba(14, 159, 110, 0.13); color: var(--color-success); font-weight: 600; } .payments-amount-mismatch { background: rgba(220, 38, 38, 0.11); color: var(--color-danger); font-weight: 600; } /* ---------- Facturación (Facturas Aesthe / suplidos) ---------- */ .factura-toggle-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-4); } .factura-comment { max-width: 640px; margin-bottom: var(--space-4); } .factura-subform { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); padding: var(--space-5); margin-top: var(--space-4); } .factura-subform > h3 { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); } .factura-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: var(--space-4); } .factura-total-abonado { font-weight: 700; color: var(--color-primary-dark); } /* Compact attachment: buttons only. The dashed placeholder box is removed and the status line appears only once a file is attached. */ .factura-attach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .factura-attach-status { display: none; order: -1; flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; color: var(--color-text-subtle); } .factura-attach-status.has-file { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--color-primary-dark); font-weight: 600; } .factura-attach-pick { display: none; } .factura-grid-attachment .factura-attach { margin-top: 0; } .payments-file-link { max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--color-primary-dark); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .payments-file-link:hover { color: var(--color-primary); } .payments-file-row { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; } .payments-file-remove { flex: none; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; cursor: pointer; } .payments-file-remove:hover, .payments-file-remove:focus-visible { color: var(--color-danger); background: var(--color-danger-soft, rgba(220, 38, 38, 0.08)); } /* ---------- Simplified payments hub ---------- */ .simple-payments-view > .card + .card, .simple-payment-entry-view > .card + .card { margin-top: var(--space-5); } .simple-payments-processes-card { scroll-margin-top: var(--space-5); } .simple-payments-processes-head { align-items: flex-start; } .simple-payments-selected-patient { margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--color-primary-dark); font-size: var(--font-size-md); font-weight: 700; } .simple-payments-rollup-note { margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-xs); } .simple-payments-process-table { min-width: 840px; } .simple-payments-process-table th:nth-child(2), .simple-payments-process-table th:nth-child(3), .simple-payments-process-table th:nth-child(4) { text-align: right; } .simple-payments-patients-card .data-table tr.row-selected td { background: var(--color-primary-soft); } .simple-payments-process-label { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; } .simple-payments-amount { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } .simple-payments-amount.is-paid, .simple-payments-amount.is-settled { color: var(--color-success); font-weight: 650; } .simple-payments-amount.is-outstanding { color: var(--color-danger); font-weight: 650; } .simple-payments-view .data-table tr.row-clickable:focus-visible { outline: 3px solid rgba(14, 124, 123, 0.35); outline-offset: -3px; } .simple-payments-view .data-table tr.row-clickable:focus-visible td { background: var(--color-primary-soft); } .simple-payment-entry-back-row { margin-bottom: var(--space-5); } .simple-payment-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .simple-payment-context-grid > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); } .simple-payment-context-grid strong { overflow-wrap: anywhere; color: var(--color-primary-dark); } .simple-payment-context-label { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .simple-payment-consultation-select { display: flex; flex-direction: column; gap: var(--space-2); max-width: 620px; } .simple-payment-all-consultations-table { min-width: 1080px; } .simple-payment-all-consultations-table th, .simple-payment-all-consultations-table td { white-space: nowrap; } .simple-payment-all-consultations-table tbody th { color: var(--color-text); font-weight: 600; text-align: left; } .simple-payment-all-consultations-table td, .simple-payment-all-consultations-table tfoot th { font-variant-numeric: tabular-nums; } .simple-payment-all-consultations-table tfoot th, .simple-payment-all-consultations-table tfoot td { border-top: 2px solid var(--color-primary); background: var(--color-surface-alt); color: var(--color-primary-dark); font-weight: 700; } .simple-payment-metrics { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); } .simple-payment-fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); margin-top: var(--space-5); } .simple-payment-fee-grid > .card + .card { margin-top: 0; } .simple-payment-fee-grid > .card { height: 100%; } .simple-payment-fee-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .simple-payment-fee-metrics .payments-metric { background: var(--color-surface-alt); } .simple-payment-fee-grid + .card { margin-top: var(--space-5); } .simple-payment-fee-grid .simple-payment-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .simple-payment-form { margin: 0; } .simple-payment-form-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); align-items: end; gap: var(--space-4); } .simple-payment-comments { grid-column: span 2; } .simple-payment-comments .form-textarea { min-height: 46px; } .simple-payment-form .payments-form-actions { margin-top: var(--space-5); } .simple-payment-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5); margin-top: var(--space-5); } .simple-payment-history-grid > .card + .card { margin-top: 0; } .simple-payment-history-card .data-table { min-width: 540px; table-layout: fixed; } .simple-payment-history-card .data-table td:first-child, .simple-payment-history-card .data-table td:last-child { white-space: nowrap; } .simple-payment-history-amount { white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .simple-payment-fee-grid, .simple-payment-history-grid { grid-template-columns: 1fr; } .simple-payment-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (max-width: 680px) { .simple-payment-context-grid, .simple-payment-metrics, .simple-payment-fee-metrics, .simple-payment-form-grid, .simple-payment-fee-grid .simple-payment-form-grid { grid-template-columns: 1fr; } .simple-payments-processes-head { display: flex; flex-direction: column; } .simple-payment-form .payments-form-actions .btn { width: 100%; } .simple-payment-comments { grid-column: auto; } } .factura-anticipos { margin-top: var(--space-5); } .factura-anticipos-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .factura-anticipos-head h4 { margin: 0; font-size: var(--font-size-md); font-weight: 600; } .factura-anticipos-list { display: flex; flex-direction: column; gap: var(--space-3); } .factura-anticipo-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(150px, 1fr) auto; gap: var(--space-3); align-items: end; } .factura-anticipo-empty { color: var(--color-text-subtle); font-size: var(--font-size-sm); } .factura-anticipo-row [data-anticipo-remove] { justify-self: end; width: 46px; min-height: 42px; padding: 0; } .factura-totals { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); max-width: 460px; } .factura-actions { margin-top: var(--space-5); display: flex; justify-content: flex-end; } /* ---------- Facturas Aesthe: repeatable F_Q-ANT + derived summaries ---------- */ .factura-subform-hint { margin: calc(-1 * var(--space-3)) 0 var(--space-4); color: var(--color-text-subtle); font-size: var(--font-size-sm); } .factura-fqant-list { display: flex; flex-direction: column; gap: var(--space-4); } /* Each advance invoice is its own bordered block so the repeated Base/% IVA fields never read as one long form. */ .factura-fqant-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); } .factura-fqant-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .factura-fqant-item-head h4 { margin: 0; font-size: var(--font-size-md); font-weight: 700; color: var(--color-primary-dark); } .factura-fqant-item-head [data-fqant-remove] { width: 46px; min-height: 38px; padding: 0; flex: none; } .factura-fqant-add { margin-top: var(--space-4); } /* Sections 3 and 4 are computed, never typed into. */ .factura-summary { background: var(--color-surface); } .factura-anticipos-table-wrap { overflow-x: auto; } .factura-anticipos-table { width: 100%; min-width: 720px; } .factura-anticipos-table th[scope="row"] { white-space: nowrap; font-weight: 600; } .factura-anticipos-table tfoot tr { border-top: 2px solid var(--color-border-strong); font-weight: 700; } .factura-anticipos-table tfoot td, .factura-anticipos-table tfoot th { color: var(--color-primary-dark); } .factura-abonado-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-4); } @media (max-width: 900px) { .factura-abonado-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 1120px) { .payment-schema-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .factura-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .factura-anticipo-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 1120px) { .payments-type-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .payments-details-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .payments-comments-field { grid-column: auto; } .payments-transfer-row { grid-template-columns: 150px 90px minmax(250px, 1fr); } .payments-transfer-actions { grid-column: 3; width: min(100%, 260px); } } @media (max-width: 760px) { .payments-selected-card, .payments-overview-card, .payments-add-card, .payments-finance-lines-card, .payments-transfers-card { padding: 22px 18px; } .payments-selected-summary, .payments-remaining-grid, .payments-type-grid, .payments-details-grid, .payment-schema-grid { grid-template-columns: 1fr; } .payment-schema-comments { grid-column: auto; } .payments-transfer-row { grid-template-columns: 1fr 80px; } .payments-transfer-file, .payments-transfer-actions { grid-column: 1 / -1; width: 100%; } .payments-form-actions .btn, .payments-transfer-save-row .btn { width: 100%; } } .context-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-primary-soft); border: 1px solid rgba(14, 124, 123, 0.2); margin-bottom: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text); } .context-strip .ctx-item { display: flex; flex-direction: column; } .context-strip .ctx-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .context-strip .ctx-value { font-weight: 600; color: var(--color-primary-dark); } /* ---------- Documents ---------- */ .doc-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .doc-tab { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); cursor: pointer; font-size: var(--font-size-sm); } .doc-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .upload-area { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; color: var(--color-text-muted); background: var(--color-surface-alt); margin-bottom: var(--space-4); } .upload-area strong { color: var(--color-primary); } .file-list { display: flex; flex-direction: column; gap: var(--space-2); } .file-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .file-row .file-name { font-weight: 500; } .file-row .file-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); } /* ---------- Forms review ---------- */ .external-inbox-page { gap: var(--space-5); } .external-inbox-list-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .external-inbox-open-hint { color: var(--color-text-muted); font-size: var(--font-size-xs); } .external-detail-page-toolbar { display: flex; align-items: center; justify-content: flex-start; } .external-inbox-count, .external-detail-meta { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .external-inbox-actions-col, .external-inbox-actions-cell { width: 1%; white-space: nowrap; text-align: right; } .external-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .external-cell-stack strong { font-weight: 600; color: var(--color-text); } .external-cell-stack span { color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; } .external-detail-header { align-items: flex-start; } .external-detail-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .external-detail-content { display: grid; gap: var(--space-5); } .external-detail-section { padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .external-detail-section:first-child { padding-top: 0; border-top: 0; } .external-detail-section h3 { margin: 0 0 var(--space-4); color: var(--color-text); font-size: var(--font-size-base); font-weight: 600; } .external-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; } .external-detail-field { min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-alt); } .external-detail-field dt { margin-bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); } .external-detail-field dd { margin: 0; color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; overflow-wrap: anywhere; white-space: pre-wrap; } .split-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); } @media (max-width: 1100px) { .split-layout { grid-template-columns: 1fr; } } .review-detail dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-sm); } .review-detail dt { color: var(--color-text-muted); } .review-detail dd { margin: 0; color: var(--color-text); font-weight: 500; } @media (max-width: 900px) { .external-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .external-detail-grid { grid-template-columns: 1fr; } } /* ---------- Public Formulario contacto ---------- */ .public-form-page { min-height: 100vh; padding: var(--space-7) var(--space-5); background: radial-gradient(900px 420px at 100% 0, rgba(20, 184, 166, 0.1), transparent), linear-gradient(180deg, #eef3f5, #e5edef); } .public-form-shell { width: 100%; max-width: 1120px; margin: 0 auto; } .public-form-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .public-form-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: var(--font-size-lg); font-weight: 700; } .public-form-content { display: flex; flex-direction: column; gap: var(--space-5); } .public-form-view { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .public-form-welcome { padding: var(--space-7) var(--space-7) var(--space-5); background: linear-gradient(135deg, rgba(14, 124, 123, 0.1), rgba(20, 184, 166, 0.03)); border-bottom: 1px solid var(--color-border); } .public-form-welcome h1 { margin: 0 0 var(--space-2); font-size: clamp(24px, 4vw, 36px); } .public-form-welcome p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-lg); } .public-form-welcome .btn { margin-top: var(--space-4); } .public-form-status { margin: var(--space-5) var(--space-7) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); color: var(--color-text-muted); } .public-form-status p { margin: 0; } .public-form-status.is-error { border-color: rgba(220, 38, 38, 0.28); background: rgba(220, 38, 38, 0.06); color: var(--color-danger); } .public-form-status.is-success { border-color: rgba(14, 159, 110, 0.28); background: rgba(14, 159, 110, 0.07); color: var(--color-success); } .public-form { padding: var(--space-7); } .public-form-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .public-form-section { margin-top: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-border); border-left-width: 5px; border-radius: var(--radius-lg); } .public-form-section:first-child { margin-top: 0; } .public-form-section--blue { border-left-color: #5b9bd5; background: #ddebf7; } .public-form-section--orange { border-left-color: #ed7d31; background: #fce4d6; } .public-form-section .card-title { margin-bottom: var(--space-2); } .public-form-section .form-control, .public-form-section .form-select, .public-form-section .form-textarea { background: rgba(255, 255, 255, 0.88); } .public-form-identifiers { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); } .public-form-identifiers .form-control[readonly] { background: #e8eef0; border-color: transparent; font-family: "Consolas", "Courier New", monospace; font-weight: 600; } .public-form-conditional { padding: var(--space-3); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.5); } .public-form-choice-grid, .public-form-month-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); } .public-form-choice-grid .form-check, .public-form-month-options .form-check { align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.55); } .public-form-choice-grid input, .public-form-month-options input { accent-color: var(--color-primary); } .public-form-photo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } .public-form-photo-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid rgba(100, 116, 139, 0.18); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.62); } .public-form-photo-reference { width: 100%; height: 170px; object-fit: contain; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.78); } .public-form-photo-field input[type="file"] { min-width: 0; font-size: var(--font-size-xs); } .public-form-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .public-form-month-group { padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.55); } .public-form-month-group h3 { margin: 0 0 var(--space-3); } .public-form-actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); } .public-form-actions .btn { min-width: 190px; } .public-form-success { padding: 64px var(--space-7); text-align: center; } .public-form-success h2 { margin: 0 0 var(--space-2); color: var(--color-primary-dark); font-size: var(--font-size-xxl); } .public-form-success p { margin: 0; color: var(--color-text-muted); } .required-mark { color: var(--color-danger); } .form-help { margin: var(--space-1) 0 0; padding: 6px 8px; border-radius: var(--radius-sm); background: #e2f0d9; color: #365c2d; font-size: var(--font-size-xs); line-height: 1.45; } .module-card[aria-disabled="true"] { cursor: default; opacity: 0.68; } .module-card[aria-disabled="true"]:hover { border-color: var(--color-border); box-shadow: var(--shadow-card); transform: none; } #externalLinksHistoryBody td:nth-child(4) { max-width: 320px; overflow-wrap: anywhere; } @media (max-width: 960px) { .public-form-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .public-form-page { padding: var(--space-4); } .public-pre-surgical-page .form-grid, .public-pre-surgical-page .form-grid.form-grid-3 { grid-template-columns: minmax(0, 1fr); } .public-pre-surgical-page .form-group { min-width: 0; } .public-form-welcome, .public-form, .public-form-success { padding: var(--space-5); } .public-form-status { margin-right: var(--space-5); margin-left: var(--space-5); } .public-form-section { padding: var(--space-4); } .public-form-choice-grid, .public-form-months { grid-template-columns: 1fr; } .public-form-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .public-form-photo-grid { grid-template-columns: 1fr; } .public-form-photo-reference { height: 210px; } .public-form-actions .btn { width: 100%; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .form-grid, .form-grid.form-grid-3 { grid-template-columns: 1fr; } .form-group.span-2, .form-group.span-3 { grid-column: auto; } .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } .app-shell.sidebar-open .sidebar { transform: translateX(0); } .topbar-menu { display: inline-flex; } .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { padding: var(--space-5) var(--space-4) var(--space-7); } } @media (max-width: 620px) { .topbar { gap: var(--space-2); padding: 0 var(--space-3); } .topbar-actions { gap: var(--space-2); } .language-switcher { padding: 0 7px; } .user-chip { display: none; } } /* ---------- Login ---------- */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: radial-gradient(1100px 560px at 100% -10%, rgba(20, 184, 166, 0.12), transparent), linear-gradient(180deg, #eef3f5, #e2edee); } .login-card { width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-7); } .login-language-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); } .login-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .login-brand .brand-mark { width: 44px; height: 44px; } .login-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .login-brand-title { font-weight: 700; color: var(--color-text); font-size: var(--font-size-lg); } .login-brand-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); } .login-heading { margin: 0 0 var(--space-1); font-size: 24px; font-weight: 700; color: var(--color-text); } .login-sub { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--font-size-sm); } .login-form { display: flex; flex-direction: column; gap: var(--space-4); } .login-field { display: flex; flex-direction: column; gap: var(--space-2); } .login-field > span { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); } .login-error { color: var(--color-danger); font-size: var(--font-size-sm); } .login-error:empty { display: none; } /* Sign-out control in the top bar. */ .topbar-signout { display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .topbar-signout:hover { color: var(--color-danger); border-color: var(--color-danger); } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; background: var(--color-text); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .toast.show { opacity: 1; transform: translateY(0); } .toast.toast-success { background: var(--color-success); } .toast.toast-danger { background: var(--color-danger); } .toast.toast-warning { background: var(--color-warning); } /* ========================================================================== Normalize consultation / preop / surgery text sizes. These three views were built with an oversized type scale; bring their text in line with the rest of the app (defined last so it wins). ========================================================================== */ .consultations-view .card-title, .preop-view .card-title, .surgery-view .card-title, .surgery-procedures-heading h3 { font-size: var(--font-size-xl); } .consultations-selected-patient, .preop-selected-patient, .surgery-selected-patient { font-size: var(--font-size-xxl); } .consultations-selected-process, .preop-selected-process, .surgery-selected-process { font-size: var(--font-size-md); } .consultation-field-label, .preop-field-label, .surgery-field-label, .surgery-procedure-field > label, .preop-comments-label, .surgery-comments-label, .preop-check, .preop-file-button { font-size: var(--font-size-md); } .consultations-view .form-control, .consultations-view .form-select, .consultations-view .form-textarea, .preop-view .form-control, .preop-view .form-select, .preop-view .form-textarea, .surgery-view .form-control, .surgery-view .form-select, .surgery-view .form-textarea { font-size: var(--font-size-base); } .preop-back, .surgery-back { font-size: var(--font-size-sm); } /* ========================================================================== Match consultation / preop / surgery cards & fields to the standard sizing used on the rest of the app (e.g. CRM Sales). ========================================================================== */ /* Standard card padding; drop the oversized min-heights that leave big gaps. */ .consultations-selected-card, .consultations-data-card, .consultations-next-card, .consultations-presupuesto-card, .preop-selected-card, .preop-tests-card, .preop-questionnaire-card, .preop-complementary-card, .surgery-selected-card, .surgery-planned-card, .surgery-performed-card { padding: var(--space-6); min-height: 0; } /* Field controls: same height/padding/radius as the standard .form-control. */ .consultations-view .form-control, .consultations-view .form-select, .consultations-view .form-textarea, .preop-view .form-control, .preop-view .form-select, .preop-view .form-textarea, .surgery-view .form-control, .surgery-view .form-select, .surgery-view .form-textarea { min-height: 0; padding: 10px 12px; border-radius: var(--radius-md); } /* Compact fields: remove the oversized field-box padding and min-heights. */ .preop-field { padding: var(--space-4); min-height: 0; } .preop-checkbox-field, .preop-file-table-field, .preop-file-button-field, .preop-photos-field { min-height: 0; } .preop-checkbox-field { padding: 14px 16px; } /* Card-to-card spacing back to the app default. */ .consultations-data-card + .consultations-next-card, .preop-selected-card + .preop-tests-card, .preop-tests-card + .preop-questionnaire-card, .preop-questionnaire-card + .preop-complementary-card, .surgery-selected-card + .surgery-planned-card, .surgery-planned-card + .surgery-performed-card { margin-top: var(--space-5); } /* Page heads and back rows use the standard tight spacing. */ .consultations-page-head, .preop-page-head, .surgery-page-head, .procedure-catalog-head { margin-bottom: var(--space-3); } /* Back buttons match the standard .btn look (size, colour and border). */ .consultations-back, .preop-back, .surgery-back { min-width: 0; min-height: 0; padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); } .consultations-back:hover, .preop-back:hover, .surgery-back:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); } /* ---- Theme consistency: standard corner radii (the app uses 8px / 12px tokens; these views used ad-hoc 5–11px radii). ---- */ .consultations-view .btn, .preop-view .btn, .surgery-view .btn, .consultations-view .form-control, .consultations-view .form-select, .consultations-view .form-textarea, .preop-view .form-control, .preop-view .form-select, .preop-view .form-textarea, .surgery-view .form-control, .surgery-view .form-select, .surgery-view .form-textarea, .preop-field, .preop-check, .preop-status-row, .consultation-record-id { border-radius: var(--radius-md); } /* "Selected process/patient" cards: stack the data vertically and keep the card compact. */ .consultations-selected-summary, .surgery-selected-summary, .preop-selected-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } .selected-process-card, .consultations-selected-card, .surgery-selected-card, .preop-selected-card { max-width: 460px; } /* Internal pre-surgical checklist (XLSX sheet 5). */ .checklist-internal-view { max-width: 1120px; } .checklist-back-row { margin-bottom: var(--space-6); } .checklist-selected-patient { color: var(--color-text-muted); font-weight: 600; } .checklist-load-status { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text-muted); } .checklist-load-status p { margin: 0; } .checklist-load-status.is-error { border-color: rgba(220, 38, 38, 0.28); background: rgba(220, 38, 38, 0.06); color: var(--color-danger); } .checklist-form, .checklist-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .checklist-section { margin-top: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .checklist-section:first-child { margin-top: 0; } .checklist-section--blue { background: #ddebf7; } .checklist-section--orange { background: #fce4d6; } .checklist-section .card-title { margin-bottom: var(--space-2); } .checklist-actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); } .checklist-actions .btn { min-width: 0; } .checklist-save-status { margin: var(--space-3) 0 0; color: var(--color-text-muted); text-align: right; } .checklist-save-status.is-error { color: var(--color-danger); } .checklist-save-status.is-success { color: var(--color-success); } .checklist-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; } .checklist-summary-grid > div { min-width: 0; padding: var(--space-4); border: 1px solid #e4eaed; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.76); } .checklist-summary-grid dt { margin-bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .checklist-summary-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--color-text); font-weight: 600; } .checklist-procedures { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid #e4eaed; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.76); } .checklist-procedures h3, .checklist-subtitle { margin: 0 0 var(--space-3); font-size: var(--font-size-md); color: var(--color-text); } .checklist-procedures ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); margin: 0; padding-left: var(--space-5); } .checklist-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .checklist-choice { display: flex; align-items: center; gap: 13px; min-height: 0; padding: var(--space-4); border: 1px solid #e4eaed; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.82); color: var(--color-text-muted); font-size: 16px; cursor: pointer; } .checklist-choice:hover, .checklist-choice:has(input:focus-visible) { border-color: var(--color-primary); } .checklist-choice input { width: 21px; height: 21px; margin: 0; flex: 0 0 auto; accent-color: var(--color-primary); } .checklist-choice input:focus-visible { outline: 3px solid rgba(14, 124, 123, 0.15); outline-offset: 2px; } .checklist-choice span { line-height: 1.4; } .checklist-auto-grid { margin-top: 0; } .checklist-auto-grid .checklist-choice { background: rgba(225, 246, 231, 0.84); cursor: default; } .checklist-auto-grid .checklist-choice:hover { border-color: var(--color-border); } .checklist-auto-grid input:disabled { opacity: 1; } .checklist-subtitle { margin-top: var(--space-6); } /* Auto-fit rather than a fixed count: the payments card carries eight budget, paid, and outstanding-balance tiles. */ .checklist-payment-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 820px) { .checklist-summary-grid, .checklist-payment-grid, .checklist-choice-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .checklist-section { padding: var(--space-4); } .checklist-actions .btn { width: 100%; } .checklist-summary-grid, .checklist-payment-grid, .checklist-choice-grid, .checklist-procedures ol { grid-template-columns: 1fr; } }