:root { --primary: #17476f; --primary-strong: #103754; --primary-soft: #eaf3f9; --accent: #2f89a8; --sidebar-bg: #17476f; --bg: #f3f6f9; --surface: #ffffff; --text: #203040; --muted: #6a7b8b; --line: #dde5eb; --success: #247551; --warning: #a66c12; --danger: #a83c47; --shadow: 0 12px 34px rgba(24, 56, 84, 0.08); --radius: 16px; --card: var(--surface); --border: var(--line); --muted-text: var(--muted); } * { box-sizing: border-box; } html, body { line-height: 1.45; } strong, b { font-weight: 600; } h1, h2, h3, h4, h5, h6 { font-weight: 650; } html, body { margin: 0; min-height: 100%; font-family: Aptos, "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: var(--bg); font-weight: 400; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } /* Login */ .login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); background: linear-gradient(135deg, #103754 0%, #17476f 48%, #2f89a8 100%); } .login-hero { color: white; padding: 72px clamp(32px, 6vw, 96px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .login-hero::after { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; right: -160px; bottom: -210px; box-shadow: 0 0 0 60px rgba(255,255,255,.04), 0 0 0 120px rgba(255,255,255,.03); } .brand { display: flex; align-items: center; gap: 12px; font-weight:600; font-size: 23px; letter-spacing: -.4px; } .brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.25); font-size: 22px; } .hero-copy { max-width: 700px; position: relative; z-index: 1; } .hero-copy h1 { margin: 0 0 18px; font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -2px; } .hero-copy p { margin: 0; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.84); max-width: 640px; } .hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; } .hero-pill { padding: 9px 13px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.10); border-radius: 999px; font-size: 13px; } .login-panel { background: #f8fafc; padding: 36px; display: grid; place-items: center; } .login-card { background: white; width: 100%; max-width: 430px; padding: 34px; border-radius: 22px; box-shadow: 0 20px 58px rgba(10, 38, 58, .20); } /* Landing pública de lanzamiento */ .landing-shell { min-height: 100vh; background: linear-gradient(135deg,#f7fbff 0%,#eef7fb 48%,#ffffff 100%); color: #102a43; } .landing-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px,5vw,72px); position:sticky; top:0; z-index:10; background:rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom:1px solid rgba(23,71,111,.10); } .landing-brand { display:flex; align-items:center; gap:10px; font-size:20px; color:#17476f; } .landing-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .landing-hero-section { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr); gap:34px; align-items:center; padding:56px clamp(20px,6vw,88px) 36px; } .launch-badge { display:inline-flex; align-items:center; padding:7px 12px; border-radius:999px; background:#dff4fb; color:#17476f; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .landing-copy h1 { font-size:clamp(34px,5vw,62px); line-height:.98; margin:18px 0 18px; letter-spacing:-2px; color:#103754; } .landing-copy p { color:#49657b; font-size:18px; line-height:1.65; max-width:760px; margin:0 0 24px; } .landing-cta { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 12px; } .btn-lg { padding:14px 20px; font-size:15px; border-radius:14px; } .landing-secure { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:#ecfdf5; color:#047857; font-weight:600; font-size:13px; margin-top:8px; } .landing-secure.warning { background:#fff7ed; color:#b45309; } .landing-proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .landing-proof span { background:#fff; border:1px solid #dbe7ef; border-radius:999px; padding:8px 12px; color:#466175; font-size:13px; box-shadow:0 8px 18px rgba(16,55,84,.06); } .landing-card { background:#ffffff; border:1px solid #d8e7f0; border-radius:28px; padding:28px; box-shadow:0 24px 70px rgba(16,55,84,.16); } .landing-price span { color:#5b7185; font-weight:600; } .landing-price strong { display:block; font-size:42px; letter-spacing:-1.5px; color:#17476f; margin-top:6px; } .landing-price small { color:#6b7f90; } .landing-feature-list { display:grid; gap:12px; margin:24px 0; color:#243b53; } .landing-feature-list span { padding:11px 12px; border-radius:14px; background:#f3f8fb; border:1px solid #e0edf4; } .landing-modules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:20px clamp(20px,6vw,88px) 64px; } .landing-modules article { background:#fff; border:1px solid #dbe7ef; border-radius:22px; padding:20px; box-shadow:0 12px 30px rgba(16,55,84,.08); } .landing-modules strong { display:block; color:#17476f; font-size:18px; margin-bottom:8px; } .landing-modules span { color:#5b7185; line-height:1.55; } @media (max-width: 900px) { .landing-hero-section { grid-template-columns:1fr; padding-top:34px; } .landing-modules { grid-template-columns:1fr; } .landing-nav { align-items:flex-start; } } @media (max-width: 620px) { .landing-nav { display:grid; } .landing-actions, .landing-cta { width:100%; } .landing-actions .btn, .landing-cta .btn { flex:1; } .landing-card { padding:22px; } } body.dark-mode .landing-shell { background:linear-gradient(135deg,#071927 0%,#103754 54%,#0f2f45 100%); color:#f8fafc; } body.dark-mode .landing-nav, body.dark-mode .landing-card, body.dark-mode .landing-modules article, body.dark-mode .landing-proof span { background:#102a43; border-color:#24465e; color:#e2e8f0; } body.dark-mode .landing-copy h1, body.dark-mode .landing-price strong, body.dark-mode .landing-brand, body.dark-mode .landing-modules strong { color:#f8fafc; } body.dark-mode .landing-copy p, body.dark-mode .landing-modules span { color:#cbd5e1; } body.dark-mode .landing-feature-list span { background:#17324d; border-color:#24465e; color:#e2e8f0; } .login-card h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.8px; } .login-card p { color: var(--muted); margin: 0 0 24px; line-height: 1.55; } .demo-note { background: var(--primary-soft); color: var(--primary); border-radius: 12px; padding: 12px 14px; font-size: 13px; margin: 14px 0; line-height: 1.45; } /* Form */ .field { display: grid; gap: 7px; margin-bottom: 14px; } .field label { font-size: 13px; color: #526474; font-weight:600; } .input, .select, .textarea { width: 100%; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 11px; padding: 11px 12px; outline: none; transition: .2s border, .2s box-shadow; } .input:focus, .select:focus, .textarea:focus { border-color: #7bb4ca; box-shadow: 0 0 0 4px rgba(47,137,168,.12); } .textarea { min-height: 96px; resize: vertical; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .form-grid .field { margin: 0; } .form-grid .wide { grid-column: 1 / -1; } .btn { border: 0; border-radius: 11px; padding: 10px 14px; font-weight:600; background: #edf2f6; color: #304454; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .16s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(.98); } .btn-primary { background: var(--primary); color: white; } .btn-accent { background: var(--accent); color: white; } .btn-danger { background: #fae9eb; color: var(--danger); } .btn-success { background: #e4f4ec; color: var(--success); } .btn-block { width: 100%; } .btn-ghost { background: transparent; } /* Layout */ .app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px 1fr; } .sidebar { background: var(--sidebar-bg); color: #e7f1f7; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { padding: 6px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; } .sidebar-brand-wrap { background: #ffffff; border-radius: 14px; padding: 9px 10px; margin: 0 0 14px; min-height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 8px 20px rgba(7, 36, 62, .16); } .sidebar-logo { width: 100%; max-width: 226px; height: 54px; display: block; object-fit: contain; } .sidebar .brand-mark { width: 38px; height: 38px; border-radius: 12px; } .nav-section { color: rgba(230,241,248,.55); font-size: 10px; font-weight:600; letter-spacing: 1.2px; text-transform: uppercase; padding: 16px 10px 7px; } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; color: rgba(236,246,251,.80); background: transparent; border: 0; border-radius: 10px; padding: 10px; text-align: left; font-size: 14px; margin: 2px 0; } .nav-link:hover { background: rgba(255,255,255,.07); color: white; } .nav-link.active { background: rgba(91,173,201,.24); color: white; box-shadow: inset 3px 0 0 #70c0d6; } .nav-icon { width: 20px; display: grid; place-items: center; font-size: 16px; } .sidebar-footer { margin-top: 18px; padding: 14px 10px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(236,246,251,.7); font-size: 12px; line-height: 1.6; } .main { min-width: 0; } .topbar { height: 70px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 26px; position: sticky; top: 0; z-index: 5; } .topbar-left { display: flex; align-items: center; gap: 14px; } .mobile-menu { display: none; } .breadcrumb { color: var(--muted); font-size: 13px; } .workspace-badge { padding: 7px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight:600; } .user-chip { display: flex; align-items: center; gap: 10px; } .avatar { width: 38px; height: 38px; background: #d8ebf2; color: var(--primary); display: grid; place-items: center; border-radius: 50%; font-weight:600; } .content { padding: 26px; } .page-header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 20px; } .page-title h1 { margin: 0; font-size: 29px; letter-spacing: -.8px; } .page-title p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; font-size: 14px; } .header-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } /* Cards */ .grid { display: grid; gap: 16px; } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { background: var(--surface); border: 1px solid #e4eaef; border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 18px; } .stat { padding: 17px; } .stat-label { color: var(--muted); font-size: 12px; font-weight:600; text-transform: uppercase; letter-spacing: .7px; } .stat-value { font-size: 30px; font-weight:600; letter-spacing: -1.2px; margin-top: 6px; } .stat-sub { color: var(--muted); font-size: 12px; margin-top: 5px; } .card-title { padding: 17px 18px 12px; font-weight:600; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-body { padding: 16px 18px 18px; } /* Tables */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 720px; } th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; font-weight:600; padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; } td { padding: 12px; border-bottom: 1px solid #edf1f4; font-size: 13px; vertical-align: middle; } tr:last-child td { border-bottom: 0; } .actions { display: flex; gap: 5px; flex-wrap: wrap; } .icon-btn { border: 0; border-radius: 8px; padding: 7px 9px; background: #edf3f6; color: #496170; } .icon-btn:hover { background: #e2ebf0; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight:600; background: #edf3f6; color: #4a6171; white-space: nowrap; } .badge.success { background: #e4f4ec; color: var(--success); } .badge.warning { background: #fff3dc; color: var(--warning); } .badge.danger { background: #fae9eb; color: var(--danger); } .badge.info { background: #e5f3fa; color: #276980; } /* Dashboard visuals */ .bar-chart { display: flex; gap: 12px; align-items: flex-end; height: 170px; padding: 18px 6px 2px; } .bar { flex: 1; min-width: 20px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #5cadc6, #1f6687); position: relative; } .bar span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 11px; } .list { display: grid; gap: 10px; } .list-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid #edf1f4; padding: 0 0 10px; } .list-item:last-child { border-bottom: 0; padding-bottom: 0; } .list-main strong { font-size: 13px; display: block; } .list-main span { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; } /* Agenda */ .agenda-grid { display: grid; grid-template-columns: 90px repeat(5, minmax(150px, 1fr)); min-width: 920px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .agenda-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 63px; padding: 6px; font-size: 12px; } .agenda-head { min-height: auto; padding: 10px 7px; font-weight:600; color: #4f6474; background: #f7fafb; } .agenda-time { color: var(--muted); background: #fbfcfd; font-weight:600; } .appointment { border-left: 4px solid var(--accent); background: #eaf6fa; color: #28586a; border-radius: 7px; padding: 6px; font-size: 11px; line-height: 1.35; } .appointment.confirmed { border-color: var(--success); background: #e6f4ec; color: #265e47; } .appointment.pending { border-color: var(--warning); background: #fff5df; color: #77551a; } /* Config */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .tab { border: 1px solid var(--line); background: white; color: #506676; padding: 9px 12px; border-radius: 999px; font-weight:600; font-size: 13px; } .tab.active { background: var(--primary); color: white; border-color: var(--primary); } .switch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf1f4; } .switch-row:last-child { border-bottom: 0; } .switch-copy strong { display: block; font-size: 13px; } .switch-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; } .switch { width: 46px; height: 26px; border: 0; border-radius: 999px; background: #c7d2d9; padding: 3px; transition: .2s; } .switch::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; transition: .2s; box-shadow: 0 1px 5px rgba(0,0,0,.18); } .switch.on { background: var(--success); } .switch.on::after { transform: translateX(20px); } .notice { border-radius: 12px; padding: 13px 14px; font-size: 13px; line-height: 1.55; background: #eaf3f9; color: #315f77; border: 1px solid #d5e8f2; } .notice.warning { background: #fff7e8; color: #75551c; border-color: #f2dfb7; } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(18, 37, 54, .54); display: grid; place-items: center; padding: 20px; z-index: 30; } .modal { width: min(760px, 100%); max-height: min(90vh, 900px); overflow-y: auto; background: white; border-radius: 18px; box-shadow: 0 22px 80px rgba(0,0,0,.22); } .modal-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 17px 19px; border-bottom: 1px solid var(--line); } .modal-header h3 { margin: 0; font-size: 18px; } .modal-body { padding: 18px 19px; } .modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 19px 19px; } .close { border: 0; background: transparent; font-size: 20px; color: var(--muted); } .toast-wrap { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 60; } .toast { background: #153e5d; color: white; padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow); min-width: 250px; font-size: 13px; animation: toast-in .18s ease; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } } .empty { padding: 25px; text-align: center; color: var(--muted); font-size: 13px; } /* responsive */ @media (max-width: 1120px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 880px) { .login-shell { display: block; background: #f8fafc; } .login-hero { min-height: 300px; padding: 32px 24px; } .hero-copy h1 { font-size: 42px; margin-top: 38px; } .hero-copy p { font-size: 15px; } .login-panel { padding: 22px; margin-top: -28px; position: relative; z-index: 2; } .app-shell { display: block; } .sidebar { position: fixed; z-index: 20; left: -290px; width: 276px; transition: .22s ease; box-shadow: 10px 0 32px rgba(0,0,0,.22); } .sidebar.open { left: 0; } .mobile-menu { display: inline-flex; } .topbar { padding: 0 15px; } .content { padding: 17px; } .page-header { display: block; } .header-actions { justify-content: flex-start; margin-top: 13px; } .user-chip .user-name { display: none; } } @media (max-width: 620px) { .grid-4, .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; } .login-card { padding: 25px; } .hero-pills { display: none; } .content { padding: 14px; } .page-title h1 { font-size: 25px; } .stat-value { font-size: 25px; } } /* Phase 4.1 */ .phone-grid { display: grid; grid-template-columns: minmax(210px, 1.2fr) minmax(160px, 1fr); gap: 10px; } .schedule-editor { display: grid; gap: 8px; } .schedule-row { border: 1px solid var(--line); border-radius: 12px; padding: 11px; display: grid; gap: 9px; background: var(--surface); } .day-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); } .day-toggle input { width: 17px; height: 17px; accent-color: var(--primary); } .schedule-times { display: grid; grid-template-columns: minmax(110px, 1fr) 18px minmax(110px, 1fr) auto minmax(110px, 1fr) 18px minmax(110px, 1fr); gap: 8px; align-items: center; } .schedule-times.disabled { opacity: .48; } .schedule-times .input { padding: 9px; } .meal-label { font-size: 11px; color: var(--muted); font-weight:600; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; } .color-input { width: 100%; min-height: 46px; padding: 4px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); } .theme-preview { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); background: var(--bg); } .pdf-preview { margin-top: 16px; min-height: 235px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #fff; color: #263746; box-shadow: 0 8px 24px rgba(25,55,75,.07); } .pdf-head { background: var(--pdf-primary); color: #fff; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .pdf-head span { font-size: 12px; opacity: .9; } .pdf-line { height: 6px; background: var(--pdf-secondary); } .pdf-body { padding: 16px; } .pdf-body h4 { margin: 0 0 12px; color: var(--pdf-primary); } .pdf-body p { margin: 5px 0; font-size: 12px; } .pdf-footer { border-top: 1px solid #e4ebef; padding: 10px 16px; color: #6d7d88; font-size: 11px; } .sticky-save { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; margin-top: 16px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.88); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); z-index: 4; } .section-box { border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: #fbfcfd; } .section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .section-head strong, .section-head span { display: block; } .section-head span { color: var(--muted); font-size: 12px; margin-top: 3px; } .specialty-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } .specialty-row .field { margin: 0; } .specialty-remove { margin-bottom: 1px; } .detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; } .detail-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; } .detail-grid strong, .detail-grid span { display: block; } .detail-grid span { margin-top: 5px; color: var(--muted); font-size: 13px; } .detail-grid .wide { grid-column: 1 / -1; } .export-grid { display: grid; gap: 10px; margin-top: 14px; } .export-card { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfcfd; transition: .16s ease; } .export-card:hover { transform: translateY(-1px); border-color: var(--accent); } .export-card strong, .export-card span { display: block; } .export-card span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; } .modal-wide { width: min(980px,100%); } .asset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .asset-card { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: #fbfcfd; } .asset-thumb { width: 88px; height: 88px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #fff; color: var(--muted); font-size: 11px; text-align: center; padding: 6px; } .asset-thumb img { width: 100%; height: 100%; object-fit: contain; } .asset-copy strong, .asset-copy span, .asset-copy small { display: block; } .asset-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 4px; } .asset-copy small { color: var(--muted); margin-top: 8px; } .asset-input { margin-top: 10px; font-size: 12px; } .asset-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; } .pdf-brand { display: flex; align-items: center; gap: 10px; } .pdf-brand img { width: 54px; height: 54px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px; } .pdf-brand span { display: block; margin-top: 4px; } .pdf-crest img { width: 54px; height: 54px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px; } .storage-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .storage-head span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; } .storage-bar { height: 12px; border-radius: 999px; overflow: hidden; background: #e7eef3; margin-top: 16px; } .storage-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--accent)); } .storage-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 8px; } :root[data-theme="dark"] .asset-card { background:#1b2934; } :root[data-theme="dark"] { --bg:#17232d; --surface:#22313d; --text:#edf5f8; --muted:#adc0ca; --line:#3a4b57; --primary-soft:#243f50; --shadow:0 12px 34px rgba(0,0,0,.18); } :root[data-theme="dark"] .main, :root[data-theme="dark"] .content { background:var(--bg); } :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .sticky-save { background:var(--surface); color:var(--text); } :root[data-theme="dark"] .section-box, :root[data-theme="dark"] .theme-preview, :root[data-theme="dark"] .export-card { background:#1b2934; } @media (max-width: 900px) { .asset-grid { grid-template-columns: 1fr; } .schedule-times { grid-template-columns: 1fr 18px 1fr; } .meal-label { grid-column: 1 / -1; margin-top: 3px; } .specialty-row { grid-template-columns: 1fr; } .phone-grid { grid-template-columns: 1fr; } } /* Phase 5A: Catálogo maestro de pacientes */ .patient-toolbar { display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(170px,.7fr) minmax(190px,.8fr); gap:12px; align-items:end; margin-bottom:14px; } .patient-toolbar .field { margin:0; } .patient-name strong, .patient-name span { display:block; } .patient-name span { color:var(--muted); font-size:12px; margin-top:4px; } .pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:14px; color:var(--muted); font-size:12px; } .pagination .actions { display:flex; align-items:center; gap:10px; } .patient-detail-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; } .patient-detail-head h3 { margin:0; font-size:20px; } .patient-detail-head p { margin:6px 0 0; color:var(--muted); font-size:13px; } .patient-avatar { width:74px; height:74px; flex:0 0 74px; display:grid; place-items:center; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--primary-soft); color:var(--primary); font-size:30px; } .patient-avatar img { width:100%; height:100%; object-fit:cover; } .btn:disabled { opacity:.48; cursor:not-allowed; } @media (max-width: 820px) { .patient-toolbar { grid-template-columns:1fr; } .pagination { align-items:flex-start; flex-direction:column; } } /* Phase 5A.1: avisos internos del sistema */ .system-dialog-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(17,34,48,.58); backdrop-filter:blur(3px); } .system-dialog { width:min(520px,100%); display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:20px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 90px rgba(0,0,0,.28); animation:dialog-in .16s ease; } .system-dialog-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; font-size:20px; font-weight:650; background:#e5f3fa; color:#276980; } .system-dialog.warning .system-dialog-icon { background:#fff3dc; color:var(--warning); } .system-dialog.danger .system-dialog-icon { background:#fae9eb; color:var(--danger); } .system-dialog.success .system-dialog-icon { background:#e4f4ec; color:var(--success); } .system-dialog-copy h3 { margin:0; font-size:18px; } .system-dialog-copy p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; } .system-dialog-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:9px; margin-top:4px; } @keyframes dialog-in { from { opacity:0; transform:translateY(8px) scale(.985); } } /* Phase 5A.2: PWA instalable y experiencia responsive */ .sidebar-overlay { display:none; } .install-app-btn { background:var(--primary-soft); color:var(--primary); white-space:nowrap; } @media (display-mode: standalone) { .install-app-btn { display:none !important; } body { overscroll-behavior-y:none; } } @media (max-width: 880px) { .sidebar-overlay { display:block; position:fixed; inset:0; z-index:18; border:0; padding:0; background:rgba(8,26,40,.48); opacity:0; visibility:hidden; pointer-events:none; transition:.2s ease; } .sidebar-overlay.open { opacity:1; visibility:visible; pointer-events:auto; } .sidebar { z-index:20; } .topbar { min-height:64px; height:auto; padding:8px 12px; } .topbar-left { min-width:0; } .breadcrumb { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; } .workspace-badge { display:none; } .install-app-btn { padding:9px 10px; font-size:12px; } .user-chip { gap:6px; } .avatar { width:34px; height:34px; font-size:12px; } .content { padding:16px 16px calc(148px + env(safe-area-inset-bottom)); } .modal-backdrop { padding:10px; align-items:end; } .modal { width:100%; max-height:92vh; border-radius:18px 18px 0 0; } .modal-header, .modal-body, .modal-footer { padding-left:15px; padding-right:15px; } .system-dialog-backdrop { padding:12px; } } @media (max-width: 620px) { .topbar { gap:6px; } .mobile-menu { padding:9px 11px; } .breadcrumb { max-width:32vw; font-size:12px; } .install-app-btn { font-size:0; width:38px; min-width:38px; height:38px; padding:0; } .install-app-btn::before { content:'⇩'; font-size:18px; line-height:1; } .btn-ghost#logout { padding:8px 7px; font-size:12px; } .content { padding:12px 12px calc(146px + env(safe-area-inset-bottom)); } .card-pad, .card-body, .stat { padding:14px; } .page-header { margin-bottom:14px; } .page-title h1 { font-size:23px; } .page-title p { font-size:13px; } .header-actions .btn { width:100%; } .tabs { gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; scrollbar-width:thin; } .tab { flex:0 0 auto; } .modal-footer { flex-direction:column-reverse; } .modal-footer .btn { width:100%; } .system-dialog { grid-template-columns:38px minmax(0,1fr); gap:11px; padding:16px; } .system-dialog-icon { width:38px; height:38px; } .system-dialog-actions { flex-direction:column-reverse; } .system-dialog-actions .btn { width:100%; } .detail-grid { grid-template-columns:1fr; } .detail-grid .wide { grid-column:auto; } .patient-detail-head { align-items:flex-start; } .toast-wrap { left:12px; right:12px; bottom:12px; } .toast { min-width:0; width:100%; } .storage-meta { display:grid; gap:4px; } } /* Fase 5B: expediente clínico e historia clínica */ .patient-link{border:0;background:transparent;padding:0;color:var(--primary);font:inherit;text-align:left;cursor:pointer}.patient-link:hover{text-decoration:underline} .back-row{display:flex;margin-bottom:14px}.patient-record-header{display:flex;gap:18px;align-items:center;padding:18px;margin-bottom:12px}.record-photo{width:94px;height:94px;border-radius:18px;background:#edf3f8;display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;flex:0 0 auto}.record-photo img{width:100%;height:100%;object-fit:cover}.record-identity{min-width:0}.record-folio{font-size:12px;color:var(--primary);font-weight:600;letter-spacing:.08em}.record-identity h1{margin:4px 0 8px;font-size:24px}.record-meta{display:flex;gap:8px 18px;flex-wrap:wrap;color:var(--muted);font-size:13px}.clinical-alert-banner{padding:12px 14px;background:#fff3cd;border:1px solid #f2d47e;color:#6b5200;border-radius:12px;margin:0 0 14px}.record-tabs{display:flex;gap:8px;overflow:auto;padding:2px 0 10px;margin-bottom:6px}.record-tab{white-space:nowrap;border:1px solid var(--border);background:var(--card);padding:10px 13px;border-radius:10px;cursor:pointer;color:var(--text)}.record-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}.record-content{min-height:220px}.clinical-form{display:grid;gap:12px}.clinical-section{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}.clinical-section summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;cursor:pointer;background:color-mix(in srgb,var(--primary) 6%,var(--card));list-style:none}.clinical-section summary::-webkit-details-marker{display:none}.clinical-section summary span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.clinical-section-body{padding:16px}.urgency-tag{display:inline-block;padding:2px 6px;border-radius:999px;background:#ffe2e2;color:#a12626;font-size:10px;font-weight:600;margin-left:5px}.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.check-item{display:flex;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card)}.matrix-table th,.matrix-table td{text-align:center}.matrix-table td:first-child,.matrix-table th:first-child{text-align:left;min-width:190px}.treatment-row{display:grid;grid-template-columns:1.2fr 1.2fr .55fr .7fr auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px}.odonto-toolbar{display:flex;gap:12px;flex-wrap:wrap}.odonto-toolbar .field{min-width:230px}.odonto-legend-wrap{display:flex;flex-wrap:wrap;gap:7px 11px;margin:10px 0}.odonto-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px}.odonto-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}.odontogram-grid{display:grid;grid-template-columns:repeat(8,minmax(92px,1fr));gap:9px}.tooth-card{border:1px solid var(--border);border-radius:11px;padding:7px;text-align:center;background:var(--card)}.tooth-surfaces{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:6px}.tooth-face{border:1px solid #d1d9e0;border-radius:4px;padding:5px 0;font-size:10px;cursor:pointer;background:var(--face-color)}.tooth-face.missing{color:#fff;font-weight:650;background:var(--face-color)}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.signature-grid label{display:block;font-weight:600;margin-bottom:7px}.signature-pad{width:100%;height:140px;background:#fff;border:1px dashed #9eafbd;border-radius:10px;touch-action:none}.sticky-save{position:sticky;bottom:12px;z-index:4;display:flex;justify-content:flex-end;padding:11px;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.08);margin-top:14px}.history-file-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}.upload-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;word-break:break-all} @media(max-width:1100px){.odontogram-grid{grid-template-columns:repeat(4,minmax(88px,1fr))}.treatment-row{grid-template-columns:1fr 1fr}.treatment-row .btn{grid-column:1/-1}} @media(max-width:700px){.patient-record-header{align-items:flex-start;padding:14px}.record-photo{width:72px;height:72px;border-radius:14px}.record-identity h1{font-size:19px}.record-meta{font-size:12px;display:grid;gap:5px}.record-tabs{margin-left:-2px;margin-right:-2px}.clinical-section summary{padding:13px}.clinical-section-body{padding:12px}.odontogram-grid{grid-template-columns:repeat(2,minmax(90px,1fr));gap:7px}.signature-grid{grid-template-columns:1fr}.signature-pad{height:125px}.sticky-save .btn{width:100%}.treatment-row{grid-template-columns:1fr}.stack-mobile{display:grid}.stack-mobile .btn{width:100%}} .input-suffix-wrap{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--card);overflow:hidden}.input-suffix-wrap .input{border:0;border-radius:0;min-width:0}.input-suffix-wrap span{padding:0 10px;color:var(--muted);font-size:12px;white-space:nowrap;border-left:1px solid var(--border)} .conditional-grid{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border:1px dashed var(--border);border-radius:10px;background:color-mix(in srgb,var(--primary) 3%,var(--card))}.conditional-grid.visible{display:grid}.conditional-field{display:none}.conditional-field.visible{display:block}@media(max-width:700px){.conditional-grid{grid-template-columns:1fr}} /* Fase 5B.1 — rediseño visual profesional */ :root{ --bg:#f5f7fb;--surface:#fff;--text:#163047;--muted:#728293;--line:#e4eaf0; --shadow:0 8px 22px rgba(29,62,93,.06);--radius:12px; } body{font-size:14px;letter-spacing:-.01em}.content{padding:24px 28px 36px;max-width:1720px;width:100%;margin:0 auto}.main{min-width:0;background:var(--bg)} .sidebar{padding:0 12px 16px;width:auto}.sidebar-brand-wrap{margin:0 -12px 10px;border-radius:0;min-height:78px;box-shadow:none;border-bottom:1px solid rgba(20,50,73,.12)}.sidebar-logo{max-width:205px;height:54px}.sidebar-clinic{margin:10px 2px 4px;padding:10px;border-radius:9px;background:rgba(255,255,255,.08)}.sidebar-clinic span,.sidebar-clinic strong{display:block}.sidebar-clinic span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}.sidebar-clinic strong{font-size:12px;margin-top:3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-footer{display:grid;gap:3px}.sidebar-footer span{font-size:11px;color:rgba(255,255,255,.62)} .topbar{min-height:68px;height:auto;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,53,77,.02);padding:9px 24px;background:#fff}.topbar-context{display:grid;gap:2px}.topbar-context strong{font-size:14px;color:var(--text)}.breadcrumb{font-size:11px;color:var(--muted)} .card{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.card-title{font-size:15px;padding:15px 18px}.card-body{padding:18px}.page-title h1{font-size:27px;letter-spacing:-.04em}.page-title p{line-height:1.5}.btn{border-radius:8px;padding:9px 13px;font-size:13px;box-shadow:none}.btn:hover{transform:none;filter:brightness(.98)}.input,.select,.textarea{border-radius:8px;background:#fff}.stat{border-radius:11px;box-shadow:var(--shadow)} .patient-hero{overflow:hidden;margin-bottom:14px;background:linear-gradient(105deg,var(--primary-strong),var(--primary));color:#fff;border-radius:14px;box-shadow:0 14px 28px rgba(16,55,84,.16)}.patient-hero-main{display:flex;align-items:center;gap:18px;padding:22px 24px 17px}.patient-hero .record-photo{width:94px;height:94px;border:4px solid rgba(255,255,255,.76);background:#fff;color:var(--primary);border-radius:50%;font-size:25px;font-weight:650;box-shadow:0 8px 18px rgba(0,0,0,.16)}.patient-hero .record-identity h1{font-size:25px;letter-spacing:-.04em;color:#fff}.patient-hero .record-folio{color:#bde9ff}.patient-hero .record-meta{color:rgba(255,255,255,.88);gap:7px 20px}.patient-hero .record-meta span{display:grid;gap:2px}.patient-hero .record-meta b{color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.patient-hero-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.17)}.patient-insight{display:flex;gap:10px;min-width:0;padding:14px 18px;background:rgba(6,37,63,.2)}.patient-insight-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.14);font-size:13px;flex:0 0 auto}.patient-insight strong,.patient-insight small{display:block}.patient-insight strong{font-size:12px}.patient-insight small{margin-top:4px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.patient-insight.alert .patient-insight-icon{background:#ffe777;color:#5b4b00}.patient-insight.ok .patient-insight-icon{background:#b9edcc;color:#175b37} .record-tabs{background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px;gap:2px;box-shadow:var(--shadow);margin-bottom:14px}.record-tab{border:0;background:transparent;border-radius:7px;padding:10px 12px;color:#607284;font-size:13px}.record-tab:hover{background:#f1f6f9;color:var(--primary)}.record-tab.active{background:var(--primary-soft);color:var(--primary);font-weight:600} .clinical-section{border-radius:10px;background:#fff;border-color:var(--line)}.clinical-section summary{background:#f9fbfd;padding:14px 16px}.clinical-section summary strong{font-size:14px}.clinical-section-body{padding:17px}.check-item{border-radius:7px;background:#fff}.sticky-save{border-radius:10px} /* odontograma profesional */ .odontogram-pro{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.odonto-commandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;background:#f7fafc;border-bottom:1px solid var(--line)}.odonto-commandbar h4{margin:0;font-size:16px;color:var(--text)}.odonto-commandbar p{margin:4px 0 0;font-size:12px;color:var(--muted)}.odonto-command-actions{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.odonto-command-actions label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:600}.odonto-command-actions .select{min-width:118px;padding:8px 9px}.odonto-layout{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:470px}.odonto-palette{padding:14px;border-right:1px solid var(--line);background:#fbfdfe}.odonto-palette>strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#52687b}.odonto-legend-wrap{display:grid;gap:5px;margin:11px 0}.odonto-legend{display:flex;align-items:center;gap:7px;width:100%;border:1px solid transparent;background:transparent;border-radius:7px;padding:6px 7px;color:#607284;text-align:left;font-size:11px}.odonto-legend:hover{background:#f0f5f8}.odonto-legend.active{border-color:color-mix(in srgb,var(--legend-color) 55%,#fff);background:color-mix(in srgb,var(--legend-color) 12%,#fff);color:#234050;font-weight:600}.odonto-legend i{width:12px;height:12px;flex:0 0 auto;border-radius:3px;background:var(--legend-color);border:1px solid rgba(0,0,0,.08)}.odonto-palette-help{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-size:10px}.odonto-palette-help b{color:var(--text);margin-bottom:2px}.odontogram-canvas{overflow-x:auto;padding:16px 13px 12px;background:#fff}.dental-arch{min-width:920px;padding:10px 0}.dental-arch+.dental-arch{border-top:1px dashed #d6e0e8;margin-top:10px;padding-top:18px}.dental-arch-label{margin-bottom:8px;color:#7a8b99;font-size:10px;text-transform:uppercase;letter-spacing:.1em;text-align:center}.dental-row{display:grid;grid-template-columns:repeat(16,minmax(51px,1fr));gap:5px}.dental-unit{position:relative;display:grid;gap:5px;justify-items:center;min-width:51px}.dental-silhouette{position:relative;width:42px;height:69px;padding:0;border:0;background:transparent}.tooth-svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(40,69,92,.12))}.tooth-svg path{fill:#fff;stroke:#9aaab6;stroke-width:1.15;transition:.15s}.dental-silhouette:hover .tooth-svg path{fill:#f2f8fb;stroke:var(--primary)}.dental-unit .dental-silhouette::after{content:"";position:absolute;left:11px;right:11px;top:7px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--tooth-accent) 22%,transparent);pointer-events:none}.missing-cross{position:absolute;inset:-3px 0 auto;color:#d64545;font-size:66px;font-style:normal;line-height:66px;font-weight:500;pointer-events:none}.surface-map{position:relative;width:38px;height:38px}.surface-piece{position:absolute;border:1px solid #8395a3;background:var(--surface-fill,#fff);padding:0;font-size:0;transition:.12s}.surface-piece:hover{z-index:3;filter:brightness(.93);border-color:var(--primary)}.surface-v{left:7px;top:0;width:24px;height:10px;border-radius:8px 8px 3px 3px}.surface-l{left:7px;bottom:0;width:24px;height:10px;border-radius:3px 3px 8px 8px}.surface-m{left:0;top:7px;width:10px;height:24px;border-radius:8px 3px 3px 8px}.surface-d{right:0;top:7px;width:10px;height:24px;border-radius:3px 8px 8px 3px}.surface-o{left:10px;top:10px;width:18px;height:18px;border-radius:50%}.tooth-number{font-size:10px;color:#455b6d}.tooth-note{width:49px;border:0;border-bottom:1px solid #d9e3ea;background:transparent;padding:2px 1px;color:#6e7e8b;font-size:9px;text-align:center;outline:none}.tooth-note:focus{border-color:var(--primary);color:var(--text)}.odonto-footnote{padding:11px 14px;border-top:1px solid var(--line);background:#f8fbfd;color:var(--muted);font-size:11px;line-height:1.5} :root[data-theme="dark"] .topbar,:root[data-theme="dark"] .record-tabs,:root[data-theme="dark"] .odontogram-pro,:root[data-theme="dark"] .odontogram-canvas,:root[data-theme="dark"] .dental-unit,:root[data-theme="dark"] .clinical-section{background:var(--surface)}:root[data-theme="dark"] .odonto-commandbar,:root[data-theme="dark"] .odonto-palette,:root[data-theme="dark"] .clinical-section summary{background:#1b2934}:root[data-theme="dark"] .tooth-svg path{fill:#eef5f7;stroke:#8fa4af}:root[data-theme="dark"] .odonto-legend.active{color:#eef5f7} @media(max-width:980px){.content{padding:18px}.patient-hero-insights{grid-template-columns:1fr}.odonto-layout{grid-template-columns:1fr}.odonto-palette{border-right:0;border-bottom:1px solid var(--line)}.odonto-legend-wrap{display:flex;flex-wrap:wrap}.odonto-legend{width:auto}.odonto-palette-help{display:none}} @media(max-width:700px){.content{padding:12px}.topbar{padding:7px 10px}.patient-hero-main{align-items:flex-start;padding:16px;gap:12px}.patient-hero .record-photo{width:68px;height:68px;font-size:18px}.patient-hero .record-identity h1{font-size:19px;margin-top:3px}.patient-hero .record-meta{display:grid;gap:5px}.patient-hero .record-meta span{display:block}.patient-hero .record-meta b{display:block;margin-bottom:1px}.patient-insight{padding:11px 14px}.record-tabs{border-radius:9px}.record-tab{padding:9px 10px}.odonto-commandbar{display:grid;padding:13px}.odonto-command-actions{display:grid;grid-template-columns:1fr}.odonto-command-actions .btn{width:100%}.odonto-palette{padding:11px}.dental-arch{min-width:850px}} /* Phase 5B.2 - Clinical UI polish */ .sidebar-toggle { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #526a79; display: inline-grid; place-items: center; font-size: 18px; transition: .18s ease; } .sidebar-toggle:hover { color: var(--primary); border-color: color-mix(in srgb,var(--primary) 30%,#fff); background: var(--primary-soft); } .app-shell { transition: grid-template-columns .22s ease; } .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr); } .app-shell.sidebar-collapsed .sidebar { width: 0; min-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; transform: translateX(-100%); } .sidebar { transition: width .22s ease, transform .22s ease, padding .22s ease; } /* Professional patient directory */ .patients-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; } .patients-overview > div { padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px rgba(24,56,84,.045); } .patients-overview span,.patients-overview small { display:block; } .patients-overview span { color: var(--muted); font-size: 11px; font-weight:600; text-transform: uppercase; letter-spacing: .65px; } .patients-overview strong { display:block; margin-top: 7px; color: var(--primary); font-size: 24px; letter-spacing: -.7px; } .patients-overview small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; } .patient-directory { overflow: visible; } .patient-directory-head { display:flex; justify-content:space-between; gap:14px; padding: 17px 18px 0; } .patient-directory-head h3 { margin:0; font-size:17px; } .patient-directory-head p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; } .patient-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) minmax(150px,210px) minmax(170px,230px); gap:11px; align-items:end; padding:14px; margin-bottom:12px; border:1px solid var(--line); border-radius:11px; background:#f8fbfc; } .patient-toolbar .field { margin:0; } .patient-cell { display:flex; align-items:center; gap:10px; min-width:205px; } .patient-list-avatar { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#e5f2f7; color:var(--primary); font-size:11px; font-weight:650; } .patient-folio { color:var(--primary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; } .contact-cell strong,.contact-cell span { display:block; } .contact-cell strong { font-size:12px; } .contact-cell span { margin-top:4px; color:var(--muted); font-size:11px; } .patient-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:165px; } .btn-sm { padding:8px 10px; border-radius:8px; font-size:12px; white-space:nowrap; } .row-action-menu { position:relative; } .row-action-menu summary { list-style:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:#607586; cursor:pointer; font-weight:650; letter-spacing:1px; } .row-action-menu summary::-webkit-details-marker { display:none; } .row-action-menu[open] summary { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); } .row-action-popover { position:absolute; z-index:12; right:0; top:40px; width:205px; padding:6px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 14px 34px rgba(22,53,74,.16); } .row-action-popover button { display:block; width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:#425a69; text-align:left; font-size:12px; } .row-action-popover button:hover { background:#eef5f8; color:var(--primary); } /* Configuration workspace, desktop inspired by modern medical SaaS */ .settings-layout { display:grid; grid-template-columns:248px minmax(0,1fr); gap:16px; align-items:start; } .settings-nav { position:sticky; top:86px; overflow:hidden; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 8px 22px rgba(24,56,84,.05); } .settings-nav-title { padding:10px 10px 12px; color:var(--muted); font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.8px; } .settings-nav-item { display:flex; width:100%; gap:10px; align-items:flex-start; padding:11px 10px; border:0; border-radius:9px; background:transparent; color:#536a79; text-align:left; } .settings-nav-item:hover { background:#f1f6f8; } .settings-nav-item.active { background:var(--primary-soft); color:var(--primary); box-shadow:inset 3px 0 0 var(--primary); } .settings-nav-item strong,.settings-nav-item small { display:block; } .settings-nav-item strong { font-size:13px; } .settings-nav-item small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.35; } .settings-nav-icon { width:20px; flex:0 0 auto; text-align:center; font-size:15px; } .settings-content { min-width:0; } .settings-content > .grid:first-child,.settings-content > form > .grid:first-child { align-items:start; } /* Odontogram aligned by opposing arches */ .dental-arch { min-width:920px; padding:8px 0; } .dental-arch+.dental-arch { border-top:0; margin-top:0; padding-top:8px; } .dental-arch-label { margin:0 0 6px; } .dental-arch-lower .dental-arch-label { order:2; margin:6px 0 0; } .dental-arch-lower { display:flex; flex-direction:column; } .dental-arch-lower .dental-row { order:1; } .dental-unit { align-content:center; gap:3px; } .dental-unit-upper .dental-silhouette { transform:rotate(180deg); } .dental-unit-upper .missing-cross { transform:rotate(180deg); } .dental-unit-lower .dental-silhouette { transform:none; } .dental-unit-upper .tooth-note { order:0; margin-bottom:3px; } .dental-unit-upper .dental-silhouette { order:1; } .dental-unit-upper .tooth-number { order:2; } .dental-unit-upper .surface-map { order:3; margin-top:1px; } .dental-unit-lower .surface-map { order:0; margin-bottom:1px; } .dental-unit-lower .tooth-number { order:1; } .dental-unit-lower .dental-silhouette { order:2; } .dental-unit-lower .tooth-note { order:3; margin-top:3px; } .dental-occlusion-line { position:relative; min-width:920px; height:22px; margin:1px 0; display:flex; align-items:center; justify-content:center; } .dental-occlusion-line::before { content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#bfcdd6 8%,#bfcdd6 92%,transparent); } .dental-occlusion-line span { position:relative; padding:2px 9px; border-radius:999px; background:#fff; color:#8a9ba7; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } :root[data-theme="dark"] .patient-toolbar,:root[data-theme="dark"] .row-action-menu summary,:root[data-theme="dark"] .row-action-popover,:root[data-theme="dark"] .dental-occlusion-line span { background:var(--surface); } :root[data-theme="dark"] .row-action-popover button { color:#d9e7ed; } @media(max-width:980px){.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow-x:auto;gap:5px}.settings-nav-title{display:none}.settings-nav-item{min-width:185px}.patient-toolbar{grid-template-columns:1fr 1fr}.patient-search{grid-column:1/-1}} @media(max-width:880px){.app-shell.sidebar-collapsed{grid-template-columns:1fr}.app-shell.sidebar-collapsed .sidebar{width:276px;padding:0 12px 16px;transform:none}.sidebar-toggle{display:inline-grid}.sidebar:not(.open){left:-290px}.sidebar.open{left:0}.patients-overview{grid-template-columns:1fr}.patient-toolbar{grid-template-columns:1fr}.patient-search{grid-column:auto}} @media(max-width:620px){.settings-nav-item{min-width:160px}.settings-nav-item small{display:none}.patient-directory-head{padding:14px 14px 0}.patient-actions{justify-content:flex-start}.row-action-popover{left:0;right:auto}.patients-overview{gap:8px}.patients-overview>div{padding:12px 13px}} /* Phase 5B image storage verification */ .history-file-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}.history-file-card{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line,#d6dee6);border-radius:8px;text-decoration:none;background:#fff;color:inherit}.history-file-card img{width:58px;height:58px;object-fit:cover;border-radius:6px;background:#f4f7f9}.history-file-card span{display:flex;flex-direction:column;gap:4px;min-width:0;font-weight:600}.history-file-card small{font-size:11px;color:#5d6b79;font-weight:400}.asset-thumb img{object-fit:contain} /* Phase 5C medical notes */ .file-type-badge{display:grid;place-items:center;width:58px;height:58px;border-radius:6px;background:#fee2e2;color:#991b1b;font-size:14px;font-weight:650;letter-spacing:.08em}.section-box p{white-space:pre-wrap;line-height:1.55;margin:8px 0 0}.clinical-section-body .detail-grid{margin-top:0} /* Fase 5D: filtros clínicos y recetas médicas odontológicas */ .record-filter-bar{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(180px,1fr) minmax(135px,.7fr) minmax(135px,.7fr) auto;gap:10px;align-items:end;padding:14px;margin:0 0 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow)} .record-filter-bar .field{margin:0}.record-filter-bar label{font-size:11px;text-transform:uppercase;letter-spacing:.055em;color:var(--muted);font-weight:600}.filter-actions{display:flex;align-items:end}.filter-actions .btn{white-space:nowrap}.rx-folio{color:#bf1e2e}.prescription-medication-row{padding:14px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--primary) 2%,var(--card));margin-bottom:12px}.prescription-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.prescription-row-head strong{color:var(--primary)}.btn-small{padding:7px 10px;font-size:12px}.signature-grid.one-column{grid-template-columns:1fr;max-width:760px}.record-content .table-actions{gap:6px;flex-wrap:wrap} @media(max-width:1100px){.record-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-actions{grid-column:1/-1}.filter-actions .btn{width:100%}} @media(max-width:620px){.record-filter-bar{grid-template-columns:1fr;padding:12px}.filter-actions{grid-column:auto}.prescription-medication-row{padding:11px}} /* Phase 5D.1: clinical accordions follow workspace primary color */ .clinical-section summary { background: var(--primary); color: #ffffff; border-bottom: 1px solid color-mix(in srgb, var(--primary) 78%, #000000 22%); transition: background-color .18s ease, filter .18s ease; } .clinical-section summary:hover { filter: brightness(.96); } .clinical-section[open] summary { background: color-mix(in srgb, var(--primary) 88%, #000000 12%); } .clinical-section summary strong { color: #ffffff; } .clinical-section summary div span { color: rgba(255,255,255,.82); } .clinical-section summary > span { color: #ffffff; font-size: 18px; line-height: 1; margin-top: 0; opacity: .95; } :root[data-theme="dark"] .clinical-section summary, :root[data-theme="dark"] .clinical-section[open] summary { background: var(--primary); color: #ffffff; } /* Phase 5E: reusable templates and informed consent documents */ .rich-editor-shell{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .rich-toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:9px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--primary) 5%,var(--surface))} .rich-tool{min-width:34px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--primary);cursor:pointer;font-size:13px} .rich-tool:hover,.rich-variable:hover{border-color:var(--primary);background:var(--primary-soft)} .rich-size{width:92px;min-width:92px;height:32px;padding:4px 7px;font-size:12px} .rich-variable-wrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1 1 100%} .rich-variable-wrap>span{margin-right:3px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em} .rich-variable{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--primary);cursor:pointer;font-size:11px;font-weight:600} .rich-editor{min-height:230px;padding:15px;background:var(--surface);color:var(--text);font-size:15px;line-height:1.62;outline:none} .rich-editor:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 20%,transparent)} .rich-editor p{margin:.4em 0}.rich-editor ul,.rich-editor ol{padding-left:24px}.rich-editor li{margin:.22em 0} .rich-preview{line-height:1.65}.rich-preview>div{margin-top:10px}.rich-preview p{margin:.55em 0}.rich-preview ul,.rich-preview ol{padding-left:24px} @media(max-width:620px){.rich-editor{min-height:190px;padding:12px}.rich-toolbar{gap:6px;padding:7px}.rich-variable-wrap>span{width:100%}} /* Performance state feedback */ .patient-sync-state{display:flex;align-items:center;justify-content:flex-end;min-width:190px;font-size:12px;color:#607386;text-align:right}.patient-loading,.patient-loaded,.patient-load-error{display:inline-flex;align-items:center;gap:7px}.patient-loading i{width:12px;height:12px;border:2px solid rgba(23,71,111,.22);border-top-color:var(--primary);border-radius:50%;animation:odontosuite-spin .72s linear infinite}.patient-loaded{color:#267346}.patient-load-error{color:#a23b48;max-width:280px}.patient-directory .table-wrap{content-visibility:auto;contain-intrinsic-size:520px}.content{transition:opacity .16s ease}.btn{transition:transform .12s ease,box-shadow .12s ease,background-color .16s ease,border-color .16s ease}.btn:not(:disabled):active{transform:translateY(1px)}@keyframes odontosuite-spin{to{transform:rotate(360deg)}} @media(max-width:760px){.patient-sync-state{justify-content:flex-start;text-align:left;min-width:0;margin-top:8px}.patient-directory-head{align-items:flex-start;flex-direction:column}} /* Phase 5H: treatment catalog and permanent treatment plans */ .plan-item-row{padding:14px;margin:0 0 12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--primary) 3%,var(--card));box-shadow:0 3px 12px rgba(16,43,66,.04)} .plan-row-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.plan-row-heading strong{color:var(--primary)} .plan-total-box{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--primary) 7%,var(--card))}.plan-total-box span{font-weight:600;color:var(--muted)}.plan-total-box strong{font-size:18px;color:var(--primary)} .tooth-multi{min-height:100px}.local-image-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.local-image-preview span{padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted);font-size:12px} .treatment-catalog-note{line-height:1.5} @media(max-width:620px){.plan-item-row{padding:11px}.plan-total-box{align-items:flex-start;flex-direction:column}.plan-total-box strong{font-size:16px}} /* Phase 5H.2: spacious professional forms and treatment plan editor */ .form-grid{gap:18px 20px} .field{gap:8px} .field label{font-size:12px;letter-spacing:.025em;color:color-mix(in srgb,var(--text) 82%,var(--muted));line-height:1.35} .field small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:1px} .input,.select,.textarea{min-height:44px;padding:12px 13px;border-radius:10px;background:var(--surface);line-height:1.45} .textarea{min-height:118px;line-height:1.58} .clinical-form{gap:18px} .clinical-section{border-radius:16px;box-shadow:0 5px 18px rgba(16,43,66,.045)} .clinical-section summary{padding:17px 20px} .clinical-section-body{padding:22px} .clinical-section-body>.field,.clinical-section-body>.form-grid,.clinical-section-body>.detail-grid{max-width:1500px} .clinical-section-body .form-grid{gap:18px 20px} .clinical-section-body .field{padding:13px 14px;border:1px solid color-mix(in srgb,var(--border) 86%,var(--primary) 14%);border-radius:12px;background:color-mix(in srgb,var(--primary) 2%,var(--surface));align-content:start} .clinical-section-body .field .input,.clinical-section-body .field .select,.clinical-section-body .field .textarea{background:var(--surface)} .clinical-section-body .conditional-grid{gap:14px;padding:14px} .clinical-section-body .conditional-grid .field{padding:12px} .plan-item-row{padding:18px;margin-bottom:16px;border-radius:15px;background:color-mix(in srgb,var(--primary) 2%,var(--surface));box-shadow:0 6px 18px rgba(16,43,66,.055)} .plan-row-heading{align-items:flex-start;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--border) 82%,var(--primary) 18%)} .plan-row-heading strong,.plan-row-heading span{display:block} .plan-row-heading strong{font-size:15px} .plan-row-heading span{max-width:780px;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5} .plan-item-stack{display:grid;gap:13px} .plan-item-group{padding:14px;border:1px solid color-mix(in srgb,var(--border) 88%,var(--primary) 12%);border-radius:12px;background:var(--surface)} .plan-item-group-title{margin-bottom:11px;color:var(--primary);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase} .plan-item-main-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} .plan-item-editor-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(130px,.28fr) minmax(150px,.3fr);gap:14px 16px} .plan-item-clinical-grid{display:grid;grid-template-columns:minmax(230px,.65fr) minmax(300px,1.35fr);gap:14px 16px} .plan-item-group .field{padding:0;border:0;background:transparent;margin:0} .plan-item-group .textarea{min-height:126px} .plan-item-group .tooth-multi{min-height:126px} .plan-total-box{margin-top:18px;padding:16px 18px;border-radius:13px} .settings-content .form-grid,.modal-body .form-grid{gap:18px 20px} .settings-content .section-box{padding:16px} .signature-grid{gap:20px} @media(max-width:980px){.plan-item-editor-grid,.plan-item-clinical-grid{grid-template-columns:1fr}.plan-item-main-grid{grid-template-columns:1fr}} @media(max-width:700px){.clinical-section summary{padding:15px 16px}.clinical-section-body{padding:15px}.clinical-section-body .field{padding:11px 12px}.form-grid{gap:13px}.plan-item-row{padding:13px}.plan-item-group{padding:12px}.plan-row-heading{gap:8px}.textarea{min-height:104px}} :root[data-theme="dark"] .clinical-section-body .field,:root[data-theme="dark"] .plan-item-row,:root[data-theme="dark"] .plan-item-group{background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%)} /* Phase 5H.3: treatment plan cost per odontological organ and optional signature */ .plan-line-total{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--primary) 5%,var(--surface))} .plan-line-total span{color:var(--muted);font-size:12px;font-weight:600;line-height:1.45}.plan-line-total strong{color:var(--primary);font-size:15px;text-align:right}.optional-label{color:var(--muted);font-size:11px;font-weight:600} @media(max-width:620px){.plan-line-total{align-items:flex-start;flex-direction:column}.plan-line-total strong{text-align:left}} /* Phase 5I: payments and patient statement */ .financial-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.financial-summary article{padding:16px 17px;border:1px solid color-mix(in srgb,var(--border) 82%,var(--primary) 18%);border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 4%,var(--surface)),var(--surface));box-shadow:0 5px 16px rgba(16,43,66,.045)}.financial-summary span{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.financial-summary strong{display:block;margin-top:8px;color:var(--primary);font-size:18px;line-height:1.25}.payment-method-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(130px,.35fr) minmax(220px,1fr) auto;gap:12px;align-items:end;margin-bottom:12px;padding:13px;border:1px solid color-mix(in srgb,var(--border) 84%,var(--primary) 16%);border-radius:12px;background:color-mix(in srgb,var(--primary) 3%,var(--surface))}.payment-method-row .field{padding:0!important;border:0!important;background:transparent!important}.check-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));font-size:13px;font-weight:600}.attachment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.attachment-card{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;text-decoration:none}.attachment-card:hover{border-color:var(--primary)}.attachment-card span,.attachment-card small{color:var(--muted);font-size:11px}.break-all{overflow-wrap:anywhere;word-break:break-all}.icon-btn.danger{color:#b91c1c} @media(max-width:980px){.financial-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-method-row{grid-template-columns:1fr 1fr}.payment-method-row .btn{justify-self:start}} @media(max-width:620px){.financial-summary{grid-template-columns:1fr}.payment-method-row{grid-template-columns:1fr}} .attachment-card[type="button"]{width:100%;cursor:pointer;text-align:left;font:inherit} /* Phase 5J: integral patient summary, timeline and general files */ .record-summary-grid{display:grid;gap:14px;margin-bottom:16px}.summary-alert{display:flex;gap:8px;flex-direction:column;padding:15px 17px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}.summary-alert strong{font-size:14px}.summary-alert span{font-size:13px;line-height:1.5}.summary-alert.warning{border-color:#f2b8b8;background:#fff3f3;color:#9f1d1d}.summary-alert.ok{border-color:#bce0c7;background:#f2fbf5;color:#17663a}.summary-actions{display:flex;flex-wrap:wrap;gap:9px}.summary-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.summary-card-grid article{min-height:92px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--border) 82%,var(--primary) 18%);border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 4%,var(--surface)),var(--surface));box-shadow:0 5px 14px rgba(16,43,66,.04)}.summary-card-grid span{display:block;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.summary-card-grid strong{display:block;margin-top:9px;color:var(--primary);font-size:15px;line-height:1.38}.vitals-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vitals-summary div{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.vitals-summary span,.vitals-summary strong{display:block}.vitals-summary span{color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase}.vitals-summary strong{margin-top:5px;color:var(--primary);font-size:13px}.muted-line{display:block;margin-top:11px;color:var(--muted)}.timeline-filter{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(190px,1fr) minmax(145px,.5fr) minmax(145px,.5fr) auto;gap:10px;margin-bottom:14px}.record-timeline{display:grid;gap:0}.timeline-item{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}.timeline-item:last-child{border-bottom:0}.timeline-dot{width:11px;height:11px;margin-top:4px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 13%,transparent)}.timeline-item strong,.timeline-item small,.timeline-item p{display:block}.timeline-item small{margin-top:4px;color:var(--muted);font-size:11px}.timeline-item p{margin:5px 0 0;color:var(--text);font-size:12px}.general-file-grid{display:grid;gap:11px}.general-file-card{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.general-file-card.voided{opacity:.68;background:color-mix(in srgb,#b91c1c 4%,var(--surface))}.general-file-card img,.general-file-icon{width:84px;height:68px;border-radius:9px;object-fit:cover;border:1px solid var(--border);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.general-file-icon{display:grid;place-items:center;color:var(--primary);font-size:16px;font-weight:650}.general-file-main strong,.general-file-main span,.general-file-main small,.general-file-main em{display:block}.general-file-main strong{color:var(--primary);font-size:14px}.general-file-main span{margin-top:4px;font-size:12px}.general-file-main small{margin-top:4px;color:var(--muted);font-size:11px}.general-file-main p{margin:7px 0 0;color:var(--text);font-size:12px}.general-file-main em{margin-top:6px;color:#9f1d1d;font-size:11px}.general-file-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} @media(max-width:1120px){.summary-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-filter .btn{justify-self:start}.record-overview-grid{grid-template-columns:1fr!important}} @media(max-width:700px){.summary-card-grid{grid-template-columns:1fr}.summary-actions .btn{flex:1 1 calc(50% - 9px)}.vitals-summary{grid-template-columns:1fr}.timeline-filter{grid-template-columns:1fr}.timeline-item{grid-template-columns:14px minmax(0,1fr)}.timeline-item .btn{grid-column:2;justify-self:start}.general-file-card{grid-template-columns:64px minmax(0,1fr)}.general-file-card img,.general-file-icon{width:64px;height:58px}.general-file-actions{grid-column:2;justify-content:flex-start}} /* Sincronización multidispositivo en tiempo real */ .realtime-chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid rgba(23,71,111,.14);background:#eef6fb;color:#17476f;transition:background .2s ease,color .2s ease,border-color .2s ease} .realtime-chip i{display:block;width:8px;height:8px;border-radius:50%;background:#2f89a8;box-shadow:0 0 0 3px rgba(47,137,168,.14)} .realtime-chip.connected{background:#edf9f2;color:#17613a;border-color:#ccebd8} .realtime-chip.connected i{background:#23a55a;box-shadow:0 0 0 3px rgba(35,165,90,.15)} .realtime-chip.connecting{background:#f1f6fb;color:#315b7d;border-color:#d6e3ed} .realtime-chip.connecting i{background:#4e8db7;animation:syncPulse 1.25s ease-in-out infinite} .realtime-chip.pending{background:#fff8e8;color:#916015;border-color:#f3dfaa} .realtime-chip.pending i{background:#e6a525;animation:syncPulse 1s ease-in-out infinite} .realtime-chip.offline{background:#fff0f0;color:#a22b31;border-color:#f1d0d2} .realtime-chip.offline i{background:#cf4e55;box-shadow:0 0 0 3px rgba(207,78,85,.14)} @keyframes syncPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}} @media(max-width:980px){.realtime-chip{padding:0 8px}.realtime-chip span{display:none}} /* Phase 5L: premium orthodontics module */ .ortho-module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 6px 18px rgba(16,43,66,.045)} .ortho-module-head h2{margin:8px 0 4px;color:var(--primary);font-size:23px;line-height:1.2}.ortho-module-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} .premium-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:10px;font-weight:600;letter-spacing:.065em;text-transform:uppercase} .ortho-subnav{display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface);scrollbar-width:thin} .ortho-subtab{min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;transition:background-color .16s ease,color .16s ease,border-color .16s ease} .ortho-subtab:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--primary)} .ortho-subtab.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 18%,transparent)} .prefilled-grid{margin-bottom:16px} @media(max-width:700px){.ortho-module-head{padding:15px 16px}.ortho-module-head h2{font-size:20px}.ortho-subnav{margin-inline:-2px;padding:6px}.ortho-subtab{min-height:36px;padding:0 11px}} .ortho-gallery-filter-bar{margin-bottom:12px}.ortho-gallery-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.ortho-gallery-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}.ortho-gallery-pill strong{color:var(--primary)}.ortho-gallery-pill.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}.ortho-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.ortho-gallery-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 5px 16px rgba(16,43,66,.045)}.ortho-gallery-preview{display:block;padding:0;border:0;background:color-mix(in srgb,var(--primary) 5%,var(--surface));cursor:pointer}.ortho-gallery-preview img{display:block;width:100%;height:240px;object-fit:cover}.ortho-gallery-preview.pdf{display:grid;place-items:center;height:240px}.ortho-gallery-icon{display:grid;place-items:center;width:110px;height:110px;border-radius:24px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));color:var(--primary);font-size:30px;font-weight:650;letter-spacing:.06em}.ortho-gallery-body{display:grid;gap:8px;padding:15px 15px 8px}.ortho-gallery-body strong{font-size:15px;line-height:1.35;color:var(--primary)}.ortho-gallery-body span,.ortho-gallery-body small,.ortho-gallery-body p{margin:0;color:var(--muted);overflow-wrap:anywhere}.ortho-gallery-body span{font-size:12px}.ortho-gallery-body p{font-size:12px;line-height:1.55;color:var(--text)}.ortho-gallery-body small{font-size:11px}.ortho-gallery-meta{display:flex;flex-wrap:wrap;gap:7px}.badge.subtle{background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--primary)}.ortho-gallery-actions{display:flex;gap:8px;padding:0 15px 15px}.ortho-gallery-actions .btn{flex:1}.ortho-viewer{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.9fr);gap:18px;align-items:start}.ortho-viewer-stage{display:grid;place-items:center;min-height:360px;padding:12px;border:1px solid var(--border);border-radius:16px;background:#f8fafc}.ortho-viewer-stage img{max-width:100%;max-height:68vh;border-radius:12px;box-shadow:0 8px 24px rgba(16,43,66,.12)}.ortho-viewer-pdf{display:grid;place-items:center;gap:10px;text-align:center;color:var(--muted)}.ortho-viewer-sidebar{padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.detail-list{display:grid;gap:12px}.detail-list div{display:grid;gap:4px}.detail-list strong{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}.detail-list span{font-size:13px;color:var(--text);overflow-wrap:anywhere}.detail-list .mono{font-size:11px;color:var(--muted)}@media(max-width:920px){.ortho-viewer{grid-template-columns:1fr}.ortho-viewer-stage{min-height:260px}}@media(max-width:620px){.ortho-gallery-grid{grid-template-columns:1fr}.ortho-gallery-preview img,.ortho-gallery-preview.pdf{height:220px}.ortho-gallery-actions{flex-direction:column}} /* Phase 5L: premium periodontics module */ .perio-module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 6px 18px rgba(16,43,66,.045)} .perio-module-head h2{margin:8px 0 4px;color:var(--primary);font-size:23px;line-height:1.2}.perio-module-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} .premium-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:10px;font-weight:600;letter-spacing:.065em;text-transform:uppercase} .perio-subnav{display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface);scrollbar-width:thin} .perio-subtab{min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;transition:background-color .16s ease,color .16s ease,border-color .16s ease} .perio-subtab:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--primary)} .perio-subtab.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 18%,transparent)} .prefilled-grid{margin-bottom:16px} @media(max-width:700px){.perio-module-head{padding:15px 16px}.perio-module-head h2{font-size:20px}.perio-subnav{margin-inline:-2px;padding:6px}.perio-subtab{min-height:36px;padding:0 11px}} .perio-gallery-filter-bar{margin-bottom:12px}.perio-gallery-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.perio-gallery-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}.perio-gallery-pill strong{color:var(--primary)}.perio-gallery-pill.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}.perio-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.perio-gallery-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 5px 16px rgba(16,43,66,.045)}.perio-gallery-preview{display:block;padding:0;border:0;background:color-mix(in srgb,var(--primary) 5%,var(--surface));cursor:pointer}.perio-gallery-preview img{display:block;width:100%;height:240px;object-fit:cover}.perio-gallery-preview.pdf{display:grid;place-items:center;height:240px}.perio-gallery-icon{display:grid;place-items:center;width:110px;height:110px;border-radius:24px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));color:var(--primary);font-size:30px;font-weight:650;letter-spacing:.06em}.perio-gallery-body{display:grid;gap:8px;padding:15px 15px 8px}.perio-gallery-body strong{font-size:15px;line-height:1.35;color:var(--primary)}.perio-gallery-body span,.perio-gallery-body small,.perio-gallery-body p{margin:0;color:var(--muted);overflow-wrap:anywhere}.perio-gallery-body span{font-size:12px}.perio-gallery-body p{font-size:12px;line-height:1.55;color:var(--text)}.perio-gallery-body small{font-size:11px}.perio-gallery-meta{display:flex;flex-wrap:wrap;gap:7px}.badge.subtle{background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--primary)}.perio-gallery-actions{display:flex;gap:8px;padding:0 15px 15px}.perio-gallery-actions .btn{flex:1}.perio-viewer{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.9fr);gap:18px;align-items:start}.perio-viewer-stage{display:grid;place-items:center;min-height:360px;padding:12px;border:1px solid var(--border);border-radius:16px;background:#f8fafc}.perio-viewer-stage img{max-width:100%;max-height:68vh;border-radius:12px;box-shadow:0 8px 24px rgba(16,43,66,.12)}.perio-viewer-pdf{display:grid;place-items:center;gap:10px;text-align:center;color:var(--muted)}.perio-viewer-sidebar{padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.detail-list{display:grid;gap:12px}.detail-list div{display:grid;gap:4px}.detail-list strong{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}.detail-list span{font-size:13px;color:var(--text);overflow-wrap:anywhere}.detail-list .mono{font-size:11px;color:var(--muted)}@media(max-width:920px){.perio-viewer{grid-template-columns:1fr}.perio-viewer-stage{min-height:260px}}@media(max-width:620px){.perio-gallery-grid{grid-template-columns:1fr}.perio-gallery-preview img,.perio-gallery-preview.pdf{height:220px}.perio-gallery-actions{flex-direction:column}} /* Phase 5M: premium periodontics module */ .perio-chart-grid{display:grid;grid-template-columns:1fr;gap:14px} .perio-tooth-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:13px;box-shadow:0 4px 14px rgba(16,43,66,.035)} .perio-tooth-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px} .perio-tooth-head strong{margin-right:auto;color:var(--primary);font-size:15px} .perio-tooth-head label{font-size:12px;color:var(--muted);font-weight:600} .perio-site-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px} .perio-site{display:grid;gap:5px;padding:8px;border:1px solid color-mix(in srgb,var(--border) 85%,var(--primary) 15%);border-radius:10px;background:color-mix(in srgb,var(--primary) 3%,var(--surface))} .perio-site strong{font-size:11px;color:var(--primary);text-align:center}.perio-site .input{min-height:34px;padding:6px;font-size:12px}.perio-site label{font-size:10px;color:var(--muted);font-weight:600} .form-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.form-grid.compact .field{padding:0!important;border:0!important;background:transparent!important} @media(max-width:1100px){.perio-site-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.perio-site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.compact{grid-template-columns:1fr}} /* Phase 5M2: PerioChart-style professional periodontal chart form */ .periochart-form .section-body{overflow:visible}.perio-chart-panel{margin:16px 0;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:16px;background:var(--surface);box-shadow:0 6px 18px rgba(16,43,66,.05);overflow:hidden}.perio-chart-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));border-bottom:1px solid var(--border)}.perio-chart-panel-head strong{display:block;color:var(--primary);font-size:15px}.perio-chart-panel-head span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}.perio-site-legend{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.perio-site-legend span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 7px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:999px;background:var(--surface);color:var(--primary);font-size:10px;font-weight:650}.perio-chart-scroll{overflow:auto;max-width:100%;padding-bottom:6px}.periochart-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}.periochart-table th,.periochart-table td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:middle}.periochart-table thead th{position:sticky;top:0;z-index:3;background:var(--primary);color:#fff;font-size:10px;font-weight:650;text-align:center;padding:9px 6px;white-space:nowrap}.periochart-table thead th:first-child{left:0;z-index:4}.periochart-table tbody th{position:sticky;left:0;z-index:2;width:118px;min-width:118px;padding:7px 8px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary);font-size:10px;font-weight:650;text-align:left;letter-spacing:.03em;text-transform:uppercase}.periochart-table td{width:116px;min-width:116px;padding:6px;background:#fff}.perio-surface-separator th{position:static!important;background:color-mix(in srgb,var(--primary) 14%,var(--surface))!important;color:var(--primary)!important;padding:9px 12px!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.06em!important}.perio-micro-sites{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.perio-micro-input{width:100%;min-height:32px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:var(--text);font-size:12px;font-weight:600;text-align:center}.perio-micro-input:focus{outline:2px solid color-mix(in srgb,var(--primary) 18%,transparent);border-color:var(--primary);background:#fff}.perio-micro-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.perio-micro-checks label{display:grid;place-items:center;gap:2px;min-height:33px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:var(--muted);font-size:8px;font-weight:600;cursor:pointer}.perio-micro-checks label:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary)}.perio-status-cell{display:grid;grid-template-columns:1fr 1fr;gap:5px}.perio-status-cell label{display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:var(--muted);font-size:9px;font-weight:600}.perio-status-cell label:has(input:checked){border-color:#dc2626;background:#fef2f2;color:#b91c1c}.perio-mini-select,.perio-note-input{width:100%;min-height:32px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:var(--text);font-size:11px;font-weight:600;padding:0 6px}.perio-note-input{font-size:10px}.perio-mini-select:focus,.perio-note-input:focus{outline:2px solid color-mix(in srgb,var(--primary) 18%,transparent);border-color:var(--primary);background:#fff}@media(max-width:760px){.perio-chart-panel-head{display:grid}.periochart-table tbody th{width:96px;min-width:96px}.periochart-table td{width:104px;min-width:104px}.perio-micro-input{min-height:30px;font-size:11px}.perio-micro-checks label{min-height:30px}} /* Phase 5N: premium dental aesthetics module */ .esthetic-module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 6px 18px rgba(16,43,66,.045)} .esthetic-module-head h2{margin:8px 0 4px;color:var(--primary);font-size:23px;line-height:1.2}.esthetic-module-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} .esthetic-subnav{display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface);scrollbar-width:thin}.esthetic-subtab{min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}.esthetic-subtab:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--primary)}.esthetic-subtab.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 18%,transparent)} .esthetic-gallery-filter-bar{margin-bottom:12px}.esthetic-gallery-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.esthetic-gallery-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}.esthetic-gallery-pill strong{color:var(--primary)}.esthetic-gallery-pill.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}.esthetic-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.esthetic-gallery-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 5px 16px rgba(16,43,66,.045)}.esthetic-gallery-preview{display:block;padding:0;border:0;background:color-mix(in srgb,var(--primary) 5%,var(--surface));cursor:pointer}.esthetic-gallery-preview img{display:block;width:100%;height:240px;object-fit:cover}.esthetic-gallery-preview.pdf{display:grid;place-items:center;height:240px}.esthetic-gallery-icon{display:grid;place-items:center;width:110px;height:110px;border-radius:24px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));color:var(--primary);font-size:30px;font-weight:650;letter-spacing:.06em}.esthetic-gallery-body{display:grid;gap:8px;padding:15px 15px 8px}.esthetic-gallery-body strong{font-size:15px;line-height:1.35;color:var(--primary)}.esthetic-gallery-body span,.esthetic-gallery-body small,.esthetic-gallery-body p{margin:0;color:var(--muted);overflow-wrap:anywhere}.esthetic-gallery-actions{display:flex;gap:8px;padding:0 15px 15px}.esthetic-gallery-actions .btn{flex:1}.esthetic-viewer{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.9fr);gap:18px;align-items:start}.esthetic-viewer-stage{display:grid;place-items:center;min-height:360px;padding:12px;border:1px solid var(--border);border-radius:16px;background:#f8fafc}.esthetic-viewer-stage img{max-width:100%;max-height:68vh;border-radius:12px;box-shadow:0 8px 24px rgba(16,43,66,.12)}.esthetic-viewer-pdf{display:grid;place-items:center;gap:10px;text-align:center;color:var(--muted)}.esthetic-viewer-sidebar{padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)} .esthetic-procedure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.esthetic-procedure-card{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:12px;font-weight:600;color:var(--text);cursor:pointer}.esthetic-procedure-card:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)} .esthetic-analysis-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.esthetic-analysis-canvas-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:#f8fafc;padding:12px}.esthetic-analysis-canvas-wrap canvas{display:block;width:100%;max-width:900px;height:auto;margin:auto;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(16,43,66,.08);touch-action:none}.esthetic-analysis-preview{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:18px}.esthetic-analysis-preview img{width:100%;border-radius:14px;border:1px solid var(--border);background:#f8fafc}.perio-instructions{margin-bottom:14px;padding:15px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 6px 18px rgba(16,43,66,.04)}.perio-instructions-title{font-size:13px;font-weight:650;color:var(--primary);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}.perio-instructions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.perio-chip{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border)}.perio-chip b{font-size:11px}.perio-chip.pd,.perio-row-pd th{background:#ecfdf5;color:#047857}.perio-chip.rec,.perio-row-rec th{background:#eff6ff;color:#1d4ed8}.perio-chip.bop,.perio-row-bop th{background:#fff1f2;color:#be123c}.perio-chip.sup,.perio-row-sup th{background:#fffbeb;color:#b45309}.perio-chip.plaque,.perio-row-plaque th{background:#f5f3ff;color:#6d28d9}.perio-chip.status,.perio-row-status th,.perio-row-mobility th,.perio-row-furcation th,.perio-row-prognosis th{background:#f8fafc;color:#334155}.perio-instructions p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.perio-row-pd td{background:#f0fdf4}.perio-row-rec td{background:#eff6ff}.perio-row-bop td{background:#fff1f2}.perio-row-sup td{background:#fffbeb}.perio-row-plaque td{background:#f5f3ff} @media(max-width:920px){.esthetic-viewer,.esthetic-analysis-preview{grid-template-columns:1fr}.esthetic-viewer-stage{min-height:260px}}@media(max-width:620px){.esthetic-gallery-grid{grid-template-columns:1fr}.esthetic-gallery-preview img,.esthetic-gallery-preview.pdf{height:220px}.esthetic-gallery-actions{flex-direction:column}.esthetic-module-head{padding:15px 16px}.esthetic-subnav{padding:6px}.esthetic-subtab{min-height:36px;padding:0 11px}} /* Agenda Google Calendar style */ .calendar-shell { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); } .calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; } .calendar-toolbar h3 { margin:0; color:var(--primary); font-size:20px; text-transform:capitalize; } .segmented { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--muted); } .segmented button { border:0; background:transparent; padding:8px 13px; cursor:pointer; color:var(--text); font-weight:600; } .segmented button.active { background:var(--primary); color:#fff; } .calendar-day-view { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; } .calendar-hour-row { display:grid; grid-template-columns:76px minmax(0,1fr); min-height:58px; border-bottom:1px solid var(--border); } .calendar-hour-row:last-child { border-bottom:0; } .calendar-hour { padding:12px; background:var(--muted); color:var(--muted-text); font-size:12px; font-weight:600; text-align:right; } .calendar-hour-events { padding:8px; display:grid; gap:6px; align-content:start; } .calendar-empty-slot { color:var(--muted-text); font-size:12px; padding:8px; } .calendar-week-view { display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); border:1px solid var(--border); border-radius:14px; overflow:auto; background:#fff; } .calendar-day-col { min-height:480px; border-right:1px solid var(--border); min-width:128px; } .calendar-day-col:last-child { border-right:0; } .calendar-day-head { width:100%; border:0; border-bottom:1px solid var(--border); background:var(--muted); padding:10px; cursor:pointer; color:var(--text); text-align:center; } .calendar-day-head strong { display:block; text-transform:capitalize; color:var(--muted-text); font-size:12px; } .calendar-day-head span { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-weight:600; font-size:16px; } .calendar-day-head:hover span { background:var(--accent); color:#fff; } .calendar-day-events { padding:8px; display:grid; gap:6px; } .calendar-day-events em { color:var(--muted-text); font-size:12px; } .calendar-month-view { display:grid; grid-template-columns:repeat(7,minmax(118px,1fr)); border:1px solid var(--border); border-radius:14px; overflow:auto; background:#fff; } .calendar-month-label { background:var(--primary); color:#fff; padding:9px; font-size:12px; font-weight:600; text-align:center; } .calendar-month-cell { min-height:116px; border-right:1px solid var(--border); border-top:1px solid var(--border); padding:7px; min-width:118px; } .calendar-month-cell:nth-child(7n) { border-right:0; } .calendar-month-cell.muted { background:#f8fafc; opacity:.72; } .calendar-month-date { border:0; background:transparent; font-weight:600; color:var(--primary); cursor:pointer; border-radius:999px; padding:4px 8px; } .calendar-month-date:hover { background:var(--accent); color:#fff; } .calendar-event { width:100%; border:0; border-left:4px solid var(--accent); background:#eef7fb; color:#17476f; border-radius:10px; padding:8px 10px; display:grid; gap:2px; text-align:left; cursor:pointer; font-size:12px; box-shadow:0 3px 8px rgba(15,23,42,.06); } .calendar-event strong { font-size:12px; line-height:1.25; } .calendar-event span, .calendar-event small { opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .calendar-event.compact { padding:6px 7px; font-size:11px; } .calendar-event.confirmed { border-color:#16a34a; background:#eaf8ef; color:#166534; } .calendar-event.completed { border-color:#0f766e; background:#e8f7f4; color:#0f766e; } .calendar-event.cancelled { border-color:#dc2626; background:#fee2e2; color:#991b1b; text-decoration:line-through; } .calendar-event.no_show { border-color:#d97706; background:#fff7ed; color:#92400e; } .calendar-more { display:block; margin-top:4px; color:var(--muted-text); font-size:11px; font-weight:600; } .calendar-foot-note { margin-top:12px; color:var(--muted-text); font-size:12px; } .appointment-detail .detail-grid { margin-top:0; } .booking-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; border:1px solid var(--border); border-radius:12px; padding:10px; background:#f8fafc; } .booking-check-row { display:flex; gap:8px; align-items:center; font-size:13px; } @media (max-width: 880px) { .calendar-week-view,.calendar-month-view { grid-template-columns:repeat(7,128px); } .calendar-toolbar { align-items:flex-start; } .calendar-hour-row { grid-template-columns:58px minmax(0,1fr); } } /* Phase 5N.5: modernización visual global y modales fluidos */ :root { --primary: #14507a; --primary-strong: #0d3556; --primary-soft: #e9f5fb; --accent: #16a6c9; --bg: #eef4f8; --surface: #ffffff; --text: #16293a; --muted: #6b7d8d; --line: #dce7ee; --shadow: 0 18px 48px rgba(20, 55, 84, .10); --shadow-strong: 0 28px 90px rgba(9, 31, 50, .22); --radius: 18px; --field-bg: #fbfdff; } html { scroll-behavior: smooth; } body { background: radial-gradient(circle at top left, rgba(22, 166, 201, .13), transparent 34vw), radial-gradient(circle at 80% 0%, rgba(20, 80, 122, .09), transparent 28vw), var(--bg); } body.modal-open { overflow: hidden; } .content { animation: ods-page-in .22s ease both; } @keyframes ods-page-in { from { opacity: 0; transform: translateY(8px); } } .card, .topbar, .login-card, .patient-directory, .section-box, .theme-preview, .export-card, .asset-card { border-color: rgba(220, 231, 238, .92); box-shadow: var(--shadow); } .card { overflow: hidden; } .card-title { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,253,.92)); } .btn, .icon-btn, .tab, .slot-btn, .switch, .nav-link { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; } .btn { border: 1px solid rgba(208, 221, 230, .96); background: linear-gradient(180deg, #ffffff, #edf4f8); color: #284458; box-shadow: 0 8px 20px rgba(20, 55, 84, .07); min-height: 40px; } .btn:hover:not(:disabled), .icon-btn:hover:not(:disabled), .tab:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(20, 55, 84, .12); filter: none; } .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .tab:active:not(:disabled) { transform: translateY(0) scale(.99); } .btn-primary { border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; box-shadow: 0 14px 32px rgba(22, 113, 151, .26); } .btn-accent { border-color: transparent; background: linear-gradient(135deg, #1598b8, #48bfd7); color: #fff; box-shadow: 0 14px 32px rgba(22, 166, 201, .24); } .btn-danger { border-color: rgba(168, 60, 71, .18); background: linear-gradient(180deg, #fff4f5, #fae3e7); } .btn-success { border-color: rgba(36, 117, 81, .16); background: linear-gradient(180deg, #effaf5, #dff3e9); } .input, .select, .textarea { background: var(--field-bg); border: 1px solid rgba(206, 219, 229, .95); border-radius: 14px; min-height: 43px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 0 rgba(20,55,84,.03); } .input:hover, .select:hover, .textarea:hover { border-color: rgba(124, 172, 195, .78); background: #fff; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(22, 166, 201, .14), 0 10px 22px rgba(20,55,84,.07); background: #fff; } .field label { color: #405b70; letter-spacing: .01em; } .field small { color: var(--muted); line-height: 1.45; } .badge { border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.38); } .tabs { padding: 5px; border-radius: 999px; background: rgba(255,255,255,.68); border: 1px solid rgba(220,231,238,.85); box-shadow: 0 8px 26px rgba(20,55,84,.06); display: inline-flex; max-width: 100%; } .tab { background: transparent; border-color: transparent; } .tab.active { background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 12px 24px rgba(22,113,151,.22); } table { border-collapse: separate; border-spacing: 0; } th { background: rgba(248, 251, 253, .86); } td { background: rgba(255,255,255,.72); } tr:hover td { background: #f8fcfe; } .notice { border-radius: 16px; box-shadow: 0 10px 22px rgba(20,55,84,.05); } .toast { border-radius: 16px; background: linear-gradient(135deg, #103754, #1e6389); box-shadow: 0 18px 40px rgba(9,31,50,.22); } /* Modales principales */ .modal-backdrop { z-index: 80; padding: clamp(12px, 3vw, 34px); background: radial-gradient(circle at 50% 18%, rgba(22,166,201,.22), transparent 36%), rgba(11, 30, 47, .58); backdrop-filter: blur(10px) saturate(128%); -webkit-backdrop-filter: blur(10px) saturate(128%); animation: ods-backdrop-in .18s ease both; } .modal { width: min(880px, 100%); max-height: min(91vh, 940px); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,254,.98)); border: 1px solid rgba(255,255,255,.72); border-radius: 28px; box-shadow: var(--shadow-strong); overflow: hidden; animation: ods-modal-in .22s cubic-bezier(.2,.85,.25,1) both; } .modal-wide { width: min(1040px, 100%); } .modal-header { position: sticky; top: 0; z-index: 3; padding: 20px 22px 17px; border-bottom: 1px solid rgba(220,231,238,.86); background: linear-gradient(135deg, rgba(20,80,122,.08), rgba(22,166,201,.08)), rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; } .modal-title-dot { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 12px 28px rgba(22, 113, 151, .24); position: relative; } .modal-title-dot::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 5px rgba(255,255,255,.18); } .modal-header h3 { font-size: clamp(18px, 2.3vw, 22px); font-weight:650; letter-spacing: -.45px; color: #14334a; line-height: 1.18; overflow-wrap: anywhere; } .close { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.78); border: 1px solid rgba(220,231,238,.92); color: #627789; font-size: 24px; line-height: 1; box-shadow: 0 8px 20px rgba(20,55,84,.08); } .close:hover { color: var(--primary); background: #fff; transform: rotate(90deg) scale(1.02); } .modal-body { padding: 22px; max-height: calc(min(91vh, 940px) - 150px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(20,80,122,.28) transparent; } .modal-body::-webkit-scrollbar { width: 9px; } .modal-body::-webkit-scrollbar-thumb { background: rgba(20,80,122,.24); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } .modal-footer { position: sticky; bottom: 0; z-index: 3; padding: 16px 22px 20px; border-top: 1px solid rgba(220,231,238,.86); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-body .form-grid { gap: 18px; } .modal-body .section-box, .modal-body .notice, .modal-body .card { border-radius: 20px; border-color: rgba(220,231,238,.88); background: linear-gradient(180deg, #ffffff, #f8fbfd); box-shadow: 0 12px 28px rgba(20,55,84,.06); } .modal-body .section-head { border-bottom-color: rgba(220,231,238,.78); } .modal-body .detail-grid > div, .appointment-detail .detail-grid > div { border-radius: 16px; background: linear-gradient(180deg, #fff, #f7fbfd); border: 1px solid rgba(220,231,238,.85); box-shadow: 0 8px 18px rgba(20,55,84,.04); } @keyframes ods-backdrop-in { from { opacity: 0; } } @keyframes ods-modal-in { from { opacity: 0; transform: translateY(18px) scale(.975); } } /* Alertas y confirmaciones del sistema */ .system-dialog-backdrop { z-index: 140; background: radial-gradient(circle at 50% 28%, rgba(22,166,201,.22), transparent 34%), rgba(11, 30, 47, .60); backdrop-filter: blur(10px) saturate(128%); -webkit-backdrop-filter: blur(10px) saturate(128%); } .system-dialog { width: min(560px, 100%); padding: 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,254,.98)); border: 1px solid rgba(255,255,255,.72); box-shadow: var(--shadow-strong); } .system-dialog-icon { border-radius: 16px; box-shadow: 0 12px 28px rgba(20,55,84,.10); } .system-dialog-copy h3 { font-size: 20px; letter-spacing: -.35px; color: #14334a; } .system-dialog-copy p { font-size: 14px; } /* Agenda más viva sin tocar la lógica */ .agenda-grid { border-color: rgba(220,231,238,.82); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); } .agenda-head { background: linear-gradient(180deg, #f8fcfe, #eef7fb); color: #345a70; } .agenda-time { background: #f8fbfd; color: #718697; } .agenda-cell { border-color: rgba(220,231,238,.82); transition: background .18s ease; } .agenda-cell:not(.agenda-head):not(.agenda-time):hover { background: #f8fcfe; } .appointment { border-radius: 13px; padding: 8px; box-shadow: 0 8px 20px rgba(47,137,168,.12); border-left-width: 5px; } .appointment:hover { transform: translateY(-1px); } @media (max-width: 880px) { .modal-backdrop { align-items: end; padding: 10px; } .modal { width: 100%; max-height: 94vh; border-radius: 26px 26px 0 0; } .modal-header { padding: 17px 16px 14px; } .modal-title-dot { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; } .modal-title-dot::after { inset: 9px; } .close { width: 38px; height: 38px; flex-basis: 38px; } .modal-body { padding: 16px; max-height: calc(94vh - 148px); } .modal-footer { padding: 13px 16px 16px; } .tabs { border-radius: 18px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; } .tab { white-space: nowrap; } } @media (max-width: 620px) { .modal-footer { flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } .modal-header h3 { font-size: 18px; } } :root[data-theme="dark"] { --bg: #111b24; --surface: #1d2b36; --text: #eef7fb; --muted: #a9bfcb; --line: #344a57; --field-bg: #172530; --primary-soft: #203b4b; --shadow: 0 18px 48px rgba(0,0,0,.22); --shadow-strong: 0 28px 90px rgba(0,0,0,.42); } :root[data-theme="dark"] .modal { background: linear-gradient(180deg, rgba(29,43,54,.98), rgba(22,35,45,.98)); border-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { background: rgba(29,43,54,.92); border-color: rgba(255,255,255,.09); } :root[data-theme="dark"] .modal-header h3, :root[data-theme="dark"] .system-dialog-copy h3 { color: #eef7fb; } :root[data-theme="dark"] .close { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #c9dae2; } :root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea { background: #172530; border-color: #344a57; } :root[data-theme="dark"] .btn { background: linear-gradient(180deg, #293b48, #20313d); border-color: rgba(255,255,255,.1); color: #eef7fb; } :root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } :root[data-theme="dark"] .card-title, :root[data-theme="dark"] th { background: rgba(255,255,255,.04); } :root[data-theme="dark"] td, :root[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.025); } :root[data-theme="dark"] .modal-body .section-box, :root[data-theme="dark"] .modal-body .notice, :root[data-theme="dark"] .modal-body .card, :root[data-theme="dark"] .modal-body .detail-grid > div, :root[data-theme="dark"] .appointment-detail .detail-grid > div, :root[data-theme="dark"] .system-dialog { background: linear-gradient(180deg, #22333f, #1a2934); border-color: rgba(255,255,255,.09); } :root[data-theme="dark"] .tabs { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .agenda-grid { background: #1d2b36; } :root[data-theme="dark"] .agenda-head { background: linear-gradient(180deg, #243744, #1d2b36); color: #d5e7ee; } :root[data-theme="dark"] .agenda-time { background: #182632; } :root[data-theme="dark"] .agenda-cell:not(.agenda-head):not(.agenda-time):hover { background: rgba(255,255,255,.035); } /* Agenda · selector de paciente existente/manual */ .appointment-patient-switch { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; } .appointment-patient-switch label { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:linear-gradient(180deg,#fff,#f8fafc); color:var(--text); font-weight:600; font-size:12px; cursor:pointer; } .appointment-patient-switch input { accent-color:var(--primary); } .appointment-patient-search { position:relative; display:grid; gap:8px; } .appointment-patient-results { display:grid; gap:8px; max-height:280px; overflow:auto; } .appointment-patient-option { width:100%; border:1px solid rgba(47,137,168,.22); border-radius:14px; background:linear-gradient(135deg,#ffffff,#eef9fc); padding:11px 13px; text-align:left; cursor:pointer; display:grid; gap:4px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .appointment-patient-option:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.10); border-color:var(--accent); } .appointment-patient-option strong { color:var(--primary); font-size:13px; } .appointment-patient-option span, .appointment-patient-empty { color:var(--muted-text); font-size:12px; } .appointment-patient-empty { padding:10px 12px; border:1px dashed var(--border); border-radius:12px; background:var(--muted); } .appointment-patient-empty.warning { color:#92400e; background:#fff7ed; border-color:#fed7aa; } .appointment-patient-selected { margin-top:10px; padding:12px; border-radius:16px; border:1px solid rgba(22,163,74,.25); background:linear-gradient(135deg,#ecfdf5,#f8fffb); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .appointment-patient-selected.hidden { display:none; } .appointment-patient-selected div { display:grid; gap:4px; } .appointment-patient-selected strong { color:#166534; } .appointment-patient-selected span { color:#166534; font-size:12px; line-height:1.45; } .appointment-patient-data-card { display:grid; gap:5px; padding:12px; border-radius:14px; background:linear-gradient(135deg,#eff6ff,#f8fbff); border:1px solid rgba(37,99,235,.18); } .appointment-patient-data-card strong { color:var(--primary); } .appointment-patient-data-card span { color:var(--muted-text); font-size:12px; line-height:1.45; } #appointment-form.appointment-existing-mode #appointment-patient-name.readonly, #appointment-form.appointment-existing-mode #appointment-patient-phone.readonly, #appointment-form.appointment-existing-mode #appointment-patient-email.readonly { background:#eef6f9; color:var(--muted-text); cursor:not-allowed; } #appointment-form.appointment-manual-mode #appointment-patient-search-wrap { opacity:.92; } :root[data-theme="dark"] .appointment-patient-switch label, :root[data-theme="dark"] .appointment-patient-option, :root[data-theme="dark"] .appointment-patient-selected, :root[data-theme="dark"] .appointment-patient-data-card { background:linear-gradient(180deg,#22333f,#1a2934); border-color:rgba(255,255,255,.10); } :root[data-theme="dark"] .appointment-patient-empty { background:#17242e; border-color:rgba(255,255,255,.10); } /* Phase 5N.9: resumen hover y acciones rápidas de agenda */ .calendar-event{position:relative;overflow:visible}.calendar-event-tooltip{position:absolute;left:12px;top:calc(100% + 8px);z-index:60;display:grid;gap:7px;width:min(320px,88vw);padding:13px;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f7fbfd);border:1px solid rgba(206,219,229,.95);box-shadow:0 20px 55px rgba(15,23,42,.18);color:var(--text);text-align:left;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;pointer-events:none}.calendar-event-tooltip:before{content:"";position:absolute;left:18px;top:-7px;width:13px;height:13px;background:#fff;border-left:1px solid rgba(206,219,229,.95);border-top:1px solid rgba(206,219,229,.95);transform:rotate(45deg)}.calendar-event:hover .calendar-event-tooltip,.calendar-event:focus-visible .calendar-event-tooltip{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.calendar-event-tooltip div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:start}.calendar-event-tooltip strong{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);white-space:normal}.calendar-event-tooltip span{font-size:12px;color:var(--text);line-height:1.35;white-space:normal}.appointment-detail-hero{display:flex;justify-content:space-between;gap:14px;align-items:stretch;padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(47,137,168,.15),rgba(20,80,122,.08));border:1px solid rgba(47,137,168,.20);margin-bottom:14px}.appointment-detail-hero h3{margin:8px 0 4px;color:var(--primary);font-size:22px}.appointment-detail-hero p{margin:0;color:var(--muted);font-weight:600}.appointment-detail-date{min-width:92px;border-radius:17px;background:#fff;border:1px solid rgba(206,219,229,.95);display:grid;place-content:center;text-align:center;box-shadow:0 12px 28px rgba(20,55,84,.08)}.appointment-detail-date strong{font-size:22px;color:var(--primary)}.appointment-detail-date span{font-size:12px;color:var(--muted);font-weight:650}.appointment-quick-panel{margin-top:16px;padding:15px;border-radius:20px;background:linear-gradient(180deg,#f8fbfe,#eef7fb);border:1px solid rgba(206,219,229,.95);display:grid;gap:12px}.appointment-contact-actions,.appointment-status-actions{display:flex;flex-wrap:wrap;gap:9px}.appointment-quick-panel small,.appointment-quick-panel .muted{color:var(--muted);font-size:12px;line-height:1.45}.btn-whatsapp{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-color:#86efac;color:#166534}.btn-warning{background:linear-gradient(180deg,#fff7ed,#ffedd5);border-color:#fed7aa;color:#92400e}.appointment-status-actions .btn{font-size:12px;padding:9px 12px}.calendar-event.rescheduled{border-color:var(--warning);background:#fff7ed;color:#7c4a03}.calendar-event.completed{border-color:var(--success);background:#ecfdf5;color:#166534}.calendar-event.cancelled{border-color:var(--danger);background:#fef2f2;color:#991b1b;text-decoration:line-through}.calendar-event.no_show{border-color:#f59e0b;background:#fffbeb;color:#92400e}@media(max-width:720px){.calendar-event-tooltip{left:0;right:auto;width:min(290px,82vw)}.appointment-detail-hero{display:grid}.appointment-contact-actions,.appointment-status-actions{display:grid}.appointment-contact-actions .btn,.appointment-status-actions .btn{width:100%}} :root[data-theme="dark"] .calendar-event-tooltip,:root[data-theme="dark"] .appointment-detail-date{background:linear-gradient(180deg,#22333f,#1a2934);border-color:rgba(255,255,255,.10);box-shadow:0 20px 55px rgba(0,0,0,.32)}:root[data-theme="dark"] .calendar-event-tooltip:before{background:#22333f;border-color:rgba(255,255,255,.10)}:root[data-theme="dark"] .appointment-quick-panel,:root[data-theme="dark"] .appointment-detail-hero{background:linear-gradient(180deg,#22333f,#1a2934);border-color:rgba(255,255,255,.10)} .btn-calendar{background:linear-gradient(135deg,#eef2ff,#dbeafe);border-color:#bfdbfe;color:#1d4ed8}.appointment-contact-actions .btn-calendar{font-weight:650}.btn-action-icon{width:18px;height:18px;object-fit:contain;flex:0 0 18px}.appointment-contact-actions .btn,.appointment-status-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.calendar-foot-note strong{color:var(--primary)} /* Google Calendar automático */ .google-calendar-panel{display:flex;flex-direction:column;gap:14px}.integration-hero{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(37,99,235,.11),rgba(20,184,166,.12));border:1px solid rgba(148,163,184,.25)}.integration-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:650;font-size:1.25rem;background:#fff;color:#2563eb;box-shadow:0 10px 24px rgba(15,23,42,.12)}.integration-hero h3{margin:0 0 4px}.integration-hero p{margin:0;color:var(--muted)}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.detail-grid>div{padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.detail-grid .wide{grid-column:1/-1}.detail-grid strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}.detail-grid span{font-weight:600;word-break:break-word}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace} /* Phase 5N.12: Agenda avanzada, filtros y sincronización visible */ .calendar-filter-row{display:flex;align-items:stretch;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 14px}.agenda-doctor-filter{display:flex;align-items:center;gap:10px;min-width:min(100%,360px);padding:10px 12px;border:1px solid rgba(206,219,229,.92);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fbfd)}.agenda-doctor-filter label{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}.agenda-doctor-filter .select{min-width:220px}.agenda-public-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#ecfeff,#f0fdf4);border:1px solid rgba(45,212,191,.38);box-shadow:0 12px 30px rgba(15,118,110,.10)}.agenda-public-alert strong{display:block;color:#0f766e;font-size:14px}.agenda-public-alert span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.google-sync-card{display:grid;gap:6px;margin:0 0 14px;padding:13px 14px;border-radius:18px;border:1px solid rgba(206,219,229,.95);background:linear-gradient(180deg,#fff,#f8fbfd)}.google-sync-card.success{border-color:rgba(34,197,94,.32);background:linear-gradient(180deg,#f0fdf4,#ecfdf5)}.google-sync-card.warning{border-color:rgba(245,158,11,.32);background:linear-gradient(180deg,#fffbeb,#fff7ed)}.google-sync-card.danger{border-color:rgba(239,68,68,.32);background:linear-gradient(180deg,#fff1f2,#fef2f2)}.google-sync-card span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}.google-sync-card small{color:#991b1b;font-weight:600}.appointment-quick-panel.sticky-actions{position:sticky;top:0;z-index:3;margin-top:0;margin-bottom:16px;backdrop-filter:blur(12px);box-shadow:0 14px 32px rgba(15,23,42,.10)}.appointment-quick-panel .section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.appointment-quick-panel .sync-ok{color:#15803d;font-weight:600}.appointment-detail .appointment-quick-panel+.appointment-detail-hero{margin-top:0}@media(max-width:720px){.agenda-doctor-filter,.agenda-public-alert{width:100%}.agenda-doctor-filter{align-items:stretch;flex-direction:column}.agenda-doctor-filter .select{min-width:0;width:100%}.appointment-quick-panel.sticky-actions{top:-1px}.appointment-quick-panel .section-head{display:grid}.agenda-public-alert{display:grid}} :root[data-theme="dark"] .agenda-doctor-filter,:root[data-theme="dark"] .google-sync-card{background:linear-gradient(180deg,#22333f,#1a2934);border-color:rgba(255,255,255,.10)}:root[data-theme="dark"] .agenda-public-alert{background:linear-gradient(135deg,rgba(20,184,166,.18),rgba(34,197,94,.12));border-color:rgba(255,255,255,.10)} /* Phase 5N.13: agenda personalizada y alerta pública accionable */ .calendar-shell{ border-top:4px solid var(--accent); box-shadow:0 22px 70px rgba(20,55,84,.10); } .calendar-toolbar h3, .calendar-day-head span, .calendar-month-date{ color:var(--primary); } .calendar-event{ border-left-color:var(--accent); color:var(--primary); background:linear-gradient(180deg,#ffffff,#eef7fb); } .calendar-event:not(.confirmed):not(.completed):not(.cancelled):not(.no_show):not(.rescheduled):hover{ border-left-color:var(--primary); box-shadow:0 10px 24px rgba(20,55,84,.14); } .calendar-foot-note{ border-left:4px solid var(--accent); } .agenda-public-alert-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .agenda-public-alert .btn-primary{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-color:transparent; color:#fff; } :root[data-theme="dark"] .calendar-event:not(.confirmed):not(.completed):not(.cancelled):not(.no_show):not(.rescheduled){ background:linear-gradient(180deg,#213342,#172634); color:#d7edf7; } @media(max-width:720px){ .agenda-public-alert-actions{justify-content:stretch} .agenda-public-alert-actions .btn{width:100%} } /* Phase 5N.15: menú de acciones de pacientes con más espacio y sin recorte */ .patient-directory .table-wrap { overflow: visible; content-visibility: visible; contain-intrinsic-size: auto; } .patient-directory table, .patient-directory tbody, .patient-directory tr, .patient-directory td { overflow: visible; } .patient-directory td:last-child { position: relative; min-width: 230px; } .patient-actions { min-width: 220px; gap: 9px; } .row-action-menu { position: relative; flex: 0 0 auto; } .row-action-menu summary { border-radius: 11px; } .row-action-popover { z-index: 1200; top: calc(100% + 8px); right: 0; width: 250px; padding: 8px; border-radius: 14px; box-shadow: 0 18px 42px rgba(19,48,75,.22); } .row-action-popover button { padding: 12px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.28; white-space: normal; } .row-action-popover button + button { margin-top: 3px; } @media(max-width:760px){ .patient-directory .table-wrap { overflow-x: auto; overflow-y: visible; } .patient-directory td:last-child { min-width: 190px; } .patient-actions { min-width: 180px; justify-content:flex-start; } .row-action-popover { left: 0; right: auto; width: 230px; } } /* Phase 5N.16: acciones rápidas compactas en móvil */ @media(max-width:720px){ .appointment-detail{display:grid;gap:12px;} .appointment-detail .appointment-quick-panel.sticky-actions{ position:sticky; top:-1px; z-index:5; margin:0 0 12px; padding:10px 10px 11px; border-radius:18px; gap:8px; max-height:42vh; overflow-y:auto; overscroll-behavior:contain; box-shadow:0 10px 26px rgba(15,23,42,.12); } .appointment-quick-panel.sticky-actions .section-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .appointment-quick-panel.sticky-actions .section-head > div{ min-width:0; } .appointment-quick-panel.sticky-actions .section-head strong{ display:block; font-size:13px; line-height:1.2; } .appointment-quick-panel.sticky-actions .section-head span{ display:none; } .appointment-quick-panel.sticky-actions .badge, .appointment-quick-panel.sticky-actions [class*="badge"]{ flex:0 0 auto; max-width:48%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .appointment-detail .appointment-contact-actions, .appointment-detail .appointment-status-actions{ display:flex !important; flex-wrap:nowrap; gap:7px; overflow-x:auto; overflow-y:hidden; padding:1px 2px 5px; margin:0 -2px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .appointment-detail .appointment-contact-actions .btn, .appointment-detail .appointment-status-actions .btn{ width:auto !important; flex:0 0 auto; min-height:34px; padding:7px 10px; border-radius:999px; font-size:11.5px; line-height:1.15; white-space:nowrap; box-shadow:0 4px 12px rgba(15,23,42,.07); } .appointment-detail .appointment-contact-actions .muted{ display:block; min-width:0; padding:7px 10px; border-radius:12px; background:rgba(148,163,184,.10); font-size:11px; } .appointment-quick-panel.sticky-actions small, .appointment-quick-panel.sticky-actions .sync-ok{ display:block; font-size:10.5px; line-height:1.3; max-height:28px; overflow:hidden; } .appointment-detail-hero{ padding:13px; border-radius:18px; gap:10px; } .appointment-detail-hero h3{ font-size:18px; } .appointment-detail-date{ min-height:58px; min-width:0; padding:8px; } .appointment-detail-date strong{font-size:18px;} .appointment-detail .google-sync-card{ padding:10px 11px; border-radius:15px; } .appointment-detail .detail-grid{ grid-template-columns:1fr; gap:8px; } } @media(max-width:420px){ .appointment-detail .appointment-quick-panel.sticky-actions{ max-height:38vh; padding:9px; } .appointment-detail .appointment-contact-actions .btn, .appointment-detail .appointment-status-actions .btn{ min-height:32px; padding:7px 9px; font-size:11px; } .appointment-quick-panel.sticky-actions small, .appointment-quick-panel.sticky-actions .sync-ok{ display:none; } } /* Caja 5N.18 */ .cash-module{display:grid;gap:18px;} .cash-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;} .cash-summary-grid .metric-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96));border:1px solid rgba(148,163,184,.25);border-radius:20px;padding:16px;box-shadow:0 12px 34px rgba(15,23,42,.08);} .cash-summary-grid .metric-card span{display:block;color:#64748b;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;} .cash-summary-grid .metric-card strong{display:block;margin-top:7px;color:var(--primary);font-size:24px;line-height:1.1;} .cash-summary-grid .metric-card small{display:block;margin-top:7px;color:#64748b;line-height:1.35;} .cash-filter-row{display:grid;grid-template-columns:minmax(180px,240px) 1fr auto;gap:10px;margin-bottom:14px;align-items:center;} .cash-table td small{color:#64748b;} .cash-form-grid{display:grid;grid-template-columns:1fr;gap:14px;} .cash-item-row,.cash-payment-row{display:grid;grid-template-columns:150px minmax(180px,1.2fr) minmax(180px,1.4fr) 90px 110px auto;gap:10px;align-items:end;padding:12px;border:1px solid rgba(148,163,184,.25);border-radius:18px;background:rgba(248,250,252,.72);margin-bottom:10px;} .cash-payment-row{grid-template-columns:150px 110px 130px minmax(140px,1fr) minmax(130px,1fr) minmax(150px,1fr) auto;} .cash-item-row .field,.cash-payment-row .field{margin-bottom:0;} .cash-item-row .mini{min-width:0;} .cash-total-preview{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;background:linear-gradient(135deg,rgba(23,71,111,.08),rgba(47,137,168,.10));border:1px solid rgba(47,137,168,.22);border-radius:20px;padding:12px;position:sticky;bottom:0;z-index:2;backdrop-filter:blur(12px);} .cash-total-preview div{background:#fff;border:1px solid rgba(148,163,184,.20);border-radius:14px;padding:10px;text-align:center;box-shadow:0 6px 16px rgba(15,23,42,.06);} .cash-total-preview span{display:block;font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.04em;} .cash-total-preview strong{display:block;margin-top:4px;color:var(--primary);font-size:15px;} .cash-detail{display:grid;gap:14px;} .btn-cash{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;border-color:transparent;} .btn-cash:hover{filter:brightness(.98);} @media(max-width:1080px){.cash-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.cash-item-row,.cash-payment-row{grid-template-columns:1fr 1fr;}.cash-item-row .btn,.cash-payment-row .btn{grid-column:1/-1}.cash-total-preview{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:720px){.cash-summary-grid{grid-template-columns:1fr}.cash-filter-row{grid-template-columns:1fr}.cash-item-row,.cash-payment-row{grid-template-columns:1fr}.cash-total-preview{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.cash-summary-grid .metric-card strong{font-size:20px;}} .cash-closing{display:grid;gap:16px;} .cash-closing h4{margin:4px 0 0;color:var(--primary);} .cash-detail .notice{margin-bottom:4px;} @media print{.modal-backdrop{position:static;background:#fff}.modal-panel{box-shadow:none;max-width:100%;}.modal-footer,.modal-close{display:none!important}.cash-closing{font-size:12px}} /* 5N.20 Caja: crédito, seguros y cuentas por cobrar */ .cash-payment-row{grid-template-columns:150px 110px 130px minmax(140px,1fr) minmax(130px,1fr) minmax(150px,1fr) auto;} .cash-payment-extra{grid-column:1/-1;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:10px;margin-top:4px;border-top:1px dashed rgba(148,163,184,.35);} .cash-payment-row.is-insurance .cash-payment-extra,.cash-payment-row.is-credit .cash-payment-extra,.cash-payment-row.is-card .cash-payment-extra{display:grid;} .cash-payment-row:not(.is-cash) .cash-received-field{display:none;} .cash-payment-row.is-cash .cash-payment-extra .field:not(:has([data-cash-payment="notes"])){display:none;} .cash-payment-row.is-card .cash-payment-extra .field:has([data-cash-payment="insurerName"]), .cash-payment-row.is-card .cash-payment-extra .field:has([data-cash-payment="policyNumber"]), .cash-payment-row.is-card .cash-payment-extra .field:has([data-cash-payment="claimNumber"]), .cash-payment-row.is-card .cash-payment-extra .field:has([data-cash-payment="dueDate"]), .cash-payment-row.is-card .cash-payment-extra .field:has([data-cash-payment="payerName"]){display:none;} .cash-payment-row.is-credit .cash-payment-extra .field:has([data-cash-payment="insurerName"]), .cash-payment-row.is-credit .cash-payment-extra .field:has([data-cash-payment="policyNumber"]), .cash-payment-row.is-credit .cash-payment-extra .field:has([data-cash-payment="claimNumber"]), .cash-payment-row.is-credit .cash-payment-extra .field:has([data-cash-payment="cardLast4"]){display:none;} .cash-payment-row.is-insurance .cash-payment-extra .field:has([data-cash-payment="cardLast4"]){display:none;} .cash-receivables .table td{vertical-align:top;} .cash-receivables .metric-card strong{font-size:22px;} @media(max-width:1080px){.cash-payment-extra{grid-template-columns:1fr 1fr;}} @media(max-width:720px){.cash-payment-extra{grid-template-columns:1fr;}.cash-payment-row{grid-template-columns:1fr;}} /* 5N.21 Caja POS: productos */ .cash-item-row[data-item-type="catalog_treatment"] .cash-product-field{display:none;} .cash-item-row[data-item-type="product"] .cash-treatment-field{display:none;} .cash-item-row[data-item-type="manual_service"] .cash-treatment-field, .cash-item-row[data-item-type="manual_service"] .cash-product-field{display:none;} .cash-products-panel{display:grid;gap:14px;} .cash-products-panel .table td:last-child{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;} @media(max-width:720px){.cash-products-panel .table td:last-child{justify-content:flex-start;}} /* 5N.22 Caja Reportes */ .cash-report-filters { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; gap: 12px; align-items: end; padding: 14px; margin-bottom: 16px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,252,.9)); box-shadow: 0 10px 26px rgba(15, 23, 42, .06); } .cash-reports h4 { margin: 20px 0 10px; color: var(--text-primary, #0f172a); } .cash-report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .cash-report-table th, .cash-report-table td { white-space: nowrap; } .cash-report-table small { display: block; color: var(--text-muted, #64748b); margin-top: 2px; } @media (max-width: 860px) { .cash-report-filters, .cash-report-columns { grid-template-columns: 1fr; } .cash-report-filters .btn { width: 100%; } } @media print { .cash-report-filters, .modal-footer, .app-sidebar, .app-topbar, .toast-stack, .realtime-indicator { display: none !important; } .modal-card, .modal-body { max-height: none !important; overflow: visible !important; box-shadow: none !important; } } /* Caja 5N.25: corte avanzado */ .cash-register-panel { border: 1px solid var(--border, #d8e0e8); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)); margin-bottom: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.06); } .cash-register-panel h4, .cash-closing h4 { margin: 18px 0 10px; } .cash-register-panel .section-head { margin-bottom: 12px; } @media print { .modal-footer, .actions, .btn { display: none !important; } .cash-register-panel { box-shadow: none; border-color: #cbd5e1; } } /* Recepción 5N.31 */ .reception-module{display:grid;gap:16px}.reception-summary{display:grid;grid-template-columns:repeat(8,minmax(120px,1fr));gap:10px;overflow-x:auto;padding-bottom:3px}.reception-kpi{appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:14px;text-align:left;min-width:120px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.18s ease}.reception-kpi:hover,.reception-kpi.active{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 8px 24px rgba(15,23,42,.09)}.reception-kpi.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface))}.reception-kpi span{display:block;color:var(--muted);font-size:.78rem;font-weight:600}.reception-kpi strong{display:block;margin-top:5px;font-size:1.35rem;color:var(--text)}.reception-kpi.money strong{font-size:1rem;color:var(--primary)}.reception-toolbar{display:grid;grid-template-columns:180px 260px minmax(240px,1fr);gap:12px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm)}.reception-toolbar .field{margin:0}.reception-toolbar .grow{min-width:0}.reception-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:16px;align-items:start}.reception-list{display:grid;gap:12px}.reception-appointment{display:grid;grid-template-columns:92px minmax(0,1fr);gap:15px;padding:16px;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:18px;box-shadow:var(--shadow-sm);transition:.18s ease}.reception-appointment:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(15,23,42,.09)}.reception-appointment.waiting{border-left-color:#d97706}.reception-appointment.in_consultation{border-left-color:var(--accent)}.reception-appointment.completed{border-left-color:#15803d}.reception-appointment.no_show,.reception-appointment.cancelled{border-left-color:#b91c1c;opacity:.86}.reception-appointment.priority-priority{box-shadow:0 0 0 2px rgba(217,119,6,.14),var(--shadow-sm)}.reception-appointment.priority-urgent{box-shadow:0 0 0 2px rgba(185,28,28,.18),var(--shadow-sm)}.reception-time{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4px;border-right:1px solid var(--border)}.reception-time strong{font-size:1.28rem;color:var(--primary)}.reception-time span{color:var(--muted);font-size:.78rem}.reception-time em{margin-top:9px;font-size:.68rem;font-style:normal;font-weight:600;color:#92400e;background:#fef3c7;border-radius:999px;padding:4px 7px}.reception-main{min-width:0}.reception-title-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.reception-title-row h3{margin:0;font-size:1.05rem}.reception-title-row p{margin:4px 0 0;color:var(--muted)}.reception-meta{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:10px;color:var(--muted);font-size:.82rem}.wait-chip{display:inline-flex;border-radius:999px;background:#e0f2fe;color:#075985;padding:3px 8px;font-weight:600}.wait-chip.warning{background:#fef3c7;color:#92400e}.wait-chip.danger{background:#fee2e2;color:#991b1b}.reception-cash-state{display:flex;align-items:center;gap:8px;margin-top:10px}.reception-cash-state small{color:var(--muted)}.reception-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.reception-alerts{display:grid;gap:9px;position:sticky;top:78px}.reception-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:15px;padding:12px;background:var(--surface);box-shadow:var(--shadow-sm)}.reception-alert>div:first-child{display:grid;gap:3px}.reception-alert span{font-size:.8rem;color:var(--muted)}.reception-alert.warning{border-left:4px solid #d97706}.reception-alert.success{border-left:4px solid #15803d}.reception-alert.info{border-left:4px solid var(--primary)} @media(max-width:1100px){.reception-summary{grid-template-columns:repeat(4,minmax(125px,1fr))}.reception-layout{grid-template-columns:1fr}.reception-alerts{position:static}.reception-toolbar{grid-template-columns:1fr 1fr}.reception-toolbar .grow{grid-column:1/-1}} @media(max-width:680px){.reception-summary{display:flex}.reception-kpi{flex:0 0 126px}.reception-toolbar{grid-template-columns:1fr;padding:12px}.reception-toolbar .grow{grid-column:auto}.reception-appointment{grid-template-columns:68px minmax(0,1fr);padding:12px;gap:10px}.reception-time strong{font-size:1.05rem}.reception-title-row{flex-direction:column;gap:7px}.reception-actions{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}.reception-actions .btn{flex:0 0 auto;white-space:nowrap}.reception-alert{align-items:flex-start;flex-direction:column}.reception-alert .btn{width:100%}} /* ========================================================== Phase 5N.32 · OdontoSuite Fluid UI Rediseño visual integral, adaptable y basado en la identidad configurada por cada consultorio. ========================================================== */ :root{ --ui-radius-xs:10px; --ui-radius-sm:14px; --ui-radius-md:20px; --ui-radius-lg:28px; --ui-shadow-xs:0 2px 8px rgba(20,48,72,.05); --ui-shadow-sm:0 10px 28px rgba(20,48,72,.08); --ui-shadow-md:0 18px 48px rgba(20,48,72,.12); --ui-shadow-lg:0 30px 90px rgba(9,31,50,.20); --ui-glass:color-mix(in srgb,var(--surface) 88%,transparent); --ui-tint:color-mix(in srgb,var(--primary) 7%,var(--surface)); --ui-tint-strong:color-mix(in srgb,var(--primary) 13%,var(--surface)); --ui-accent-tint:color-mix(in srgb,var(--accent) 11%,var(--surface)); --ui-border:color-mix(in srgb,var(--primary) 12%,var(--line)); --ui-sidebar-text:rgba(255,255,255,.82); --ui-sidebar-muted:rgba(255,255,255,.53); } html{background:var(--bg);} body{ min-height:100vh; background: radial-gradient(circle at 8% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 32rem), radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 28rem), linear-gradient(180deg,color-mix(in srgb,var(--bg) 91%,#fff),var(--bg)); font-size:14px; line-height:1.45; letter-spacing:-.008em; } ::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text);} :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 34%,transparent);outline-offset:2px;} .ui-icon{width:20px;height:20px;display:block;flex:0 0 auto;} /* Estructura general */ .app-shell{grid-template-columns:284px minmax(0,1fr);gap:0;min-height:100vh;background:transparent;} .sidebar{ position:sticky;top:12px;height:calc(100vh - 24px);margin:12px 0 12px 12px;padding:13px 12px 16px; border:1px solid rgba(255,255,255,.16);border-radius:30px; background: radial-gradient(circle at 20% 0%,rgba(255,255,255,.15),transparent 19rem), linear-gradient(165deg,color-mix(in srgb,var(--sidebar-bg) 90%,#071b2c),color-mix(in srgb,var(--primary-strong) 82%,#071521)); box-shadow:0 26px 70px color-mix(in srgb,var(--primary-strong) 30%,transparent); overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent; } .sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px} .sidebar-brand-wrap{ min-height:70px;margin:0 0 12px;padding:9px 12px;border:0;border-radius:21px; background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(3,20,34,.18); } .sidebar-logo{height:50px;max-width:214px;} .sidebar-clinic{ display:flex;align-items:center;gap:11px;margin:0 1px 12px;padding:12px 11px;border:1px solid rgba(255,255,255,.12); border-radius:18px;background:rgba(255,255,255,.09);backdrop-filter:blur(12px); } .sidebar-clinic-icon{width:37px;height:37px;display:grid;place-items:center;flex:0 0 37px;border-radius:13px;background:rgba(255,255,255,.14);color:#fff;} .sidebar-clinic-icon .ui-icon{width:19px;height:19px;} .sidebar-clinic>div{min-width:0}.sidebar-clinic span:not(.sidebar-clinic-icon){font-size:9px;color:var(--ui-sidebar-muted);letter-spacing:.12em}.sidebar-clinic strong{font-size:13px;color:#fff;margin-top:3px;} .nav-section{padding:13px 11px 6px;color:var(--ui-sidebar-muted);font-size:9px;letter-spacing:.16em;} .nav-link{ position:relative;min-height:45px;margin:3px 0;padding:8px 10px;border:1px solid transparent;border-radius:16px; color:var(--ui-sidebar-text);font-weight:600;font-size:13px;gap:10px;overflow:hidden; } .nav-link::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);opacity:0;transition:.2s ease;} .nav-link:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.08);color:#fff;transform:translateX(2px);} .nav-link:hover::after{opacity:1}.nav-link>*{position:relative;z-index:1} .nav-link.active{ background:#fff;color:var(--primary);border-color:rgba(255,255,255,.7);box-shadow:0 12px 28px rgba(3,22,36,.22);font-weight:600; } .nav-link.active::before{content:"";position:absolute;right:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);} .nav-icon{width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;border-radius:11px;background:rgba(255,255,255,.08);} .nav-icon .ui-icon{width:18px;height:18px}.nav-link.active .nav-icon{background:var(--primary-soft);color:var(--primary);} .sidebar-footer{margin-top:18px;padding:14px 10px 2px;gap:3px;border-top-color:rgba(255,255,255,.10);} .sidebar-live{display:flex!important;align-items:center;gap:7px;margin-bottom:8px;color:rgba(255,255,255,.68)!important;font-size:10px!important;} .sidebar-live i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.12);} .main{min-width:0;background:transparent;} .topbar{ top:12px;z-index:15;min-height:72px;height:auto;margin:12px 18px 0;padding:10px 12px 10px 14px;border:1px solid rgba(255,255,255,.64);border-radius:22px; background:var(--ui-glass);box-shadow:var(--ui-shadow-sm);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%); } .topbar-left{gap:10px;min-width:0}.topbar-route-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 25%,transparent);} .topbar-route-icon .ui-icon{width:20px;height:20px}.topbar-context{min-width:0;gap:1px}.topbar-context strong{max-width:min(42vw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.breadcrumb{font-size:10px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;} .sidebar-toggle{width:40px;height:40px;border:1px solid var(--ui-border);border-radius:14px;background:var(--surface);box-shadow:var(--ui-shadow-xs);} .sidebar-toggle .ui-icon{width:20px;height:20px}.sidebar-toggle:hover{transform:translateY(-1px);box-shadow:var(--ui-shadow-sm);} .topbar-actions,.user-chip{display:flex;align-items:center;gap:8px;min-width:0}.user-chip{padding:4px 5px 4px 8px;border-radius:18px;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--ui-border);} .avatar{width:39px;height:39px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 22%,transparent);} .user-name{display:grid;line-height:1.15}.user-name strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.user-name small{margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.workspace-badge{background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);} .logout-btn{width:auto!important;min-height:36px!important;padding:7px 10px!important;border-radius:12px!important;box-shadow:none!important}.logout-btn .ui-icon{width:17px;height:17px}.logout-btn span{font-size:11px;} .content{max-width:1740px;width:100%;margin:0 auto;padding:28px 30px 70px;animation:ods-fluid-page .28s cubic-bezier(.2,.75,.25,1) both;} @keyframes ods-fluid-page{from{opacity:0;transform:translateY(10px)}} /* Encabezados y jerarquía */ .page-header{position:relative;align-items:center;margin-bottom:22px;padding:4px 0 2px;} .page-header::before{content:"";width:5px;align-self:stretch;min-height:54px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--primary));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 25%,transparent);} .page-title{flex:1;min-width:0}.page-title h1{font-size:clamp(25px,2.5vw,35px);line-height:1.08;letter-spacing:-.055em;color:var(--text);}.page-title p{max-width:760px;margin-top:7px;font-size:13px;color:var(--muted);} .header-actions{align-items:center;gap:8px}.header-actions .btn{min-height:42px;} /* Superficies, tarjetas y métricas */ .card,.section-box,.patient-directory,.clinical-section,.calendar-shell,.cash-summary-grid .metric-card,.reception-card,.reception-waiting-item{ border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,#fff),color-mix(in srgb,var(--surface) 96%,var(--bg)));box-shadow:var(--ui-shadow-sm); } .card{overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}.card:hover{border-color:color-mix(in srgb,var(--primary) 18%,var(--line));box-shadow:var(--ui-shadow-md);} .card-title{min-height:54px;padding:16px 18px;border-bottom:1px solid var(--ui-border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,#fff),var(--ui-tint));font-size:14px;letter-spacing:-.015em;} .card-body{padding:18px}.card-pad{padding:18px}.grid{gap:17px}.stat{position:relative;min-height:126px;padding:18px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:linear-gradient(145deg,var(--surface),var(--ui-tint));box-shadow:var(--ui-shadow-sm);overflow:hidden;} .stat::after{content:"";position:absolute;width:90px;height:90px;right:-28px;top:-32px;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 0 18px color-mix(in srgb,var(--primary) 5%,transparent);}.stat>*{position:relative;z-index:1}.stat-label{font-size:10px;letter-spacing:.11em}.stat-value{font-size:31px;letter-spacing:-.055em}.stat-sub{font-size:11px;} .metric-card{transition:.18s ease}.metric-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-md)!important;} /* Botones e interacción */ .btn{ min-height:40px;padding:9px 14px;border:1px solid var(--ui-border);border-radius:13px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--surface) 82%,var(--bg)));color:var(--text);font-size:12.5px;font-weight:600;box-shadow:var(--ui-shadow-xs); } .btn:hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 24%,var(--line));box-shadow:var(--ui-shadow-sm);}.btn:active:not(:disabled){transform:translateY(0) scale(.985)} .btn-primary,.btn-accent,.btn-cash{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 25%,transparent);}.btn-primary:hover:not(:disabled),.btn-accent:hover:not(:disabled),.btn-cash:hover:not(:disabled){box-shadow:0 17px 34px color-mix(in srgb,var(--primary) 31%,transparent);} .btn-success{background:linear-gradient(180deg,#effcf6,#dcf5e7);color:#17633f}.btn-danger{background:linear-gradient(180deg,#fff5f6,#fde5e8);color:#9e3340}.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}.icon-btn{min-width:35px;min-height:35px;border:1px solid var(--ui-border);border-radius:12px;background:var(--surface);box-shadow:var(--ui-shadow-xs);} /* Formularios */ .field{gap:7px}.field label{font-size:11px;font-weight:600;letter-spacing:.018em;color:color-mix(in srgb,var(--text) 77%,var(--muted));}.field label::first-letter{text-transform:uppercase}.input,.select,.textarea{ min-height:44px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:13px;background:color-mix(in srgb,var(--surface) 95%,var(--bg));box-shadow:inset 0 1px rgba(255,255,255,.65);transition:.18s ease; } .input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--surface)}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),var(--ui-shadow-xs);} .form-grid{gap:15px}.check-item{border-radius:13px;border-color:var(--ui-border);transition:.16s ease}.check-item:hover{background:var(--ui-tint);border-color:color-mix(in srgb,var(--primary) 20%,var(--line));} /* Tabs y navegación contextual */ .tabs,.record-tabs,.esthetic-subnav{padding:5px;border:1px solid var(--ui-border);border-radius:17px;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:var(--ui-shadow-xs);gap:4px;} .tab,.record-tab,.esthetic-subtab{min-height:38px;padding:8px 12px;border:0;border-radius:12px;background:transparent;font-size:12px;font-weight:600;color:var(--muted);} .tab:hover,.record-tab:hover,.esthetic-subtab:hover{background:var(--ui-tint);color:var(--primary)}.tab.active,.record-tab.active,.esthetic-subtab.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 22%,transparent);} /* Tablas más legibles */ .table-wrap{border-radius:16px;scrollbar-width:thin;}.table-wrap::-webkit-scrollbar{height:8px}.table-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 20%,transparent);border-radius:999px} table{border-spacing:0 3px;border-collapse:separate;}th{position:sticky;top:0;z-index:1;padding:10px 12px;border:0;background:color-mix(in srgb,var(--surface) 90%,var(--bg));font-size:9.5px;letter-spacing:.095em;}td{padding:12px;border-top:1px solid transparent;border-bottom:1px solid transparent;background:var(--surface);font-size:12.5px;}tbody tr td:first-child{border-left:1px solid transparent;border-radius:12px 0 0 12px}tbody tr td:last-child{border-right:1px solid transparent;border-radius:0 12px 12px 0}tbody tr:hover td{background:var(--ui-tint);border-color:var(--ui-border);} .badge{padding:5px 9px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:999px;font-size:10px;letter-spacing:.015em;box-shadow:none;} .row-action-menu summary{border-radius:12px!important;box-shadow:var(--ui-shadow-xs)}.row-action-popover{width:230px!important;padding:7px!important;border-radius:16px!important;box-shadow:var(--ui-shadow-lg)!important}.row-action-popover button{padding:10px 11px!important;border-radius:10px!important;} /* Agenda */ .calendar-shell{padding:17px;border-radius:24px;}.calendar-toolbar{padding:2px 2px 12px}.calendar-toolbar h3{font-size:21px;letter-spacing:-.035em}.calendar-day-view,.calendar-week-view,.calendar-month-view{border-color:var(--ui-border);border-radius:18px;background:var(--surface);box-shadow:inset 0 1px rgba(255,255,255,.75)} .calendar-day-head,.calendar-month-label{background:var(--ui-tint)}.calendar-month-label{color:var(--primary)}.calendar-month-cell,.calendar-day-col,.calendar-hour-row{border-color:var(--ui-border)}.calendar-hour{background:color-mix(in srgb,var(--surface) 86%,var(--bg));}.calendar-event{position:relative;border:0;border-left:4px solid var(--accent);border-radius:13px;background:var(--ui-accent-tint);box-shadow:0 6px 16px rgba(20,48,72,.08);transition:.16s ease}.calendar-event:hover{transform:translateY(-1px) scale(1.008);box-shadow:var(--ui-shadow-sm)} .calendar-month-cell{transition:.16s ease}.calendar-month-cell:hover{background:var(--ui-tint)} /* Expediente y módulos clínicos */ .patient-hero{border-radius:25px;background:linear-gradient(125deg,color-mix(in srgb,var(--primary-strong) 88%,#061827),var(--primary) 58%,var(--accent));box-shadow:0 24px 55px color-mix(in srgb,var(--primary) 25%,transparent);}.patient-hero-main{padding:23px 25px}.patient-hero .record-photo{width:102px;height:102px;border-width:5px;box-shadow:0 15px 32px rgba(0,0,0,.18)}.patient-hero-insights{background:rgba(255,255,255,.14)}.patient-insight{padding:15px 19px;background:rgba(3,25,42,.16)} .clinical-section{overflow:hidden}.clinical-section summary{padding:15px 17px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 74%,var(--accent)));}.clinical-section[open]{box-shadow:var(--ui-shadow-md)}.clinical-section-body{padding:18px}.sticky-save{bottom:14px;border-radius:18px;background:var(--ui-glass);backdrop-filter:blur(14px);box-shadow:var(--ui-shadow-md)} .settings-layout{grid-template-columns:260px minmax(0,1fr);gap:20px}.settings-nav{top:100px;border-radius:20px;padding:9px;box-shadow:var(--ui-shadow-sm)}.settings-nav-item{border-radius:13px}.settings-nav-item.active{box-shadow:none;background:var(--ui-tint-strong)} /* Caja y Recepción */ .cash-summary-grid{gap:14px}.cash-summary-grid .metric-card{border-radius:21px!important}.cash-item-row,.cash-payment-row{border-color:var(--ui-border);border-radius:18px;background:var(--ui-tint)}.cash-total-preview{border-radius:21px;background:var(--ui-glass);box-shadow:var(--ui-shadow-md)}.cash-total-preview div{border-radius:14px;border-color:var(--ui-border)} .reception-summary-grid>button,.reception-summary-grid>.metric-card{border-radius:20px!important;box-shadow:var(--ui-shadow-sm)!important}.reception-card,.reception-waiting-item{transition:.18s ease}.reception-card:hover,.reception-waiting-item:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-md)} /* Modales y avisos */ .modal-backdrop{background:radial-gradient(circle at 50% 14%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 38%),rgba(5,20,32,.63);backdrop-filter:blur(14px) saturate(130%)}.modal{border-radius:30px;border-color:rgba(255,255,255,.68);box-shadow:var(--ui-shadow-lg)}.modal-header{padding:19px 22px 16px;background:linear-gradient(135deg,var(--ui-tint),color-mix(in srgb,var(--accent) 8%,var(--surface)))}.modal-body{padding:22px}.modal-footer{padding:14px 22px 19px}.modal-title-dot{border-radius:14px}.close{border-radius:14px}.notice{padding:13px 14px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-tint);}.toast{padding:13px 15px;border-radius:18px;background:linear-gradient(135deg,var(--primary-strong),var(--primary),var(--accent));box-shadow:var(--ui-shadow-lg)} /* Accesos móviles */ .mobile-bottom-nav{display:none}.mobile-bottom-link{border:0;background:transparent;color:var(--muted);display:grid;justify-items:center;gap:3px;padding:6px 4px;border-radius:13px;min-width:0}.mobile-bottom-link span{width:34px;height:30px;display:grid;place-items:center;border-radius:12px}.mobile-bottom-link .ui-icon{width:19px;height:19px}.mobile-bottom-link small{font-size:9px;font-weight:600;white-space:nowrap}.mobile-bottom-link.active{color:var(--primary)}.mobile-bottom-link.active span{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 23%,transparent)} /* Tema oscuro */ :root[data-theme="dark"]{ --ui-glass:color-mix(in srgb,var(--surface) 88%,transparent);--ui-tint:color-mix(in srgb,var(--primary) 12%,var(--surface));--ui-tint-strong:color-mix(in srgb,var(--primary) 19%,var(--surface));--ui-accent-tint:color-mix(in srgb,var(--accent) 15%,var(--surface));--ui-border:rgba(255,255,255,.09); } :root[data-theme="dark"] body{background:radial-gradient(circle at 10% -5%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 32rem),linear-gradient(180deg,#13212b,var(--bg));} :root[data-theme="dark"] .topbar,:root[data-theme="dark"] .user-chip{background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .card,:root[data-theme="dark"] .section-box,:root[data-theme="dark"] .patient-directory,:root[data-theme="dark"] .clinical-section,:root[data-theme="dark"] .calendar-shell,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .cash-summary-grid .metric-card{background:linear-gradient(180deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .card-title,:root[data-theme="dark"] th{background:#1b2a35}:root[data-theme="dark"] td{background:#22333f}:root[data-theme="dark"] tbody tr:hover td{background:#283d4a} :root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.btn-success):not(.btn-cash){background:linear-gradient(180deg,#2a3d49,#20313d);border-color:rgba(255,255,255,.09)} :root[data-theme="dark"] .input,:root[data-theme="dark"] .select,:root[data-theme="dark"] .textarea{background:#172630;border-color:#354b58} :root[data-theme="dark"] .nav-link.active{background:#f2f8fb;color:var(--primary)} :root[data-theme="dark"] .calendar-day-view,:root[data-theme="dark"] .calendar-week-view,:root[data-theme="dark"] .calendar-month-view{background:#1a2a35} /* Tablet */ @media(max-width:1120px){ .app-shell{grid-template-columns:258px minmax(0,1fr)}.sidebar{margin-left:9px}.content{padding:25px 22px 74px}.workspace-badge{display:none}.user-name{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow-x:auto}.settings-nav-item{min-width:190px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:880px){ .app-shell,.app-shell.sidebar-collapsed{display:block;min-height:100vh}.sidebar,.app-shell.sidebar-collapsed .sidebar{position:fixed;top:8px;left:-304px;z-index:70;width:286px;height:calc(100vh - 16px);margin:0;padding:13px 12px 16px;border-radius:0 28px 28px 0;transition:left .24s cubic-bezier(.2,.75,.25,1),transform .24s ease}.sidebar.open{left:0}.app-shell.sidebar-collapsed .sidebar:not(.open){left:-304px}.topbar{top:8px;margin:8px 10px 0;min-height:64px;padding:8px 9px}.topbar-route-icon{width:37px;height:37px;flex-basis:37px}.topbar-context strong{max-width:44vw}.realtime-chip span,.workspace-badge,.user-name,.logout-btn span{display:none}.user-chip{padding:3px}.logout-btn{width:36px!important;height:36px!important;padding:8px!important}.content{padding:22px 14px calc(146px + env(safe-area-inset-bottom))}.page-header{align-items:flex-start}.header-actions{width:100%;justify-content:flex-start}.mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:max(9px,env(safe-area-inset-bottom));z-index:50;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px;border:1px solid rgba(255,255,255,.67);border-radius:22px;background:var(--ui-glass);box-shadow:0 18px 48px rgba(9,31,50,.18);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}.modal{border-radius:27px 27px 0 0}.modal-body{padding:17px}.patient-hero-main{align-items:flex-start}.patient-hero-insights{grid-template-columns:1fr}.calendar-shell{padding:12px} } @media(max-width:620px){ body{font-size:13px}.topbar-context .breadcrumb{display:none}.topbar-context strong{max-width:38vw;font-size:12px}.topbar-route-icon{display:none}.avatar{width:36px;height:36px;border-radius:12px}.content{padding:18px 10px calc(144px + env(safe-area-inset-bottom))}.page-header{display:grid;grid-template-columns:5px minmax(0,1fr);gap:0 12px}.page-header::before{grid-row:1/3}.page-title h1{font-size:25px}.page-title p{font-size:12px}.header-actions{grid-column:1/-1;margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.header-actions .btn{width:100%;min-width:0;padding:8px 9px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.card,.section-box,.patient-directory,.calendar-shell{border-radius:18px}.card-body,.card-pad{padding:14px}.stat{min-height:105px}.stat-value{font-size:26px}.form-grid{grid-template-columns:1fr}.modal-backdrop{padding:0}.modal{max-height:96vh}.modal-header{padding:16px 14px 13px}.modal-body{padding:14px;max-height:calc(96vh - 132px)}.modal-footer{padding:11px 14px 14px}.modal-footer .btn{width:100%}.patient-hero{border-radius:20px}.patient-hero-main{display:grid;padding:18px}.patient-hero .record-photo{width:80px;height:80px}.patient-hero .record-identity h1{font-size:21px}.record-meta{display:grid}.tabs,.record-tabs{border-radius:15px}.table-wrap{margin:0 -3px}.mobile-bottom-nav{left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));border-radius:19px}.mobile-bottom-link small{font-size:8.5px}.mobile-bottom-link span{width:31px;height:28px}.toast-wrap{bottom:90px}.cash-total-preview{position:static}.settings-nav-item{min-width:165px} } @media(max-width:390px){.header-actions{grid-template-columns:1fr}.mobile-bottom-link small{font-size:8px}.mobile-bottom-link .ui-icon{width:18px;height:18px}.topbar{margin-left:6px;margin-right:6px}.content{padding-left:8px;padding-right:8px}} @media(max-width:880px){html{scroll-padding-bottom:calc(148px + env(safe-area-inset-bottom))}.content>*:last-child{margin-bottom:calc(18px + env(safe-area-inset-bottom))}} /* Reduce motion */ @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* Control sanitario / bitácoras COFEPRIS */ .sanitary-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.sanitary-section-card{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px;border:1px solid var(--ui-border);border-radius:21px;background:linear-gradient(145deg,var(--surface),var(--ui-tint));box-shadow:var(--ui-shadow-sm);transition:.18s ease}.sanitary-section-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-md)}.sanitary-section-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:22px;font-weight:600;box-shadow:0 10px 25px color-mix(in srgb,var(--primary) 20%,transparent)}.sanitary-section-icon img,.sanitary-section-icon-img{display:block;width:28px;height:28px;object-fit:contain}.sanitary-section-card strong{display:block;color:var(--text);font-size:14px}.sanitary-section-card p{margin:4px 0;color:var(--muted);font-size:12px;line-height:1.4}.sanitary-section-card span{color:var(--primary);font-size:11px;font-weight:600}.sanitary-filter-bar{display:grid;grid-template-columns:180px 260px minmax(220px,1fr);gap:12px;align-items:end;margin-bottom:16px}.sanitary-verifier-fields{display:none}.sanitary-verifier-fields.visible{display:block}.sanitary-signature-box{padding:14px;border:1px dashed color-mix(in srgb,var(--primary) 35%,var(--ui-border));border-radius:18px;background:var(--ui-tint)}.sanitary-signature-box .signature-pad{margin-top:8px}.sanitary-patient-preview{margin-top:14px}.sanitary-signature-view img{display:block;width:100%;max-width:300px;height:100px;object-fit:contain;border:1px solid var(--ui-border);border-radius:15px;background:#fff}.sanitary-signature-view label{display:block;margin-bottom:7px;font-weight:600;color:var(--primary)} @media(max-width:980px){.sanitary-section-grid{grid-template-columns:1fr}.sanitary-filter-bar{grid-template-columns:1fr 1fr}.sanitary-filter-bar .field:last-child{grid-column:1/-1}} @media(max-width:620px){.sanitary-section-card{grid-template-columns:44px minmax(0,1fr);padding:14px}.sanitary-section-icon{width:44px;height:44px;border-radius:15px}.sanitary-section-icon img,.sanitary-section-icon-img{width:24px;height:24px}.sanitary-section-card .btn{grid-column:1/-1;width:100%}.sanitary-filter-bar{grid-template-columns:1fr}.sanitary-filter-bar .field:last-child{grid-column:auto}.sanitary-signature-view{grid-template-columns:1fr}.sanitary-signature-view img{max-width:none}} /* Reportes profesionales y comisiones · Fase 5N.36 */ .reports-subnav{display:flex;gap:7px;align-items:center;margin:0 0 16px;padding:6px;width:max-content;max-width:100%;overflow-x:auto;border:1px solid var(--ui-border,var(--border));border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,var(--primary) 8%);box-shadow:var(--ui-shadow-xs,var(--shadow))}.reports-subnav button{appearance:none;border:0;border-radius:13px;padding:10px 15px;background:transparent;color:var(--muted);font-weight:600;white-space:nowrap}.reports-subnav button.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 24%,transparent)} .report-filter-card{margin-bottom:16px;padding:15px;border:1px solid var(--ui-border,var(--border));border-radius:22px;background:linear-gradient(145deg,var(--surface),var(--ui-tint,var(--primary-soft)));box-shadow:var(--ui-shadow-sm,var(--shadow))}.report-presets{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}.report-preset{appearance:none;flex:0 0 auto;border:1px solid var(--ui-border,var(--border));border-radius:999px;padding:7px 12px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600}.report-preset:hover{border-color:var(--primary);color:var(--primary)}.report-preset.active{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.report-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr)) auto;gap:10px;align-items:end}.report-filter-grid .field{margin:0}.report-filter-grid>.btn{min-height:43px} .report-metrics-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;margin-bottom:16px;overflow-x:auto;padding-bottom:3px}.report-metric{position:relative;min-width:150px;min-height:126px;padding:16px;border:1px solid var(--ui-border,var(--border));border-radius:20px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)));box-shadow:var(--ui-shadow-sm,var(--shadow));overflow:hidden}.report-metric::after{content:"";position:absolute;right:-24px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,transparent)}.report-metric-top{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.055em}.report-metric>strong{position:relative;z-index:1;display:block;margin-top:13px;color:var(--text);font-size:clamp(20px,2vw,28px);line-height:1.05;letter-spacing:-.04em}.report-metric>small{position:relative;z-index:1;display:block;margin-top:8px;color:var(--muted);font-size:11px}.report-change{display:inline-flex;align-items:center;justify-content:center;min-width:50px;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success);font-size:10px;letter-spacing:0}.report-change.down{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.report-change.neutral{background:color-mix(in srgb,var(--muted) 12%,var(--surface));color:var(--muted)} .report-grid{display:grid;gap:14px;margin-bottom:14px}.report-grid-main{grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr) minmax(250px,.65fr)}.report-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.report-panel{min-width:0;margin-bottom:14px;border:1px solid var(--ui-border,var(--border));border-radius:22px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--primary) 6%));box-shadow:var(--ui-shadow-sm,var(--shadow));overflow:hidden}.report-grid>.report-panel{margin-bottom:0}.report-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ui-border,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--surface)),var(--surface))}.report-panel-head h3{margin:0;color:var(--text);font-size:15px;letter-spacing:-.02em}.report-panel-head p{margin:4px 0 0;color:var(--muted);font-size:11.5px}.report-panel-head>strong{color:var(--primary);font-size:16px}.report-panel>.table-wrap,.report-panel>.report-bars,.report-panel>.report-status-list,.report-panel>.report-chart-shell,.report-panel>.empty{margin:16px 18px 18px}.report-panel>.table-wrap{margin:0}.report-panel table{min-width:680px}.report-panel td strong{display:block}.report-panel td small{display:block;margin-top:3px;color:var(--muted)}.report-panel tbody tr:hover td{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}.report-rank{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:color-mix(in srgb,var(--primary) 11%,var(--surface));color:var(--primary);font-size:11px;font-weight:650} .report-chart-shell{min-width:0}.report-chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:5px;color:var(--muted);font-size:11px}.report-chart-legend span{display:inline-flex;align-items:center;gap:6px}.report-chart-legend i{width:10px;height:10px;border-radius:50%;background:var(--primary)}.report-chart-legend i.collected{background:var(--accent)}.report-line-chart{display:block;width:100%;height:auto;min-height:220px;overflow:visible}.report-line-chart .axis{stroke:color-mix(in srgb,var(--muted) 35%,transparent);stroke-width:1}.report-line-chart .trend{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.report-line-chart .trend.collected{stroke:var(--accent)}.report-line-chart .point{fill:var(--surface);stroke:var(--primary);stroke-width:3}.report-line-chart .point.collected{stroke:var(--accent)}.report-line-chart .labels{fill:var(--muted);font-size:12px;font-family:inherit}.report-empty-chart{display:grid;place-items:center;min-height:220px;color:var(--muted);text-align:center} .report-bars{display:grid;gap:13px}.report-bar-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.report-bar-row strong{font-size:12px}.report-bar-row span{color:var(--muted);font-size:11px}.report-bar-track{height:9px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 75%,var(--surface))}.report-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent)}.report-status-list{display:grid;gap:11px}.report-status-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center}.report-status-list span{font-size:12px;color:var(--text)}.report-status-list strong{color:var(--primary);font-size:12px}.report-status-list i{grid-column:1/-1;display:block;height:7px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 75%,var(--surface))}.report-status-list b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--primary))} .commission-summary{grid-template-columns:repeat(4,minmax(180px,1fr))}.commission-preview-summary{display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:10px}.commission-preview-summary article{padding:13px;border:1px solid var(--ui-border,var(--border));border-radius:16px;background:var(--ui-tint,var(--primary-soft))}.commission-preview-summary span{display:block;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.commission-preview-summary strong{display:block;margin-top:6px;color:var(--text);font-size:14px}.report-panel .table-actions{display:flex;gap:6px;flex-wrap:wrap}.report-panel .btn-small{padding:7px 9px;font-size:11px} :root[data-theme="dark"] .report-filter-card,:root[data-theme="dark"] .report-panel,:root[data-theme="dark"] .report-metric,:root[data-theme="dark"] .reports-subnav{background:linear-gradient(180deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .report-preset{background:#1a2a35;border-color:#354b58}:root[data-theme="dark"] .report-preset.active{background:color-mix(in srgb,var(--primary) 25%,#1a2a35)}:root[data-theme="dark"] .report-panel-head{background:linear-gradient(135deg,#20323e,#1b2a35);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .report-metric{background:linear-gradient(145deg,#22333f,#1b2a35)}:root[data-theme="dark"] .commission-preview-summary article{background:#1a2a35} @media(max-width:1280px){.report-metrics-grid{grid-template-columns:repeat(3,minmax(165px,1fr));overflow:visible}.report-grid-main{grid-template-columns:repeat(2,minmax(0,1fr))}.report-panel-wide{grid-column:1/-1}.report-filter-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}.report-filter-grid>.btn{width:100%}} @media(max-width:900px){.report-grid-main,.report-grid-two{grid-template-columns:1fr}.report-panel-wide{grid-column:auto}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.commission-preview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.reports-subnav{width:100%;border-radius:16px}.reports-subnav button{flex:1;padding:9px 11px}.report-filter-card{padding:12px;border-radius:18px}.report-filter-grid{grid-template-columns:1fr}.report-metrics-grid,.commission-summary{display:flex;overflow-x:auto;gap:9px}.report-metric{flex:0 0 210px;min-height:112px;padding:14px;border-radius:18px}.report-panel{border-radius:18px}.report-panel-head{align-items:flex-start;padding:14px;flex-direction:column}.report-panel>.report-bars,.report-panel>.report-status-list,.report-panel>.report-chart-shell,.report-panel>.empty{margin:14px}.report-line-chart{min-height:180px}.commission-preview-summary{grid-template-columns:1fr}.report-panel .table-actions{flex-wrap:nowrap;overflow-x:auto}.report-panel .table-actions .btn{flex:0 0 auto}} /* Almacén, caducidades y lista de compras · Fase 5N.37 */ .nav-alert-count{margin-left:auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fff0d6;color:#8a5600;font-size:10px;font-weight:650;box-shadow:0 0 0 2px rgba(255,255,255,.1)} .dashboard-inventory-alert{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--warning) 30%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--warning) 10%,var(--surface)),var(--surface));box-shadow:var(--shadow)}.dashboard-inventory-alert strong,.dashboard-inventory-alert span{display:block}.dashboard-inventory-alert strong{color:var(--text);font-size:14px}.dashboard-inventory-alert span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45} .inventory-summary-grid{display:grid;grid-template-columns:repeat(7,minmax(135px,1fr));gap:11px;margin-bottom:16px;overflow-x:auto;padding-bottom:3px}.inventory-metric{min-width:135px;padding:15px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)));box-shadow:var(--shadow)}.inventory-metric span{display:block;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.inventory-metric strong{display:block;margin-top:8px;color:var(--text);font-size:24px;line-height:1}.inventory-metric small{display:block;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.35}.inventory-metric.warning{border-color:color-mix(in srgb,var(--warning) 35%,var(--line));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--warning) 9%,var(--surface)))}.inventory-metric.danger{border-color:color-mix(in srgb,var(--danger) 32%,var(--line));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--danger) 8%,var(--surface)))} .inventory-tabs{display:flex;gap:7px;align-items:center;margin:0 0 16px;padding:6px;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,var(--primary) 8%)}.inventory-tabs button{appearance:none;border:0;border-radius:13px;padding:10px 14px;background:transparent;color:var(--muted);font-weight:600;white-space:nowrap}.inventory-tabs button.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 24%,transparent)} .inventory-filter-bar{display:grid;grid-template-columns:minmax(210px,2fr) repeat(2,minmax(150px,1fr)) auto;gap:10px;align-items:end;margin-bottom:15px}.inventory-filter-bar .field{margin:0}.inventory-item-name strong{display:block;color:var(--text)}.inventory-item-name small{display:block;margin-top:4px;color:var(--muted);line-height:1.35}.inventory-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:245px}.inventory-actions .icon-btn{white-space:nowrap}.inventory-actions .icon-btn.warning{background:#fff3dc;color:var(--warning)}.inventory-actions .icon-btn.danger{background:#fae9eb;color:var(--danger)} .purchase-sections{display:grid;gap:14px}.purchase-section-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.purchase-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--surface)),var(--surface))}.purchase-section-head strong{font-size:14px}.purchase-list{display:grid}.purchase-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:11px;align-items:center;padding:12px 15px;border-bottom:1px solid #edf1f4}.purchase-row:last-child{border-bottom:0}.purchase-check{display:grid;place-items:center;width:27px;height:27px;border:2px solid color-mix(in srgb,var(--primary) 45%,var(--line));border-radius:9px;color:transparent;font-weight:650}.purchase-check.done{border-color:var(--success);background:var(--success);color:#fff}.purchase-copy strong,.purchase-copy span,.purchase-copy small{display:block}.purchase-copy strong{font-size:13px}.purchase-copy span{margin-top:3px;color:var(--muted);font-size:11px}.purchase-copy small{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.35}.purchase-actions{display:flex;gap:5px;align-items:center}.inventory-shopping-status{margin-bottom:14px;width:max-content;max-width:100%;overflow-x:auto}.inventory-shopping-status .btn{white-space:nowrap} .inventory-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.inventory-report-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:13px;align-items:start;padding:17px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)));box-shadow:var(--shadow)}.inventory-report-card h3{margin:0;font-size:15px}.inventory-report-card p{margin:6px 0 13px;color:var(--muted);font-size:12px;line-height:1.5}.inventory-report-card>.inventory-report-icon{grid-row:1 / 6}.inventory-report-card>h3,.inventory-report-card>p,.inventory-report-card>.field,.inventory-report-card>.form-grid,.inventory-report-card>.btn{grid-column:2}.inventory-report-card>.btn{justify-self:start}.inventory-report-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));font-size:24px} .inventory-detail-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 7%,var(--surface)))}.inventory-detail-hero h3{margin:0}.inventory-detail-hero p{margin:5px 0 0;color:var(--muted);font-size:12px}.inventory-detail-stock{text-align:right}.inventory-detail-stock strong{display:block;color:var(--primary);font-size:26px}.inventory-detail-stock span{display:block;margin-top:4px;color:var(--muted);font-size:11px}.inventory-empty{padding:28px;text-align:center}.input-suffix{position:relative}.input-suffix .input{padding-right:62px}.input-suffix>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;font-weight:600;pointer-events:none} :root[data-theme="dark"] .inventory-tabs,:root[data-theme="dark"] .inventory-metric,:root[data-theme="dark"] .inventory-report-card,:root[data-theme="dark"] .purchase-section-card,:root[data-theme="dark"] .inventory-detail-hero,:root[data-theme="dark"] .dashboard-inventory-alert{background:linear-gradient(180deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .purchase-section-head{background:linear-gradient(135deg,#20323e,#1b2a35);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .purchase-row{border-color:rgba(255,255,255,.06)} @media(max-width:1280px){.inventory-summary-grid{grid-template-columns:repeat(4,minmax(150px,1fr));overflow:visible}.inventory-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:780px){.purchase-row>.badge{grid-column:2;justify-self:start}.dashboard-inventory-alert{align-items:flex-start;flex-direction:column}.inventory-summary-grid{display:flex;overflow-x:auto}.inventory-metric{flex:0 0 180px}.inventory-filter-bar{grid-template-columns:1fr}.inventory-report-grid{grid-template-columns:1fr}.purchase-row{grid-template-columns:29px minmax(0,1fr)}.purchase-actions{grid-column:2;overflow-x:auto;padding-bottom:2px}.inventory-detail-hero{flex-direction:column}.inventory-detail-stock{text-align:left}} @media(max-width:520px){.inventory-tabs{width:100%;border-radius:16px}.inventory-tabs button{padding:9px 11px}.inventory-report-card{grid-template-columns:42px minmax(0,1fr);padding:14px;border-radius:17px}.inventory-report-icon{width:42px;height:42px;border-radius:13px;font-size:20px}.purchase-section-head{align-items:flex-start;flex-direction:column}.inventory-actions{min-width:230px;flex-wrap:nowrap;overflow-x:auto}} .card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:17px 18px 13px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 4%,var(--surface)),var(--surface))}.card-header h3{margin:0;color:var(--text);font-size:16px;letter-spacing:-.02em}.card-header p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.inventory-item-name span{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.35} :root[data-theme="dark"] .card-header{background:linear-gradient(135deg,#20323e,#1b2a35);border-color:rgba(255,255,255,.08)} @media(max-width:620px){.card-header{align-items:stretch;flex-direction:column}.card-header>.actions{width:100%;overflow-x:auto;flex-wrap:nowrap}.card-header>.actions .btn{flex:0 0 auto}} /* Laboratorio Dental */ .lab-summary-grid{grid-template-columns:repeat(5,minmax(145px,1fr))} .lab-odontogram{display:grid;gap:14px;margin-top:10px} .lab-arch{border:1px solid var(--line);border-radius:16px;padding:12px;background:color-mix(in srgb,var(--surface) 92%,var(--primary) 8%)} .lab-arch-title{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .lab-tooth-row{display:flex;flex-wrap:wrap;gap:7px} .lab-tooth{min-width:42px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);padding:8px 10px;font-size:13px;font-weight:600;box-shadow:0 5px 14px rgba(24,56,84,.05);transition:.16s ease} .lab-tooth:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .lab-tooth.active{border-color:var(--accent);background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 28%,transparent)} [data-theme="dark"] .lab-arch{background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%)} [data-theme="dark"] .lab-tooth.active{color:#fff} @media(max-width:780px){.lab-summary-grid{display:flex;overflow-x:auto}.lab-tooth{min-width:38px;padding:8px}} /* OdontoSuite 1.0 · Landing comercial y pagos */ .real-logo .landing-logo-img, .login-logo-img { display:block; height:auto; object-fit:contain; } .real-logo .landing-logo-img { width: min(240px, 58vw); max-height:74px; } .login-logo-brand { align-items:flex-start; background:rgba(255,255,255,.96); border-radius:24px; padding:18px 20px; width:max-content; box-shadow:0 18px 45px rgba(10,38,58,.20); } .login-logo-img { width:min(260px,58vw); max-height:92px; } .login-sales-hero { background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg,#0f3654 0%,#17476f 52%,#2f89a8 100%); } .login-kicker { display:inline-flex; align-items:center; width:max-content; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; } .landing-sales { background:linear-gradient(180deg,#f4fbff 0%,#ffffff 44%,#f6fbfd 100%); } .landing-sales .landing-nav { padding-top:16px; padding-bottom:16px; } .landing-hero-sales { min-height:620px; align-items:center; padding-top:42px; padding-bottom:64px; } .landing-sales .landing-copy h1 { max-width:880px; font-size:clamp(42px,6vw,76px); line-height:.95; color:#0f3654; } .landing-sales .landing-copy p { font-size:20px; color:#486376; max-width:820px; } .landing-visual { position:relative; min-height:470px; display:grid; place-items:center; } .dental-photo { width:min(520px,100%); border-radius:34px; background:#fff; border:1px solid rgba(23,71,111,.10); box-shadow:0 30px 80px rgba(16,55,84,.18); overflow:hidden; } .dental-photo svg { display:block; width:100%; height:auto; } .landing-floating-card { position:absolute; background:#fff; border:1px solid #dceaf2; border-radius:20px; padding:16px 18px; box-shadow:0 18px 48px rgba(16,55,84,.18); max-width:230px; } .landing-floating-card strong { display:block; color:#17476f; font-size:17px; margin-bottom:4px; } .landing-floating-card span { color:#60788d; line-height:1.35; font-size:13px; } .landing-floating-card.card-a { top:54px; left:0; } .landing-floating-card.card-b { bottom:48px; right:0; } .landing-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:6px clamp(20px,6vw,88px) 36px; } .landing-benefits article { background:#fff; border:1px solid #dbe7ef; border-radius:26px; padding:24px; box-shadow:0 16px 44px rgba(16,55,84,.09); } .benefit-icon { width:54px; height:54px; border-radius:18px; background:#e9f5fb; display:grid; place-items:center; font-size:25px; margin-bottom:14px; } .landing-benefits strong { display:block; color:#17476f; font-size:19px; margin-bottom:8px; } .landing-benefits span { color:#60788d; line-height:1.6; } .landing-subscription-story { margin:34px clamp(20px,6vw,88px); padding:34px; border-radius:34px; background:linear-gradient(135deg,#103754 0%,#17476f 56%,#2f89a8 100%); color:#fff; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.95fr); gap:26px; align-items:center; box-shadow:0 28px 80px rgba(16,55,84,.22); } .landing-subscription-story .launch-badge { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22); } .landing-subscription-story h2 { margin:16px 0 12px; font-size:clamp(28px,4vw,46px); line-height:1.04; letter-spacing:-1.2px; } .landing-subscription-story p { color:rgba(255,255,255,.84); line-height:1.65; font-size:17px; } .comparison-cards { display:grid; gap:12px; } .comparison-cards article { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.20); border-radius:20px; padding:18px; backdrop-filter:blur(10px); } .comparison-cards strong,.comparison-cards span,.comparison-cards small { display:block; } .comparison-cards strong { font-size:17px; } .comparison-cards span { font-size:22px; font-weight:650; margin:4px 0; } .comparison-cards small { color:rgba(255,255,255,.78); line-height:1.45; } .landing-final-cta { margin:0 clamp(20px,6vw,88px) 70px; text-align:center; padding:42px 26px; border-radius:30px; background:#fff; border:1px solid #dbe7ef; box-shadow:0 18px 50px rgba(16,55,84,.08); } .landing-final-cta h2 { margin:0 0 10px; color:#103754; font-size:clamp(28px,4vw,44px); letter-spacing:-1px; } .landing-final-cta p { margin:0 auto 20px; color:#60788d; max-width:680px; line-height:1.65; } .billing-settings-page .billing-hero-card { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px; border-radius:24px; background:linear-gradient(135deg,#103754,#2f89a8); color:#fff; margin-bottom:18px; box-shadow:0 20px 54px rgba(16,55,84,.18); } .billing-hero-card h2 { margin:12px 0 8px; font-size:clamp(26px,3vw,38px); letter-spacing:-.8px; } .billing-hero-card p { margin:0; color:rgba(255,255,255,.84); line-height:1.6; max-width:780px; } .billing-hero-status { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.20); padding:16px; border-radius:20px; min-width:260px; } .billing-hero-status span,.billing-hero-status strong { display:block; } .billing-hero-status span { color:rgba(255,255,255,.72); font-size:13px; } .billing-hero-status strong { font-size:20px; margin:4px 0 10px; } .billing-current,.billing-trial,.billing-plan-card { display:flex; justify-content:space-between; align-items:center; gap:16px; } .billing-current { padding:14px; border-radius:18px; background:#f3f8fb; border:1px solid #e0edf4; } .billing-current strong,.billing-trial strong,.billing-plan-card strong { display:block; color:#17476f; } .billing-current span,.billing-trial span,.billing-plan-card span { color:#64788a; line-height:1.45; } .billing-trial { margin:12px 0; padding:14px; border-radius:18px; background:#ecfdf5; border:1px solid #bbf7d0; } .billing-plan-list { display:grid; gap:12px; margin-top:14px; } .billing-plan-card { border:1px solid #dbe7ef; background:#fff; border-radius:18px; padding:16px; box-shadow:0 10px 22px rgba(16,55,84,.06); } .billing-plan-card.module { align-items:flex-start; } .billing-plan-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; min-width:220px; } .billing-actions { margin-top:14px; } .wide-card { grid-column:1 / -1; } .notice.success { background:#ecfdf5; color:#047857; border-color:#bbf7d0; } @media (max-width: 980px) { .landing-benefits, .landing-subscription-story { grid-template-columns:1fr; } .landing-visual { min-height:360px; } .landing-floating-card { position:relative; inset:auto !important; margin-top:10px; max-width:none; } .billing-settings-page .billing-hero-card { display:grid; } } @media (max-width: 640px) { .real-logo .landing-logo-img { width:210px; } .login-logo-brand { width:100%; justify-content:center; } .login-logo-img { width:230px; } .landing-benefits { grid-template-columns:1fr; } .landing-subscription-story { margin-left:18px; margin-right:18px; padding:24px; } .billing-current,.billing-trial,.billing-plan-card { display:grid; } .billing-plan-actions { justify-content:flex-start; min-width:0; } } /* Launch v1: commercial landing and billing polish */ .landing-section-head { text-align:center; max-width:880px; margin:0 auto 28px; } .landing-section-head h2 { margin:12px 0 10px; color:#103754; font-size:clamp(28px,4vw,44px); letter-spacing:-1px; } .landing-section-head p { margin:0; color:#516b7d; font-size:17px; line-height:1.65; } .landing-feature-showcase, .landing-comparison-section, .landing-pricing-section { padding:54px clamp(20px,6vw,88px); } .feature-showcase-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .feature-showcase-grid article { background:#fff; border:1px solid #d8e7f0; border-radius:24px; padding:22px; box-shadow:0 18px 44px rgba(16,55,84,.09); display:flex; flex-direction:column; gap:10px; min-height:210px; } .feature-showcase-grid strong { color:#103754; font-size:18px; } .feature-showcase-grid span { color:#526d80; line-height:1.55; } .feature-illustration { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; background:linear-gradient(135deg,#eff8fb,#fff); border:1px solid #d8e7f0; } .comparison-table-wrap { overflow:auto; background:#fff; border:1px solid #d8e7f0; border-radius:26px; box-shadow:0 22px 58px rgba(16,55,84,.10); } .landing-comparison-table { width:100%; border-collapse:collapse; min-width:760px; } .landing-comparison-table th { text-align:left; background:#17476f; color:#fff; padding:18px; font-size:15px; } .landing-comparison-table td { padding:17px 18px; border-bottom:1px solid #edf3f7; color:#435f73; vertical-align:top; } .landing-comparison-table tr:last-child td { border-bottom:none; } .landing-comparison-table td:first-child { color:#103754; font-weight:600; } .landing-comparison-table td:nth-child(2) { color:#0f766e; font-weight:600; } .pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .pricing-card { background:#fff; border:1px solid #d8e7f0; border-radius:26px; padding:24px; box-shadow:0 18px 44px rgba(16,55,84,.08); display:flex; flex-direction:column; gap:10px; } .pricing-card.featured { border-color:#2f89a8; box-shadow:0 22px 60px rgba(47,137,168,.18); } .pricing-card strong { color:#17476f; font-size:16px; } .pricing-card h3 { color:#103754; font-size:34px; margin:0; letter-spacing:-1px; } .pricing-card span, .pricing-card p { color:#526d80; margin:0; line-height:1.55; } .pricing-card .btn { margin-top:auto; } .billing-sync-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#f0f9ff; border:1px solid #bae6fd; color:#17476f; padding:18px; border-radius:20px; margin:0 0 16px; } .billing-sync-card div { display:flex; flex-direction:column; gap:4px; } .billing-sync-card span { color:#45677c; line-height:1.5; } .live-countdown { display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:2px 7px; border-radius:999px; background:#eef8fb; color:#17476f; font-weight:600; font-variant-numeric:tabular-nums; } @media (max-width: 1100px) { .feature-showcase-grid, .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 700px) { .feature-showcase-grid, .pricing-grid { grid-template-columns:1fr; } .billing-sync-card { align-items:stretch; flex-direction:column; } } /* Modo solo consulta por licencia vencida/cancelada */ .license-readonly-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; margin:0 0 18px; border:1px solid rgba(245,158,11,.35); border-radius:18px; background:linear-gradient(135deg,rgba(255,251,235,.96),rgba(254,243,199,.9)); color:#78350f; box-shadow:0 14px 30px rgba(120,53,15,.08); } .license-readonly-banner strong{display:block;font-size:15px;color:#78350f;margin-bottom:3px;} .license-readonly-banner span{display:block;font-size:13px;line-height:1.45;color:#92400e;} .workspace-badge.warning{background:#fff7ed;color:#9a3412;border-color:rgba(251,146,60,.45);} @media (max-width:760px){.license-readonly-banner{align-items:flex-start;flex-direction:column}.license-readonly-banner .btn{width:100%;}} /* Landing redesign: VS + screenshots */ .landing-redesign .landing-nav{background:rgba(255,255,255,.88);} .landing-redesign-hero{padding-top:34px;padding-bottom:72px;gap:42px;} .landing-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;} .landing-mini-stats article{background:#fff;border:1px solid #dbe7ef;border-radius:20px;padding:16px 18px;box-shadow:0 14px 30px rgba(16,55,84,.08);} .landing-mini-stats strong{display:block;color:#17476f;font-size:20px;margin-bottom:4px;} .landing-mini-stats span{display:block;color:#5b7286;line-height:1.45;font-size:14px;} .landing-showcase-stack{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center;} .landing-shot-card{background:#fff;border:1px solid #dceaf2;border-radius:30px;box-shadow:0 30px 70px rgba(16,55,84,.18);overflow:hidden;} .landing-shot-card img{display:block;width:100%;height:auto;} .landing-shot-main{width:min(720px,100%);transform:rotate(-2deg);} .landing-shot-secondary{position:absolute;right:-10px;bottom:10px;width:min(460px,64%);transform:rotate(3deg);} .landing-pill-card{position:absolute;z-index:2;background:#0f3654;color:#fff;border-radius:22px;padding:14px 18px;max-width:240px;box-shadow:0 18px 50px rgba(15,54,84,.24);} .landing-pill-card strong,.landing-pill-card span{display:block;} .landing-pill-card strong{font-size:16px;margin-bottom:4px;} .landing-pill-card span{font-size:13px;color:rgba(255,255,255,.84);line-height:1.45;} .landing-pill-card.pill-a{left:-4px;top:18px;} .landing-pill-card.pill-b{left:20px;bottom:24px;} .landing-benefits-premium{padding-top:0;padding-bottom:18px;} .landing-story-section{padding:24px clamp(20px,6vw,88px) 42px;display:grid;gap:26px;} .landing-story-card{display:grid;grid-template-columns:minmax(320px,.96fr) minmax(0,1fr);gap:28px;align-items:center;background:#fff;border:1px solid #dbe7ef;border-radius:30px;padding:26px;box-shadow:0 20px 52px rgba(16,55,84,.09);} .landing-story-card.story-image-right{grid-template-columns:minmax(0,1fr) minmax(320px,.96fr);} .story-media{background:linear-gradient(180deg,#f7fbff,#eef7fb);border:1px solid #dceaf2;border-radius:24px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);} .story-media img{display:block;width:100%;height:auto;border-radius:18px;} .story-copy h2{margin:14px 0 12px;color:#103754;font-size:clamp(28px,4vw,42px);letter-spacing:-1px;line-height:1.05;} .story-copy p{margin:0 0 16px;color:#546d80;line-height:1.7;font-size:17px;} .landing-check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;} .landing-check-list li{position:relative;padding:12px 14px 12px 44px;background:#f5fbfe;border:1px solid #dbeaf2;border-radius:16px;color:#214057;line-height:1.5;} .landing-check-list li::before{content:"✓";position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e0f2fe;color:#0c6ea8;font-weight:650;} .landing-check-list small{color:#5f7689;} .feature-showcase-grid-upgraded article{min-height:220px;} .landing-vs-section{padding:42px clamp(20px,6vw,88px) 54px;} .landing-vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;} .landing-vs-card{border-radius:30px;padding:28px;box-shadow:0 22px 54px rgba(16,55,84,.11);border:1px solid #dbe7ef;background:#fff;} .landing-vs-card.winner{background:linear-gradient(180deg,#103754 0%,#17476f 55%,#216f93 100%);color:#fff;border-color:transparent;} .landing-vs-card.challenger{background:linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);} .landing-vs-title span,.landing-vs-title strong{display:block;} .landing-vs-title span{text-transform:uppercase;font-size:12px;font-weight:650;letter-spacing:.08em;opacity:.85;} .landing-vs-title strong{font-size:28px;line-height:1.1;margin-top:8px;color:inherit;} .landing-vs-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;} .landing-vs-list li{position:relative;padding:13px 14px 13px 46px;border-radius:18px;line-height:1.52;} .landing-vs-card.winner .landing-vs-list li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);} .landing-vs-card.challenger .landing-vs-list li{background:#f5f9fc;border:1px solid #e1ebf1;color:#4b677b;} .landing-vs-list li::before{position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:650;} .landing-vs-card.winner .landing-vs-list li::before{content:"✓";background:rgba(255,255,255,.18);color:#fff;} .landing-vs-card.challenger .landing-vs-list li::before{content:"•";background:#e9f2f8;color:#57748a;font-size:22px;} .landing-vs-list.muted small,.landing-vs-list small{color:inherit;opacity:.8;} .cost-table-wrap{margin-top:22px;overflow:auto;background:#fff;border:1px solid #dbe7ef;border-radius:28px;box-shadow:0 18px 48px rgba(16,55,84,.08);} .landing-cost-table{width:100%;border-collapse:collapse;min-width:860px;} .landing-cost-table th{padding:16px 18px;background:#103754;color:#fff;text-align:left;font-size:14px;} .landing-cost-table td{padding:16px 18px;border-bottom:1px solid #edf3f7;color:#445f73;vertical-align:top;line-height:1.45;} .landing-cost-table tr:last-child td{border-bottom:none;} .landing-cost-table td:first-child,.landing-cost-table td:nth-child(2){color:#103754;font-weight:600;} @media (max-width: 1150px){.landing-mini-stats{grid-template-columns:1fr;}.landing-story-card,.landing-story-card.story-image-right,.landing-vs-grid{grid-template-columns:1fr;}.landing-showcase-stack{min-height:unset;padding:10px 0 60px;}.landing-shot-secondary{position:relative;right:auto;bottom:auto;margin:-10px 0 0 auto;width:min(430px,82%);} .landing-pill-card{position:relative;left:auto !important;top:auto !important;bottom:auto !important;margin-top:12px;max-width:none;}} @media (max-width: 760px){.landing-redesign-hero{gap:26px;}.landing-shot-main{transform:none;}.landing-shot-secondary{width:100%;margin-top:16px;}.landing-pill-card{border-radius:18px;}.story-copy h2{font-size:32px;}.landing-vs-title strong{font-size:24px;}} /* Landing polish: softer typography, trust, use cases and FAQ */ body, button, input, select, textarea { font-family: Aptos, "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } .landing-redesign h1, .landing-redesign h2, .landing-redesign h3, .login-sales-hero h1, .login-card h2 { font-weight:600; letter-spacing: -0.045em; } .landing-redesign strong, .landing-redesign .btn, .landing-redesign .launch-badge, .login-sales-hero strong, .login-sales-hero .login-kicker, .login-card .btn { font-weight:600; } .landing-redesign .landing-copy p, .landing-redesign .landing-section-head p, .story-copy p, .landing-subscription-story p, .login-card p, .hero-copy p { font-weight: 400; } .landing-redesign .landing-proof span, .landing-redesign .landing-mini-stats span, .landing-redesign .landing-vs-list li, .landing-redesign .landing-cost-table td { font-weight: 400; } .landing-redesign .landing-vs-list li::before { font-weight:600; } .landing-redesign .landing-copy h1 { font-weight:600; line-height: 1; } .landing-section-head h2 { font-weight:600; } .pricing-card h3 { font-weight:600; } .pricing-card strong, .pricing-card td { font-weight: 650; } .landing-trust-section, .landing-testimonials-section, .landing-faq-section { padding: 54px clamp(20px,6vw,88px); } .landing-trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .landing-trust-grid article { background:#fff; border:1px solid #dbe7ef; border-radius:26px; padding:22px; box-shadow:0 18px 44px rgba(16,55,84,.08); } .landing-trust-grid span { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:16px; background:#eaf7fb; color:#17476f; font-weight:600; margin-bottom:14px; } .landing-trust-grid strong { display:block; color:#103754; font-size:18px; margin-bottom:8px; } .landing-trust-grid p { margin:0; color:#526d80; line-height:1.58; } .landing-testimonials-section { background:linear-gradient(180deg,#f6fbfd 0%,#ffffff 100%); } .landing-testimonials-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .landing-testimonials-grid article { background:#fff; border:1px solid #dbe7ef; border-radius:28px; padding:24px; box-shadow:0 20px 50px rgba(16,55,84,.09); } .testimonial-avatar { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg,#17476f,#2f89a8); color:#fff; font-weight:600; margin-bottom:16px; } .landing-testimonials-grid blockquote { margin:0 0 16px; color:#28475c; font-size:17px; line-height:1.65; } .landing-testimonials-grid strong { display:block; color:#103754; font-size:17px; } .landing-testimonials-grid span { display:block; color:#60788d; margin-top:4px; line-height:1.45; } .landing-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .landing-faq-grid article { background:#fff; border:1px solid #dbe7ef; border-radius:22px; padding:20px 22px; box-shadow:0 14px 34px rgba(16,55,84,.07); } .landing-faq-grid strong { display:block; color:#103754; font-size:17px; margin-bottom:8px; } .landing-faq-grid span { display:block; color:#526d80; line-height:1.58; } .login-card { font-weight: 400; } .login-card h2 { font-size: 27px; } .login-sales-hero .hero-copy h1 { font-weight:600; } .hero-pill { font-weight: 520; } .nav-link, .btn, .badge, .workspace-badge, .topbar-context strong, .page-title h1, .card-title { font-weight: 650; } .page-title h1, .record-identity h1, .patient-hero .record-identity h1 { font-weight:600; } @media (max-width: 1100px) { .landing-trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .landing-testimonials-grid { grid-template-columns:1fr; } } @media (max-width: 700px) { .landing-trust-grid, .landing-faq-grid { grid-template-columns:1fr; } .landing-trust-section,.landing-testimonials-section,.landing-faq-section { padding:38px 18px; } } /* Dashboard principal rediseñado */ .dashboard-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px} .dashboard-stat{min-height:118px;border:1px solid rgba(206,219,229,.95);box-shadow:0 14px 34px rgba(16,55,84,.08)} .dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:18px;align-items:start} .dashboard-panel{overflow:hidden;border:1px solid rgba(206,219,229,.95);box-shadow:0 18px 44px rgba(16,55,84,.08)} .dashboard-panel .card-title{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;background:linear-gradient(180deg,#ffffff,#f7fbfd);border-bottom:1px solid rgba(206,219,229,.8)} .dashboard-panel .card-title strong{display:block;color:var(--secondary);font-size:18px} .dashboard-panel .card-title span{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.4} .dashboard-list{display:grid;gap:12px} .dashboard-row{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid rgba(206,219,229,.9);border-radius:18px;background:#fff;box-shadow:0 8px 18px rgba(16,55,84,.04)} .dashboard-row-main{min-width:0;flex:1;display:grid;gap:4px} .dashboard-row-main strong{color:var(--secondary);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dashboard-row-main span,.dashboard-row-main small{color:var(--muted);font-size:12px;line-height:1.4} .dashboard-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .dashboard-time{width:62px;height:58px;border-radius:16px;display:grid;place-items:center;background:#eef8fb;color:var(--primary);border:1px solid rgba(47,137,168,.18);flex:0 0 auto} .dashboard-time strong,.dashboard-time span{display:block;line-height:1;text-align:center}.dashboard-time strong{font-size:15px}.dashboard-time span{font-size:11px;color:var(--muted)} .dashboard-row-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px} .dashboard-empty{display:grid;gap:5px;padding:20px;border:1px dashed rgba(206,219,229,.95);border-radius:18px;background:#f8fbfd;color:var(--muted)} .dashboard-empty strong{color:var(--secondary)} .birthday-avatar{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#fff7ed;border:1px solid #fed7aa;font-size:22px;flex:0 0 auto} .birthday-row.is-today{border-color:#86efac;background:#f0fdf4;box-shadow:0 10px 22px rgba(22,163,74,.08)} .dashboard-message-config{display:grid;gap:9px;margin-bottom:14px;padding:14px;border-radius:18px;background:#f8fbfd;border:1px solid rgba(206,219,229,.95)} .dashboard-message-config label{font-weight:600;color:var(--secondary);font-size:13px}.dashboard-message-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.dashboard-message-foot small{color:var(--muted)} .purchase-priority{display:grid;place-items:center;min-width:74px;padding:7px 9px;border-radius:999px;background:#eef8fb;color:var(--primary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.purchase-priority.urgent{background:#fee2e2;color:#991b1b}.purchase-priority.high{background:#fff7ed;color:#9a3412} .expiration-badge{display:grid;place-items:center;min-width:72px;padding:7px 9px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.expiration-row.expired .expiration-badge{background:#fee2e2;color:#991b1b}.expiration-row.upcoming .expiration-badge{background:#fff7ed;color:#9a3412}.expiration-row.expired{border-color:#fecaca;background:#fffafa}.expiration-row.upcoming{border-color:#fed7aa;background:#fffdf7} @media(max-width:1180px){.dashboard-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-main-grid{grid-template-columns:1fr}} @media(max-width:700px){.dashboard-hero-grid{grid-template-columns:1fr}.dashboard-panel .card-title,.dashboard-row{align-items:flex-start;display:grid}.dashboard-row-actions{justify-content:flex-start}.dashboard-time{width:100%;height:auto;display:flex;justify-content:space-between;padding:10px 12px}.purchase-priority,.expiration-badge{width:max-content}.dashboard-message-foot{display:grid}.dashboard-message-foot .btn{width:100%}} /* Ajuste móvil: barra superior compacta y botón instalar sin amontonarse */ .install-app-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; } .install-app-icon{ display:none; line-height:1; font-size:17px; font-weight:600; } @media(max-width:700px){ .topbar{ margin:8px 8px 0; padding:7px 8px; min-height:58px; border-radius:22px; gap:7px; } .topbar-left{ gap:7px; flex:1 1 auto; min-width:0; } .topbar-context{ min-width:0; } .topbar-context strong{ max-width:calc(100vw - 245px); font-size:11.5px; line-height:1.2; } .topbar-actions{ flex:0 0 auto; min-width:0; } .user-chip{ gap:4px; padding:3px; border-radius:17px; max-width:none; flex:0 0 auto; } .install-app-btn{ width:36px!important; min-width:36px!important; height:36px!important; padding:0!important; border-radius:13px!important; flex:0 0 36px; font-size:0!important; } .install-app-btn .install-app-label{ display:none!important; } .install-app-btn .install-app-icon{ display:block; font-size:17px; } .realtime-chip{ width:34px; height:34px; min-width:34px; padding:0!important; justify-content:center; border-radius:13px; flex:0 0 34px; } .realtime-chip i{ margin:0; } .realtime-chip span{ display:none!important; } .workspace-badge{ display:none!important; } .avatar{ width:34px; height:34px; min-width:34px; border-radius:13px; font-size:12px; } .logout-btn{ width:34px!important; min-width:34px!important; height:34px!important; padding:0!important; border-radius:13px!important; } .logout-btn .ui-icon{ width:18px; height:18px; } } @media(max-width:430px){ .topbar{ margin-left:8px; margin-right:8px; } .sidebar-toggle{ width:36px; height:36px; min-width:36px; border-radius:13px; } .topbar-context strong{ max-width:calc(100vw - 220px); font-size:11px; } .install-app-btn{ width:34px!important; min-width:34px!important; height:34px!important; flex-basis:34px; } } @media(max-width:370px){ .topbar-context{ display:none; } .topbar-left{ flex:0 0 auto; } .topbar{ justify-content:space-between; } } /* Google Calendar por doctor */ .doctor-google-cell{ display:grid; gap:5px; min-width:150px; } .google-doctor-badge{ display:inline-flex; width:max-content; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; font-size:11px; font-weight:600; } .google-doctor-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#94a3b8; } .google-doctor-badge.connected{ background:#ecfdf5; color:#047857; border-color:#bbf7d0; } .google-doctor-badge.connected::before{ background:#22c55e; } .doctor-google-cell small{ color:var(--muted); font-size:11px; line-height:1.35; } .doctor-google-cell .icon-btn{ width:max-content; } .google-calendar-panel .integration-hero{ margin-bottom:14px; } @media(max-width:760px){ .doctor-google-cell{ min-width:210px; } } /* Schema 49 · Catálogo de consultorios */ .card-title-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.clinic-settings-list{display:grid;gap:12px}.clinic-settings-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--surface,#fff),color-mix(in srgb,var(--primary) 4%,var(--surface,#fff)))}.clinic-settings-card>div:first-child{display:grid;gap:5px;min-width:0}.clinic-settings-card span,.clinic-settings-card small{color:var(--muted);line-height:1.4}.clinic-settings-card a{color:var(--accent);font-weight:600;text-decoration:none}.clinic-settings-card.inactive{opacity:.68}.clinic-settings-card .actions{flex-wrap:wrap}@media(max-width:720px){.clinic-settings-card{align-items:flex-start;display:grid}.clinic-settings-card>.actions{width:100%}.clinic-settings-card>.actions .btn{flex:1}} /* ========================================================== OdontoSuite Landing V2 · modern SaaS redesign ========================================================== */ html{scroll-behavior:smooth;} .landing-v2{--lv2-ink:#142b3b;--lv2-muted:#657b8c;--lv2-line:#dce8ef;--lv2-soft:#f4f9fc;--lv2-blue:#17476f;--lv2-cyan:#2f89a8;--lv2-purple:#b629d9;--lv2-magenta:#e634cf;min-height:100vh;background:#fff;color:var(--lv2-ink);overflow:hidden;font-weight:400;} .landing-v2 *{box-sizing:border-box;} .landing-v2 button{font:inherit;} .landing-v2-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(20,43,59,.07);} .landing-v2-header-inner{width:min(1440px,calc(100% - 40px));min-height:76px;margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;} .landing-v2-brand{padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;} .landing-v2-brand img{width:178px;max-height:48px;object-fit:contain;display:block;} .landing-v2-menu{display:flex;align-items:center;justify-content:center;gap:4px;} .landing-v2-menu button,.landing-v2-footer-links button{border:0;background:transparent;color:#4d6576;font-size:14px;font-weight:500;cursor:pointer;padding:10px 13px;border-radius:999px;transition:.2s ease;} .landing-v2-menu button:hover{background:#f0f7fa;color:var(--lv2-blue);} .landing-v2-actions{display:flex;align-items:center;gap:8px;} .landing-v2-login{border:0;background:transparent;color:#354f60;font-size:14px;font-weight:500;padding:11px 14px;border-radius:12px;cursor:pointer;} .landing-v2-primary,.landing-v2-secondary{border:0;min-height:50px;padding:0 22px;border-radius:15px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;} .landing-v2-primary{color:#fff;background:linear-gradient(135deg,#17476f 0%,#236f90 100%);box-shadow:0 12px 26px rgba(23,71,111,.18);} .landing-v2-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(23,71,111,.24);} .landing-v2-primary.compact{min-height:42px;padding:0 17px;border-radius:12px;} .landing-v2-secondary{color:#24475e;background:#fff;border:1px solid #d5e4ec;box-shadow:0 8px 20px rgba(20,43,59,.06);} .landing-v2-secondary:hover{transform:translateY(-2px);border-color:#b9d4df;} .landing-v2-primary.full,.landing-v2-secondary.full{width:100%;} .landing-v2-primary.white{background:#fff;color:#17476f;box-shadow:0 12px 28px rgba(4,25,39,.2);} .landing-v2-hero{position:relative;width:min(1440px,calc(100% - 40px));margin:0 auto;padding:82px 0 96px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:64px;align-items:center;} .landing-v2-hero-copy{position:relative;z-index:2;} .landing-v2-eyebrow,.landing-v2-kicker{display:inline-flex;align-items:center;gap:8px;color:#356b85;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;} .landing-v2-eyebrow span{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--lv2-purple),var(--lv2-magenta));box-shadow:0 0 0 5px rgba(182,41,217,.09);} .landing-v2-hero h1{font-size:clamp(52px,6.3vw,90px);line-height:.94;letter-spacing:-.058em;font-weight:600;color:#112b3d;margin:22px 0 28px;max-width:830px;} .landing-v2-hero h1 em{font-style:normal;background:linear-gradient(100deg,#17476f 10%,#248bab 54%,#b629d9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} .landing-v2-hero-copy>p{font-size:19px;line-height:1.68;color:#61798a;max-width:680px;margin:0;} .landing-v2-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;} .landing-v2-hero-notes{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#728594;font-size:13px;} .landing-v2-hero-notes span{white-space:nowrap;} .landing-v2-hero-visual{position:relative;min-height:570px;display:flex;align-items:center;justify-content:center;} .landing-v2-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.72;} .landing-v2-orb.orb-one{width:520px;height:520px;background:radial-gradient(circle at 35% 35%,rgba(72,196,222,.38),rgba(182,41,217,.08) 55%,transparent 70%);right:0;top:0;} .landing-v2-orb.orb-two{width:260px;height:260px;background:radial-gradient(circle,rgba(230,52,207,.18),transparent 68%);left:10%;bottom:0;} .landing-v2-browser{position:relative;z-index:2;width:min(820px,100%);border:1px solid rgba(23,71,111,.12);border-radius:25px;background:#fff;overflow:hidden;box-shadow:0 38px 100px rgba(29,64,83,.19),0 12px 30px rgba(29,64,83,.08);transform:perspective(1400px) rotateY(-4deg) rotateX(1deg);} .landing-v2-browser-bar{height:42px;background:#f7fafc;border-bottom:1px solid #e7eef3;display:flex;align-items:center;gap:7px;padding:0 14px;} .landing-v2-browser-bar>span{width:8px;height:8px;border-radius:50%;background:#d4e2e9;} .landing-v2-browser-bar>div{height:24px;min-width:210px;margin:auto;border:1px solid #e3ebef;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#91a0aa;font-size:10px;} .landing-v2-browser img{width:100%;display:block;} .landing-v2-float{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid rgba(23,71,111,.1);border-radius:17px;padding:13px 16px;box-shadow:0 18px 45px rgba(20,43,59,.15);} .landing-v2-float .float-icon{width:38px;height:38px;border-radius:12px;background:#eef8fb;display:grid;place-items:center;color:#176989;font-size:18px;} .landing-v2-float strong,.landing-v2-float small{display:block;} .landing-v2-float strong{font-size:13px;color:#24475e;font-weight:600;margin-bottom:2px;}.landing-v2-float small{font-size:11px;color:#758b9a;} .landing-v2-float.float-agenda{left:-12px;top:48px;}.landing-v2-float.float-cloud{right:-4px;bottom:54px;} .landing-v2-strip{border-top:1px solid #edf3f6;border-bottom:1px solid #edf3f6;padding:18px 20px;display:flex;align-items:center;justify-content:center;gap:21px;color:#6a7f8d;font-size:13px;white-space:nowrap;overflow:auto;scrollbar-width:none;}.landing-v2-strip::-webkit-scrollbar{display:none;}.landing-v2-strip i{width:4px;height:4px;background:#bdd1dc;border-radius:50%;flex:0 0 auto;} .landing-v2-section{width:min(1320px,calc(100% - 40px));margin:0 auto;padding:118px 0;} .landing-v2-intro{padding-bottom:100px;} .landing-v2-section-heading{max-width:760px;margin-bottom:46px;}.landing-v2-section-heading.center{text-align:center;margin-left:auto;margin-right:auto;} .landing-v2-section-heading h2,.landing-v2-showcase h2,.landing-v2-split-banner h2,.landing-v2-final h2{font-weight:600;letter-spacing:-.046em;color:#143144;line-height:1.04;} .landing-v2-section-heading h2{font-size:clamp(38px,4.8vw,62px);margin:14px 0 18px;}.landing-v2-section-heading p{font-size:17px;line-height:1.7;color:#667d8d;margin:0;} .landing-v2-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} .landing-v2-bento-card{min-height:280px;border:1px solid #dde9ef;background:#fff;border-radius:27px;padding:26px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;box-shadow:0 16px 45px rgba(20,43,59,.055);transition:transform .22s ease,box-shadow .22s ease;}.landing-v2-bento-card:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(20,43,59,.09);} .landing-v2-bento-card.large{grid-column:span 2;grid-row:span 2;min-height:576px;}.landing-v2-bento-card.wide{grid-column:span 2;min-height:280px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;}.landing-v2-bento-card.gradient-card{background:linear-gradient(145deg,#f4fbfd 0%,#fff 58%,#f9f2ff 100%);}.landing-v2-bento-card.soft-blue{background:linear-gradient(145deg,#f1f9fc,#fff);}.landing-v2-bento-card.dark-card{background:linear-gradient(145deg,#14394f,#17476f);border-color:transparent;color:#fff;} .landing-v2-card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#edf7fa;color:#17698a;font-size:18px;margin-bottom:24px;}.landing-v2-bento-card h3{font-size:22px;letter-spacing:-.025em;font-weight:600;color:#19374a;margin:0 0 10px;}.landing-v2-bento-card p{font-size:14px;line-height:1.65;color:#6b8190;margin:0;}.landing-v2-bento-card.dark-card .landing-v2-card-icon{background:rgba(255,255,255,.12);color:#fff}.landing-v2-bento-card.dark-card h3,.landing-v2-bento-card.dark-card p,.landing-v2-bento-card.dark-card small{color:#fff}.landing-v2-bento-card.dark-card p,.landing-v2-bento-card.dark-card small{opacity:.78}.landing-v2-bento-card.dark-card small{font-size:11px;line-height:1.5;margin-top:auto;}.landing-v2-card-link{font-size:12px;color:#287b9b;margin-top:auto;padding-top:20px;cursor:pointer;} .landing-v2-mini-record{margin-top:auto;background:#fff;border:1px solid #dce8ee;border-radius:20px;padding:18px;box-shadow:0 20px 44px rgba(23,71,111,.08);}.mini-record-top{display:flex;align-items:center;gap:10px}.mini-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#17476f,#37a6bc);color:#fff;display:grid;place-items:center;font-size:12px}.mini-record-top div{display:flex;flex-direction:column;gap:2px}.mini-record-top strong{font-size:12px;color:#28495f}.mini-record-top small{font-size:10px;color:#8b9aa4}.mini-record-top b{margin-left:auto;font-size:9px;font-weight:600;color:#258a70;background:#e9f8f3;padding:5px 8px;border-radius:999px}.mini-record-lines{display:grid;gap:8px;margin:18px 0}.mini-record-lines span{height:8px;border-radius:999px;background:#edf3f6}.mini-record-lines span:nth-child(1){width:82%}.mini-record-lines span:nth-child(2){width:66%}.mini-record-lines span:nth-child(3){width:73%}.mini-record-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mini-record-tabs i{font-style:normal;text-align:center;font-size:8px;color:#688091;background:#f5f9fb;border-radius:8px;padding:7px 2px}.landing-v2-palette{display:flex;gap:8px;align-items:flex-end;}.landing-v2-palette span{width:28px;border-radius:999px;height:82px;background:#17476f}.landing-v2-palette span:nth-child(2){height:60px;background:#2f89a8}.landing-v2-palette span:nth-child(3){height:100px;background:#b629d9}.landing-v2-palette span:nth-child(4){height:48px;background:#e634cf}.landing-v2-palette span:nth-child(5){height:72px;background:#bddce7;} .landing-v2-showcase{width:min(1440px,calc(100% - 40px));margin:0 auto;padding:105px 0;display:grid;grid-template-columns:minmax(320px,.75fr) minmax(520px,1.25fr);gap:70px;align-items:center;border-top:1px solid #edf3f6;}.landing-v2-showcase.reverse{grid-template-columns:minmax(520px,1.25fr) minmax(320px,.75fr);}.landing-v2-showcase.reverse .landing-v2-showcase-copy{order:2}.landing-v2-showcase.reverse .landing-v2-showcase-media{order:1}.landing-v2-showcase h2{font-size:clamp(38px,4.3vw,60px);margin:14px 0 20px;}.landing-v2-showcase-copy>p{font-size:17px;line-height:1.7;color:#687f8f;margin:0 0 30px;}.landing-v2-feature-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.landing-v2-feature-list li{display:flex;gap:14px;align-items:center;padding:13px;border-radius:15px;transition:.2s}.landing-v2-feature-list li:hover{background:#f6fafc}.landing-v2-feature-list li>span{width:36px;height:36px;border-radius:12px;background:#edf7fa;color:#23708e;display:grid;place-items:center;font-size:10px;font-weight:600;flex:0 0 auto}.landing-v2-feature-list strong,.landing-v2-feature-list small{display:block}.landing-v2-feature-list strong{font-size:13px;color:#294a5f;font-weight:600;margin-bottom:2px}.landing-v2-feature-list small{font-size:12px;color:#788d9b}.landing-v2-showcase-media{position:relative;}.landing-v2-screenshot-frame{padding:10px;background:#fff;border:1px solid #dbe7ed;border-radius:26px;box-shadow:0 30px 76px rgba(20,43,59,.14);}.landing-v2-screenshot-frame img{display:block;width:100%;border-radius:18px;}.landing-v2-media-badge{position:absolute;left:-24px;bottom:-22px;background:#fff;border:1px solid #dae7ed;border-radius:16px;padding:14px 18px;box-shadow:0 15px 35px rgba(20,43,59,.13)}.landing-v2-media-badge.right{left:auto;right:-24px}.landing-v2-media-badge strong,.landing-v2-media-badge span{display:block}.landing-v2-media-badge strong{font-size:12px;font-weight:600;color:#24485f;margin-bottom:3px}.landing-v2-media-badge span{font-size:10px;color:#82939e}.landing-v2-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.landing-v2-stat-grid article{border:1px solid #dce8ee;background:#f9fcfd;border-radius:16px;padding:15px}.landing-v2-stat-grid strong,.landing-v2-stat-grid span{display:block}.landing-v2-stat-grid strong{font-size:18px;color:#1c607e;font-weight:600}.landing-v2-stat-grid span{font-size:10px;color:#7a8e9b;margin-top:4px} .landing-v2-table-section{padding-top:110px;}.landing-v2-table-wrap{overflow:auto;border:1px solid #dce8ee;border-radius:25px;background:#fff;box-shadow:0 18px 50px rgba(20,43,59,.055)}.landing-v2-table{width:100%;border-collapse:collapse;min-width:780px;}.landing-v2-table th{padding:18px 20px;text-align:left;background:#f5f9fb;color:#6f8492;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;border-bottom:1px solid #dfe9ee}.landing-v2-table td{padding:19px 20px;border-bottom:1px solid #edf2f5;color:#5f7585;font-size:13px;line-height:1.5}.landing-v2-table tbody tr:last-child td{border-bottom:0}.landing-v2-table tbody tr:hover{background:#fbfdfe}.landing-v2-table td:first-child{color:#294b60;font-weight:600;white-space:nowrap}.landing-v2-table td:last-child{text-align:right;white-space:nowrap}.landing-v2-table td b{font-size:11px;font-weight:600;color:#167459;background:#eaf8f2;padding:7px 10px;border-radius:999px}.landing-v2-table td b.optional{color:#76501a;background:#fff5df}.table-dot{width:30px;height:30px;border-radius:10px;background:#eef7fa;display:inline-grid;place-items:center;color:#23708e;font-size:10px;margin-right:10px}.compact-table{box-shadow:none;border-radius:20px}.compact-table .landing-v2-table td:last-child{text-align:left}.compact-table .landing-v2-table td:nth-child(2){font-weight:600;color:#294b60} .landing-v2-split-banner{width:min(1360px,calc(100% - 40px));margin:30px auto 0;padding:60px;border-radius:36px;background:radial-gradient(circle at 78% 20%,rgba(220,67,235,.28),transparent 30%),radial-gradient(circle at 95% 80%,rgba(65,177,202,.22),transparent 35%),linear-gradient(135deg,#102f44,#17476f 55%,#1f6988);color:#fff;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:60px;align-items:center;box-shadow:0 35px 90px rgba(16,47,68,.2)}.landing-v2-kicker.light{color:#bfe8f2}.landing-v2-split-banner h2{color:#fff;font-size:clamp(38px,4.2vw,58px);margin:14px 0 18px}.landing-v2-split-banner>div>p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);margin:0 0 25px}.landing-v2-split-cards{display:grid;gap:10px}.landing-v2-split-cards article{padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px)}.landing-v2-split-cards span,.landing-v2-split-cards strong,.landing-v2-split-cards small{display:block}.landing-v2-split-cards span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#bde3ed;margin-bottom:5px}.landing-v2-split-cards strong{font-size:14px;font-weight:600;margin-bottom:3px}.landing-v2-split-cards small{font-size:11px;color:rgba(255,255,255,.65);line-height:1.45} .landing-v2-pricing{padding-top:130px}.landing-v2-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:950px;margin:0 auto}.landing-v2-price-card{border:1px solid #dce8ee;background:#fff;border-radius:28px;padding:30px;box-shadow:0 16px 45px rgba(20,43,59,.055)}.landing-v2-price-card.featured{border-color:#b7dce8;background:linear-gradient(180deg,#f3fbfd,#fff 48%);box-shadow:0 24px 60px rgba(31,105,136,.12)}.landing-v2-price-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.landing-v2-price-top strong{font-size:17px;color:#294b60;font-weight:600}.landing-v2-price-top span{font-size:10px;color:#277794;background:#edf8fb;padding:7px 9px;border-radius:999px}.landing-v2-price{display:flex;align-items:flex-start;margin:26px 0 13px;color:#15384e}.landing-v2-price sup{font-size:18px;margin-top:10px}.landing-v2-price b{font-size:58px;line-height:.9;letter-spacing:-.045em;font-weight:600}.landing-v2-price>div{font-size:11px;line-height:1.25;margin:7px 0 0 8px;color:#708694}.landing-v2-price-card>p{font-size:13px;line-height:1.6;color:#6c8291;min-height:42px}.landing-v2-price-card ul{list-style:none;padding:18px 0;margin:18px 0;border-top:1px solid #e9f0f3;display:grid;gap:11px}.landing-v2-price-card li{position:relative;padding-left:20px;font-size:12px;color:#526d7e}.landing-v2-price-card li::before{content:'✓';position:absolute;left:0;color:#19856a}.landing-v2-addons{margin-top:48px;padding:28px;border-radius:28px;background:#f6fafc;border:1px solid #e0eaef}.landing-v2-addons-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:22px}.landing-v2-addons-head h3{font-size:28px;font-weight:600;letter-spacing:-.03em;color:#1d4055;margin:7px 0 0}.landing-v2-addons-head p{font-size:13px;line-height:1.6;color:#708592;margin:0} .landing-v2-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start}.landing-v2-faq .landing-v2-section-heading{position:sticky;top:110px}.landing-v2-faq-grid{display:grid;gap:10px}.landing-v2-faq-grid details{border:1px solid #dde8ed;background:#fff;border-radius:18px;padding:0 20px;transition:.2s}.landing-v2-faq-grid details[open]{background:#f8fbfc;border-color:#cfe1e8}.landing-v2-faq-grid summary{cursor:pointer;list-style:none;padding:19px 28px 19px 0;font-size:14px;font-weight:600;color:#315066;position:relative}.landing-v2-faq-grid summary::-webkit-details-marker{display:none}.landing-v2-faq-grid summary::after{content:'+';position:absolute;right:0;top:16px;width:26px;height:26px;border-radius:9px;background:#eef6f9;display:grid;place-items:center;color:#3d728b;font-size:16px;font-weight:400}.landing-v2-faq-grid details[open] summary::after{content:'–'}.landing-v2-faq-grid details p{font-size:13px;line-height:1.65;color:#708593;margin:0;padding:0 35px 20px 0} .landing-v2-final{position:relative;width:min(1360px,calc(100% - 40px));margin:0 auto 50px;padding:58px;border-radius:34px;background:#102f44;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;overflow:hidden}.landing-v2-final-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(213,54,222,.28),transparent 65%);right:-120px;top:-220px}.landing-v2-final>div:not(.landing-v2-final-glow){position:relative;z-index:2}.landing-v2-final>div>span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#bce7f0}.landing-v2-final h2{color:#fff;font-size:clamp(34px,4.4vw,58px);max-width:760px;margin:10px 0 14px}.landing-v2-final p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.68);max-width:660px;margin:0}.landing-v2-final-actions{display:flex;flex-direction:column;gap:10px;min-width:190px}.landing-v2-text-btn{border:0;background:transparent;color:rgba(255,255,255,.75);padding:8px;font-size:12px;cursor:pointer} .landing-v2-footer{width:min(1360px,calc(100% - 40px));margin:0 auto;padding:28px 0 38px;display:grid;grid-template-columns:1fr auto;gap:28px;border-top:1px solid #e7eef2}.landing-v2-footer-brand img{width:155px;display:block}.landing-v2-footer-brand p{font-size:11px;color:#8797a1;margin:8px 0 0}.landing-v2-footer-links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}.landing-v2-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;font-size:10px;color:#9aa8b0;padding-top:8px} body.dark-mode .landing-v2{background:#08151f;color:#e8f0f4;--lv2-ink:#e8f0f4;--lv2-muted:#91a7b5;--lv2-line:#233947;--lv2-soft:#102430}.dark-mode .landing-v2-header{background:rgba(8,21,31,.88);border-bottom-color:#203542}.dark-mode .landing-v2-menu button,.dark-mode .landing-v2-login{color:#afc1cc}.dark-mode .landing-v2-menu button:hover{background:#102936;color:#e5f3f8}.dark-mode .landing-v2-brand img,.dark-mode .landing-v2-footer-brand img{filter:brightness(0) invert(1);opacity:.92}.dark-mode .landing-v2-hero h1,.dark-mode .landing-v2-section-heading h2,.dark-mode .landing-v2-showcase h2,.dark-mode .landing-v2-bento-card h3,.dark-mode .landing-v2-addons-head h3{color:#eef6f9}.dark-mode .landing-v2-hero-copy>p,.dark-mode .landing-v2-section-heading p,.dark-mode .landing-v2-showcase-copy>p{color:#92a8b6}.dark-mode .landing-v2-strip{border-color:#1e3441;color:#829aa8}.dark-mode .landing-v2-section,.dark-mode .landing-v2-showcase{border-color:#1d303c}.dark-mode .landing-v2-bento-card,.dark-mode .landing-v2-price-card,.dark-mode .landing-v2-table-wrap,.dark-mode .landing-v2-faq-grid details,.dark-mode .landing-v2-screenshot-frame{background:#0e222e;border-color:#253b48}.dark-mode .landing-v2-bento-card.gradient-card,.dark-mode .landing-v2-bento-card.soft-blue,.dark-mode .landing-v2-price-card.featured{background:#0f2734}.dark-mode .landing-v2-bento-card p,.dark-mode .landing-v2-price-card>p,.dark-mode .landing-v2-price-card li,.dark-mode .landing-v2-addons-head p,.dark-mode .landing-v2-faq-grid details p{color:#8fa5b3}.dark-mode .landing-v2-table th{background:#102733;border-color:#28404c;color:#92a5b0}.dark-mode .landing-v2-table td{border-color:#203541;color:#a1b2bd}.dark-mode .landing-v2-table td:first-child,.dark-mode .landing-v2-price-top strong,.dark-mode .landing-v2-price{color:#dcebf1}.dark-mode .landing-v2-addons{background:#0d202b;border-color:#263b47}.dark-mode .landing-v2-faq-grid details[open]{background:#102631}.dark-mode .landing-v2-faq-grid summary{color:#d0e1e8}.dark-mode .landing-v2-footer{border-color:#20333e} @media (max-width:1180px){.landing-v2-header-inner{grid-template-columns:auto 1fr}.landing-v2-actions{grid-column:2;grid-row:1;justify-self:end}.landing-v2-menu{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}.landing-v2-header-inner{padding-top:10px;min-height:auto}.landing-v2-hero{grid-template-columns:1fr;padding-top:64px}.landing-v2-hero-copy{max-width:880px}.landing-v2-hero-visual{min-height:520px}.landing-v2-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-v2-showcase,.landing-v2-showcase.reverse{grid-template-columns:1fr;gap:45px}.landing-v2-showcase.reverse .landing-v2-showcase-copy,.landing-v2-showcase.reverse .landing-v2-showcase-media{order:initial}.landing-v2-split-banner{grid-template-columns:1fr}.landing-v2-faq{grid-template-columns:1fr;gap:28px}.landing-v2-faq .landing-v2-section-heading{position:static}.landing-v2-final{align-items:flex-start;flex-direction:column}.landing-v2-final-actions{flex-direction:row;min-width:0}.landing-v2-footer{grid-template-columns:1fr}.landing-v2-footer-links{justify-content:flex-start}} @media (max-width:720px){.landing-v2-header-inner,.landing-v2-hero,.landing-v2-showcase,.landing-v2-section,.landing-v2-split-banner,.landing-v2-final,.landing-v2-footer{width:min(100% - 24px,1440px)}.landing-v2-header-inner{gap:10px}.landing-v2-brand img{width:142px}.landing-v2-actions{gap:4px}.landing-v2-login{display:none}.landing-v2-primary.compact{font-size:12px;padding:0 13px}.landing-v2-menu{gap:0}.landing-v2-menu button{font-size:11px;padding:8px 10px}.landing-v2-hero{padding:52px 0 66px;gap:36px}.landing-v2-hero h1{font-size:clamp(46px,14vw,66px);margin-top:18px}.landing-v2-hero-copy>p{font-size:16px}.landing-v2-hero-actions{display:grid;grid-template-columns:1fr}.landing-v2-primary,.landing-v2-secondary{width:100%}.landing-v2-hero-notes{gap:9px;display:grid}.landing-v2-hero-visual{min-height:350px}.landing-v2-browser{transform:none;border-radius:18px}.landing-v2-browser-bar{height:32px}.landing-v2-browser-bar>div{min-width:120px;height:19px}.landing-v2-float{display:none}.landing-v2-strip{justify-content:flex-start}.landing-v2-section{padding:82px 0}.landing-v2-section-heading h2{font-size:40px}.landing-v2-bento{grid-template-columns:1fr}.landing-v2-bento-card.large,.landing-v2-bento-card.wide{grid-column:auto;grid-row:auto;min-height:320px}.landing-v2-bento-card.wide{grid-template-columns:1fr}.landing-v2-palette{display:none}.landing-v2-showcase{padding:76px 0}.landing-v2-showcase h2{font-size:40px}.landing-v2-media-badge{position:relative;left:auto!important;right:auto!important;bottom:auto;margin:-10px 12px 0}.landing-v2-stat-grid{grid-template-columns:1fr}.landing-v2-split-banner{padding:34px 24px;border-radius:26px}.landing-v2-split-banner h2{font-size:38px}.landing-v2-price-grid{grid-template-columns:1fr}.landing-v2-price-card{padding:24px}.landing-v2-addons{padding:18px;margin-top:30px}.landing-v2-addons-head{grid-template-columns:1fr;gap:12px}.landing-v2-faq-grid summary{font-size:13px}.landing-v2-final{padding:34px 24px;border-radius:26px}.landing-v2-final h2{font-size:38px}.landing-v2-final-actions{width:100%;flex-direction:column}.landing-v2-footer-links{display:grid;grid-template-columns:repeat(2,1fr)}.landing-v2-footer-links button{text-align:left}.landing-v2-footer-bottom{flex-direction:column;gap:5px}} /* ========================================================== OdontoSuite Landing V3 · principal visual + color system ========================================================== */ .landing-v3{ --v3-ink:#102b46;--v3-text:#35536b;--v3-muted:#71879a;--v3-line:#dfe9f1; --v3-blue:#2468f2;--v3-cyan:#16a6c7;--v3-purple:#7c4dff;--v3-pink:#df3fb4; --v3-orange:#f2913d;--v3-green:#24a77b;--v3-indigo:#5268dc;--v3-teal:#1aa6a2; min-height:100vh;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 36%,#ffffff 100%);color:var(--v3-ink);overflow:hidden;font-weight:400; } .landing-v3 *{box-sizing:border-box}.landing-v3 button{font:inherit}.landing-v3 .ui-icon{width:1em;height:1em;display:block} .landing-v3-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(20px) saturate(155%);border-bottom:1px solid rgba(31,72,110,.08)} .landing-v3-header-inner{width:min(1450px,calc(100% - 42px));min-height:78px;margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px} .landing-v3-brand{padding:0;border:0;background:transparent;display:flex;align-items:center;cursor:pointer}.landing-v3-brand img{width:178px;max-height:48px;object-fit:contain;display:block} .landing-v3-menu{display:flex;align-items:center;justify-content:center;gap:3px}.landing-v3-menu button,.landing-v3-footer-links button{border:0;background:transparent;color:#506b80;font-size:13px;font-weight:500;padding:10px 12px;border-radius:999px;cursor:pointer;transition:.2s ease}.landing-v3-menu button:hover{background:#edf5ff;color:var(--v3-blue)} .landing-v3-actions{display:flex;align-items:center;gap:8px}.landing-v3-login{border:0;background:transparent;color:#3f5c72;font-size:13px;font-weight:500;padding:11px 13px;border-radius:12px;cursor:pointer} .landing-v3-primary,.landing-v3-secondary{border:0;min-height:50px;padding:0 22px;border-radius:15px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .landing-v3-primary{color:#fff;background:linear-gradient(135deg,#2468f2 0%,#6a56ea 58%,#ba48d0 100%);box-shadow:0 14px 30px rgba(76,89,226,.24)}.landing-v3-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(76,89,226,.31)}.landing-v3-primary.compact{min-height:42px;padding:0 17px;border-radius:12px}.landing-v3-primary.full,.landing-v3-secondary.full{width:100%}.landing-v3-primary.white{background:#fff;color:#3f51c8;box-shadow:0 14px 32px rgba(26,25,81,.22)} .landing-v3-secondary{color:#284b68;background:#fff;border:1px solid #d9e6ef;box-shadow:0 8px 18px rgba(30,66,96,.06)}.landing-v3-secondary:hover{transform:translateY(-2px);border-color:#b9d2e5} .landing-v3-hero{position:relative;width:min(1450px,calc(100% - 42px));margin:0 auto;padding:52px 0 98px}.landing-v3-hero-glow{position:absolute;border-radius:50%;filter:blur(18px);pointer-events:none}.landing-v3-hero-glow.glow-a{width:520px;height:520px;left:-280px;top:-120px;background:radial-gradient(circle,rgba(36,104,242,.18),rgba(36,104,242,0) 68%)}.landing-v3-hero-glow.glow-b{width:580px;height:580px;right:-330px;bottom:-80px;background:radial-gradient(circle,rgba(223,63,180,.16),rgba(223,63,180,0) 70%)} .landing-v3-hero-frame{position:relative;z-index:2;border-radius:34px;padding:8px;background:linear-gradient(135deg,rgba(36,104,242,.24),rgba(22,166,199,.12) 35%,rgba(124,77,255,.22) 68%,rgba(223,63,180,.18));box-shadow:0 34px 90px rgba(34,74,113,.18)}.landing-v3-hero-frame img{display:block;width:100%;height:auto;border-radius:27px;background:#fff} .landing-v3-hero-dock{position:relative;z-index:3;width:calc(100% - 100px);margin:-36px auto 0;padding:18px 20px 18px 24px;border:1px solid rgba(215,228,239,.9);border-radius:24px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);box-shadow:0 20px 54px rgba(35,70,104,.14);display:flex;align-items:center;justify-content:space-between;gap:26px}.landing-v3-hero-dock-copy{display:flex;align-items:center;gap:15px;min-width:0}.landing-v3-live{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#1b7b5e;background:#e9fbf4;border:1px solid #c5efdf;padding:8px 10px;border-radius:999px}.landing-v3-live i{width:7px;height:7px;border-radius:50%;background:#25ad7d;box-shadow:0 0 0 4px rgba(37,173,125,.12)}.landing-v3-hero-dock-copy>div{display:grid;gap:3px}.landing-v3-hero-dock-copy strong{font-size:15px;font-weight:600;color:#1e405d}.landing-v3-hero-dock-copy small{font-size:11px;color:#72899b;line-height:1.45}.landing-v3-hero-dock-actions{display:flex;gap:9px;flex-shrink:0}.landing-v3-mobile-copy{display:none} .landing-v3-proof{width:min(1320px,calc(100% - 42px));margin:-22px auto 0;padding:22px 0 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.landing-v3-proof article{display:flex;align-items:center;gap:12px;padding:14px 13px;border-radius:18px;transition:.2s ease}.landing-v3-proof article:hover{background:#f7fbff;transform:translateY(-2px)}.landing-v3-proof-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}.landing-v3-proof-icon .ui-icon{width:21px;height:21px}.landing-v3-proof-icon.blue{background:#eaf1ff;color:#2468f2}.landing-v3-proof-icon.cyan{background:#e7f9fc;color:#119bb9}.landing-v3-proof-icon.purple{background:#f0ebff;color:#7551e7}.landing-v3-proof-icon.pink{background:#fdebf7;color:#cc389e}.landing-v3-proof article div{display:grid;gap:3px}.landing-v3-proof strong{font-size:12px;font-weight:600;color:#2c4d66}.landing-v3-proof small{font-size:10px;line-height:1.45;color:#8092a0} .landing-v3-section{width:min(1320px,calc(100% - 42px));margin:0 auto;padding:118px 0}.landing-v3-section-heading{max-width:820px;margin-bottom:48px}.landing-v3-section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.landing-v3-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;padding:8px 11px;border-radius:999px;background:#eef4ff;color:#3f61c9}.landing-v3-kicker.purple{background:#f2edff;color:#7449d9}.landing-v3-kicker.cyan{background:#e7f9fc;color:#118eac}.landing-v3-kicker.pink{background:#fdebf7;color:#bd348e}.landing-v3-kicker.green{background:#e8f8f1;color:#17825f}.landing-v3-kicker.light{background:rgba(255,255,255,.13);color:#eafaff;border:1px solid rgba(255,255,255,.16)} .landing-v3-section-heading h2,.landing-v3-showcase h2{font-size:clamp(42px,5.2vw,70px);line-height:1.01;letter-spacing:-.047em;font-weight:570;margin:16px 0 18px;color:#12334d}.landing-v3-section-heading h2 em{font-style:normal;background:linear-gradient(100deg,#2468f2,#7c4dff 56%,#df3fb4);background-clip:text;-webkit-background-clip:text;color:transparent}.landing-v3-section-heading p,.landing-v3-showcase-copy>p{font-size:16px;line-height:1.75;color:#6d8496;margin:0;max-width:720px}.landing-v3-section-heading.center p{margin-left:auto;margin-right:auto} .landing-v3-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.landing-v3-module-card{position:relative;min-height:260px;padding:25px;border-radius:26px;overflow:hidden;border:1px solid #e2ebf2;background:#fff;box-shadow:0 12px 34px rgba(33,70,103,.06);display:flex;flex-direction:column;align-items:flex-start}.landing-v3-module-card::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-90px;top:-90px;opacity:.8;pointer-events:none}.landing-v3-module-card.featured{grid-column:span 2;min-height:330px}.landing-v3-module-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;margin-bottom:30px;position:relative;z-index:2}.landing-v3-module-icon .ui-icon{width:25px;height:25px}.landing-v3-module-card>small,.landing-v3-module-card>div>small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8799a6;font-weight:600}.landing-v3-module-card h3{font-size:22px;line-height:1.12;letter-spacing:-.025em;font-weight:600;margin:7px 0 10px;color:#24445d}.landing-v3-module-card p{font-size:12px;line-height:1.65;color:#718697;margin:0;max-width:520px}.landing-v3-module-tags{margin-top:auto!important;padding-top:26px;display:flex!important;gap:7px;flex-wrap:wrap}.landing-v3-module-tags span{font-size:10px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.8);color:#3d5870}.landing-v3-module-card.card-blue{background:linear-gradient(145deg,#eaf2ff,#f8fbff 58%,#eef1ff)}.card-blue::after{background:#bfd3ff}.card-blue .landing-v3-module-icon{background:#2468f2;color:#fff}.landing-v3-module-card.card-cyan{background:linear-gradient(145deg,#ecfbfe,#fff)}.card-cyan::after{background:#bceff6}.card-cyan .landing-v3-module-icon{background:#19a7c6;color:#fff}.landing-v3-module-card.card-purple{background:linear-gradient(145deg,#f3efff,#fff)}.card-purple::after{background:#d8cbff}.card-purple .landing-v3-module-icon{background:#7c4dff;color:#fff}.landing-v3-module-card.card-pink{background:linear-gradient(145deg,#fff0fa,#fff)}.card-pink::after{background:#f8c5e8}.card-pink .landing-v3-module-icon{background:#df3fb4;color:#fff}.landing-v3-module-card.card-orange{background:linear-gradient(145deg,#fff5e9,#fff)}.card-orange::after{background:#ffd9ae}.card-orange .landing-v3-module-icon{background:#ef9140;color:#fff}.landing-v3-module-card.card-green{background:linear-gradient(145deg,#eaf9f3,#fff)}.card-green::after{background:#c0eddc}.card-green .landing-v3-module-icon{background:#24a77b;color:#fff}.landing-v3-module-card.card-indigo{background:linear-gradient(145deg,#eef1ff,#fff)}.card-indigo::after{background:#cdd4ff}.card-indigo .landing-v3-module-icon{background:#5268dc;color:#fff}.landing-v3-module-card.card-teal{background:linear-gradient(145deg,#eafaf9,#fff)}.card-teal::after{background:#bcece9}.card-teal .landing-v3-module-icon{background:#1aa6a2;color:#fff} .landing-v3-showcase{position:relative;width:min(1450px,calc(100% - 42px));margin:26px auto;padding:82px;border-radius:42px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:center}.landing-v3-agenda{background:linear-gradient(135deg,#173e72 0%,#245db6 42%,#6557c8 72%,#9b4eb5 100%);box-shadow:0 34px 80px rgba(51,74,151,.2)}.landing-v3-agenda::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 10% 20%,rgba(75,212,238,.24),transparent 34%),radial-gradient(circle at 90% 80%,rgba(247,112,215,.18),transparent 30%);pointer-events:none}.landing-v3-showcase-copy,.landing-v3-showcase-media{position:relative;z-index:2}.landing-v3-agenda h2{color:#fff;font-size:clamp(42px,4.9vw,66px)}.landing-v3-agenda .landing-v3-showcase-copy>p{color:rgba(255,255,255,.75)}.landing-v3-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:30px}.landing-v3-check-grid>div{padding:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);border-radius:18px;display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center}.landing-v3-check-grid>div>span{grid-row:1/3;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.13);display:grid;place-items:center;color:#fff}.landing-v3-check-grid .ui-icon{width:18px;height:18px}.landing-v3-check-grid strong{font-size:11px;color:#fff;font-weight:600}.landing-v3-check-grid small{font-size:9px;color:rgba(255,255,255,.68);line-height:1.4;margin-top:2px}.landing-v3-shot{padding:7px;border-radius:25px;background:rgba(255,255,255,.2);box-shadow:0 28px 65px rgba(13,28,75,.32);transform:rotate(1deg)}.landing-v3-shot img{width:100%;display:block;border-radius:19px;background:#fff}.landing-v3-floating-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:16px;background:#fff;color:#315069;box-shadow:0 16px 34px rgba(19,39,92,.2)}.landing-v3-floating-chip>.ui-icon{width:21px;height:21px;color:#5b5be0}.landing-v3-floating-chip span{display:grid;gap:1px}.landing-v3-floating-chip strong{font-size:10px;font-weight:600}.landing-v3-floating-chip small{font-size:8px;color:#7890a0}.landing-v3-floating-chip.chip-top{right:-22px;top:-25px}.landing-v3-floating-chip.chip-bottom{left:-20px;bottom:-28px} .landing-v3-record{background:linear-gradient(135deg,#f7f9ff 0%,#f7f4ff 42%,#fff5fb 100%);border:1px solid #e5e4f4;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}.landing-v3-record .landing-v3-shot{background:#fff;transform:rotate(-1deg);box-shadow:0 25px 60px rgba(73,60,130,.13)}.landing-v3-record-bubbles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 20px 0}.landing-v3-record-bubbles span{font-size:9px;color:#5d5987;background:#fff;padding:8px 10px;border-radius:999px;border:1px solid #e4def5;box-shadow:0 7px 16px rgba(75,60,124,.07)}.landing-v3-showcase-copy.dark-copy h2{color:#283456}.landing-v3-clean-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}.landing-v3-clean-list li{display:flex;align-items:flex-start;gap:12px}.landing-v3-clean-list i{width:42px;height:42px;border-radius:14px;background:#fff;display:grid;place-items:center;color:#7053d6;box-shadow:0 8px 22px rgba(78,60,143,.1);font-style:normal;flex:0 0 auto}.landing-v3-clean-list .ui-icon{width:20px;height:20px}.landing-v3-clean-list li>div{display:grid;gap:3px}.landing-v3-clean-list strong{font-size:12px;font-weight:600;color:#3b4768}.landing-v3-clean-list small{font-size:10px;line-height:1.5;color:#7c8198} .landing-v3-admin{display:grid;grid-template-columns:.76fr 1.24fr;gap:65px;align-items:start}.landing-v3-admin .landing-v3-section-heading{position:sticky;top:112px;margin-bottom:0}.landing-v3-admin-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.landing-v3-admin-card{min-height:165px;padding:22px;border-radius:24px;background:#fff;border:1px solid #e3ebf2;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 10px 30px rgba(34,69,100,.055)}.landing-v3-admin-card.main{grid-column:1/-1;min-height:270px;background:linear-gradient(145deg,#122d4c,#21538b 50%,#5f54c6);color:#fff;border:0}.landing-v3-admin-card>span{width:45px;height:45px;border-radius:14px;background:#edf4ff;color:#3b6bd7;display:grid;place-items:center;margin-bottom:auto}.landing-v3-admin-card.main>span{background:rgba(255,255,255,.13);color:#fff}.landing-v3-admin-card .ui-icon{width:21px;height:21px}.landing-v3-admin-card small{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8597a6;margin-top:20px}.landing-v3-admin-card strong{font-size:18px;font-weight:600;color:#24445d;margin-top:5px}.landing-v3-admin-card.main small{color:rgba(255,255,255,.62)}.landing-v3-admin-card.main strong{font-size:27px;color:#fff}.landing-v3-admin-card p{font-size:11px;line-height:1.6;color:rgba(255,255,255,.7);max-width:560px;margin:8px 0 0} .landing-v3-table-section{padding-top:96px}.landing-v3-table-wrap{overflow:auto;border:1px solid #e0eaf1;border-radius:28px;background:#fff;box-shadow:0 18px 54px rgba(35,69,102,.07)}.landing-v3-table{width:100%;border-collapse:collapse;min-width:820px}.landing-v3-table th{padding:15px 20px;background:#f5f8fc;border-bottom:1px solid #e3ebf2;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8294a2;font-weight:600}.landing-v3-table td{padding:18px 20px;border-bottom:1px solid #edf2f6;font-size:11px;line-height:1.55;color:#61798b}.landing-v3-table tr:last-child td{border-bottom:0}.landing-v3-table td:first-child{display:flex;align-items:center;gap:11px;color:#294b64}.landing-v3-table td:first-child strong{font-size:12px;font-weight:600}.table-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.table-icon .ui-icon{width:18px;height:18px}.table-icon.blue{background:#eaf1ff;color:#2468f2}.table-icon.purple{background:#f0ebff;color:#7551e7}.table-icon.green{background:#e8f8f1;color:#20936d}.table-icon.orange{background:#fff1e3;color:#df8434}.table-icon.pink{background:#fdebf7;color:#c93b9b}.table-icon.indigo{background:#eef0ff;color:#5268dc}.landing-v3-status{display:inline-flex;padding:7px 9px;border-radius:999px;font-size:9px;font-weight:600}.landing-v3-status.included{background:#e8f8f1;color:#1a7d5e}.landing-v3-status.optional{background:#f0ebff;color:#6c4bc4} .landing-v3-value-band{width:min(1450px,calc(100% - 42px));margin:30px auto;padding:64px;border-radius:38px;background:linear-gradient(135deg,#171d42 0%,#293263 48%,#4c3475 100%);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center;position:relative;overflow:hidden}.landing-v3-value-band::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:-160px;top:-260px;background:radial-gradient(circle,rgba(242,81,197,.35),rgba(242,81,197,0) 67%)}.landing-v3-value-copy,.landing-v3-value-grid{position:relative;z-index:2}.landing-v3-value-copy>span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#a9e9fa}.landing-v3-value-copy h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:570;margin:12px 0 14px;color:#fff}.landing-v3-value-copy p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.66);margin:0}.landing-v3-value-grid{display:grid;gap:10px}.landing-v3-value-grid article{display:grid;grid-template-columns:44px 1fr;gap:2px 12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:18px}.landing-v3-value-grid article>span{grid-row:1/3;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.11);display:grid;place-items:center}.landing-v3-value-grid .ui-icon{width:20px;height:20px}.landing-v3-value-grid strong{font-size:11px;font-weight:600}.landing-v3-value-grid small{font-size:9px;line-height:1.45;color:rgba(255,255,255,.61)} .landing-v3-pricing{padding-top:130px}.landing-v3-price-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.landing-v3-price-card{position:relative;padding:31px;border:1px solid #e1e9f1;border-radius:30px;background:#fff;box-shadow:0 18px 52px rgba(36,71,103,.07)}.landing-v3-price-card.featured{background:linear-gradient(155deg,#eef4ff,#fff 55%,#f7f0ff);border-color:#cad8f8;box-shadow:0 24px 62px rgba(73,93,192,.14)}.landing-v3-price-card.annual{background:linear-gradient(155deg,#edfbfd,#fff 55%)}.landing-v3-price-label{display:inline-flex;padding:7px 9px;border-radius:999px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;background:#e8ecff;color:#5460c8}.landing-v3-price-label.cyan{background:#e5f8fb;color:#1688a0}.landing-v3-plan-name{display:block;font-size:16px;font-weight:600;color:#304f68;margin-top:14px}.landing-v3-price{display:flex;align-items:flex-start;margin:24px 0 13px;color:#1c3e5b}.landing-v3-price sup{font-size:17px;margin-top:9px}.landing-v3-price strong{font-size:58px;line-height:.9;letter-spacing:-.05em;font-weight:580}.landing-v3-price>span{font-size:10px;color:#708698;margin:7px 0 0 8px;line-height:1.25}.landing-v3-price-card>p{font-size:11px;line-height:1.6;color:#708697;min-height:36px}.landing-v3-price-card ul{list-style:none;padding:18px 0;margin:18px 0;border-top:1px solid #e7eef4;display:grid;gap:10px}.landing-v3-price-card li{position:relative;padding-left:20px;font-size:10px;color:#536e82}.landing-v3-price-card li::before{content:"✓";position:absolute;left:0;color:#239773;font-weight:600}.landing-v3-addon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:28px}.landing-v3-addon-grid article{display:flex;align-items:center;gap:11px;padding:16px;border:1px solid #e2ebf2;background:#fff;border-radius:20px}.addon-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}.addon-icon .ui-icon{width:19px;height:19px}.addon-icon.purple{background:#f0ebff;color:#7551e7}.addon-icon.pink{background:#fdebf7;color:#c93b9b}.addon-icon.orange{background:#fff1e3;color:#df8434}.addon-icon.cyan{background:#e5f8fb;color:#1688a0}.landing-v3-addon-grid article>div{display:grid;gap:1px}.landing-v3-addon-grid small{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#8b9aa6}.landing-v3-addon-grid strong{font-size:11px;color:#3a576d;font-weight:600}.landing-v3-addon-grid p{font-size:9px;color:#7b8d9b;margin:1px 0 0;line-height:1.4} .landing-v3-faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:start}.landing-v3-faq .landing-v3-section-heading{position:sticky;top:112px}.landing-v3-faq .landing-v3-section-heading .landing-v3-primary{margin-top:24px}.landing-v3-faq-grid{display:grid;gap:10px}.landing-v3-faq-grid details{border:1px solid #e1eaf1;background:#fff;border-radius:19px;padding:0 20px;transition:.2s}.landing-v3-faq-grid details[open]{background:#f9fbff;border-color:#d5dff5;box-shadow:0 8px 22px rgba(48,71,111,.05)}.landing-v3-faq-grid summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;font-size:12px;font-weight:600;color:#36536a;position:relative}.landing-v3-faq-grid summary::-webkit-details-marker{display:none}.landing-v3-faq-grid summary::after{content:"+";position:absolute;right:0;top:15px;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#eaf1ff,#f2edff);display:grid;place-items:center;color:#6267ce;font-size:16px;font-weight:400}.landing-v3-faq-grid details[open] summary::after{content:"–"}.landing-v3-faq-grid details p{font-size:11px;line-height:1.65;color:#718697;margin:0;padding:0 42px 20px 0} .landing-v3-final{position:relative;width:min(1450px,calc(100% - 42px));margin:10px auto 52px;padding:58px 62px;border-radius:38px;background:linear-gradient(120deg,#235cc5,#6e4ed0 58%,#c243ad);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:45px;overflow:hidden;box-shadow:0 30px 70px rgba(83,62,172,.2)}.landing-v3-final-orb{position:absolute;width:520px;height:520px;border-radius:50%;right:-170px;top:-300px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}.landing-v3-final>div:not(.landing-v3-final-orb){position:relative;z-index:2}.landing-v3-final>div>span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#d8f8ff}.landing-v3-final h2{font-size:clamp(36px,4.5vw,59px);max-width:860px;line-height:1.02;letter-spacing:-.045em;font-weight:570;margin:12px 0 14px;color:#fff}.landing-v3-final p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.72);max-width:650px;margin:0}.landing-v3-final-actions{display:flex;flex-direction:column;gap:9px;min-width:200px}.landing-v3-final-login{border:0;background:transparent;color:rgba(255,255,255,.8);padding:9px;font-size:11px;cursor:pointer} .landing-v3-footer{width:min(1320px,calc(100% - 42px));margin:0 auto;padding:28px 0 38px;display:grid;grid-template-columns:1fr auto;gap:28px;border-top:1px solid #e3ebf2}.landing-v3-footer-brand img{width:156px;display:block}.landing-v3-footer-brand p{font-size:10px;color:#8798a5;margin:8px 0 0}.landing-v3-footer-links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}.landing-v3-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;font-size:9px;color:#a0adb6;padding-top:8px} body.dark-mode .landing-v3{background:#08141f;color:#e8f1f7}.dark-mode .landing-v3-header{background:rgba(8,20,31,.9);border-bottom-color:#1d3445}.dark-mode .landing-v3-brand img,.dark-mode .landing-v3-footer-brand img{filter:brightness(0) invert(1);opacity:.92}.dark-mode .landing-v3-menu button,.dark-mode .landing-v3-login{color:#a5b8c6}.dark-mode .landing-v3-menu button:hover{background:#112837;color:#eef7fb}.dark-mode .landing-v3-hero-dock,.dark-mode .landing-v3-module-card,.dark-mode .landing-v3-admin-card,.dark-mode .landing-v3-table-wrap,.dark-mode .landing-v3-price-card,.dark-mode .landing-v3-addon-grid article,.dark-mode .landing-v3-faq-grid details{background:#0e2230;border-color:#263b49}.dark-mode .landing-v3-module-card.card-blue,.dark-mode .landing-v3-module-card.card-cyan,.dark-mode .landing-v3-module-card.card-purple,.dark-mode .landing-v3-module-card.card-pink,.dark-mode .landing-v3-module-card.card-orange,.dark-mode .landing-v3-module-card.card-green,.dark-mode .landing-v3-module-card.card-indigo,.dark-mode .landing-v3-module-card.card-teal,.dark-mode .landing-v3-price-card.featured,.dark-mode .landing-v3-price-card.annual{background:#102735}.dark-mode .landing-v3-section-heading h2,.dark-mode .landing-v3-module-card h3,.dark-mode .landing-v3-admin-card strong,.dark-mode .landing-v3-plan-name,.dark-mode .landing-v3-price,.dark-mode .landing-v3-faq-grid summary{color:#e5eff4}.dark-mode .landing-v3-section-heading p,.dark-mode .landing-v3-module-card p,.dark-mode .landing-v3-price-card>p,.dark-mode .landing-v3-price-card li,.dark-mode .landing-v3-faq-grid details p,.dark-mode .landing-v3-hero-dock-copy small{color:#8fa6b5}.dark-mode .landing-v3-hero-dock-copy strong{color:#d9e8ef}.dark-mode .landing-v3-proof article:hover{background:#0d2230}.dark-mode .landing-v3-proof strong{color:#cbdce5}.dark-mode .landing-v3-proof small{color:#8298a6}.dark-mode .landing-v3-record{background:linear-gradient(135deg,#111d2d,#191c35);border-color:#2b354c}.dark-mode .landing-v3-record .landing-v3-shot{background:#172938}.dark-mode .landing-v3-showcase-copy.dark-copy h2,.dark-mode .landing-v3-clean-list strong{color:#e2e9f5}.dark-mode .landing-v3-clean-list small{color:#929caf}.dark-mode .landing-v3-clean-list i{background:#172938}.dark-mode .landing-v3-table th{background:#102633;border-color:#29414f;color:#899eab}.dark-mode .landing-v3-table td{border-color:#203642;color:#9fb0bc}.dark-mode .landing-v3-table td:first-child{color:#d6e4eb}.dark-mode .landing-v3-faq-grid details[open]{background:#102735}.dark-mode .landing-v3-footer{border-color:#203440} @media(max-width:1180px){ .landing-v3-header-inner{grid-template-columns:auto 1fr;padding-top:10px;min-height:auto}.landing-v3-actions{grid-column:2;grid-row:1;justify-self:end}.landing-v3-menu{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;padding-bottom:10px;scrollbar-width:none} .landing-v3-hero{padding-top:38px}.landing-v3-hero-dock{width:calc(100% - 44px);align-items:flex-start}.landing-v3-hero-dock-copy{align-items:flex-start}.landing-v3-proof{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-v3-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-v3-module-card.featured{grid-column:span 2} .landing-v3-showcase{grid-template-columns:1fr;padding:60px;gap:48px}.landing-v3-record .landing-v3-showcase-media{order:2}.landing-v3-record .landing-v3-showcase-copy{order:1}.landing-v3-admin{grid-template-columns:1fr;gap:34px}.landing-v3-admin .landing-v3-section-heading,.landing-v3-faq .landing-v3-section-heading{position:static}.landing-v3-value-band{grid-template-columns:1fr}.landing-v3-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-v3-faq{grid-template-columns:1fr;gap:30px}.landing-v3-final{align-items:flex-start;flex-direction:column}.landing-v3-final-actions{flex-direction:row;min-width:0}.landing-v3-footer{grid-template-columns:1fr}.landing-v3-footer-links{justify-content:flex-start} } @media(max-width:720px){ .landing-v3-header-inner,.landing-v3-hero,.landing-v3-proof,.landing-v3-section,.landing-v3-showcase,.landing-v3-value-band,.landing-v3-final,.landing-v3-footer{width:min(100% - 24px,1450px)}.landing-v3-header-inner{gap:9px}.landing-v3-brand img{width:142px}.landing-v3-login{display:none}.landing-v3-primary.compact{font-size:11px;padding:0 13px}.landing-v3-menu{gap:0}.landing-v3-menu button{font-size:10px;padding:8px 9px} .landing-v3-hero{padding:24px 0 72px}.landing-v3-hero-frame{border-radius:22px;padding:5px}.landing-v3-hero-frame img{border-radius:17px}.landing-v3-hero-dock{width:calc(100% - 16px);margin:-14px auto 0;padding:16px;border-radius:20px;display:grid}.landing-v3-hero-dock-copy{display:grid;gap:10px}.landing-v3-live{width:max-content}.landing-v3-hero-dock-actions{display:grid;grid-template-columns:1fr;width:100%}.landing-v3-hero-dock-actions .landing-v3-primary,.landing-v3-hero-dock-actions .landing-v3-secondary{width:100%}.landing-v3-mobile-copy{display:block;text-align:center;padding:28px 8px 0}.landing-v3-mobile-copy>span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#5768d0}.landing-v3-mobile-copy h1{font-size:34px;line-height:1.02;letter-spacing:-.04em;font-weight:580;margin:9px 0;color:#183a56}.landing-v3-mobile-copy p{font-size:12px;line-height:1.6;color:#718797;margin:0} .landing-v3-proof{grid-template-columns:1fr;padding-top:0}.landing-v3-section{padding:82px 0}.landing-v3-section-heading{margin-bottom:32px}.landing-v3-section-heading h2,.landing-v3-showcase h2{font-size:40px}.landing-v3-section-heading p,.landing-v3-showcase-copy>p{font-size:14px}.landing-v3-module-grid{grid-template-columns:1fr}.landing-v3-module-card.featured{grid-column:auto}.landing-v3-module-card{min-height:235px}.landing-v3-showcase{padding:34px 22px;border-radius:28px;gap:34px}.landing-v3-check-grid{grid-template-columns:1fr}.landing-v3-floating-chip{display:none}.landing-v3-record-bubbles{margin-left:0;margin-right:0}.landing-v3-admin-board{grid-template-columns:1fr}.landing-v3-admin-card.main{grid-column:auto}.landing-v3-value-band{padding:36px 24px;border-radius:28px;gap:32px}.landing-v3-price-grid{grid-template-columns:1fr}.landing-v3-price-card{padding:24px}.landing-v3-addon-grid{grid-template-columns:1fr}.landing-v3-faq-grid summary{font-size:11px}.landing-v3-final{padding:36px 24px;border-radius:28px}.landing-v3-final h2{font-size:39px}.landing-v3-final-actions{width:100%;flex-direction:column}.landing-v3-final-actions .landing-v3-primary{width:100%}.landing-v3-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.landing-v3-footer-links button{text-align:left}.landing-v3-footer-bottom{flex-direction:column;gap:5px} } .landing-v3-intro{padding-top:104px;} /* ==========================================================================\n LANDING V4 — large editorial SaaS redesign, no marketing photography\n ========================================================================== */ .os4{--os4-ink:#0b1f38;--os4-muted:#62748a;--os4-blue:#2563eb;--os4-cyan:#06b6d4;--os4-violet:#7c3aed;--os4-green:#10b981;--os4-orange:#f97316;--os4-line:#dce6f1;--os4-soft:#f5f8fc;--os4-white:#fff;background:#fff;color:var(--os4-ink);font-family:Inter,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;line-height:1.55;font-size:18px} .os4 *{box-sizing:border-box}.os4 button,.os4 input,.os4 select,.os4 textarea{font:inherit}.os4 button{cursor:pointer}.os4 img{display:block}.os4 .ui-icon{width:1em;height:1em;stroke-width:1.75} .os4-nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:80;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(220,230,241,.82);backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(18,54,109,.06)} .os4-nav-inner{max-width:1480px;margin:auto;min-height:88px;padding:0 40px;display:flex;align-items:center;gap:36px}.os4-brand{border:0;background:none;padding:0;display:flex;align-items:center;gap:11px}.os4-brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:20px;font-weight:760;box-shadow:0 9px 24px rgba(37,99,235,.18)}.os4-brand-word{font-size:25px;font-weight:680;letter-spacing:-.035em;color:#12366d}.os4-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:auto}.os4-links button{border:0;background:none;color:#41556c;padding:13px 15px;border-radius:12px;font-size:15px;font-weight:550}.os4-links button:hover{background:#f3f7fb;color:var(--os4-ink)}.os4-nav-actions{display:flex;gap:10px} .os4-btn{border:1px solid transparent;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:620;transition:.2s ease;white-space:nowrap}.os4-btn:hover{transform:translateY(-2px)}.os4-btn-sm{padding:12px 18px;font-size:14px}.os4-btn-lg{padding:17px 25px;font-size:17px;min-height:58px}.os4-btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 12px 28px rgba(37,99,235,.23)}.os4-btn-primary:hover{box-shadow:0 16px 36px rgba(37,99,235,.30)}.os4-btn-ghost{background:#fff;border-color:#d9e3ef;color:#263d56}.os4-btn-light{background:#fff;border-color:#d8e4f0;color:#18334f;box-shadow:0 8px 24px rgba(15,42,70,.07)}.os4-btn-white{background:#fff;color:#172d49}.os4-btn-dark-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff}.os4-btn.full{width:100%} .os4-hero{position:relative;max-width:1560px;margin:auto;padding:96px 54px 112px;display:grid;grid-template-columns:minmax(480px,.92fr) minmax(600px,1.08fr);gap:70px;align-items:center}.os4-orb{position:absolute;border-radius:999px;filter:blur(3px);pointer-events:none}.os4-orb-a{width:470px;height:470px;background:radial-gradient(circle,rgba(37,99,235,.12),rgba(37,99,235,0) 68%);left:-180px;top:-40px}.os4-orb-b{width:620px;height:620px;background:radial-gradient(circle,rgba(6,182,212,.10),rgba(6,182,212,0) 68%);right:-260px;bottom:-140px} .os4-eyebrow,.os4-kicker{font-size:13px;font-weight:720;letter-spacing:.14em;text-transform:uppercase}.os4-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#3d5a76;margin-bottom:26px}.os4-eyebrow span{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.10)}.os4-hero h1{font-size:clamp(62px,6.4vw,102px);line-height:.96;letter-spacing:-.055em;margin:0 0 30px;font-weight:680;max-width:800px}.os4-hero h1 em{font-style:normal;background:linear-gradient(120deg,#2563eb,#7c3aed 58%,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}.os4-lead{font-size:clamp(20px,1.6vw,25px);line-height:1.55;color:#536a82;max-width:700px;margin:0}.os4-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}.os4-hero-notes{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:25px;color:#687b90;font-size:14px}.os4-hero-notes span{display:inline-flex;align-items:center;gap:7px} .os4-product-stage{position:relative;min-width:0}.os4-window{border:1px solid #d9e5f0;border-radius:30px;background:#fff;box-shadow:0 40px 100px rgba(21,54,91,.18),0 8px 26px rgba(21,54,91,.09);overflow:hidden;transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}.os4-window-top{height:58px;background:#f7f9fc;border-bottom:1px solid #e4ebf3;display:flex;align-items:center;padding:0 20px;gap:18px}.os4-dots{display:flex;gap:7px}.os4-dots i{width:10px;height:10px;border-radius:50%;background:#c9d4df}.os4-dots i:first-child{background:#f99}.os4-dots i:nth-child(2){background:#f8cc62}.os4-dots i:nth-child(3){background:#77d58b}.os4-window-title{font-size:12px;color:#718296;margin-right:auto}.os4-status-dot{font-size:11px;color:#15805d;background:#e7f8f0;border:1px solid #c5eedc;border-radius:999px;padding:7px 10px}.os4-app-mock{display:grid;grid-template-columns:74px 1fr;min-height:570px;background:#f5f8fc}.os4-mock-side{background:linear-gradient(180deg,#152d59,#243f83);display:flex;flex-direction:column;align-items:center;gap:15px;padding:19px 10px}.os4-mock-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#245ce9;font-weight:800;margin-bottom:10px}.os4-mock-side span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.68);font-size:21px}.os4-mock-side span.active{background:rgba(255,255,255,.16);color:#fff}.os4-mock-main{padding:28px;min-width:0}.os4-mock-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.os4-mock-head small,.os4-mock-head strong{display:block}.os4-mock-head small{font-size:10px;letter-spacing:.12em;color:#8998a9}.os4-mock-head strong{font-size:20px;margin-top:3px}.os4-mock-head button{border:0;border-radius:12px;background:#2563eb;color:white;padding:11px 15px;font-size:11px}.os4-mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:24px 0}.os4-mock-stats article{background:#fff;border:1px solid #e3ebf4;border-radius:18px;padding:16px;display:flex;align-items:center;gap:12px}.os4-mock-stats article>span{width:38px;height:38px;border-radius:11px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:19px}.os4-mock-stats small,.os4-mock-stats strong{display:block}.os4-mock-stats small{font-size:10px;color:#8a99a8}.os4-mock-stats strong{font-size:20px;margin-top:1px}.os4-mock-grid{display:grid;grid-template-columns:1.35fr .75fr;gap:14px}.os4-mock-agenda,.os4-mock-panel{background:#fff;border:1px solid #e2eaf3;border-radius:20px;padding:18px;min-width:0}.os4-mock-agenda header,.os4-mock-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.os4-mock-agenda header strong,.os4-mock-panel header strong{font-size:13px}.os4-mock-agenda header span,.os4-mock-panel header span{font-size:9px;color:#6e84a0}.os4-appt{display:grid;grid-template-columns:45px 7px 1fr auto;gap:9px;align-items:center;padding:11px 0;border-top:1px solid #edf2f7}.os4-appt time{font-size:10px;color:#6f8296}.os4-appt>i{width:7px;height:7px;border-radius:50%;background:#4f46e5}.os4-appt div strong,.os4-appt div small{display:block}.os4-appt div strong{font-size:10px}.os4-appt div small{font-size:8px;color:#8796a7;margin-top:2px}.os4-appt>b{font-size:7px;color:#17795a;background:#e5f8ef;padding:5px 6px;border-radius:999px;font-weight:600}.os4-bars{height:180px;display:flex;align-items:flex-end;gap:7px;padding-top:15px}.os4-bars i{flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#60a5fa,#4f46e5)}.os4-panel-foot{margin-top:16px}.os4-panel-foot strong,.os4-panel-foot small{display:block}.os4-panel-foot strong{font-size:11px}.os4-panel-foot small{font-size:9px;color:#8596a7;margin-top:3px}.os4-float-card{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dce7f2;border-radius:17px;padding:13px 16px;box-shadow:0 18px 46px rgba(22,53,90,.14)}.os4-float-card>span{width:38px;height:38px;border-radius:12px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:20px}.os4-float-card strong,.os4-float-card small{display:block}.os4-float-card strong{font-size:12px}.os4-float-card small{font-size:10px;color:#7d8fa2;margin-top:2px}.os4-float-one{left:-30px;bottom:52px}.os4-float-two{right:-24px;top:100px} .os4-strip{max-width:1450px;margin:0 auto 25px;padding:0 40px;display:grid;grid-template-columns:repeat(4,1fr)}.os4-strip>div{min-height:132px;padding:24px 26px;border:1px solid #e1e9f2;border-right:0;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-content:center}.os4-strip>div:first-child{border-radius:24px 0 0 24px}.os4-strip>div:last-child{border-right:1px solid #e1e9f2;border-radius:0 24px 24px 0}.os4-strip>div>span{grid-row:1/3;width:44px;height:44px;border-radius:13px;background:#eef4ff;color:#2b64e8;display:grid;place-items:center;font-size:22px}.os4-strip strong{font-size:16px}.os4-strip small{font-size:13px;color:#73859a;margin-top:3px} .os4-section{max-width:1500px;margin:auto;padding:130px 54px}.os4-heading{display:grid;grid-template-columns:1.05fr .75fr;gap:80px;align-items:end;margin-bottom:58px}.os4-heading.center{max-width:1050px;margin:0 auto 58px;text-align:center;display:block}.os4-heading h2,.os4-feature h2,.os4-included h2,.os4-faq h2{font-size:clamp(48px,5vw,76px);line-height:1.02;letter-spacing:-.045em;margin:13px 0 0;font-weight:650}.os4-heading>p,.os4-heading.center>p{font-size:20px;line-height:1.6;color:#65798f;margin:0;max-width:650px}.os4-heading.center>p{margin:22px auto 0}.os4-kicker{color:#2563eb}.os4-kicker.light{color:#9ee8ff}.os4-kicker.violet{color:#7c3aed} .os4-bento{display:grid;grid-template-columns:1.25fr .85fr .85fr;grid-auto-rows:minmax(290px,auto);gap:22px}.os4-card{position:relative;border-radius:32px;padding:34px;overflow:hidden;border:1px solid #e1e8f0}.os4-card-xl{grid-row:span 2}.os4-card-md{grid-row:span 2}.os4-card-blue{background:linear-gradient(145deg,#eef5ff,#f8fbff)}.os4-card-cyan{background:linear-gradient(145deg,#eafcff,#f7feff)}.os4-card-violet{background:linear-gradient(145deg,#f5efff,#fbf8ff)}.os4-card-orange{background:linear-gradient(145deg,#fff3ea,#fffaf6)}.os4-card-green{background:linear-gradient(145deg,#ebfbf5,#f7fdfb)}.os4-card-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:29px;background:#fff;box-shadow:0 10px 26px rgba(29,59,99,.08);color:#2563eb;margin-bottom:35px}.os4-card small{font-size:11px;letter-spacing:.13em;font-weight:700;color:#718399}.os4-card h3{font-size:clamp(29px,2.3vw,42px);line-height:1.12;letter-spacing:-.025em;margin:10px 0 14px;font-weight:640}.os4-card p{font-size:16px;line-height:1.65;color:#60758a;margin:0;max-width:620px}.os4-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.os4-pills span{background:#fff;border:1px solid #dae5f1;color:#4d6580;padding:8px 11px;border-radius:999px;font-size:11px}.os4-record-mini{margin-top:34px;background:#fff;border:1px solid #dfe8f2;border-radius:22px;padding:20px;box-shadow:0 16px 35px rgba(29,59,99,.08)}.os4-record-mini>div:first-child{display:grid;grid-template-columns:35px 1fr;column-gap:10px}.os4-record-mini>div:first-child i{grid-row:1/3;width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#7c3aed)}.os4-record-mini strong,.os4-record-mini small{display:block}.os4-record-mini strong{font-size:13px}.os4-record-mini small{font-size:9px;color:#8495a7}.os4-record-tabs{display:flex;gap:7px;margin:16px 0}.os4-record-tabs>*{padding:7px 9px;border-radius:8px;background:#f3f6fa;font-size:8px;color:#728397}.os4-record-tabs b{background:#e9f1ff;color:#2563eb}.os4-record-lines{display:grid;gap:7px}.os4-record-lines i{height:9px;border-radius:999px;background:#edf2f7}.os4-record-lines i:nth-child(2){width:80%}.os4-record-lines i:nth-child(3){width:60%}.os4-calendar-mini{margin-top:34px;background:#fff;border:1px solid #dce8ef;border-radius:22px;padding:18px}.os4-cal-head{display:flex;justify-content:space-between;align-items:center}.os4-cal-head b{font-size:13px}.os4-cal-head span{font-size:9px;color:#778ca0}.os4-cal-days,.os4-cal-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}.os4-cal-days span{text-align:center;font-size:8px;color:#8a99a8}.os4-cal-slots i{height:72px;border-radius:10px;background:#f3f7fa;border:1px solid #e9eff4}.os4-cal-slots i.hot{background:#dff6fb;border-color:#b9ebf4}.os4-cal-slots i.hot2{background:#ece9ff;border-color:#d9d2ff} .os4-feature{max-width:1500px;margin:30px auto;border-radius:46px;padding:78px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.os4-feature-dark{background:linear-gradient(135deg,#0b1f38,#173b67 58%,#16566d);color:#fff}.os4-feature-light{background:#f6f8fc;border:1px solid #e1e9f2;color:var(--os4-ink)}.os4-feature-copy h2{font-size:clamp(46px,4.6vw,72px)}.os4-feature-copy>p{font-size:19px;line-height:1.7;color:rgba(255,255,255,.72);margin:24px 0 0}.os4-feature-copy.darktext>p{color:#64778c}.os4-list{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:13px}.os4-list li{position:relative;padding:15px 18px 15px 50px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82)}.os4-list li:before{content:'✓';position:absolute;left:17px;top:15px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#13b981;color:#fff;font-size:12px}.os4-list b{color:#fff;font-weight:650}.os4-schedule-demo{background:#fff;border-radius:28px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.25);color:#122b45}.os4-demo-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #e8eef4}.os4-demo-toolbar small,.os4-demo-toolbar strong{display:block}.os4-demo-toolbar small{font-size:9px;color:#8293a5;letter-spacing:.12em}.os4-demo-toolbar strong{font-size:16px;margin-top:3px}.os4-demo-toolbar>span{font-size:10px;background:#f2f6fa;border:1px solid #e1e8ef;border-radius:10px;padding:8px 10px}.os4-demo-days{display:grid;grid-template-columns:54px repeat(5,1fr);gap:5px;margin-top:14px}.os4-demo-days b{text-align:center;font-size:8px;color:#8495a6}.os4-demo-body{display:grid;grid-template-columns:54px 1fr;gap:5px;margin-top:8px}.os4-demo-body .times{display:grid;grid-template-rows:repeat(5,52px)}.os4-demo-body .times span{font-size:8px;color:#8c9aaa;padding-top:4px}.os4-demo-cells{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,65px);gap:4px}.os4-demo-cells>i:not(.event){background:#f8fafc;border:1px solid #edf2f6;border-radius:8px}.os4-demo-cells .event{position:absolute;border-radius:9px;padding:8px;background:#e4efff;border:1px solid #c7dcff;color:#2456bd;width:18%;min-height:60px}.os4-demo-cells .event strong,.os4-demo-cells .event small{display:block}.os4-demo-cells .event strong{font-size:8px}.os4-demo-cells .event small{font-size:7px;margin-top:3px}.os4-demo-cells .e1{left:1%;top:18px}.os4-demo-cells .e2{left:41%;top:65px;background:#e4fbf7;border-color:#c6f1e8;color:#147b67}.os4-demo-cells .e3{left:21%;top:128px;background:#f1eaff;border-color:#e3d6ff;color:#6d40b7}.os4-demo-cells .e4{left:61%;top:188px;background:#fff1e7;border-color:#ffddc7;color:#a95822} .os4-schedule-image{background:transparent;padding:0;border-radius:34px;box-shadow:none;overflow:visible}.os4-schedule-image img{display:block;width:100%;height:auto;border-radius:34px;box-shadow:0 28px 70px rgba(0,0,0,.28)} .os4-clinical-demo{background:#fff;border:1px solid #dfe7ef;border-radius:28px;padding:24px;box-shadow:0 22px 60px rgba(24,54,91,.10)}.os4-clinical-top{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center}.os4-avatar{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700}.os4-clinical-top small,.os4-clinical-top strong,.os4-clinical-top span{display:block}.os4-clinical-top small{font-size:8px;letter-spacing:.12em;color:#8495a7}.os4-clinical-top strong{font-size:16px;margin-top:2px}.os4-clinical-top span{font-size:9px;color:#7a8c9f;margin-top:2px}.os4-clinical-top button{border:0;background:#f3f6f9;width:36px;height:36px;border-radius:10px}.os4-clinical-tabs{display:flex;gap:7px;margin:23px 0 18px;padding-bottom:17px;border-bottom:1px solid #e9eef3;overflow:hidden}.os4-clinical-tabs>*{font-size:8px;color:#718399;padding:7px 8px;border-radius:8px;white-space:nowrap}.os4-clinical-tabs b{background:#eaf1ff;color:#2563eb}.os4-clinical-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.os4-clinical-grid>article{background:#f8fafc;border:1px solid #edf1f5;border-radius:16px;padding:16px}.os4-clinical-grid>article>small{font-size:8px;letter-spacing:.1em;color:#8394a6}.os4-clinical-grid .doc{display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid #e7edf2}.os4-clinical-grid .doc:last-child{border-bottom:0}.os4-clinical-grid .doc>span{width:32px;height:32px;border-radius:10px;background:#eaf1ff;color:#2563eb;display:grid;place-items:center;font-size:9px}.os4-clinical-grid .doc strong,.os4-clinical-grid .doc small{display:block}.os4-clinical-grid .doc strong{font-size:10px}.os4-clinical-grid .doc small{font-size:8px;color:#8897a6;margin-top:2px}.os4-info-row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #e7edf2}.os4-info-row:last-child{border-bottom:0}.os4-info-row span,.os4-info-row b{font-size:9px}.os4-info-row span{color:#7d8fa2}.os4-info-row b{font-weight:600}.os4-feature-points{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:30px}.os4-feature-points>div{background:#fff;border:1px solid #e0e8f0;border-radius:17px;padding:17px;display:grid;grid-template-columns:38px 1fr;column-gap:11px}.os4-feature-points>div>span{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:19px}.os4-feature-points strong,.os4-feature-points small{display:block}.os4-feature-points strong{font-size:13px}.os4-feature-points small{font-size:10px;color:#7b8da1;margin-top:3px} .os4-ops{padding-top:120px}.os4-ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.os4-ops-grid article{border:1px solid #e0e8f1;border-radius:26px;padding:30px;min-height:250px;background:#fff;transition:.2s ease}.os4-ops-grid article:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(29,59,99,.09)}.os4-ops-grid article>span{width:54px;height:54px;border-radius:17px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:27px}.os4-ops-grid article:nth-child(2)>span{background:#f0eaff;color:#7c3aed}.os4-ops-grid article:nth-child(3)>span{background:#e8fbf4;color:#10a77c}.os4-ops-grid article:nth-child(4)>span{background:#fff1e8;color:#e7681d}.os4-ops-grid h3{font-size:25px;margin:28px 0 10px;font-weight:630}.os4-ops-grid p{font-size:15px;line-height:1.65;color:#687c90;margin:0} .os4-included{background:#0d223b;color:#fff;padding:120px max(54px,calc((100vw - 1400px)/2))}.os4-included-head{max-width:850px;margin-bottom:48px}.os4-included-head h2{font-size:clamp(48px,5vw,74px)}.os4-included-head p{font-size:19px;color:rgba(255,255,255,.72);max-width:680px}.os4-table-wrap{overflow:auto;border-radius:24px;border:1px solid rgba(255,255,255,.15);background:rgba(5,18,35,.24)}.os4-table{width:100%;min-width:850px;border-collapse:collapse;background:transparent}.os4 .os4-table th{padding:20px 24px;text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b9c9da;background:#223a55;border:0;border-bottom:1px solid rgba(255,255,255,.12)}.os4 .os4-table tbody td{padding:25px 24px;border:0;border-top:1px solid rgba(255,255,255,.09);font-size:15px;line-height:1.55;color:#d9e5f1;background:#132b46}.os4 .os4-table tbody tr:nth-child(even) td{background:#17314e}.os4 .os4-table tbody tr:hover td{background:#1b3d61;border-color:rgba(255,255,255,.13)}.os4 .os4-table td:first-child{display:flex;align-items:center;gap:12px;color:#fff}.os4 .os4-table td:first-child>span{width:35px;height:35px;border-radius:10px;background:rgba(255,255,255,.11);color:#8fc9ff;display:grid;place-items:center;font-size:18px}.os4 .os4-table td:first-child strong{font-weight:620;color:#fff}.os4 .os4-table td:nth-child(2){color:#d4e0ec}.os4 .os4-table td:last-child b{display:inline-block;background:#dff8ed;color:#147359;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:700} .os4-pricing{max-width:1400px;margin:auto;padding:130px 54px}.os4-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1000px;margin:0 auto}.os4-price-card{position:relative;border:1px solid #dfe8f1;border-radius:32px;padding:40px;background:#fff;box-shadow:0 18px 50px rgba(24,54,91,.07)}.os4-price-card.featured{border:2px solid #356bea;box-shadow:0 28px 70px rgba(37,99,235,.15)}.os4-popular{position:absolute;right:24px;top:24px;background:#e8f0ff;color:#245bdd;border-radius:999px;padding:8px 10px;font-size:9px;letter-spacing:.09em;font-weight:700}.os4-price-card>small{font-size:11px;letter-spacing:.13em;color:#6f8296;font-weight:700}.os4-price{display:flex;align-items:flex-start;gap:7px;margin:17px 0}.os4-price sup{font-size:26px;font-weight:650;margin-top:14px}.os4-price>strong{font-size:76px;line-height:1;font-weight:650;letter-spacing:-.05em}.os4-price>span{font-size:12px;color:#6b7e91;margin-top:20px;line-height:1.2}.os4-price-card>p{font-size:15px;line-height:1.6;color:#697d91}.os4-price-card ul{list-style:none;padding:0;margin:26px 0;display:grid;gap:12px}.os4-price-card li{position:relative;padding-left:28px;font-size:14px;color:#425a72}.os4-price-card li:before{content:'✓';position:absolute;left:0;color:#16a176;font-weight:800}.os4-addons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}.os4-addons article{border:1px solid #e2e9f1;border-radius:20px;padding:20px;background:#f9fbfd;display:grid;grid-template-columns:42px 1fr;gap:12px}.os4-addons article>span{width:42px;height:42px;border-radius:13px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:21px}.os4-addons small,.os4-addons strong,.os4-addons p{display:block;margin:0}.os4-addons small{font-size:8px;letter-spacing:.1em;color:#8495a7}.os4-addons strong{font-size:13px;margin-top:3px}.os4-addons p{font-size:10px;color:#73869a;margin-top:3px} .os4-faq{max-width:1400px;margin:auto;padding:90px 54px 140px;display:grid;grid-template-columns:.72fr 1.28fr;gap:90px}.os4-faq-title h2{font-size:clamp(45px,4.5vw,70px)}.os4-faq-title p{font-size:18px;color:#6a7d90}.os4-faq-list{display:grid;gap:12px}.os4-faq details{border:1px solid #dfe8f1;border-radius:18px;background:#fff;overflow:hidden}.os4-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;font-size:17px;font-weight:590}.os4-faq summary::-webkit-details-marker{display:none}.os4-faq summary span{font-size:24px;color:#6e8195;font-weight:300;transition:.2s}.os4-faq details[open] summary span{transform:rotate(45deg)}.os4-faq details p{margin:0;padding:0 24px 23px;font-size:15px;line-height:1.65;color:#697d90;max-width:800px} .os4-cta{max-width:1400px;margin:0 auto 60px;border-radius:42px;padding:70px 74px;background:linear-gradient(130deg,#2563eb,#4f46e5 54%,#7c3aed);color:#fff;display:flex;align-items:end;justify-content:space-between;gap:50px;box-shadow:0 30px 80px rgba(54,67,190,.22)}.os4-cta>div>span{font-size:11px;letter-spacing:.16em;font-weight:750;color:rgba(255,255,255,.72)}.os4-cta h2{font-size:clamp(43px,4.6vw,70px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 18px;font-weight:650}.os4-cta p{font-size:18px;color:rgba(255,255,255,.72);margin:0}.os4-cta-actions{display:flex;gap:12px;flex-shrink:0} .os4-footer{max-width:1400px;margin:auto;padding:30px 54px 45px}.os4-footer-logo{display:flex;align-items:center;gap:11px}.os4-footer-logo .os4-brand-word{font-size:27px}.os4-footer-brand p{font-size:14px;color:#708397;max-width:400px}.os4-footer-links{display:flex;flex-wrap:wrap;gap:5px;margin:25px 0 35px}.os4-footer-links button{border:0;background:none;color:#536a81;padding:8px 12px;border-radius:9px;font-size:13px}.os4-footer-links button:hover{background:#f3f6f9;color:#132b45}.os4-footer-bottom{border-top:1px solid #e3eaf2;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#8595a5;font-size:12px} body.dark-mode .os4{background:#0a1320;color:#e8f0fa}.dark-mode .os4-nav{background:rgba(10,19,32,.9);border-color:#203047}.dark-mode .os4-links button,.dark-mode .os4-nav .os4-btn-ghost{color:#b8c5d5}.dark-mode .os4-links button:hover,.dark-mode .os4-btn-ghost,.dark-mode .os4-btn-light{background:#142338;border-color:#2a3b50;color:#e6eef8}.dark-mode .os4-lead,.dark-mode .os4-heading>p,.dark-mode .os4-heading.center>p,.dark-mode .os4-feature-copy.darktext>p,.dark-mode .os4-faq-title p{color:#9dadc0}.dark-mode .os4-window,.dark-mode .os4-float-card,.dark-mode .os4-record-mini,.dark-mode .os4-calendar-mini,.dark-mode .os4-clinical-demo,.dark-mode .os4-feature-points>div,.dark-mode .os4-ops-grid article,.dark-mode .os4-price-card,.dark-mode .os4-faq details{background:#101d2d;border-color:#27384b}.dark-mode .os4-app-mock,.dark-mode .os4-window-top,.dark-mode .os4-mock-agenda,.dark-mode .os4-mock-panel,.dark-mode .os4-mock-stats article{background:#132238;border-color:#28394e}.dark-mode .os4-card{border-color:#26384b}.dark-mode .os4-card-blue,.dark-mode .os4-card-cyan,.dark-mode .os4-card-violet,.dark-mode .os4-card-orange,.dark-mode .os4-card-green,.dark-mode .os4-feature-light{background:#101d2d}.dark-mode .os4-card p,.dark-mode .os4-ops-grid p,.dark-mode .os4-price-card>p,.dark-mode .os4-faq details p{color:#9cafc3}.dark-mode .os4-strip>div{border-color:#26374a}.dark-mode .os4-addons article{background:#101d2d;border-color:#26374a}.dark-mode .os4-table-wrap{border-color:#2c4056}.dark-mode .os4-footer-bottom{border-color:#24364a}.dark-mode .os4-footer-links button{color:#9cb0c5}.dark-mode .os4-brand-word{color:#e8f0fa} @media (max-width:1250px){.os4-nav-inner{padding:0 26px}.os4-links{display:none}.os4-hero{grid-template-columns:1fr;padding:76px 40px 90px;gap:55px}.os4-hero-copy{max-width:950px}.os4-product-stage{max-width:980px;width:100%;margin:auto}.os4-strip{grid-template-columns:repeat(2,1fr);gap:12px}.os4-strip>div,.os4-strip>div:first-child,.os4-strip>div:last-child{border:1px solid #e1e9f2;border-radius:20px}.os4-bento{grid-template-columns:repeat(2,1fr)}.os4-card-xl,.os4-card-md{grid-row:auto}.os4-feature{margin-left:26px;margin-right:26px;padding:58px;grid-template-columns:1fr;gap:50px}.os4-feature-light .os4-clinical-demo{order:2}.os4-ops-grid{grid-template-columns:repeat(2,1fr)}.os4-addons{grid-template-columns:repeat(2,1fr)}.os4-faq{grid-template-columns:1fr;gap:40px}.os4-cta{margin-left:26px;margin-right:26px;align-items:flex-start;flex-direction:column}.os4-cta-actions{width:100%;flex-wrap:wrap}} @media (max-width:760px){.os4{font-size:16px}.os4-nav-inner{min-height:72px;padding:0 18px;gap:12px}.os4-brand-mark{width:36px;height:36px;border-radius:12px;font-size:17px}.os4-brand-word{font-size:20px}.os4-nav-actions .os4-btn-ghost{display:none}.os4-nav-actions .os4-btn-sm{padding:10px 13px;font-size:12px}.os4-hero{padding:62px 20px 72px;gap:44px}.os4-hero h1{font-size:clamp(50px,15vw,72px);line-height:.97}.os4-lead{font-size:19px}.os4-hero-actions{display:grid}.os4-btn-lg{width:100%;font-size:15px}.os4-hero-notes{display:grid;gap:9px}.os4-window{border-radius:20px;transform:none}.os4-window-top{height:45px;padding:0 12px}.os4-window-title{display:none}.os4-app-mock{grid-template-columns:48px 1fr;min-height:420px}.os4-mock-side{padding:12px 6px;gap:10px}.os4-mock-logo{width:30px;height:30px;font-size:12px}.os4-mock-side span{width:32px;height:32px;font-size:16px}.os4-mock-main{padding:15px}.os4-mock-head strong{font-size:14px}.os4-mock-head button{padding:8px 9px;font-size:8px}.os4-mock-stats{grid-template-columns:1fr;margin:14px 0;gap:7px}.os4-mock-stats article{padding:9px}.os4-mock-stats article>span{width:29px;height:29px;font-size:15px}.os4-mock-stats small{font-size:7px}.os4-mock-stats strong{font-size:14px}.os4-mock-grid{grid-template-columns:1fr}.os4-mock-panel{display:none}.os4-mock-agenda{padding:12px}.os4-float-card{display:none}.os4-strip{padding:0 18px;grid-template-columns:1fr}.os4-strip>div{min-height:105px}.os4-section{padding:88px 20px}.os4-heading{display:block;margin-bottom:38px}.os4-heading h2,.os4-feature h2,.os4-included h2,.os4-faq h2{font-size:clamp(41px,12vw,58px)}.os4-heading>p,.os4-heading.center>p{font-size:17px;margin-top:20px}.os4-bento{grid-template-columns:1fr;gap:14px}.os4-card{padding:26px;border-radius:25px}.os4-card-icon{margin-bottom:26px}.os4-card h3{font-size:31px}.os4-feature{margin:10px 12px;border-radius:28px;padding:38px 22px}.os4-feature-copy>p{font-size:17px}.os4-schedule-demo{padding:14px;border-radius:20px;overflow:hidden}.os4-schedule-image{padding:0;border-radius:24px}.os4-schedule-image img{border-radius:24px}.os4-demo-toolbar>span{display:none}.os4-demo-days{grid-template-columns:40px repeat(5,1fr)}.os4-demo-body{grid-template-columns:40px 1fr}.os4-clinical-demo{padding:15px;border-radius:20px}.os4-clinical-tabs{overflow-x:auto}.os4-clinical-grid{grid-template-columns:1fr}.os4-feature-points{grid-template-columns:1fr}.os4-ops-grid{grid-template-columns:1fr}.os4-ops-grid article{min-height:210px}.os4-included{padding:85px 20px}.os4-pricing{padding:90px 20px}.os4-price-grid,.os4-addons{grid-template-columns:1fr}.os4-price-card{padding:28px}.os4-price>strong{font-size:64px}.os4-faq{padding:70px 20px 100px}.os4-faq summary{font-size:15px;padding:18px}.os4-faq details p{padding:0 18px 19px}.os4-cta{margin:0 12px 35px;padding:42px 24px;border-radius:28px}.os4-cta h2{font-size:42px}.os4-cta-actions{display:grid}.os4-footer{padding:25px 20px 35px}.os4-footer-logo .os4-brand-word{font-size:23px}.os4-footer-bottom{flex-direction:column;gap:5px}} /* Landing v5 · official logo + photographic hero */ .os4-brand-image{display:flex;align-items:center;justify-content:flex-start;min-width:218px} .os4-brand-logo{display:block;width:218px;height:auto;max-height:66px;object-fit:contain;object-position:left center} .os4-product-photo{isolation:isolate;display:flex;align-items:center;justify-content:center} .os4-hero-image-shell{position:relative;z-index:2;width:100%;border-radius:34px;overflow:hidden;background:#eef5fb;border:1px solid #d7e5f2;box-shadow:0 42px 100px rgba(20,55,92,.18),0 12px 34px rgba(20,55,92,.09)} .os4-hero-product-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center} .os4-image-accent{position:absolute;z-index:1;border-radius:999px;filter:blur(1px);pointer-events:none} .os4-image-accent-a{width:240px;height:240px;right:-50px;top:-50px;background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(6,182,212,.08))} .os4-image-accent-b{width:190px;height:190px;left:-45px;bottom:-45px;background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.08))} .os4-footer-logo{display:flex;align-items:center} .os4-footer-brand-logo{display:block;width:230px;height:auto;max-height:80px;object-fit:contain;object-position:left center} .dark-mode .os4-brand-logo,.dark-mode .os4-footer-brand-logo{background:rgba(255,255,255,.96);border-radius:14px;padding:5px 8px} @media (max-width:1250px){ .os4-product-photo{max-width:1000px;width:100%;margin:auto} .os4-hero-image-shell{border-radius:30px} } @media (max-width:760px){ .os4-brand-image{min-width:0;max-width:176px} .os4-brand-logo{width:176px;max-height:52px} .os4-hero-image-shell{border-radius:22px} .os4-image-accent-a{width:150px;height:150px;right:-30px;top:-25px} .os4-image-accent-b{width:120px;height:120px;left:-24px;bottom:-24px} .os4-footer-brand-logo{width:205px;max-height:70px} } @media (max-width:430px){ .os4-brand-image{max-width:146px} .os4-brand-logo{width:146px;max-height:46px} .os4-nav-actions .os4-btn-sm{padding:9px 11px;font-size:11px} } /* Landing legal + fixed navigation */ .os4{padding-top:88px} .os4 section[id]{scroll-margin-top:112px} .os4-footer-links a{border:0;background:none;color:#536a81;padding:8px 12px;border-radius:9px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center} .os4-footer-links a:hover{background:#f3f6f9;color:#132b45} .os4-footer-bottom-single{justify-content:flex-start} .auth-legal-consent{display:grid;gap:12px;margin:16px 0 6px;padding:16px;border:1px solid #d9e6ef;border-radius:16px;background:#f7fbff} .auth-legal-item{background:#fff;border:1px solid #e3edf4;border-radius:14px;padding:12px 14px} .auth-legal-check{display:grid;grid-template-columns:18px 1fr;align-items:flex-start;column-gap:12px;font-size:13px;line-height:1.55;color:#294257} .auth-legal-check input[type=checkbox]{margin:2px 0 0 0;width:16px;height:16px;accent-color:var(--primary);flex:0 0 auto} .auth-legal-check span{display:block;min-width:0} .auth-legal-consent a{color:var(--primary);font-weight:600;text-decoration:none} .auth-legal-consent a:hover{text-decoration:underline} .auth-legal-note{display:block;color:#5f7387;font-size:11px;line-height:1.5;padding:0 2px} body.dark-mode .auth-legal-consent{background:#102b43;border-color:#28455c} body.dark-mode .auth-legal-item{background:#15344f;border-color:#2b4b64} body.dark-mode .auth-legal-check{color:#e4edf5} body.dark-mode .auth-legal-note{color:#c4d4e2} .dark-mode .os4-footer-links a{color:#9cb0c5} .dark-mode .os4-footer-links a:hover{background:#142338;color:#e6eef8} @media (max-width:760px){.os4{padding-top:72px}.os4 section[id]{scroll-margin-top:92px}} @media (max-width: 620px) { .auth-legal-consent{padding:14px}.auth-legal-item{padding:11px 12px}.auth-legal-check{font-size:12.5px;column-gap:10px} } /* ====================================================================== OdontoSuite UI V16 · Light, calm and modern application system ====================================================================== */ :root{ --v16-bg:#f7f8fa; --v16-surface:#ffffff; --v16-border:#e8edf2; --v16-border-strong:#dce4eb; --v16-text:#1e3142; --v16-muted:#71808f; --v16-shadow:0 1px 2px rgba(25,46,65,.035),0 7px 20px rgba(25,46,65,.045); --v16-shadow-float:0 12px 32px rgba(20,43,61,.10); } /* Typography: keep landing independent and soften only authenticated UI */ .app-shell{ font-family:"Segoe UI Variable Text","Segoe UI Variable",Aptos,"Helvetica Neue",Arial,system-ui,-apple-system,sans-serif; color:var(--text); font-weight:400; letter-spacing:0; } .app-shell strong,.app-shell b{font-weight:560} .app-shell h1,.app-shell h2,.app-shell h3,.app-shell h4,.app-shell h5,.app-shell h6{font-weight:570;letter-spacing:-.025em} .app-shell .page-title h1{font-size:30px;line-height:1.15;font-weight:560;letter-spacing:-.035em} .app-shell .page-title p{max-width:760px;margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:400} .app-shell .content{background:var(--v16-bg);padding:28px 30px 52px} .app-shell .main{background:var(--v16-bg)} /* Sidebar: quieter, cleaner, workspace color remains the identity */ .app-shell .sidebar{ background:linear-gradient(180deg,color-mix(in srgb,var(--sidebar-bg) 91%,#071521),var(--sidebar-bg)); padding:14px 12px 16px; border-right:0; } .app-shell .sidebar-brand-wrap{ min-height:68px;margin:0 0 12px;padding:7px 11px;border:0;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:none; } .app-shell .sidebar-logo{height:48px;max-width:196px;object-fit:contain}.app-shell .sidebar-logo.sidebar-logo-custom{max-height:54px;max-width:196px;width:auto} .app-shell .sidebar-clinic{margin:0 2px 13px;padding:11px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.065)} .app-shell .sidebar-clinic-icon{opacity:.78} .app-shell .sidebar-clinic span{font-size:9px;font-weight:500;letter-spacing:.09em} .app-shell .sidebar-clinic strong{font-size:12px;font-weight:520} .app-shell .nav-section{padding:13px 10px 5px;font-size:9px;font-weight:520;letter-spacing:.13em;color:rgba(255,255,255,.46)} .app-shell .nav-link{min-height:43px;margin:2px 0;padding:10px 11px;border-radius:13px;font-size:13px;font-weight:440;color:rgba(255,255,255,.76);transition:background .16s ease,color .16s ease} .app-shell .nav-link .ui-icon{stroke-width:1.55} .app-shell .nav-link:hover{background:rgba(255,255,255,.075);color:#fff} .app-shell .nav-link.active{background:rgba(255,255,255,.96);color:var(--primary);box-shadow:none} .app-shell .nav-link.active .nav-icon{color:var(--primary)} .app-shell .sidebar-footer{margin-top:16px;padding:14px 10px 3px;gap:4px;border-top:1px solid rgba(255,255,255,.10)} .app-shell .sidebar-footer strong{font-size:11.5px;font-weight:520;color:rgba(255,255,255,.84)} .app-shell .sidebar-footer span{font-size:10px;font-weight:400;color:rgba(255,255,255,.52)} /* Top bar */ .app-shell .topbar{ min-height:72px;padding:10px 28px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--v16-border);box-shadow:none;backdrop-filter:blur(14px); } .app-shell .sidebar-toggle{width:38px;height:38px;border:1px solid var(--v16-border);border-radius:12px;background:#fff;box-shadow:none;color:#667785} .app-shell .topbar-route-icon{width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--primary) 7%,#fff);color:var(--primary)} .app-shell .topbar-context strong{font-size:13px;font-weight:520} .app-shell .breadcrumb{font-size:10px;font-weight:400;color:#8a97a3} .app-shell .workspace-badge{font-size:10.5px;font-weight:520;padding:6px 9px;border-radius:999px;box-shadow:none} .app-shell .avatar{font-weight:540;box-shadow:none} .app-shell .user-name strong{font-weight:530} .app-shell .user-name small{font-weight:400} /* Page framing */ .app-shell .page-header{margin-bottom:24px;align-items:center} .app-shell .page-header::before{width:3px;border-radius:999px;opacity:.78} .app-shell .header-actions{gap:8px} /* Surfaces: flatter and calmer */ .app-shell .card, .app-shell .section-box, .app-shell .patient-directory, .app-shell .calendar-shell, .app-shell .report-panel, .app-shell .report-filter-card, .app-shell .report-metric{ border:1px solid var(--v16-border); border-radius:18px; background:var(--surface); box-shadow:var(--v16-shadow); } .app-shell .card{transition:border-color .16s ease,box-shadow .16s ease} .app-shell .card:hover{transform:none;border-color:var(--v16-border-strong);box-shadow:var(--v16-shadow)} .app-shell .card-title{ min-height:0;padding:17px 19px 13px;border-bottom:1px solid var(--v16-border);background:transparent;font-size:14px;font-weight:540;letter-spacing:-.01em; } .app-shell .card-body,.app-shell .card-pad{padding:19px} .app-shell .stat{min-height:112px;border-radius:17px;background:#fff;box-shadow:var(--v16-shadow)} .app-shell .stat::after{opacity:.45} .app-shell .stat-label{font-size:9.5px;font-weight:520} .app-shell .stat-value{font-size:29px;font-weight:550} .app-shell .stat-sub{font-size:11px;font-weight:400} .app-shell .metric-card:hover{transform:none} /* Buttons: almost flat, no heavy gradient or bold type */ .app-shell .btn{ min-height:38px;padding:8px 13px;border:1px solid var(--v16-border-strong);border-radius:11px;background:#fff;color:#3d5264;font-size:12.5px;font-weight:510;box-shadow:none;transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease; } .app-shell .btn:hover:not(:disabled){transform:none;background:#f7f9fb;border-color:#ccd7e0;box-shadow:none} .app-shell .btn:active:not(:disabled){transform:none;opacity:.82} .app-shell .btn-primary,.app-shell .btn-accent,.app-shell .btn-cash{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:none} .app-shell .btn-primary:hover:not(:disabled),.app-shell .btn-accent:hover:not(:disabled),.app-shell .btn-cash:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 90%,#000);border-color:transparent;box-shadow:none} .app-shell .btn-success{background:#edf9f3;border-color:#d6efe1;color:#23734d} .app-shell .btn-danger{background:#fff3f4;border-color:#f4dadd;color:#a23d49} .app-shell .btn-ghost{background:transparent;border-color:transparent} .app-shell .icon-btn{min-width:34px;min-height:34px;border-radius:10px;background:#fff;border-color:var(--v16-border);box-shadow:none;font-weight:500} /* Forms: larger whitespace, lighter labels */ .app-shell .field{gap:7px;margin-bottom:15px} .app-shell .field label{font-size:11.5px;font-weight:500;letter-spacing:0;color:#667887} .app-shell .field small{font-size:10.5px;line-height:1.5;color:#8795a1} .app-shell .input,.app-shell .select,.app-shell .textarea{ min-height:43px;padding:10px 12px;border:1px solid #dfe6ec;border-radius:11px;background:#fff;color:var(--text);font-size:13px;font-weight:400;box-shadow:none; } .app-shell .textarea{line-height:1.55} .app-shell .input:hover,.app-shell .select:hover,.app-shell .textarea:hover{background:#fff;border-color:#cfd9e2} .app-shell .input:focus,.app-shell .select:focus,.app-shell .textarea:focus{border-color:color-mix(in srgb,var(--primary) 62%,#9fb1c0);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent)} .app-shell .color-input{border-radius:11px;box-shadow:none} .app-shell .switch-row{padding:13px 0;border-color:#edf1f4} .app-shell .switch-copy strong{font-weight:520} .app-shell .switch-copy span{font-weight:400} /* Tabs */ .app-shell .tabs,.app-shell .record-tabs,.app-shell .esthetic-subnav,.app-shell .reports-subnav{ padding:4px;border:1px solid var(--v16-border);border-radius:14px;background:#fff;box-shadow:none; } .app-shell .tab,.app-shell .record-tab,.app-shell .esthetic-subtab,.app-shell .reports-subnav button{min-height:36px;border-radius:10px;font-size:12px;font-weight:500} .app-shell .tab.active,.app-shell .record-tab.active,.app-shell .esthetic-subtab.active,.app-shell .reports-subnav button.active{background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);box-shadow:none} /* Tables */ .app-shell .table-wrap{border:1px solid var(--v16-border);border-radius:15px;background:#fff;overflow:auto} .app-shell table{border-collapse:collapse;border-spacing:0;width:100%} .app-shell th{position:sticky;top:0;z-index:1;padding:11px 13px;border-bottom:1px solid var(--v16-border);background:#fafbfc;color:#768692;font-size:9.5px;font-weight:540;letter-spacing:.075em} .app-shell td{padding:13px;border:0;border-bottom:1px solid #edf1f4;background:#fff;font-size:12.5px;font-weight:400} .app-shell tbody tr:last-child td{border-bottom:0} .app-shell tbody tr td:first-child,.app-shell tbody tr td:last-child{border-left:0;border-right:0;border-radius:0} .app-shell tbody tr:hover td{background:#fafcfd;border-color:#edf1f4} .app-shell td strong{font-weight:540} .app-shell .badge{font-size:9.5px;font-weight:520;box-shadow:none} /* Clinical accordions: no large solid color slabs */ .app-shell .clinical-section{border-radius:15px;box-shadow:none} .app-shell .clinical-section summary, .app-shell .clinical-section[open] summary{ padding:15px 17px;background:color-mix(in srgb,var(--primary) 6%,#fff);color:var(--text);border-bottom:1px solid var(--v16-border);filter:none; } .app-shell .clinical-section summary:hover{background:color-mix(in srgb,var(--primary) 9%,#fff);filter:none} .app-shell .clinical-section summary strong{color:var(--text);font-weight:540} .app-shell .clinical-section summary div span,.app-shell .clinical-section summary>span{color:var(--muted)} .app-shell .clinical-section[open]{box-shadow:none} /* Agenda and operational modules */ .app-shell .calendar-shell{padding:18px;border-radius:20px} .app-shell .calendar-event{box-shadow:none;border-left-width:3px} .app-shell .calendar-event:hover{transform:none;box-shadow:0 4px 12px rgba(20,48,72,.07)} .app-shell .cash-item-row,.app-shell .cash-payment-row{background:#fafbfc;border-radius:14px} .app-shell .cash-total-preview{box-shadow:var(--v16-shadow);border-radius:17px} .app-shell .reception-card:hover,.app-shell .reception-waiting-item:hover{transform:none;box-shadow:var(--v16-shadow)} /* Modals and notices */ .app-shell~.modal-backdrop,.modal-backdrop{background:rgba(10,24,36,.52);backdrop-filter:blur(8px)} .modal{border-radius:22px;box-shadow:var(--v16-shadow-float)} .modal-header{padding:18px 20px 14px;background:#fff} .modal-title-wrap h3{font-weight:560} .modal-body{padding:20px} .modal-footer{padding:13px 20px 18px} .notice{border-radius:13px;box-shadow:none;font-weight:400} .notice strong{font-weight:550} .toast{border-radius:14px;box-shadow:var(--v16-shadow-float);font-weight:500} /* Configuration V16 */ .settings-layout-v16{grid-template-columns:286px minmax(0,1fr);gap:26px;align-items:start} .settings-nav-v16{top:92px;padding:12px;border:1px solid var(--v16-border);border-radius:20px;background:#fff;box-shadow:var(--v16-shadow);overflow:visible} .settings-nav-brand{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;padding:7px 7px 15px;margin-bottom:3px;border-bottom:1px solid #edf1f4} .settings-nav-brand>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary)} .settings-nav-brand .ui-icon{width:19px;height:19px} .settings-nav-brand strong,.settings-nav-brand small{display:block} .settings-nav-brand strong{font-size:12.5px;font-weight:550;color:var(--text)} .settings-nav-brand small{margin-top:2px;font-size:10px;font-weight:400;color:var(--muted)} .settings-nav-group{padding-top:9px} .settings-nav-title{padding:7px 9px 5px;font-size:8.5px;font-weight:540;letter-spacing:.13em;color:#9aa6b0} .settings-nav-item{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 14px;gap:9px;align-items:center;width:100%;min-height:52px;margin:2px 0;padding:8px 9px;border-radius:13px;color:#536777} .settings-nav-item:hover{background:#f8fafb} .settings-nav-item.active{background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary);box-shadow:none} .settings-nav-item.active::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:999px;background:var(--primary)} .settings-nav-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#f5f7f9;color:#7b8c99} .settings-nav-icon .ui-icon{width:16px;height:16px} .settings-nav-item.active .settings-nav-icon{background:#fff;color:var(--primary)} .settings-nav-item strong{font-size:12px;font-weight:530} .settings-nav-item small{margin-top:2px;font-size:9.5px;font-weight:400;line-height:1.35;color:#8a98a4} .settings-nav-arrow{font-size:18px;font-weight:300;color:#aab4bd} .settings-content-v16{min-width:0} .settings-panel-head{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:18px;padding:4px 2px 14px;border-bottom:1px solid var(--v16-border)} .settings-panel-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary)} .settings-panel-icon .ui-icon{width:21px;height:21px} .settings-panel-kicker{display:block;margin-bottom:3px;font-size:8.5px;font-weight:550;letter-spacing:.13em;color:#9aa6b0} .settings-panel-head h2{margin:0;font-size:22px;font-weight:560;color:var(--text)} .settings-panel-head p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--muted)} .settings-content-v16 .card{border-radius:17px;box-shadow:none} .settings-content-v16 .card:hover{box-shadow:none} .settings-content-v16 .card-title{font-size:13.5px;font-weight:540} .settings-content-v16 .sticky-save{padding:10px 12px;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(24,48,67,.08)} .settings-overview{display:grid;gap:16px} .settings-overview-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;padding:28px;border:1px solid var(--v16-border);border-radius:22px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--primary) 3%,#fff));box-shadow:var(--v16-shadow)} .settings-overview-hero>div:first-child>span{font-size:9px;font-weight:550;letter-spacing:.14em;color:var(--primary)} .settings-overview-hero h3{margin:8px 0 9px;font-size:28px;font-weight:550;letter-spacing:-.035em} .settings-overview-hero p{max-width:630px;margin:0;font-size:13px;line-height:1.65;color:var(--muted)} .settings-overview-health{display:grid;grid-template-columns:repeat(3,1fr);align-self:stretch;border:1px solid var(--v16-border);border-radius:16px;background:#fff;overflow:hidden} .settings-overview-health>div{display:flex;flex-direction:column;justify-content:center;padding:16px;border-right:1px solid var(--v16-border)} .settings-overview-health>div:last-child{border-right:0} .settings-overview-health small{font-size:9.5px;color:var(--muted)} .settings-overview-health strong{margin-top:6px;font-size:12px;font-weight:540;color:var(--text)} .settings-overview-health strong.success{color:#23805a}.settings-overview-health strong.warning{color:#a46c18} .settings-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .settings-overview-card{appearance:none;display:grid;grid-template-columns:42px minmax(0,1fr) auto 16px;gap:12px;align-items:center;min-height:92px;padding:16px;border:1px solid var(--v16-border);border-radius:17px;background:#fff;color:var(--text);text-align:left;cursor:pointer;box-shadow:none;transition:border-color .15s ease,background .15s ease} .settings-overview-card:hover{background:#fafcfd;border-color:#d5e0e8} .settings-overview-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 7%,#fff);color:var(--primary)} .settings-overview-icon .ui-icon{width:19px;height:19px} .settings-overview-card strong{display:block;font-size:13px;font-weight:540} .settings-overview-card p{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--muted)} .settings-overview-status{padding:5px 8px;border-radius:999px;background:#f3f6f8;color:#74838f;font-size:9px;font-weight:520;white-space:nowrap} .settings-overview-go{font-size:20px;font-weight:300;color:#a2aeb7} .settings-overview-tip{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding:16px 18px;border:1px solid color-mix(in srgb,var(--primary) 14%,var(--v16-border));border-radius:16px;background:color-mix(in srgb,var(--primary) 4%,#fff)} .settings-overview-tip>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--primary)} .settings-overview-tip .ui-icon{width:18px;height:18px} .settings-overview-tip strong{font-size:12px;font-weight:540} .settings-overview-tip p{margin:4px 0 0;font-size:11px;line-height:1.5;color:var(--muted)} .settings-overview-tip b{font-weight:540;color:var(--text)} /* Dark mode V16 */ :root[data-theme="dark"] .app-shell .content,:root[data-theme="dark"] .app-shell .main{background:var(--bg)} :root[data-theme="dark"] .app-shell .topbar{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.07)} :root[data-theme="dark"] .app-shell .card,:root[data-theme="dark"] .app-shell .section-box,:root[data-theme="dark"] .app-shell .patient-directory,:root[data-theme="dark"] .app-shell .calendar-shell,:root[data-theme="dark"] .settings-nav-v16,:root[data-theme="dark"] .settings-overview-hero,:root[data-theme="dark"] .settings-overview-card,:root[data-theme="dark"] .settings-overview-health,:root[data-theme="dark"] .app-shell .table-wrap{background:var(--surface);border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .app-shell .btn,:root[data-theme="dark"] .app-shell .icon-btn,:root[data-theme="dark"] .app-shell .input,:root[data-theme="dark"] .app-shell .select,:root[data-theme="dark"] .app-shell .textarea{background:color-mix(in srgb,var(--surface) 96%,#fff 4%);border-color:rgba(255,255,255,.10);color:var(--text)} :root[data-theme="dark"] .app-shell th{background:#1c2b36;border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .app-shell td{background:var(--surface);border-color:rgba(255,255,255,.06)} :root[data-theme="dark"] .app-shell tbody tr:hover td{background:#20313d} :root[data-theme="dark"] .app-shell .clinical-section summary,:root[data-theme="dark"] .app-shell .clinical-section[open] summary{background:color-mix(in srgb,var(--primary) 18%,var(--surface));border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .settings-nav-item:hover,:root[data-theme="dark"] .settings-overview-card:hover{background:rgba(255,255,255,.035)} :root[data-theme="dark"] .settings-nav-item.active,:root[data-theme="dark"] .settings-overview-tip{background:color-mix(in srgb,var(--primary) 18%,var(--surface))} :root[data-theme="dark"] .settings-nav-icon,:root[data-theme="dark"] .settings-nav-brand>span,:root[data-theme="dark"] .settings-panel-icon,:root[data-theme="dark"] .settings-overview-icon,:root[data-theme="dark"] .settings-overview-tip>span{background:#20313d} :root[data-theme="dark"] .settings-overview-health>div{border-color:rgba(255,255,255,.07)} @media(max-width:1100px){ .settings-layout-v16{grid-template-columns:1fr} .settings-nav-v16{position:static;overflow-x:auto;display:flex;align-items:stretch;gap:8px;padding:8px} .settings-nav-brand{display:none} .settings-nav-group{display:flex;gap:6px;padding:0} .settings-nav-title{display:none} .settings-nav-item{min-width:170px;grid-template-columns:30px minmax(0,1fr);padding:8px} .settings-nav-arrow{display:none} .settings-overview-hero{grid-template-columns:1fr} } @media(max-width:760px){ .app-shell .content{padding:18px 12px 96px} .app-shell .topbar{padding:8px 11px} .app-shell .page-title h1{font-size:26px} .app-shell .page-title p{font-size:12.5px} .app-shell .card,.app-shell .section-box,.app-shell .patient-directory,.app-shell .calendar-shell{border-radius:15px} .app-shell .card-title{padding:14px 15px 11px} .app-shell .card-body,.app-shell .card-pad{padding:15px} .settings-panel-head{grid-template-columns:42px minmax(0,1fr);gap:11px;margin-bottom:14px} .settings-panel-icon{width:42px;height:42px;border-radius:13px} .settings-panel-head h2{font-size:20px} .settings-overview-hero{padding:20px;border-radius:18px} .settings-overview-hero h3{font-size:24px} .settings-overview-health{grid-template-columns:1fr} .settings-overview-health>div{border-right:0;border-bottom:1px solid var(--v16-border);padding:12px 14px} .settings-overview-health>div:last-child{border-bottom:0} .settings-overview-grid{grid-template-columns:1fr} .settings-overview-card{grid-template-columns:40px minmax(0,1fr) 16px;min-height:82px;padding:13px} .settings-overview-status{display:none} } /* V16 configuration quick sections + hard typography normalization */ .app-shell button,.app-shell label,.app-shell th{font-weight:500!important} .app-shell strong,.app-shell b{font-weight:550!important} .app-shell input,.app-shell select,.app-shell textarea{font-weight:400!important} .settings-subnav{position:sticky;top:82px;z-index:3;display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding:6px;border:1px solid var(--v16-border);border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(20,43,61,.045)} .settings-subnav button{appearance:none;flex:0 0 auto;min-height:34px;padding:7px 11px;border:0;border-radius:9px;background:transparent;color:#6b7c89;font-size:11.5px;font-weight:500;cursor:pointer} .settings-subnav button:hover{background:color-mix(in srgb,var(--primary) 7%,#fff);color:var(--primary)} #settings-contact,#settings-responsible,#settings-hours,#settings-appearance,#settings-documents,#settings-assets{scroll-margin-top:142px} @media(max-width:1100px){.settings-subnav{top:72px}} @media(max-width:760px){.settings-subnav{top:66px;margin-left:-2px;margin-right:-2px}} :root[data-theme="dark"] .settings-subnav{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .settings-subnav button:hover{background:color-mix(in srgb,var(--primary) 18%,var(--surface))} /* ========================================================================== */ /* Agenda V17 · calendario temporal tipo Google + colores por tratamiento */ /* ========================================================================== */ .app-shell .calendar-shell{padding:0;overflow:hidden;border-radius:22px;background:var(--surface);border:1px solid var(--ui-border);box-shadow:0 10px 32px rgba(16,42,67,.06)} .app-shell .calendar-toolbar{min-height:72px;margin:0;padding:13px 18px;border-bottom:1px solid var(--ui-border);background:var(--surface);gap:16px} .app-shell .calendar-toolbar .actions{display:flex;align-items:center;gap:7px} .app-shell .calendar-toolbar .actions .btn{min-height:38px;padding:8px 13px;border-radius:999px;background:transparent;border:1px solid var(--ui-border);box-shadow:none} .app-shell .calendar-toolbar .actions .btn:first-child{padding-inline:20px} .app-shell .calendar-toolbar h3{margin-right:auto;font-size:23px;font-weight:430;letter-spacing:-.035em;color:var(--text);text-transform:capitalize} .app-shell .calendar-toolbar .segmented{border:1px solid var(--ui-border);border-radius:999px;background:var(--surface);padding:3px;overflow:visible;gap:2px} .app-shell .calendar-toolbar .segmented button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:480;color:var(--muted-text)} .app-shell .calendar-toolbar .segmented button.active{background:var(--ui-tint);color:var(--primary);box-shadow:none} .app-shell .calendar-filter-row{margin:0;padding:10px 18px;border-bottom:1px solid var(--ui-border);background:color-mix(in srgb,var(--surface) 96%,var(--bg));gap:10px} .app-shell .agenda-doctor-filter{min-width:250px;padding:0;border:0;border-radius:0;background:transparent} .app-shell .agenda-doctor-filter label{font-size:10px;font-weight:540;letter-spacing:.055em} .app-shell .agenda-doctor-filter .select{min-width:190px;min-height:36px;padding-block:7px;border-radius:10px;background:var(--surface)} .app-shell .calendar-foot-note{margin:0;padding:10px 18px;border-top:1px solid var(--ui-border);font-size:11px;background:color-mix(in srgb,var(--surface) 96%,var(--bg))} .calendar-time-scroll{width:100%;overflow:auto;background:var(--surface);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 25%,transparent) transparent} .calendar-week-grid-v17{display:grid;grid-template-columns:68px minmax(920px,1fr);grid-template-rows:64px auto;min-width:988px;background:var(--surface)} .calendar-week-corner{grid-column:1;grid-row:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 9px 9px 0;border-right:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);font-size:9px;color:var(--muted-text)} .calendar-week-heads{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--ui-border)} .calendar-week-day-head{border:0;border-right:1px solid transparent;background:transparent;display:grid;place-items:center;align-content:center;gap:3px;padding:7px;color:var(--text);cursor:pointer} .calendar-week-day-head small{text-transform:uppercase;font-size:9.5px;font-weight:500;letter-spacing:.055em;color:var(--muted-text)} .calendar-week-day-head strong{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:22px;font-weight:420;line-height:1} .calendar-week-day-head:hover strong{background:var(--ui-tint);color:var(--primary)} .calendar-week-day-head.today small{color:#145edb;font-weight:600} .calendar-week-day-head.today strong{background:#1464d8;color:#fff} .calendar-time-axis{grid-column:1;grid-row:2;position:relative;border-right:1px solid var(--ui-border);background:var(--surface)} .calendar-time-axis span{position:absolute;right:9px;transform:translateY(-50%);font-size:10px;color:var(--muted-text);white-space:nowrap} .calendar-timeline-canvas{grid-column:2;grid-row:2;position:relative;background:var(--surface);overflow:visible} .calendar-week-columns{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);pointer-events:none} .calendar-week-columns i{border-right:1px solid var(--ui-border)} .calendar-week-columns i:last-child{border-right:0} .calendar-hour-lines{position:absolute;inset:0;pointer-events:none} .calendar-hour-lines i{position:absolute;left:0;right:0;height:1px;background:var(--ui-border)} .calendar-now-line{position:absolute;height:2px;background:#e53c31;z-index:9;pointer-events:none} .calendar-now-line span{position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e53c31} .calendar-timed-event{position:absolute;z-index:5;min-height:28px;overflow:hidden;border:0;border-radius:7px;padding:6px 8px;background:var(--event-color)!important;color:var(--event-text)!important;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;cursor:pointer;box-shadow:0 2px 5px color-mix(in srgb,var(--event-color) 24%,transparent);transition:filter .12s ease,box-shadow .12s ease,transform .12s ease} .calendar-timed-event:hover{filter:saturate(1.06) brightness(.98);box-shadow:0 6px 14px color-mix(in srgb,var(--event-color) 28%,transparent);z-index:14} .calendar-timed-event strong{width:100%;font-size:11px;font-weight:620;line-height:1.18;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit} .calendar-timed-event span{font-size:10px;font-weight:500;line-height:1.2;color:inherit;opacity:.96;white-space:nowrap} .calendar-timed-event small{width:100%;font-size:9px;line-height:1.2;color:inherit;opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .calendar-timed-event.cancelled,.calendar-timed-event.no_show{opacity:.48;filter:saturate(.55)} .calendar-timed-event.cancelled strong{text-decoration:line-through} .calendar-timed-event.completed{opacity:.72} .calendar-timed-event .calendar-event-tooltip{left:10px;top:calc(100% + 7px)} .calendar-day-grid-v17{display:grid;grid-template-columns:68px minmax(700px,1fr);grid-template-rows:56px auto;min-width:768px;background:var(--surface)} .calendar-day-grid-head{grid-column:1/3;grid-row:1;display:grid;grid-template-columns:68px 1fr;align-items:center;border-bottom:1px solid var(--ui-border);font-weight:430;color:var(--text)} .calendar-day-grid-head span{padding-right:9px;text-align:right;font-size:9px;color:var(--muted-text)} .calendar-day-grid-head strong{padding-left:18px;font-size:15px;font-weight:520;text-transform:capitalize} /* El color configurado en el tratamiento domina sobre estados visuales. */ .app-shell .calendar-event{background:var(--event-color,#2F6BFF)!important;color:var(--event-text,#fff)!important;border:0!important;border-radius:7px;box-shadow:none;padding:6px 8px} .app-shell .calendar-event strong,.app-shell .calendar-event span,.app-shell .calendar-event small{color:inherit} .app-shell .calendar-event.cancelled,.app-shell .calendar-event.no_show{opacity:.48;filter:saturate(.55)} .app-shell .calendar-event.cancelled strong{text-decoration:line-through} .app-shell .calendar-event.completed{opacity:.72} .app-shell .calendar-month-view{border:0;border-radius:0;box-shadow:none;background:var(--surface)} .app-shell .calendar-month-label{padding:11px 7px;background:var(--surface);color:var(--muted-text);font-size:10px;font-weight:520;letter-spacing:.04em;border-bottom:1px solid var(--ui-border)} .app-shell .calendar-month-cell{min-height:132px;padding:7px;border-color:var(--ui-border);background:var(--surface)} .app-shell .calendar-month-cell:hover{background:color-mix(in srgb,var(--primary) 2%,var(--surface))} .app-shell .calendar-month-cell.muted{opacity:.5;background:color-mix(in srgb,var(--surface) 94%,var(--bg))} .app-shell .calendar-month-date{font-size:12px;font-weight:480;color:var(--text)} .app-shell .calendar-month-cell.today .calendar-month-date{background:#1464d8;color:#fff;min-width:28px;height:28px} .treatment-color-dot{display:inline-block;width:17px;height:17px;border-radius:50%;background:var(--treatment-color,#2F6BFF);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 3px color-mix(in srgb,var(--treatment-color,#2F6BFF) 13%,transparent)} .treatment-color-picker{display:flex;align-items:center;gap:12px;min-height:44px;padding:7px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--surface)} .treatment-color-picker .treatment-color-input{width:46px;min-width:46px;height:32px;padding:2px;border:0;background:transparent;cursor:pointer} .treatment-color-picker span{font-size:11px;line-height:1.4;color:var(--muted-text)} .appointment-treatment-preview{display:flex;align-items:center;gap:8px;min-height:22px;margin-top:5px} .appointment-treatment-preview>span{width:13px;height:13px;border-radius:50%;background:var(--treatment-color,#2F6BFF)} .appointment-treatment-preview small{font-size:10.5px;color:var(--muted-text)} :root[data-theme="dark"] .calendar-week-grid-v17,:root[data-theme="dark"] .calendar-day-grid-v17,:root[data-theme="dark"] .calendar-time-axis,:root[data-theme="dark"] .calendar-timeline-canvas,:root[data-theme="dark"] .calendar-week-corner,:root[data-theme="dark"] .calendar-week-day-head,:root[data-theme="dark"] .app-shell .calendar-month-label,:root[data-theme="dark"] .app-shell .calendar-month-cell{background:var(--surface)} :root[data-theme="dark"] .calendar-week-day-head.today strong{background:#4c8cff;color:#fff} :root[data-theme="dark"] .calendar-hour-lines i,:root[data-theme="dark"] .calendar-week-columns i{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.08)} @media(max-width:900px){ .app-shell .calendar-toolbar{padding:11px 12px}.app-shell .calendar-toolbar h3{font-size:18px;order:2;width:100%}.app-shell .calendar-toolbar .segmented{margin-left:auto}.app-shell .calendar-filter-row{padding:9px 12px;display:grid;grid-template-columns:1fr 1fr}.app-shell .agenda-doctor-filter{min-width:0;display:grid;gap:4px}.app-shell .agenda-doctor-filter .select{width:100%;min-width:0}.calendar-week-grid-v17{grid-template-columns:58px minmax(840px,1fr);min-width:898px}.calendar-day-grid-v17{grid-template-columns:58px minmax(620px,1fr);min-width:678px}.calendar-week-corner,.calendar-day-grid-head{grid-template-columns:58px 1fr}.calendar-timed-event strong{font-size:10.5px}} @media(max-width:620px){ .app-shell .calendar-shell{border-radius:15px}.app-shell .calendar-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:8px}.app-shell .calendar-toolbar .actions{grid-column:1/3}.app-shell .calendar-toolbar h3{grid-column:1/4;grid-row:2;margin:0;font-size:17px}.app-shell .calendar-toolbar .segmented{grid-column:3;grid-row:1}.app-shell .calendar-filter-row{grid-template-columns:1fr}.calendar-time-scroll{max-height:72vh}.calendar-week-grid-v17{grid-template-columns:54px minmax(770px,1fr);min-width:824px}.calendar-day-grid-v17{grid-template-columns:54px minmax(560px,1fr);min-width:614px}.calendar-time-axis span{font-size:9px;right:6px}.calendar-week-day-head strong{font-size:18px;width:33px;height:33px}.calendar-timed-event{padding:5px 6px}.calendar-timed-event small{display:none}.app-shell .calendar-month-view{grid-template-columns:repeat(7,118px)}} .agenda-color-legend{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:8px 18px;border-bottom:1px solid var(--ui-border);background:var(--surface);scrollbar-width:none} .agenda-color-legend::-webkit-scrollbar{display:none}.agenda-color-legend-title{font-size:10px;font-weight:560;text-transform:uppercase;letter-spacing:.055em;color:var(--muted-text);margin-right:3px}.agenda-color-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:5px 8px;border:1px solid var(--ui-border);border-radius:999px;font-size:10.5px;color:var(--muted-text);background:var(--surface)}.agenda-color-chip i{width:9px;height:9px;border-radius:50%;background:var(--treatment-color,#2F6BFF)}.agenda-color-chip.more{background:var(--ui-tint);color:var(--primary)} @media(max-width:620px){.agenda-color-legend{padding-inline:12px}} /* Google Calendar branded controls · v18 */ .google-calendar-brand-btn{ appearance:none; border:0; min-height:48px; padding:8px 20px 8px 12px; display:inline-flex; align-items:center; justify-content:center; gap:13px; border-radius:18px; background:linear-gradient(105deg,#2f80ed 0%,#1565d8 48%,#0d58c7 100%); color:#fff; box-shadow:0 10px 24px rgba(15,96,210,.22); font:inherit; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; } .google-calendar-brand-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 30px rgba(15,96,210,.28);filter:saturate(1.04)} .google-calendar-brand-btn:active:not(:disabled){transform:translateY(0)} .google-calendar-brand-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .google-calendar-logo{width:34px;height:34px;display:block;object-fit:contain;flex:0 0 34px} .google-calendar-brand-copy{font-size:13px;font-weight:650;letter-spacing:.015em;text-transform:uppercase;line-height:1.15;white-space:nowrap;color:#fff} .google-calendar-brand-btn-header{min-height:44px;padding:6px 17px 6px 10px;border-radius:16px} .google-calendar-brand-btn-header .google-calendar-logo{width:30px;height:30px;flex-basis:30px} .google-calendar-brand-btn-header .google-calendar-brand-copy{font-size:11.5px} .google-calendar-brand-btn-small{min-height:38px;padding:5px 12px 5px 7px;border-radius:13px;gap:8px;box-shadow:0 7px 18px rgba(15,96,210,.18);width:max-content;max-width:100%} .google-calendar-brand-btn-small .google-calendar-logo{width:26px;height:26px;flex-basis:26px} .google-calendar-brand-btn-small .google-calendar-brand-copy{font-size:10px;white-space:normal;text-align:left} .integration-icon-google{padding:6px;background:#fff;overflow:hidden} .integration-icon-google .google-calendar-logo{width:32px;height:32px;flex-basis:32px} .doctor-google-cell .google-calendar-brand-btn-small{margin-top:4px} body.dark-mode .google-calendar-brand-btn{box-shadow:0 10px 26px rgba(0,0,0,.28)} @media(max-width:760px){ .google-calendar-brand-btn-header{width:100%;justify-content:flex-start} .google-calendar-brand-btn-header .google-calendar-brand-copy{white-space:normal;text-align:left} .google-calendar-brand-btn-small{width:100%;justify-content:flex-start} } /* Nueva cita por pasos · v20 */ .appointment-wizard-modal{max-width:1080px!important;width:min(1080px,96vw)!important} .appointment-wizard-modal .modal-body{padding:0 28px 28px} .appointment-wizard-modal .modal-footer{display:flex;align-items:center;gap:10px} .appointment-wizard{display:grid;gap:24px} .appointment-wizard-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:18px 0 2px} .appointment-wizard-step{display:flex;align-items:center;gap:9px;min-width:0;color:#7a8b9b;font-size:12px} .appointment-wizard-step:after{content:"";height:1px;background:#dce5ec;flex:1;margin-left:4px} .appointment-wizard-step:last-child:after{display:none} .appointment-wizard-step span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #d8e2ea;background:#fff;color:#718092;font-weight:600;flex:0 0 28px} .appointment-wizard-step b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appointment-wizard-step.active{color:var(--primary)} .appointment-wizard-step.active span{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 5px 14px rgba(23,71,111,.18)} .appointment-wizard-step.done span{background:#e8f7f0;border-color:#bde7d2;color:#16865a} .appointment-wizard-content{min-height:500px} .wizard-section-head{max-width:760px;margin:4px 0 22px} .wizard-section-head>span{font-size:11px;letter-spacing:.11em;color:var(--primary);font-weight:600} .wizard-section-head h3{margin:7px 0 8px;font-size:30px;letter-spacing:-.035em;font-weight:560;color:#1d3144} .wizard-section-head p{margin:0;color:#6a7d8e;font-size:14px;line-height:1.6} .wizard-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px} .wizard-choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .wizard-choice{border:1px solid #dbe5ec;background:#fff;border-radius:16px;padding:17px 18px;text-align:left;color:#31485c;transition:.16s ease;box-shadow:none} .wizard-choice:hover{border-color:#a9c4d7;background:#fbfdff} .wizard-choice.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent)} .wizard-choice b,.wizard-choice small{display:block}.wizard-choice b{font-size:14px;font-weight:560}.wizard-choice small{margin-top:5px;color:#7a8a99;font-size:12px;line-height:1.4} .wizard-panel{border:1px solid #e1e9ef;background:#fbfcfd;border-radius:18px;padding:20px} .wizard-inline-patient .notice{margin-bottom:16px} .wizard-selection-summary{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid #cce6d9;background:#f2fbf6;border-radius:14px} .wizard-selection-summary>span:first-child{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#24a36d;color:#fff;flex:0 0 28px} .wizard-selection-summary>div{min-width:0;flex:1}.wizard-selection-summary b,.wizard-selection-summary small{display:block}.wizard-selection-summary b{font-weight:560;color:#20384b}.wizard-selection-summary small{color:#6e8173;margin-top:3px} .wizard-selection-summary.treatment>span:first-child{width:16px;height:16px;background:var(--treatment-color);border:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--treatment-color) 16%,transparent)} .wizard-subtitle{margin:20px 0 10px;font-size:12px;color:#6f8090;text-transform:uppercase;letter-spacing:.08em;font-weight:600} .wizard-card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .wizard-card-list.compact{margin-bottom:4px} .wizard-select-card{border:1px solid #dfe7ed;background:#fff;border-radius:15px;padding:14px 15px;display:flex;align-items:center;gap:12px;text-align:left;color:#2b4357;position:relative} .wizard-select-card:hover{border-color:#b5cad9;background:#fbfdff}.wizard-select-card.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,#fff)} .wizard-select-card>div{min-width:0;flex:1}.wizard-select-card b,.wizard-select-card small{display:block}.wizard-select-card b{font-size:14px;font-weight:560}.wizard-select-card small{color:#758696;font-size:11.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wizard-select-card>i{font-style:normal;color:transparent}.wizard-select-card.active>i{color:var(--primary)} .wizard-avatar,.wizard-location-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef5fa;color:var(--primary);font-weight:600;flex:0 0 38px} .wizard-empty{padding:30px;border:1px dashed #cdd9e2;border-radius:16px;text-align:center;background:#fafcfd;color:#6d7f8f}.wizard-empty b{display:block;color:#31495d;font-weight:560;font-size:15px}.wizard-empty p{margin:6px auto 14px;max-width:520px;line-height:1.55}.wizard-empty.small{padding:22px}.wizard-empty.important{background:#fffaf0;border-color:#ead6aa} .wizard-treatment-list{display:grid;gap:8px;margin-top:12px;max-height:320px;overflow:auto;padding-right:4px} .wizard-treatment-card{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #e1e8ee;background:#fff;border-radius:13px;padding:12px 14px;text-align:left;color:#30485b} .wizard-treatment-card:hover{border-color:#bad0df}.wizard-treatment-card.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,#fff)}.wizard-treatment-card>div b,.wizard-treatment-card>div small{display:block}.wizard-treatment-card>div b{font-weight:560}.wizard-treatment-card>div small{font-size:11px;color:#788999;margin-top:3px}.wizard-treatment-card>strong{font-size:12px;font-weight:560;color:#20394d} .wizard-date-time-layout{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(360px,1.1fr);gap:18px} .wizard-calendar,.wizard-slots-panel{border:1px solid #e1e8ee;background:#fff;border-radius:18px;padding:16px} .wizard-calendar-toolbar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px;margin-bottom:14px}.wizard-calendar-toolbar strong{text-align:center;font-size:15px;font-weight:560;text-transform:capitalize;color:#2b4256} .wizard-calendar-weekdays,.wizard-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.wizard-calendar-weekdays span{text-align:center;font-size:10px;color:#8796a4;padding:5px 0}.wizard-calendar-day{aspect-ratio:1/1;border:0;background:transparent;border-radius:12px;color:#334b5e;font-size:13px}.wizard-calendar-day:hover:not(:disabled){background:#edf4f8}.wizard-calendar-day.muted{color:#adb8c1}.wizard-calendar-day.today{box-shadow:inset 0 0 0 1px #9fc1d7}.wizard-calendar-day.selected{background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(23,71,111,.18)}.wizard-calendar-day:disabled{opacity:.28;cursor:not-allowed} .wizard-slots-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.wizard-slots-head b,.wizard-slots-head small{display:block}.wizard-slots-head b{font-weight:560;color:#2c4356}.wizard-slots-head small{margin-top:4px;color:#7d8d9a;font-size:11px} .wizard-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:270px;overflow:auto;padding-right:3px}.wizard-slot{border:1px solid #dde6ed;background:#fbfcfd;border-radius:12px;padding:11px 8px;color:#344b5f}.wizard-slot b,.wizard-slot span{display:block}.wizard-slot b{font-size:15px;font-weight:560}.wizard-slot span{font-size:10px;color:#81909c;margin-top:3px}.wizard-slot:hover{border-color:#aac7d9;background:#f5fafc}.wizard-slot.active{border-color:var(--primary);background:var(--primary);color:#fff}.wizard-slot.active span{color:rgba(255,255,255,.78)} .wizard-slots-loading{padding:30px 12px;text-align:center;color:#728495} .wizard-manual-time{margin-top:16px;border-top:1px solid #e5ebf0;padding-top:12px}.wizard-manual-time summary{cursor:pointer;color:var(--primary);font-size:12px;font-weight:560;margin-bottom:12px}.wizard-manual-time small{color:#7a8a98;font-size:11px} .wizard-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wizard-review-grid article{border:1px solid #e1e8ee;border-radius:15px;padding:16px;background:#fff;min-height:108px}.wizard-review-grid small,.wizard-review-grid b,.wizard-review-grid span{display:block}.wizard-review-grid>article>small{font-size:9px;letter-spacing:.09em;color:#8b99a5}.wizard-review-grid b{font-size:15px;font-weight:560;color:#253d50;margin:7px 0 4px}.wizard-review-grid span{font-size:11.5px;color:#738493;line-height:1.45}.wizard-comments{margin-top:16px}.wizard-field-label{display:block;font-size:12px;color:#657888;margin-bottom:7px}.wizard-footer-spacer{flex:1} body.dark-mode .wizard-section-head h3{color:#f1f5f9}body.dark-mode .wizard-choice,body.dark-mode .wizard-panel,body.dark-mode .wizard-select-card,body.dark-mode .wizard-calendar,body.dark-mode .wizard-slots-panel,body.dark-mode .wizard-review-grid article,body.dark-mode .wizard-treatment-card{background:#112b40;border-color:#29475e;color:#e6eef5}body.dark-mode .wizard-choice.active,body.dark-mode .wizard-select-card.active,body.dark-mode .wizard-treatment-card.active{background:#173b57}body.dark-mode .wizard-select-card b,body.dark-mode .wizard-treatment-card>strong,body.dark-mode .wizard-review-grid b,body.dark-mode .wizard-calendar-toolbar strong,body.dark-mode .wizard-slots-head b{color:#eef5fa}body.dark-mode .wizard-empty{background:#10283b;border-color:#35536a}body.dark-mode .wizard-empty b{color:#eaf2f8}body.dark-mode .wizard-calendar-day{color:#d7e2ea}body.dark-mode .wizard-calendar-day.muted{color:#647789}body.dark-mode .wizard-slot{background:#17334a;border-color:#315067;color:#e5edf4} @media(max-width:860px){.appointment-wizard-modal{width:98vw!important}.appointment-wizard-progress{grid-template-columns:repeat(5,1fr)}.appointment-wizard-step b{display:none}.appointment-wizard-step:after{margin-left:0}.wizard-date-time-layout{grid-template-columns:1fr}.wizard-review-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.appointment-wizard-modal .modal-body{padding:0 14px 18px}.appointment-wizard-content{min-height:430px}.wizard-choice-grid,.wizard-choice-grid.two,.wizard-card-list{grid-template-columns:1fr}.wizard-section-head h3{font-size:25px}.wizard-slot-grid{grid-template-columns:repeat(2,1fr)}.wizard-review-grid{grid-template-columns:1fr}.appointment-wizard-step span{width:24px;height:24px;flex-basis:24px;font-size:11px}.wizard-calendar,.wizard-slots-panel{padding:12px}} /* V21 · Consultorios independientes */ .clinic-config-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}.clinic-config-summary>div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,var(--primary-soft) 6%);display:grid;gap:4px}.clinic-config-summary small{color:var(--muted);font-size:12px}.clinic-config-summary strong{font-size:19px;font-weight:550}.clinic-settings-list-v21{display:grid;gap:12px}.clinic-settings-card-v21{align-items:flex-start}.clinic-settings-main{min-width:0;display:grid;gap:5px}.clinic-settings-main>span{color:var(--muted);line-height:1.5}.clinic-settings-meta{display:flex;flex-wrap:wrap;gap:7px 14px;margin:6px 0}.clinic-settings-meta small{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}.clinic-settings-meta svg{width:14px;height:14px}.clinic-schedule-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} @media(max-width:760px){.clinic-config-summary{grid-template-columns:1fr}.clinic-settings-card-v21{display:grid;gap:14px}.clinic-settings-card-v21>.actions{width:100%}.clinic-settings-card-v21>.actions .btn{flex:1}} /* V23 · Zona horaria por workspace */ .timezone-preview{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));} .timezone-preview>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);} .timezone-preview .ui-icon{width:20px;height:20px}.timezone-preview>div{display:grid;gap:2px}.timezone-preview small,.timezone-preview>div>span{color:var(--muted);font-size:12px}.timezone-preview strong{font-size:15px;font-weight:550;color:var(--text)} /* V24 · Horarios de doctor por consultorio */ .doctor-clinic-schedules{display:grid;gap:14px;margin-top:14px} .doctor-clinic-schedule-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease} .doctor-clinic-schedule-card.active{border-color:color-mix(in srgb,var(--primary) 34%,var(--line));box-shadow:0 8px 24px rgba(21,55,78,.05)} .doctor-clinic-schedule-card.disabled{background:color-mix(in srgb,var(--surface) 94%,var(--bg) 6%)} .doctor-clinic-schedule-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border-bottom:1px solid var(--line)} .doctor-clinic-toggle{display:flex;align-items:flex-start;gap:11px;min-width:0;cursor:pointer} .doctor-clinic-toggle input{width:17px;height:17px;margin-top:2px;accent-color:var(--primary);flex:0 0 auto} .doctor-clinic-toggle span{display:grid;gap:3px;min-width:0}.doctor-clinic-toggle b{font-size:14px;font-weight:560;color:var(--text)}.doctor-clinic-toggle small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doctor-clinic-schedule-body{padding:14px 16px 16px}.doctor-clinic-schedule-card.disabled .doctor-clinic-schedule-body{opacity:.48;pointer-events:none} .doctor-clinic-schedule-card .schedule-editor{margin-top:0}.doctor-clinic-schedule-card .schedule-row{padding:10px 0} .doctor-clinic-summary{display:grid;gap:7px;min-width:210px}.doctor-clinic-summary>span{display:grid;gap:2px}.doctor-clinic-summary b{font-size:11.5px;font-weight:560;color:var(--text)}.doctor-clinic-summary small{font-size:10.5px;line-height:1.4;color:var(--muted);white-space:normal} .wizard-select-card.disabled{opacity:.48;cursor:not-allowed;background:color-mix(in srgb,var(--surface) 92%,var(--bg) 8%)}.wizard-select-card.disabled:hover{border-color:#dfe7ed;background:color-mix(in srgb,var(--surface) 92%,var(--bg) 8%)} body.dark-mode .doctor-clinic-schedule-card{background:#102b40;border-color:#2b475c}body.dark-mode .doctor-clinic-schedule-card.disabled{background:#0e2537}body.dark-mode .doctor-clinic-schedule-toggle b,body.dark-mode .doctor-clinic-summary b{color:#eef5fa} @media(max-width:760px){.doctor-clinic-schedule-head{align-items:flex-start;flex-direction:column}.doctor-clinic-schedule-head>.badge{align-self:flex-start}.doctor-clinic-schedule-body{padding:10px 12px 14px}.doctor-clinic-summary{min-width:160px}} .appointment-event-title{display:inline-flex;align-items:center;gap:6px;min-width:0} .appointment-event-title > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .appointment-status-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;border-radius:999px;background:rgba(255,255,255,.22);font-size:11px;line-height:1;color:inherit;overflow:hidden} .appointment-status-icon img{width:12px;height:12px;object-fit:contain;display:block} .appointment-status-icon-scheduled{font-size:10px} .appointment-status-icon-confirmed{background:rgba(255,255,255,.18)} .patient-appointment-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 0} .patient-appointment-summary article{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)} .patient-appointment-summary span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .patient-appointment-summary strong{display:block;margin-top:6px;font-size:1.35rem;color:var(--primary)} /* V28 · Dashboard móvil compacto */ @media(max-width:700px){ .dashboard-hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:12px; } .dashboard-stat{ min-height:82px; padding:11px 12px; border-radius:14px; box-shadow:0 7px 18px rgba(16,55,84,.055); } .dashboard-stat::after{ width:62px; height:62px; right:-22px; top:-24px; box-shadow:0 0 0 12px color-mix(in srgb,var(--primary) 4%,transparent); } .dashboard-stat .stat-label{ font-size:8.5px; line-height:1.2; letter-spacing:.085em; } .dashboard-stat .stat-value{ font-size:23px; line-height:1; margin-top:5px; letter-spacing:-.045em; } .dashboard-stat .stat-sub{ font-size:9.5px; line-height:1.2; margin-top:4px; } } @media(max-width:370px){ .dashboard-hero-grid{gap:7px} .dashboard-stat{min-height:78px;padding:10px} .dashboard-stat .stat-label{font-size:8px} .dashboard-stat .stat-value{font-size:21px} .dashboard-stat .stat-sub{font-size:9px} } /* V31 · Landing responsive navigation: conserva login, CTA y navegación en vertical */ @media (max-width:1250px){ .os4{padding-top:132px} .os4-nav-inner{ min-height:auto; padding:10px 26px 8px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:8px 18px; } .os4-brand{grid-column:1;grid-row:1;align-self:center} .os4-nav-actions{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0} .os4-links{ grid-column:1/-1; grid-row:2; display:flex!important; width:100%; margin:0; justify-content:flex-start; gap:3px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 0 2px; } .os4-links::-webkit-scrollbar{display:none} .os4-links button{flex:0 0 auto;padding:8px 12px;font-size:12px;white-space:nowrap} .os4 section[id]{scroll-margin-top:148px} } @media (max-width:760px){ .os4{padding-top:122px} .os4-nav-inner{padding:8px 14px 7px;gap:7px 10px} .os4-brand-image{max-width:138px} .os4-brand-logo{width:138px;max-height:44px} .os4-nav-actions .os4-btn-ghost{display:inline-flex!important} .os4-nav-actions .os4-btn-sm{padding:8px 10px;font-size:10.5px;border-radius:12px;min-height:34px} .os4-links button{padding:7px 10px;font-size:10.5px} .os4 section[id]{scroll-margin-top:136px} .os4-hero{padding-top:48px} } @media (max-width:430px){ .os4{padding-top:116px} .os4-nav-inner{padding:7px 10px 6px;gap:6px 7px} .os4-brand-image{max-width:108px} .os4-brand-logo{width:108px;max-height:38px} .os4-nav-actions{gap:4px} .os4-nav-actions .os4-btn-sm{padding:7px 8px;font-size:9.5px;min-height:32px;border-radius:11px} .os4-links button{padding:7px 9px;font-size:10px} .os4 section[id]{scroll-margin-top:130px} .os4-hero{padding-top:42px} } @media (max-width: 880px) { .modal { display:flex; flex-direction:column; overflow:hidden; } .modal-header { flex:0 0 auto; } .modal-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(124px + env(safe-area-inset-bottom)); } .modal-footer { flex:0 0 auto; position:sticky; bottom:0; z-index:2; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -10px 24px rgba(15,39,58,.08); padding-bottom:calc(16px + env(safe-area-inset-bottom)); } } @media (max-width: 620px) { .modal-body { padding-bottom:calc(136px + env(safe-area-inset-bottom)); } .modal-footer { gap:10px; } } /* Recuperación de contraseña */ .auth-inline-link{display:flex;justify-content:flex-end;margin:-2px 0 12px} .auth-text-link{appearance:none;border:0;background:transparent;padding:3px 0;color:var(--primary);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .auth-text-link:hover{text-decoration:underline} .auth-text-link:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:3px;border-radius:5px} @media(max-width:620px){.auth-inline-link{margin-top:0}.auth-text-link{font-size:12px}} .sidebar-logo-option{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:14px 15px;border:1px solid var(--ui-border,var(--line));border-radius:16px;background:var(--ui-tint,var(--primary-soft));cursor:pointer}.sidebar-logo-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);flex:0 0 auto}.sidebar-logo-option span{display:block;min-width:0}.sidebar-logo-option strong{display:block;font-size:13px;font-weight:560;color:var(--text)}.sidebar-logo-option small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45} /* Caja simplificada · V38 */ .cash-summary-grid-simple{grid-template-columns:repeat(4,minmax(0,1fr))} .cash-tools-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--ui-border,var(--line));border-radius:18px;background:var(--surface);box-shadow:var(--ui-shadow-xs,var(--shadow))} .cash-tools-bar .btn{min-height:38px} .cash-wizard-stepper{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:10px;margin:0 0 22px;padding:4px 2px 16px;border-bottom:1px solid var(--ui-border,var(--line))} .cash-wizard-stepper>div{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap} .cash-wizard-stepper>div>span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--ui-border,var(--line));background:var(--surface);font-size:12px;font-weight:650} .cash-wizard-stepper>div>strong{font-size:12px;font-weight:550} .cash-wizard-stepper>i{height:1px;background:var(--ui-border,var(--line))} .cash-wizard-stepper>div.active{color:var(--primary)} .cash-wizard-stepper>div.active>span{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 15px color-mix(in srgb,var(--primary) 22%,transparent)} .cash-wizard-stepper>div.done{color:var(--success)} .cash-wizard-stepper>div.done>span{border-color:color-mix(in srgb,var(--success) 45%,var(--line));background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)} .cash-wizard-heading{margin-bottom:16px} .cash-wizard-heading>span{display:block;color:var(--primary);font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.08em} .cash-wizard-heading h3{margin:5px 0 5px;font-size:22px;font-weight:560;letter-spacing:-.035em} .cash-wizard-heading p{margin:0;color:var(--muted);font-size:12px} .cash-wizard-panel>.section-box{border-radius:20px;padding:16px} .cash-patient-mode{margin-bottom:13px} .cash-discount-box,.cash-payment-details{margin-top:12px;border:1px solid var(--ui-border,var(--line));border-radius:16px;background:var(--surface);overflow:hidden} .cash-discount-box>summary,.cash-payment-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;color:var(--text);font-weight:550;list-style:none} .cash-discount-box>summary::-webkit-details-marker,.cash-payment-details>summary::-webkit-details-marker{display:none} .cash-discount-box>summary span,.cash-payment-details>summary span{color:var(--muted);font-size:11px;font-weight:450} .cash-discount-box>.form-grid{padding:0 14px 14px} .cash-payment-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 15px} .cash-payment-presets button{appearance:none;border:1px solid var(--ui-border,var(--line));border-radius:14px;padding:11px 8px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:550;cursor:pointer;transition:.15s ease} .cash-payment-presets button:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--primary)} .cash-payments-list{display:grid;gap:10px} .cash-payment-card{display:block!important;padding:12px!important;margin:0!important} .cash-payment-main{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(110px,.65fr) minmax(130px,.7fr) auto;gap:10px;align-items:end} .cash-payment-details-grid{padding:0 12px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .cash-payment-details-grid>.cash-payment-extra{grid-column:1/-1} .cash-payment-remove{align-self:end} .cash-add-payment{margin-top:10px} .cash-total-preview-step{position:static;margin-top:14px} .cash-total-preview .cash-total-main{background:color-mix(in srgb,var(--primary) 9%,var(--surface));border-color:color-mix(in srgb,var(--primary) 25%,var(--line))} .cash-total-preview .cash-total-main strong{font-size:18px} .cash-payment-balance{display:grid;justify-items:center;gap:4px;padding:18px;margin-bottom:14px;border:1px solid var(--ui-border,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface))} .cash-payment-balance span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em} .cash-payment-balance strong{font-size:30px;font-weight:580;color:var(--primary)} .cash-payment-balance small{color:var(--muted)} :root[data-theme="dark"] .cash-tools-bar,:root[data-theme="dark"] .cash-discount-box,:root[data-theme="dark"] .cash-payment-details,:root[data-theme="dark"] .cash-payment-presets button{background:#1b2a35;border-color:rgba(255,255,255,.09)} @media(max-width:1080px){.cash-summary-grid-simple{grid-template-columns:repeat(2,minmax(0,1fr))}.cash-payment-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.cash-payment-main{grid-template-columns:1fr 1fr}.cash-payment-main .cash-payment-remove{grid-column:1/-1}.cash-payment-details-grid{grid-template-columns:1fr 1fr}} @media(max-width:720px){.cash-summary-grid-simple{grid-template-columns:repeat(2,minmax(0,1fr))}.cash-tools-bar{display:grid;grid-template-columns:1fr 1fr}.cash-wizard-stepper{gap:5px}.cash-wizard-stepper>div{gap:4px}.cash-wizard-stepper>div>strong{display:none}.cash-wizard-stepper>div>span{width:26px;height:26px}.cash-wizard-heading h3{font-size:20px}.cash-payment-presets{grid-template-columns:1fr 1fr}.cash-payment-main,.cash-payment-details-grid{grid-template-columns:1fr}.cash-payment-main .cash-payment-remove{grid-column:auto}.cash-wizard-panel>.section-box{padding:13px}.cash-total-preview{grid-template-columns:repeat(2,minmax(0,1fr))}} /* V39 · Dashboard operativo: acciones rápidas y foco del día */ .dashboard-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:0 0 14px} .dashboard-quick-action{appearance:none;border:1px solid var(--ui-border,var(--line));border-radius:18px;background:var(--surface);color:var(--text);padding:13px 14px;display:flex;align-items:center;gap:11px;text-align:left;min-width:0;box-shadow:var(--ui-shadow-xs,0 6px 16px rgba(16,55,84,.04));transition:.16s ease} .dashboard-quick-action:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:var(--ui-shadow-sm,var(--shadow))} .dashboard-quick-action>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:13px;background:var(--ui-tint,var(--primary-soft));color:var(--primary)} .dashboard-quick-action>span .ui-icon{width:19px;height:19px} .dashboard-quick-action div{display:grid;gap:2px;min-width:0}.dashboard-quick-action strong{font-size:13px;font-weight:580;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-quick-action small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dashboard-quick-action.primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,var(--accent)));border-color:transparent;color:#fff}.dashboard-quick-action.primary>span{background:rgba(255,255,255,.15);color:#fff}.dashboard-quick-action.primary small{color:rgba(255,255,255,.78)} .dashboard-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;align-items:start} .dashboard-focus-card{overflow:hidden;border:1px solid var(--ui-border,var(--line));border-radius:22px;box-shadow:var(--ui-shadow-sm,var(--shadow));background:var(--surface)} .dashboard-focus-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid var(--ui-border,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface))} .dashboard-focus-head>div{display:grid;gap:2px;min-width:0}.dashboard-focus-head span{font-size:9px;font-weight:620;letter-spacing:.1em;color:var(--primary)}.dashboard-focus-head strong{font-size:14px;font-weight:590;color:var(--text)} .dashboard-focus-list{display:grid;gap:7px;padding:10px}.dashboard-focus-row{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 8px;border-radius:14px;background:color-mix(in srgb,var(--primary) 3.5%,var(--surface));border:1px solid color-mix(in srgb,var(--line) 85%,transparent)} .dashboard-focus-row .dashboard-row-main{gap:2px}.dashboard-focus-row .dashboard-row-main strong{font-size:12.5px;font-weight:570}.dashboard-focus-row .dashboard-row-main span,.dashboard-focus-row .dashboard-row-main small{font-size:10.5px} .dashboard-focus-time{display:grid;gap:1px;min-width:58px;flex:0 0 58px}.dashboard-focus-time strong{font-size:13px;color:var(--primary)}.dashboard-focus-time small{font-size:9px;color:var(--muted);line-height:1.2} .dashboard-reception-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}.dashboard-reception-dot.waiting{background:#d79a18;box-shadow:0 0 0 4px rgba(215,154,24,.12)}.dashboard-reception-dot.in_consultation{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)} .dashboard-money-chip{flex:0 0 auto;min-width:70px;max-width:92px;padding:6px 7px;border-radius:10px;background:color-mix(in srgb,var(--success) 10%,var(--surface));color:var(--success);font-size:10px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} .dashboard-focus-total{display:flex;align-items:baseline;justify-content:space-between;gap:9px;padding:11px 14px 1px}.dashboard-focus-total strong{font-size:18px;font-weight:590;color:var(--primary)}.dashboard-focus-total span{font-size:10px;color:var(--muted)} .dashboard-alert-card{margin:0 0 18px;border:1px solid var(--ui-border,var(--line));border-radius:22px;overflow:hidden;box-shadow:var(--ui-shadow-sm,var(--shadow))}.dashboard-alert-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;padding:10px}.dashboard-alert-row{appearance:none;border:1px solid var(--ui-border,var(--line));background:var(--surface);border-radius:14px;padding:10px 11px;display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:9px;align-items:center;text-align:left;color:var(--text)}.dashboard-alert-row:hover{background:var(--ui-tint,var(--primary-soft))}.dashboard-alert-row i{width:9px;height:9px;border-radius:50%;background:var(--accent)}.dashboard-alert-row.warning i{background:#d79a18}.dashboard-alert-row.danger i{background:var(--danger)}.dashboard-alert-row.money i{background:var(--success)}.dashboard-alert-row div{display:grid;gap:2px}.dashboard-alert-row strong{font-size:11.5px;font-weight:570}.dashboard-alert-row span{font-size:10px;color:var(--muted)}.dashboard-alert-row b{font-size:18px;font-weight:400;color:var(--muted)} .dashboard-all-good{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;color:var(--success)}.dashboard-all-good>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--success) 12%,var(--surface));font-weight:650}.dashboard-all-good div{display:grid;gap:1px}.dashboard-all-good strong{font-size:12px}.dashboard-all-good small{font-size:10px;color:var(--muted)} .dashboard-section-heading{display:flex;align-items:end;justify-content:space-between;margin:4px 1px 10px}.dashboard-section-heading span{display:block;font-size:9px;font-weight:620;letter-spacing:.1em;color:var(--primary)}.dashboard-section-heading h2{margin:2px 0 0;font-size:17px;font-weight:590;color:var(--text)} .dashboard-secondary-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:14px;align-items:start}.dashboard-secondary-grid>.dashboard-birthdays{grid-row:span 2}.dashboard-secondary-grid .dashboard-panel{margin:0} :root[data-theme="dark"] .dashboard-quick-action,:root[data-theme="dark"] .dashboard-focus-card,:root[data-theme="dark"] .dashboard-alert-card,:root[data-theme="dark"] .dashboard-alert-row{background:#1b2a35;border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .dashboard-focus-head{background:linear-gradient(135deg,#20323e,#1b2a35)}:root[data-theme="dark"] .dashboard-focus-row{background:#20313d;border-color:rgba(255,255,255,.06)} @media(max-width:1180px){.dashboard-focus-grid{grid-template-columns:1fr 1fr}.dashboard-focus-grid>.dashboard-focus-card:last-child{grid-column:1/-1}.dashboard-secondary-grid{grid-template-columns:1fr}.dashboard-secondary-grid>.dashboard-birthdays{grid-row:auto}} @media(max-width:700px){.dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-quick-action{padding:10px;border-radius:15px;gap:8px}.dashboard-quick-action>span{width:32px;height:32px;flex-basis:32px;border-radius:10px}.dashboard-quick-action>span .ui-icon{width:17px;height:17px}.dashboard-quick-action strong{font-size:11.5px}.dashboard-quick-action small{font-size:9px}.dashboard-focus-grid{grid-template-columns:1fr;gap:10px}.dashboard-focus-grid>.dashboard-focus-card:last-child{grid-column:auto}.dashboard-focus-head{padding:11px 12px}.dashboard-focus-list{padding:8px}.dashboard-alert-list{grid-template-columns:1fr;padding:8px}.dashboard-secondary-grid{gap:10px}.dashboard-section-heading h2{font-size:15px}} /* ========================================================== Recepción V40 · Flujo operativo por etapas ========================================================== */ .reception-flow-module{gap:14px} .reception-flow-head{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--ui-border,var(--border));border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--ui-tint,var(--primary-soft)));box-shadow:var(--ui-shadow-sm,var(--shadow));overflow-x:auto;scrollbar-width:thin} .reception-flow-step{appearance:none;flex:0 0 auto;display:flex;align-items:center;gap:9px;min-width:132px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:var(--text);text-align:left;cursor:pointer} .reception-flow-step:hover{background:color-mix(in srgb,var(--primary) 8%,var(--surface))} .reception-flow-step>span{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:11px;font-weight:700} .reception-flow-step strong,.reception-flow-step small{display:block}.reception-flow-step strong{font-size:11.5px;font-weight:600}.reception-flow-step small{margin-top:1px;color:var(--muted);font-size:9.5px} .reception-flow-arrow{flex:0 0 auto;color:color-mix(in srgb,var(--muted) 55%,transparent);font-style:normal;font-size:15px} .reception-flow-totals{flex:0 0 auto;margin-left:auto;padding:7px 12px;border-left:1px solid var(--ui-border,var(--border));text-align:right}.reception-flow-totals span,.reception-flow-totals strong{display:block}.reception-flow-totals span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.reception-flow-totals strong{margin-top:2px;color:var(--primary);font-size:14px} .reception-flow-toolbar{grid-template-columns:160px 230px minmax(220px,1fr);padding:12px;border-radius:18px;box-shadow:none;background:var(--surface)} .reception-flow-board{display:grid;grid-template-columns:repeat(6,minmax(268px,1fr));gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin} .reception-flow-column{min-width:268px;min-height:410px;border:1px solid var(--ui-border,var(--border));border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,var(--bg));overflow:hidden;scroll-snap-align:start} .reception-flow-column>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;padding:13px 13px 11px;border-bottom:1px solid var(--ui-border,var(--border));background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primary) 4%,var(--surface)))} .reception-flow-column>header>div{display:flex;align-items:center;gap:8px}.reception-flow-column>header strong{font-size:12px}.reception-flow-column>header b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:var(--surface);border:1px solid var(--ui-border,var(--border));color:var(--primary);font-size:11px}.reception-flow-column>header small{grid-column:1/-1;color:var(--muted);font-size:9.5px;line-height:1.35} .reception-stage-dot{width:9px;height:9px;border-radius:999px;background:#94a3b8;box-shadow:0 0 0 4px color-mix(in srgb,#94a3b8 13%,transparent)}.reception-stage-dot.arrived{background:#16a34a;box-shadow:0 0 0 4px color-mix(in srgb,#16a34a 13%,transparent)}.reception-stage-dot.waiting{background:#d97706;box-shadow:0 0 0 4px color-mix(in srgb,#d97706 13%,transparent)}.reception-stage-dot.in_consultation{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}.reception-stage-dot.completed{background:#15803d;box-shadow:0 0 0 4px color-mix(in srgb,#15803d 13%,transparent)}.reception-stage-dot.cash{background:#7c3aed;box-shadow:0 0 0 4px color-mix(in srgb,#7c3aed 13%,transparent)} .reception-flow-column-body{display:grid;gap:9px;padding:9px;align-content:start} .reception-flow-card{display:grid;gap:9px;padding:11px;border:1px solid var(--ui-border,var(--border));border-radius:16px;background:var(--surface);box-shadow:var(--ui-shadow-xs,var(--shadow));transition:.16s ease}.reception-flow-card:hover{transform:translateY(-1px);box-shadow:var(--ui-shadow-sm,var(--shadow))}.reception-flow-card.priority-priority{border-color:color-mix(in srgb,#d97706 45%,var(--border))}.reception-flow-card.priority-urgent{border-color:color-mix(in srgb,#b91c1c 45%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,#b91c1c 8%,transparent)} .reception-flow-card-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start}.reception-flow-time{min-width:43px;padding:5px 6px;border-radius:10px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));text-align:center}.reception-flow-time strong,.reception-flow-time span{display:block}.reception-flow-time strong{color:var(--primary);font-size:12px}.reception-flow-time span{margin-top:1px;color:var(--muted);font-size:8.5px}.reception-flow-person{min-width:0}.reception-flow-person strong,.reception-flow-person span{display:block}.reception-flow-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:12px}.reception-flow-person span{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.3}.reception-walkin-chip{padding:3px 6px;border-radius:999px;background:#fff3dc;color:#8a5b10;font-size:8px;font-weight:600;white-space:nowrap} .reception-flow-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:9.5px}.reception-flow-meta>span{display:inline-flex;align-items:center;gap:4px}.reception-flow-meta .ui-icon{width:13px;height:13px}.reception-flow-meta .badge{font-size:8px;padding:3px 6px}.reception-flow-meta .wait-chip{font-size:8.5px;padding:3px 6px} .reception-flow-payment{display:flex;align-items:center;gap:6px;padding-top:7px;border-top:1px dashed var(--ui-border,var(--border))}.reception-flow-payment small{color:var(--muted);font-size:9px} .reception-flow-card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}.reception-primary-action{width:100%;min-height:35px;padding:7px 9px;font-size:10.5px}.reception-done-label{display:flex;align-items:center;justify-content:center;min-height:34px;border-radius:11px;background:#ecfdf5;color:#166534;font-size:10px;font-weight:600} .reception-more{position:relative}.reception-more>summary{list-style:none;display:grid;place-items:center;min-width:35px;height:35px;padding:0 9px;border:1px solid var(--ui-border,var(--border));border-radius:11px;background:var(--surface);color:var(--muted);font-size:0;cursor:pointer}.reception-more>summary::-webkit-details-marker{display:none}.reception-more>summary::before{content:'•••';font-size:12px;letter-spacing:1px}.reception-more[open]>summary{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}.reception-more-menu{position:absolute;right:0;bottom:42px;z-index:15;display:grid;min-width:195px;padding:6px;border:1px solid var(--ui-border,var(--border));border-radius:13px;background:var(--surface);box-shadow:var(--ui-shadow-lg,var(--shadow))}.reception-more-menu button,.reception-more-menu a{appearance:none;border:0;background:transparent;padding:8px 9px;border-radius:9px;color:var(--text);font:inherit;font-size:10px;text-align:left;cursor:pointer}.reception-more-menu button:hover,.reception-more-menu a:hover{background:var(--ui-tint,var(--primary-soft));color:var(--primary)} .reception-flow-empty{display:grid;place-items:center;min-height:112px;padding:18px;text-align:center;color:var(--muted)}.reception-flow-empty span{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:color-mix(in srgb,var(--success) 11%,var(--surface));color:var(--success);font-size:13px}.reception-flow-empty p{margin:7px 0 0;font-size:9.5px} .reception-attention,.reception-exceptions{border:1px solid var(--ui-border,var(--border));border-radius:17px;background:var(--surface);overflow:hidden}.reception-attention>summary,.reception-exceptions>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;cursor:pointer;list-style:none}.reception-attention>summary::-webkit-details-marker,.reception-exceptions>summary::-webkit-details-marker{display:none}.reception-attention>summary span,.reception-exceptions>summary span{font-size:11px;font-weight:600}.reception-attention>summary strong,.reception-exceptions>summary strong{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--ui-tint,var(--primary-soft));color:var(--primary);font-size:10px}.reception-attention-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;padding:0 10px 10px}.reception-attention-list article{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid var(--ui-border,var(--border));border-radius:12px}.reception-attention-list article>div{display:grid;gap:2px}.reception-attention-list strong{font-size:10px}.reception-attention-list span{color:var(--muted);font-size:9px}.reception-attention-list article.warning{border-left:3px solid #d97706}.reception-attention-list article.success{border-left:3px solid #15803d}.reception-attention-list article.info{border-left:3px solid var(--primary)} .reception-exceptions>div{display:grid;gap:6px;padding:0 10px 10px}.reception-exceptions article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:9px 10px;border-radius:11px;background:color-mix(in srgb,var(--danger) 4%,var(--surface))}.reception-exceptions article>div strong,.reception-exceptions article>div span{display:block}.reception-exceptions article>div strong{font-size:10px}.reception-exceptions article>div span{margin-top:2px;color:var(--muted);font-size:9px} :root[data-theme="dark"] .reception-flow-head,:root[data-theme="dark"] .reception-flow-column,:root[data-theme="dark"] .reception-flow-card,:root[data-theme="dark"] .reception-attention,:root[data-theme="dark"] .reception-exceptions{background:#1b2a35;border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .reception-flow-column>header{background:linear-gradient(180deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .reception-flow-time,:root[data-theme="dark"] .reception-flow-step>span{background:color-mix(in srgb,var(--primary) 24%,#1b2a35)} @media(max-width:1100px){.reception-flow-toolbar{grid-template-columns:1fr 1fr}.reception-flow-toolbar .grow{grid-column:1/-1}.reception-flow-board{grid-template-columns:repeat(6,minmax(260px,1fr))}} @media(max-width:680px){.reception-flow-head{padding:7px;border-radius:16px}.reception-flow-step{min-width:112px;padding:6px 7px;gap:6px}.reception-flow-step>span{width:23px;height:23px;flex-basis:23px}.reception-flow-step strong{font-size:10px}.reception-flow-step small{font-size:8px}.reception-flow-arrow{display:none}.reception-flow-totals{min-width:108px;padding:5px 8px}.reception-flow-toolbar{grid-template-columns:1fr;padding:10px}.reception-flow-toolbar .grow{grid-column:auto}.reception-flow-board{display:flex;gap:9px;padding-bottom:8px;scroll-snap-type:x mandatory}.reception-flow-column{flex:0 0 min(84vw,290px);min-width:0;min-height:360px}.reception-flow-card{padding:10px}.reception-attention-list{grid-template-columns:1fr}.reception-exceptions article{grid-template-columns:minmax(0,1fr) auto}.reception-exceptions article .btn{grid-column:1/-1;width:100%}} /* V41 · Expediente operativo */ .patient-hero-compact .patient-hero-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px} .patient-hero-compact .record-meta{display:flex;gap:8px 20px;flex-wrap:wrap} .patient-hero-compact .record-meta span{display:grid;gap:2px} .patient-hero-compact .record-meta b{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.72} .patient-edit-profile{align-self:center;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important;backdrop-filter:blur(8px)} .patient-edit-profile:hover{background:rgba(255,255,255,.22)!important} .patient-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap} .patient-chat-btn{align-self:center;background:linear-gradient(135deg,#25d366,#128c7e)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;box-shadow:0 12px 24px rgba(7,94,84,.22)} .patient-chat-btn:hover{background:linear-gradient(135deg,#29dd6c,#14977f)!important} .patient-chat-btn .btn-action-icon{width:18px;height:18px;object-fit:contain;filter:none} .patient-operational-strip{margin:14px 0 12px} .patient-operational-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:7px 0;background:var(--bg);position:sticky;top:82px;z-index:4} .patient-op-card{min-width:0;padding:12px 13px;border:1px solid var(--ui-border,var(--border));border-radius:17px;background:linear-gradient(145deg,var(--surface),var(--ui-tint));box-shadow:var(--ui-shadow-xs,var(--shadow));overflow:hidden} .patient-op-card>span{display:block;color:var(--muted);font-size:9.5px;font-weight:650;letter-spacing:.055em;text-transform:uppercase} .patient-op-card>strong{display:block;margin-top:6px;color:var(--text);font-size:14px;line-height:1.18;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .patient-op-card>small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .patient-op-card.attention{border-color:color-mix(in srgb,var(--warning) 45%,var(--ui-border));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--warning) 9%,var(--surface)))} .patient-op-card.danger{border-color:color-mix(in srgb,var(--danger) 48%,var(--ui-border));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--danger) 9%,var(--surface)))} .patient-op-card.ok{border-color:color-mix(in srgb,var(--success) 36%,var(--ui-border))} .patient-op-card.compact>strong{font-size:22px;color:var(--primary)} .patient-clinical-alert{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:start;margin:7px 0 0;padding:11px 13px;border:1px solid color-mix(in srgb,var(--danger) 42%,var(--ui-border));border-radius:16px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--text)} .patient-clinical-alert>span{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--danger);color:#fff;font-weight:750} .patient-clinical-alert strong{display:block;font-size:12px;color:var(--danger)} .patient-clinical-alert p{margin:3px 0 0;font-size:11px;line-height:1.45;color:var(--text)} .patient-quick-actions{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(0,3fr);gap:13px;align-items:center;margin:12px 0 14px;padding:13px;border:1px solid var(--ui-border,var(--border));border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--ui-tint));box-shadow:var(--ui-shadow-sm,var(--shadow))} .patient-quick-title span{display:block;color:var(--primary);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .patient-quick-title strong{display:block;margin-top:4px;color:var(--text);font-size:12px;line-height:1.35} .patient-quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} .patient-quick-action{appearance:none;min-width:0;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--ui-border,var(--border));border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:.16s ease} .patient-quick-action:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 45%,var(--ui-border));box-shadow:var(--ui-shadow-xs,var(--shadow))} .patient-quick-action>.ui-icon{flex:0 0 auto;width:19px;height:19px;color:var(--primary)} .patient-quick-action span{min-width:0} .patient-quick-action strong{display:block;font-size:11px;white-space:nowrap} .patient-quick-action small{display:block;margin-top:2px;color:var(--muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .patient-quick-action.primary{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff} .patient-quick-action.primary>.ui-icon,.patient-quick-action.primary small{color:#fff} :root[data-theme="dark"] .patient-operational-metrics{background:var(--bg)} :root[data-theme="dark"] .patient-op-card,:root[data-theme="dark"] .patient-quick-actions,:root[data-theme="dark"] .patient-quick-action{background:linear-gradient(145deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)} @media(max-width:1180px){ .patient-operational-metrics{grid-template-columns:repeat(3,minmax(0,1fr))} .patient-quick-actions{grid-template-columns:1fr} } @media(max-width:880px){ .patient-hero-compact .patient-hero-main{grid-template-columns:auto minmax(0,1fr);gap:13px;padding:16px} .patient-hero-compact .record-photo{width:70px;height:70px} .patient-hero-compact .record-identity h1{font-size:19px} .patient-hero-compact .record-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px} .patient-hero-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:10px} .patient-chat-btn,.patient-edit-profile{width:100%;justify-content:center} .patient-operational-metrics{position:static;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;background:transparent} .patient-op-card{padding:10px 11px;min-height:82px} .patient-op-card>strong{font-size:12.5px} .patient-op-card.compact>strong{font-size:20px} .patient-quick-grid{grid-template-columns:repeat(5,minmax(116px,1fr));overflow-x:auto;padding:1px 1px 5px;scrollbar-width:none} .patient-quick-grid::-webkit-scrollbar{display:none} .patient-quick-action{min-width:116px} } @media(max-width:520px){ .patient-hero-compact .record-meta{grid-template-columns:1fr} .patient-operational-strip{margin-top:10px} .patient-operational-metrics{gap:7px} .patient-op-card{border-radius:14px;min-height:78px} .patient-op-card>span{font-size:8.5px} .patient-op-card>small{font-size:9.5px} .patient-quick-actions{padding:11px;border-radius:17px} .patient-quick-title strong{font-size:11px} } /* V42 · Restaura alertas médicas prominentes en encabezado del expediente */ .patient-hero-alert-only{grid-template-columns:1fr!important} .patient-hero-alert-only .patient-insight{min-height:58px;align-items:center} .patient-hero-alert-only .patient-insight.alert{background:linear-gradient(90deg,rgba(108,77,0,.42),rgba(57,41,0,.20));box-shadow:inset 5px 0 0 #ffe777} .patient-hero-alert-only .patient-insight.alert .patient-insight-icon{width:34px;height:34px;background:#ffe777;color:#5b4b00;font-size:16px;font-weight:800;box-shadow:0 5px 14px rgba(0,0,0,.14)} .patient-hero-alert-only .patient-insight.alert strong{color:#fff6c8;font-size:13px} .patient-hero-alert-only .patient-insight.alert small{color:#fff;white-space:normal;overflow:visible;text-overflow:clip;font-size:12px;font-weight:600;line-height:1.45} .patient-hero-alert-only .patient-insight.ok{background:rgba(3,25,42,.16)} .patient-operational-metrics{grid-template-columns:repeat(5,minmax(0,1fr))} @media(max-width:980px){.patient-operational-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.patient-operational-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.patient-hero-alert-only .patient-insight{padding:12px 14px}.patient-hero-alert-only .patient-insight.alert small{font-size:11.5px}} /* ========================================================== Agenda V44 · Flujo rápido y disponibilidad inteligente ========================================================== */ .calendar-filter-row-compact{align-items:center;gap:8px!important} .calendar-filter-row-compact .agenda-doctor-filter{min-width:0!important;max-width:290px;gap:7px!important} .calendar-filter-row-compact .agenda-doctor-filter .select{min-width:170px!important;min-height:34px!important;padding:6px 30px 6px 9px!important} .calendar-filter-row-compact .agenda-doctor-filter label{font-size:9px!important} .agenda-quick-create-help{margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap} .agenda-quick-create-canvas{cursor:crosshair} .agenda-quick-create-canvas:hover{background:color-mix(in srgb,var(--primary) 1.6%,var(--surface))} .calendar-timed-event,.calendar-event{cursor:pointer} .calendar-timed-event strong,.app-shell .calendar-event strong{font-weight:650} .calendar-timed-event .calendar-event-treatment,.app-shell .calendar-event .calendar-event-treatment{font-weight:450;opacity:.82} .calendar-timed-event .calendar-event-time,.app-shell .calendar-event .calendar-event-time{font-variant-numeric:tabular-nums;opacity:.94} .app-shell .calendar-event.compact{display:grid;gap:1px;margin-top:4px} .app-shell .calendar-event.compact strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app-shell .calendar-event.compact .calendar-event-time{font-size:8.5px} .app-shell .calendar-event.compact .calendar-event-treatment{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .calendar-month-cell{position:relative;cursor:default} .calendar-month-add-hint{position:absolute;right:7px;top:7px;padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);font-size:8px;font-weight:650;opacity:0;transform:translateY(-2px);transition:.15s ease;pointer-events:none} .calendar-month-cell:hover .calendar-month-add-hint{opacity:1;transform:none} .agenda-color-legend-wrap{margin:0;border-bottom:1px solid var(--ui-border);background:color-mix(in srgb,var(--surface) 97%,var(--bg))} .agenda-color-legend-wrap summary{cursor:pointer;list-style:none;padding:8px 18px;color:var(--muted);font-size:10px;font-weight:600} .agenda-color-legend-wrap summary::-webkit-details-marker{display:none} .agenda-color-legend-wrap summary:after{content:'›';display:inline-block;margin-left:7px;transition:.15s ease} .agenda-color-legend-wrap[open] summary:after{transform:rotate(90deg)} .agenda-color-legend-wrap .agenda-color-legend{margin:0;padding:0 18px 10px;border:0;background:transparent} .wizard-availability-shortcuts{display:flex;gap:8px;align-items:center;margin:0 0 12px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:none} .wizard-availability-shortcuts::-webkit-scrollbar{display:none} .wizard-availability-shortcuts button{appearance:none;flex:0 0 auto;border:1px solid var(--ui-border,#dce5ec);border-radius:999px;padding:8px 12px;background:var(--surface,#fff);color:var(--text,#24384a);font-size:11px;font-weight:580;cursor:pointer;transition:.15s ease} .wizard-availability-shortcuts button:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--ui-border));background:var(--ui-tint,#f4f8fb);color:var(--primary)} .wizard-availability-shortcuts button.primary{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 20%,transparent)} .wizard-availability-searching,.wizard-availability-result{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;padding:9px 11px;border-radius:13px;font-size:10.5px;line-height:1.35} .wizard-availability-searching{background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary)} .wizard-availability-searching>span{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--primary) 25%,transparent);border-top-color:var(--primary);border-radius:50%;animation:wizardAvailabilitySpin .8s linear infinite} .wizard-availability-result{background:color-mix(in srgb,var(--success) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 22%,var(--ui-border));color:color-mix(in srgb,var(--success) 75%,var(--text))} @keyframes wizardAvailabilitySpin{to{transform:rotate(360deg)}} .wizard-slot.best:not(.active){border-color:color-mix(in srgb,var(--success) 38%,var(--ui-border));background:color-mix(in srgb,var(--success) 6%,var(--surface))} .wizard-slot small{display:block;margin-top:4px;color:var(--success);font-size:8px;font-weight:650} .wizard-slot.active small{color:rgba(255,255,255,.84)} :root[data-theme="dark"] .agenda-color-legend-wrap,:root[data-theme="dark"] .wizard-availability-shortcuts button{background:#1b2a35;border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .wizard-availability-searching{background:color-mix(in srgb,var(--primary) 18%,#1b2a35)} :root[data-theme="dark"] .wizard-availability-result{background:color-mix(in srgb,var(--success) 13%,#1b2a35)} @media(max-width:880px){ .calendar-filter-row-compact{grid-template-columns:1fr 1fr!important;align-items:end} .calendar-filter-row-compact .agenda-doctor-filter{max-width:none;width:100%} .agenda-quick-create-help{grid-column:1/-1;margin:0;white-space:normal;font-size:9.5px} .agenda-color-legend-wrap summary{padding-inline:12px} .agenda-color-legend-wrap .agenda-color-legend{padding-inline:12px} } @media(max-width:620px){ .calendar-filter-row-compact{grid-template-columns:1fr!important} .agenda-quick-create-help{display:none} .calendar-month-add-hint{opacity:.72;top:6px;right:5px;font-size:7.5px} .wizard-availability-shortcuts{margin-inline:-2px} .wizard-availability-shortcuts button{padding:7px 10px;font-size:10px} .wizard-availability-searching,.wizard-availability-result{font-size:10px} .wizard-slot small{font-size:7.5px} } /* V46 · Configuración guiada */ .config-guide{display:grid;gap:14px} .config-guide-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;padding:24px 26px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--ui-border));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface) 54%,color-mix(in srgb,var(--accent) 8%,var(--surface)));box-shadow:var(--ui-shadow-sm)} .config-progress-ring{width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) var(--config-progress),color-mix(in srgb,var(--primary) 10%,var(--surface)) 0);box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 15%,transparent)} .config-progress-ring>div{width:104px;height:104px;display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ui-border)} .config-progress-ring strong{display:block;color:var(--primary);font-size:27px;line-height:1;font-weight:650;letter-spacing:-.05em} .config-progress-ring span{display:block;margin-top:6px;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em} .config-guide-copy>span{display:block;color:var(--primary);font-size:9px;font-weight:650;letter-spacing:.14em} .config-guide-copy h3{margin:7px 0 8px;color:var(--text);font-size:25px;line-height:1.08;letter-spacing:-.035em} .config-guide-copy p{max-width:760px;margin:0;color:var(--muted);font-size:12.5px;line-height:1.6} .config-guide-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px} .config-guide-summary span{padding:7px 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10.5px} .config-guide-summary b{color:var(--primary)} .config-guide-section{overflow:hidden;border:1px solid var(--ui-border);border-radius:22px;background:var(--surface);box-shadow:var(--ui-shadow-sm)} .config-guide-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ui-border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface))} .config-guide-section-head strong{display:block;color:var(--text);font-size:14px} .config-guide-section-head span:not(.config-guide-checking){display:block;margin-top:3px;color:var(--muted);font-size:11px} .config-guide-checking{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--primary);font-size:10px;font-weight:600} .config-guide-list{display:grid} .config-guide-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 17px;border-bottom:1px solid var(--ui-border)} .config-guide-item:last-child{border-bottom:0} .config-guide-state{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;font-weight:700} .config-guide-state.pending{background:#fff3dd;color:#9a620c;border:1px solid #f3d9a7} .config-guide-item strong{display:block;color:var(--text);font-size:12px} .config-guide-item p{margin:3px 0 0;color:var(--muted);font-size:10.5px;line-height:1.4} .config-guide-item .btn{white-space:nowrap} .config-guide-complete{margin:16px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--success) 28%,var(--ui-border));border-radius:16px;background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success);font-size:12px;font-weight:600} .config-guide-done{border-top:1px solid var(--ui-border)} .config-guide-done summary{cursor:pointer;padding:12px 17px;color:var(--muted);font-size:10.5px;font-weight:600;list-style:none} .config-guide-done summary::-webkit-details-marker{display:none} .config-guide-done summary::after{content:'+';float:right;color:var(--primary);font-size:16px;line-height:12px} .config-guide-done[open] summary::after{content:'−'} .config-guide-done>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 16px} .config-guide-done span{display:grid;grid-template-columns:24px minmax(0,1fr);gap:1px 8px;align-items:center;padding:10px;border:1px solid var(--ui-border);border-radius:13px;background:var(--ui-tint)} .config-guide-done i{grid-row:1/3;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success);font-style:normal;font-size:11px} .config-guide-done b{color:var(--text);font-size:10.5px} .config-guide-done small{color:var(--muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .config-guide-soft-warning{padding:11px 14px;border:1px solid #f2ddb4;border-radius:14px;background:#fff8e9;color:#7a5a20;font-size:11px} :root[data-theme="dark"] .config-guide-hero,:root[data-theme="dark"] .config-guide-section{background:linear-gradient(180deg,#22333f,#1b2a35);border-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .config-progress-ring>div,:root[data-theme="dark"] .config-guide-summary span{background:#1b2a35} :root[data-theme="dark"] .config-guide-section-head{background:linear-gradient(135deg,#20323e,#1b2a35)} :root[data-theme="dark"] .config-guide-state.pending{background:#4a391c;border-color:#68502a;color:#ffd98d} :root[data-theme="dark"] .config-guide-soft-warning{background:#3c321f;border-color:#5f4b28;color:#f5d89a} @media(max-width:800px){.config-guide-hero{grid-template-columns:112px minmax(0,1fr);gap:16px;padding:19px}.config-progress-ring{width:104px;height:104px}.config-progress-ring>div{width:80px;height:80px}.config-progress-ring strong{font-size:23px}.config-guide-copy h3{font-size:21px}.config-guide-done>div{grid-template-columns:1fr}} @media(max-width:620px){.config-guide-hero{grid-template-columns:1fr;text-align:center;padding:17px}.config-progress-ring{margin:auto}.config-guide-copy p{font-size:11.5px}.config-guide-summary{justify-content:center}.config-guide-section-head{align-items:flex-start;padding:14px}.config-guide-checking{display:none}.config-guide-item{grid-template-columns:30px minmax(0,1fr);padding:13px}.config-guide-item .btn{grid-column:1/-1;width:100%;margin-top:2px}.config-guide-state{width:28px;height:28px}.config-guide-done>div{padding:0 12px 12px}} /* V47 · Centro de notificaciones operativo */ .notification-anchor{position:relative;display:flex;align-items:center} .notification-bell{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ui-border,var(--line));border-radius:14px;background:var(--surface);color:var(--muted);cursor:pointer;transition:.18s ease} .notification-bell:hover,.notification-bell.has-unread{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 28%,var(--ui-border,var(--line)));background:color-mix(in srgb,var(--primary) 7%,var(--surface))} .notification-bell .ui-icon{width:20px;height:20px} .notification-count{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--surface);border-radius:999px;background:#e53935;color:#fff;font-size:9px;font-weight:800;line-height:1;box-shadow:0 5px 12px rgba(183,28,28,.22)} .notification-popover{position:absolute;right:-78px;top:calc(100% + 12px);z-index:120;width:min(430px,calc(100vw - 28px));max-height:min(72vh,660px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ui-border,var(--line));border-radius:24px;background:var(--surface);box-shadow:0 28px 70px rgba(9,31,50,.22)} .notification-popover:before{content:"";position:absolute;right:94px;top:-7px;width:13px;height:13px;transform:rotate(45deg);background:var(--surface);border-left:1px solid var(--ui-border,var(--line));border-top:1px solid var(--ui-border,var(--line))} .notification-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px 12px;border-bottom:1px solid var(--ui-border,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))} .notification-popover-head>div{min-width:0}.notification-popover-head strong{display:block;color:var(--text);font-size:16px}.notification-popover-head span{display:block;margin-top:3px;color:var(--muted);font-size:11px}.notification-close{width:34px;height:34px;font-size:20px} .notification-popover-tools{display:flex;justify-content:flex-end;padding:9px 13px;border-bottom:1px solid var(--ui-border,var(--line));background:var(--ui-tint,var(--surface))} .notification-list{overflow-y:auto;overscroll-behavior:contain;padding:7px} .notification-item{position:relative;width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 10px;gap:10px;align-items:start;padding:12px;border:0;border-bottom:1px solid color-mix(in srgb,var(--ui-border,var(--line)) 72%,transparent);border-radius:15px;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:.15s ease} .notification-item:last-child{border-bottom:0}.notification-item:hover{background:var(--ui-tint,var(--surface))}.notification-item.is-read{opacity:.68}.notification-item.is-unread{background:color-mix(in srgb,var(--primary) 4%,var(--surface))} .notification-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)} .notification-icon .ui-icon{width:20px;height:20px}.notification-item.tone-danger .notification-icon{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.notification-item.tone-warning .notification-icon{background:color-mix(in srgb,#f59e0b 14%,var(--surface));color:#9a5b00}.notification-item.tone-success .notification-icon{background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)} .notification-copy{min-width:0}.notification-copy strong{display:block;font-size:12.5px;line-height:1.3}.notification-copy>span{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.4}.notification-copy small{display:block;margin-top:6px;color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:10px} .notification-unread-dot{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#e53935;box-shadow:0 0 0 4px rgba(229,57,53,.09)} .notification-empty{display:grid;gap:5px;place-items:center;padding:30px 20px;text-align:center;color:var(--muted);font-size:12px}.notification-empty strong{color:var(--text);font-size:14px}.notification-empty.warning{color:var(--warning)} .notification-popover-foot{padding:10px 14px;border-top:1px solid var(--ui-border,var(--line));background:var(--ui-tint,var(--surface));color:var(--muted);font-size:10px;line-height:1.4} :root[data-theme="dark"] .notification-popover{background:#1d2d38;border-color:rgba(255,255,255,.09)}:root[data-theme="dark"] .notification-popover:before{background:#1d2d38;border-color:rgba(255,255,255,.09)}:root[data-theme="dark"] .notification-bell{background:#22333f;border-color:rgba(255,255,255,.09)} @media(max-width:880px){.notification-popover{position:fixed;left:12px;right:12px;top:82px;width:auto;max-height:calc(100vh - 170px);border-radius:22px}.notification-popover:before{display:none}.notification-bell{width:36px;height:36px;border-radius:12px}.notification-count{right:-5px;top:-7px}.notification-popover-head{padding:14px}.notification-list{padding:6px}.notification-item{grid-template-columns:38px minmax(0,1fr) 9px;padding:11px 9px}.notification-icon{width:36px;height:36px;border-radius:12px}} @media(max-width:430px){.notification-popover{left:7px;right:7px;top:76px;max-height:calc(100vh - 158px)}.notification-popover-tools .btn{width:100%}.notification-copy>span{font-size:11px}.notification-popover-foot{display:none}} /* V48 hotfix: menú de acciones en Expedientes sin recorte dentro del contenedor */ .patient-directory, .patient-directory .card-body, .patient-directory .table-wrap, .patient-directory table, .patient-directory tbody, .patient-directory tr, .patient-directory td{ overflow:visible!important; } .patient-directory .table-wrap{ position:relative; } .patient-directory td:last-child{ position:relative; } .patient-directory .row-action-menu{ position:relative; isolation:isolate; } .patient-directory .row-action-popover{ top:50%!important; bottom:auto!important; right:calc(100% + 10px)!important; left:auto!important; transform:translateY(-50%); z-index:5000!important; min-width:230px; } .patient-directory .row-action-popover.menu-open-up{ top:auto!important; bottom:0!important; transform:none; } .patient-directory .row-action-popover.menu-open-left{ right:calc(100% + 10px)!important; left:auto!important; } @media(max-width:760px){ .patient-directory .row-action-popover{ position:fixed!important; top:auto!important; bottom:calc(86px + env(safe-area-inset-bottom))!important; right:12px!important; left:auto!important; width:min(260px, calc(100vw - 24px))!important; min-width:0!important; max-width:calc(100vw - 24px)!important; transform:none!important; } .patient-directory .row-action-popover.menu-open-up, .patient-directory .row-action-popover.menu-open-left{ top:auto!important; bottom:calc(86px + env(safe-area-inset-bottom))!important; right:12px!important; left:auto!important; transform:none!important; } } /* V51 · Expedientes móvil: la página no se ensancha; solo la tabla se desplaza */ .patient-table-mobile-hint{display:none} @media(max-width:760px){ .patient-directory{ width:100%; max-width:100%; min-width:0; overflow:hidden!important; } .patient-directory .patient-directory-head, .patient-directory .card-body, .patient-directory .patient-toolbar, .patient-directory .patient-toolbar .field{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .patient-directory .card-body{ overflow:hidden!important; } .patient-directory .patient-toolbar{ overflow:hidden; } .patient-directory .table-wrap{ display:block; width:100%; max-width:100%; min-width:0; margin:0!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y; scrollbar-width:thin; } .patient-directory .table-wrap table{ width:max-content!important; min-width:720px!important; max-width:none!important; } .patient-directory .table-wrap thead, .patient-directory .table-wrap tbody, .patient-directory .table-wrap tr, .patient-directory .table-wrap td, .patient-directory .table-wrap th{ max-width:none; } .patient-table-mobile-hint{ display:flex; align-items:center; justify-content:center; width:100%; margin:2px 0 8px; padding:6px 9px; border-radius:10px; background:var(--ui-tint,var(--primary-soft)); color:var(--muted); font-size:10px; font-weight:600; text-align:center; } } /* V52 · Presupuestos y planes de tratamiento con flujo claro */ .treatment-flow-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px} .treatment-flow-summary article{padding:14px 16px;border:1px solid var(--ui-border,var(--border));border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--ui-tint));box-shadow:var(--ui-shadow-xs,var(--shadow))} .treatment-flow-summary span,.treatment-flow-summary small{display:block;color:var(--muted)} .treatment-flow-summary span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em} .treatment-flow-summary strong{display:block;margin:6px 0 3px;color:var(--text);font-size:25px;line-height:1} .treatment-flow-summary small{font-size:10.5px;line-height:1.35} .treatment-concept-notice{margin-bottom:14px} .treatment-flow-list{display:grid;gap:14px;margin-top:14px} .treatment-flow-card{position:relative;overflow:hidden;padding:17px;border:1px solid var(--ui-border,var(--border));border-radius:22px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 3%,var(--surface)));box-shadow:var(--ui-shadow-sm,var(--shadow))} .treatment-flow-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--muted)} .treatment-flow-card.status-budget::before{background:#d99b22}.treatment-flow-card.status-accepted::before{background:#2f6bff}.treatment-flow-card.status-in-treatment::before{background:#8b5cf6}.treatment-flow-card.status-completed::before{background:#19956f}.treatment-flow-card.status-not-accepted::before{background:#94a3b8} .treatment-flow-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px} .treatment-flow-card-head>div{display:flex;align-items:center;gap:8px;min-width:0}.treatment-flow-card-head>div small,.treatment-flow-card-head>span{color:var(--muted);font-size:10.5px} .treatment-workflow-badge{display:inline-flex;align-items:center;min-height:27px;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap} .treatment-workflow-badge.budget{background:#fff3d6;color:#8a5a00}.treatment-workflow-badge.accepted{background:#e8f0ff;color:#2458d3}.treatment-workflow-badge.in-treatment{background:#f0eaff;color:#6b44c7}.treatment-workflow-badge.completed{background:#e5f7ef;color:#137153}.treatment-workflow-badge.not-accepted{background:#edf1f4;color:#657584} .treatment-flow-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.treatment-flow-title>div{min-width:0}.treatment-flow-title>div>span{color:var(--primary);font-size:10px;font-weight:700;letter-spacing:.07em}.treatment-flow-title h3{margin:3px 0 4px;font-size:18px;letter-spacing:-.025em}.treatment-flow-title p{margin:0;color:var(--muted);font-size:11px}.treatment-flow-title>strong{color:var(--text);font-size:16px;white-space:nowrap} .treatment-flow-progress,.treatment-detail-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.treatment-progress-block{padding:11px 12px;border:1px solid var(--ui-border,var(--border));border-radius:15px;background:var(--ui-tint,var(--primary-soft))}.treatment-progress-block.muted{background:color-mix(in srgb,var(--surface) 94%,var(--bg))}.treatment-progress-block>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}.treatment-progress-block span{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.055em;font-weight:650}.treatment-progress-block strong{font-size:11.5px;text-align:right}.treatment-progress-block small{display:block;margin-top:6px;color:var(--muted);font-size:9.5px;line-height:1.35}.treatment-progress-track{height:7px;margin-top:8px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 78%,var(--surface))}.treatment-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent))}.treatment-progress-track.clinical i{background:linear-gradient(90deg,#8b5cf6,#2f89a8)} .treatment-flow-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ui-border,var(--border))}.treatment-flow-actions .btn{min-height:34px} .treatment-detail-status{display:flex;align-items:center;gap:11px;margin-bottom:12px;padding:13px 14px;border:1px solid var(--ui-border,var(--border));border-radius:17px;background:var(--ui-tint,var(--primary-soft))}.treatment-detail-status>div{min-width:0}.treatment-detail-status strong,.treatment-detail-status small{display:block}.treatment-detail-status strong{font-size:12px}.treatment-detail-status small{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.35}.treatment-detail-progress{margin:14px 0}.treatment-item-actions{display:flex;flex-wrap:wrap;gap:5px;min-width:220px}.treatment-item-actions .btn{padding:6px 8px;font-size:9.5px} :root[data-theme="dark"] .treatment-flow-card,:root[data-theme="dark"] .treatment-flow-summary article{background:linear-gradient(145deg,#22333f,#1b2a35)} @media(max-width:900px){.treatment-flow-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.treatment-flow-progress,.treatment-detail-progress{grid-template-columns:1fr}} @media(max-width:620px){.treatment-flow-summary{gap:8px}.treatment-flow-summary article{padding:11px 12px;border-radius:15px}.treatment-flow-summary strong{font-size:21px}.treatment-flow-card{padding:14px;border-radius:18px}.treatment-flow-card-head{align-items:flex-start}.treatment-flow-card-head>div{display:grid;gap:4px}.treatment-flow-title{display:grid;gap:8px}.treatment-flow-title>strong{font-size:14px;white-space:normal}.treatment-flow-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.treatment-flow-actions .btn{width:100%;min-width:0}.treatment-detail-status{align-items:flex-start}.treatment-item-actions{min-width:190px}.treatment-progress-block>div:first-child{align-items:flex-start}.treatment-progress-block strong{max-width:58%;font-size:10.5px}.treatment-detail-progress{grid-template-columns:1fr}} /* V54 · Fase 10 — Auditoría integral de experiencia móvil */ @media(max-width:880px){ .app-shell, .app-shell .main, .app-shell .content{ width:100%; max-width:100%; min-width:0; overflow-x:hidden; box-sizing:border-box; } .app-shell .content>*{ max-width:100%; min-width:0; box-sizing:border-box; } .app-shell .card, .app-shell .section-box, .app-shell .patient-directory, .app-shell .calendar-shell, .app-shell .report-panel, .app-shell .report-filter-card, .app-shell .cash-module, .app-shell .reception-module, .app-shell .config-guide, .app-shell .settings-content{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .app-shell img, .app-shell video, .app-shell canvas, .app-shell svg{ max-width:100%; } .app-shell .field, .app-shell .input, .app-shell .select, .app-shell .textarea, .app-shell .phone-picker, .app-shell .phone-picker>*{ min-width:0; max-width:100%; box-sizing:border-box; } .app-shell .input, .app-shell .select, .app-shell .textarea{ width:100%; } .app-shell .table-wrap{ display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; } .app-shell .table-wrap table{ max-width:none; } .app-shell .btn, .app-shell .icon-btn, .app-shell button, .app-shell summary{ touch-action:manipulation; } .app-shell .btn:not(.btn-small), .app-shell .icon-btn{ min-height:40px; } /* Encabezado principal */ .app-shell .topbar{ width:calc(100% - 20px); max-width:calc(100% - 20px); box-sizing:border-box; } .app-shell .topbar-left, .app-shell .topbar-actions, .app-shell .user-chip, .app-shell .topbar-context{ min-width:0; } .app-shell .page-header, .app-shell .page-title, .app-shell .header-actions{ min-width:0; max-width:100%; } .app-shell .header-actions{ overflow:hidden; } .app-shell .header-actions .btn, .app-shell .header-actions .google-calendar-brand-btn{ min-width:0; max-width:100%; overflow:hidden; } .app-shell .header-actions .google-calendar-brand-copy{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Agenda: solo el calendario se desplaza */ .app-shell .calendar-shell{ overflow:hidden; } .app-shell .calendar-toolbar, .app-shell .calendar-filter-row{ max-width:100%; min-width:0; } .app-shell .calendar-time-scroll, .app-shell .calendar-month-view{ width:100%; max-width:100%; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .app-shell .calendar-toolbar .actions{ min-width:0; max-width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; } .app-shell .calendar-toolbar .actions>*{ flex:0 0 auto; } .app-shell .calendar-filter-row .agenda-doctor-filter{ max-width:100%; min-width:0; } .app-shell .calendar-foot-note{ overflow-wrap:anywhere; } /* Expedientes */ .app-shell .patient-directory .table-wrap{ overflow-x:auto!important; overflow-y:hidden!important; } .app-shell .patient-directory .patient-toolbar{ max-width:100%; min-width:0; } /* Caja */ .app-shell .cash-module, .app-shell .cash-wizard-panel, .app-shell .cash-register-panel, .app-shell .cash-closing, .app-shell .cash-receivables, .app-shell .cash-reports{ min-width:0; max-width:100%; } .app-shell .cash-tools-bar, .app-shell .cash-payment-presets, .app-shell .cash-total-preview, .app-shell .cash-payment-row, .app-shell .cash-payment-main, .app-shell .cash-payment-details-grid{ max-width:100%; min-width:0; } /* Recepción: tablero horizontal aislado */ .app-shell .reception-flow-module{ overflow:hidden; } .app-shell .reception-flow-head, .app-shell .reception-flow-board{ width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .app-shell .reception-flow-toolbar{ max-width:100%; min-width:0; } /* Reportes */ .app-shell .reports-subnav, .app-shell .report-presets, .app-shell .report-metrics-grid, .app-shell .commission-summary{ max-width:100%; min-width:0; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .app-shell .report-grid, .app-shell .report-panel, .app-shell .report-chart-shell{ min-width:0; max-width:100%; } .app-shell .report-line-chart{ min-width:520px; } .app-shell .report-chart-shell{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Almacén */ .app-shell .inventory-tabs, .app-shell .inventory-summary-grid, .app-shell .inventory-shopping-status, .app-shell .purchase-actions{ max-width:100%; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .app-shell .inventory-filter-bar, .app-shell .inventory-report-grid, .app-shell .inventory-detail-hero, .app-shell .purchase-section-card{ min-width:0; max-width:100%; } /* Control sanitario */ .app-shell .sanitary-section-grid, .app-shell .sanitary-filter-bar, .app-shell .sanitary-section-card, .app-shell .sanitary-signature-view{ min-width:0; max-width:100%; } .app-shell .sanitary-section-card>div:nth-child(2){ min-width:0; } .app-shell .sanitary-section-card p, .app-shell .sanitary-section-card strong{ overflow-wrap:anywhere; } /* Configuración */ .app-shell .settings-layout-v16, .app-shell .settings-content, .app-shell .config-guide-hero, .app-shell .config-guide-section, .app-shell .doctor-clinic-schedule-card, .app-shell .clinic-settings-card-v21{ min-width:0; max-width:100%; } .app-shell .settings-nav-v16{ max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; } /* Modales y formularios: footer deja de cubrir campos */ .modal-backdrop{ overflow:hidden; } .modal{ width:min(96vw,760px); max-width:96vw; max-height:96dvh; min-width:0; display:flex; flex-direction:column; overflow:hidden; } .modal-header, .modal-footer{ flex:0 0 auto; } .modal-body{ flex:1 1 auto; min-height:0; max-height:none!important; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:24px!important; scroll-padding-bottom:24px; } .modal-footer{ position:relative!important; bottom:auto!important; z-index:3; padding-bottom:calc(14px + env(safe-area-inset-bottom))!important; } .modal-body .form-grid, .modal-body .field, .modal-body .section-box, .modal-body .detail-grid, .modal-body .asset-grid{ min-width:0; max-width:100%; } } @media(max-width:620px){ .app-shell .content{ padding-left:10px; padding-right:10px; } .app-shell .page-header{ width:100%; } .app-shell .header-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .app-shell .header-actions .btn, .app-shell .header-actions .google-calendar-brand-btn{ min-height:40px; padding:8px 9px; font-size:10.5px; } /* Dashboard compacto sin perder tactilidad */ .app-shell .dashboard-hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .app-shell .dashboard-quick-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } .app-shell .dashboard-row-actions{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .app-shell .dashboard-row-actions .btn, .app-shell .dashboard-row-actions a{ width:100%; min-width:0; justify-content:center; } /* Agenda */ .app-shell .calendar-toolbar{ gap:7px; } .app-shell .calendar-filter-row, .app-shell .calendar-filter-row-compact{ grid-template-columns:1fr!important; } .app-shell .calendar-toolbar .segmented{ max-width:100%; overflow-x:auto; } .app-shell .calendar-foot-note{ padding:10px 12px; font-size:10px; } /* Caja */ .app-shell .cash-summary-grid-simple{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .app-shell .cash-tools-bar{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .app-shell .cash-tools-bar .btn{ width:100%; min-width:0; justify-content:center; } .app-shell .cash-wizard-stepper{ max-width:100%; overflow-x:auto; padding-bottom:12px; } .app-shell .cash-total-preview{ grid-template-columns:1fr 1fr; } .app-shell .cash-payment-presets{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* Recepción */ .app-shell .reception-flow-board{ scroll-snap-type:x mandatory; } .app-shell .reception-flow-column{ flex:0 0 min(86vw,300px); } .app-shell .reception-flow-head{ padding-bottom:8px; scroll-snap-type:x proximity; } /* Reportes */ .app-shell .report-filter-grid{ grid-template-columns:1fr!important; } .app-shell .report-filter-grid>.btn{ width:100%; } .app-shell .report-panel-head{ align-items:flex-start; flex-direction:column; } .app-shell .report-panel-head>strong{ align-self:flex-start; } .app-shell .report-metrics-grid, .app-shell .commission-summary{ display:flex!important; overflow-x:auto!important; gap:9px; } .app-shell .report-metric{ flex:0 0 min(78vw,230px); } /* Almacén */ .app-shell .inventory-filter-bar{ grid-template-columns:1fr!important; } .app-shell .inventory-summary-grid{ display:flex!important; overflow-x:auto!important; gap:8px; } .app-shell .inventory-metric{ flex:0 0 min(62vw,190px); } .app-shell .inventory-actions{ max-width:100%; overflow-x:auto; flex-wrap:nowrap; } /* Control sanitario */ .app-shell .sanitary-section-card{ grid-template-columns:44px minmax(0,1fr)!important; gap:10px; } .app-shell .sanitary-section-card .btn{ grid-column:1/-1; width:100%; } .app-shell .sanitary-filter-bar{ grid-template-columns:1fr!important; } /* Configuración */ .app-shell .config-guide-item{ grid-template-columns:30px minmax(0,1fr); } .app-shell .config-guide-item .btn{ grid-column:1/-1; width:100%; } .app-shell .doctor-clinic-schedule-head, .app-shell .clinic-settings-card-v21{ min-width:0; } .app-shell .schedule-row{ min-width:0; } /* Modales tipo hoja inferior */ .modal{ width:100vw; max-width:100vw; max-height:96dvh; border-radius:24px 24px 0 0!important; } .modal-header{ padding:14px 14px 12px!important; } .modal-body{ padding:14px 14px 22px!important; } .modal-footer{ display:grid!important; grid-template-columns:1fr; gap:8px!important; padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important; } .modal-footer .btn{ width:100%; min-height:44px; } .appointment-wizard-modal .modal-body{ padding:0 14px 22px!important; } .appointment-wizard-modal .modal-footer{ display:grid!important; } .wizard-date-time-layout, .wizard-review-grid{ grid-template-columns:1fr!important; } .wizard-treatment-card{ grid-template-columns:16px minmax(0,1fr); } .wizard-treatment-card>strong{ grid-column:2; justify-self:start; } } @media(max-width:390px){ .app-shell .header-actions{ grid-template-columns:1fr; } .app-shell .cash-tools-bar{ grid-template-columns:1fr; } .app-shell .dashboard-row-actions{ grid-template-columns:1fr; } .app-shell .cash-total-preview{ grid-template-columns:1fr; } } /* V56 · Footer legal dentro de la aplicación */ .app-legal-footer{ width:min(100% - 60px,1680px); margin:0 auto 24px; padding:20px 4px 6px; border-top:1px solid var(--ui-border,var(--border)); color:var(--muted); text-align:center; } .app-legal-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px} .app-legal-links a{color:var(--muted);font-size:11px;font-weight:550;text-decoration:none;transition:color .16s ease} .app-legal-links a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px} .app-legal-copy{font-size:11px;line-height:1.5;color:var(--muted)} :root[data-theme="dark"] .app-legal-footer{border-top-color:rgba(255,255,255,.08)} @media(max-width:1120px){.app-legal-footer{width:calc(100% - 44px)}} @media(max-width:880px){ .app-legal-footer{ width:calc(100% - 28px); margin:0 auto calc(104px + env(safe-area-inset-bottom)); padding:18px 0 0; } .app-legal-links{gap:8px 14px;margin-bottom:11px} .app-legal-links a{font-size:10.5px} .app-legal-copy{font-size:10.5px} } @media(max-width:520px){ .app-legal-footer{width:calc(100% - 20px)} .app-legal-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px} .app-legal-links a{padding:3px 0;text-align:center} .app-legal-copy{max-width:310px;margin:0 auto} } /* Laboratorio Dental · Fase 1 */ .lab-control-card{margin-top:16px;padding:16px;border:1px solid var(--ui-border,var(--border));border-radius:24px;background:var(--surface);box-shadow:var(--ui-shadow-sm,var(--shadow));min-width:0} .lab-control-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.lab-control-head h3{margin:0;font-size:18px}.lab-control-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.lab-filter-bar{margin-bottom:14px} .lab-flow-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 12px;min-width:0}.lab-flow-column{scroll-snap-align:start;min-width:260px;border:1px solid var(--ui-border,var(--border));border-radius:19px;background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);overflow:hidden}.lab-flow-column>header{padding:11px 12px;border-bottom:1px solid var(--ui-border,var(--border));background:var(--ui-tint,var(--primary-soft))}.lab-flow-column>header>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.lab-flow-column>header span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--primary)}.lab-flow-column>header strong{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:var(--surface);color:var(--primary);font-size:11px}.lab-flow-list{display:grid;gap:10px;padding:10px;min-height:180px}.lab-flow-empty{display:grid;place-items:center;min-height:120px;padding:18px;border:1px dashed var(--ui-border,var(--border));border-radius:14px;color:var(--muted);font-size:11px;text-align:center} .lab-flow-card{display:grid;gap:10px;padding:12px;border:1px solid var(--ui-border,var(--border));border-radius:16px;background:var(--surface);box-shadow:var(--ui-shadow-xs,var(--shadow))}.lab-flow-card.is-warning{border-color:color-mix(in srgb,#d97706 35%,var(--border))}.lab-flow-card.is-danger{border-color:color-mix(in srgb,#dc2626 38%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,#dc2626 7%,transparent)}.lab-flow-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.lab-flow-card-head>div{min-width:0}.lab-flow-card-head span:first-child{display:block;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.06em}.lab-flow-card-head strong{display:block;margin-top:3px;color:var(--text);font-size:13px;line-height:1.2}.lab-flow-work strong{display:block;color:var(--primary);font-size:12px}.lab-flow-work span{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}.lab-flow-meta{display:grid;gap:4px}.lab-flow-meta span{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9.5px}.lab-flow-meta b{max-width:64%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}.lab-due-chip{display:inline-flex;width:max-content;max-width:100%;padding:5px 8px;border-radius:999px;background:var(--ui-tint,var(--primary-soft));color:var(--muted);font-size:9px;font-weight:700}.lab-due-chip.warning{background:#fff3d7;color:#8a5a00}.lab-due-chip.danger{background:#ffe7e7;color:#a52b2b}.lab-flow-actions{display:grid;grid-template-columns:1fr auto;gap:7px}.lab-flow-actions .btn{min-width:0;padding:8px 9px;font-size:10px}.lab-flow-actions .btn-primary{width:100%} .lab-wizard{display:grid;gap:16px}.lab-wizard-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.lab-wizard-step{display:flex;align-items:center;gap:7px;min-width:0;padding:8px;border:1px solid var(--ui-border,var(--border));border-radius:13px;background:var(--surface);color:var(--muted)}.lab-wizard-step span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--ui-tint,var(--primary-soft));font-size:10px;font-weight:700}.lab-wizard-step b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.lab-wizard-step.active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:var(--ui-tint,var(--primary-soft));color:var(--primary)}.lab-wizard-step.active span,.lab-wizard-step.done span{background:var(--primary);color:#fff}.lab-wizard-pane{display:none}.lab-wizard-pane.active{display:block}.lab-patient-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--ui-border,var(--border));border-radius:15px;background:var(--ui-tint,var(--primary-soft))}.lab-patient-summary strong,.lab-patient-summary span{display:block}.lab-patient-summary span{margin-top:4px;color:var(--muted);font-size:11px}.lab-optional-economics,.lab-detail-economics{margin-top:14px;border:1px solid var(--ui-border,var(--border));border-radius:16px;background:var(--surface)}.lab-optional-economics summary,.lab-detail-economics summary{cursor:pointer;padding:12px 14px;color:var(--primary);font-size:11px;font-weight:700}.lab-optional-economics>div,.lab-detail-economics>div{margin:0 14px 14px} .lab-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:14px 16px;border:1px solid var(--ui-border,var(--border));border-radius:18px;background:linear-gradient(135deg,var(--ui-tint,var(--primary-soft)),var(--surface))}.lab-detail-hero h2{margin:7px 0 4px;color:var(--text);font-size:20px}.lab-detail-hero p{margin:0;color:var(--muted);font-size:11px}.lab-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:14px}.lab-timeline-step{position:relative;display:flex;gap:7px;align-items:center;padding:9px;border:1px solid var(--ui-border,var(--border));border-radius:13px;background:var(--surface);min-width:0}.lab-timeline-step i{display:grid;place-items:center;width:23px;height:23px;flex:0 0 auto;border-radius:50%;background:var(--ui-tint,var(--primary-soft));color:var(--muted);font-style:normal;font-size:9px}.lab-timeline-step strong,.lab-timeline-step span{display:block}.lab-timeline-step strong{font-size:9.5px}.lab-timeline-step span{margin-top:2px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lab-timeline-step.done{border-color:color-mix(in srgb,var(--success) 24%,var(--border))}.lab-timeline-step.done i{background:var(--success);color:#fff}.lab-timeline-step.current{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent);border-color:var(--primary)} @media(max-width:980px){.lab-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.lab-control-head{align-items:flex-start;flex-direction:column}.lab-flow-board{grid-auto-columns:minmax(255px,82vw)}.lab-timeline{display:flex;overflow-x:auto}.lab-timeline-step{min-width:150px}.lab-wizard-progress{display:flex;overflow-x:auto}.lab-wizard-step{min-width:145px}} @media(max-width:620px){.lab-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-control-card{padding:11px;border-radius:18px}.lab-control-head .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.lab-control-head .actions .btn{width:100%}.lab-flow-board{grid-auto-columns:minmax(245px,88vw)}.lab-flow-actions{grid-template-columns:1fr}.lab-flow-actions .btn{width:100%}.lab-detail-hero{display:grid}.lab-detail-hero .lab-due-chip{justify-self:start}.lab-wizard-step b{font-size:9.5px}.lab-wizard-pane .form-grid{grid-template-columns:1fr}.lab-tooth-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.lab-tooth{flex:0 0 auto}} .lab-summary-grid{grid-template-columns:repeat(4,minmax(145px,1fr))}