/* ===================================================================== SIGO — sistema de diseño Paleta porcelana / tinta-teal / turquesa (ver ADR-016 addendum, 2026-08-06 — reemplaza la paleta original tinta-navy/oro). Tipografía Outfit (títulos y UI, pesos 400/500/700, vía Google Fonts) + mono (cifras: horas, montos, DNI). Ver el mockup aprobado en la conversación de UX (2026-08-04) para el criterio visual original, y el ADR-016 addendum para el cambio de paleta/tipografía posterior. Este archivo se carga DESPUÉS de bootstrap.min.css: reemplaza los colores/tipografía por defecto de Bootstrap para que toda la app (aun las páginas que siguen usando clases .btn/.table/.form-control) herede la nueva identidad sin tener que reescribir cada página de una vez. ===================================================================== */ :root { --ink: #264b54; --ink-soft: #305d68; --porcelain: #f5f2ec; --porcelain-dim: #eae5db; --line: #ddd6c7; --gold: #37a2a3; --gold-bright: #4eb8b4; --text: #17262b; --text-dim: #5c6b6d; --card: #ffffff; --good: #4f7d5c; --good-bg: #e7efe4; --warn: #b3792f; --warn-bg: #f5ead4; --bad: #a8503f; --bad-bg: #f5e1dc; --info: #7a6a3e; --info-bg: #efe7d1; --shadow: 0 1px 2px rgba(18, 36, 43, 0.06), 0 8px 24px -12px rgba(18, 36, 43, 0.18); --radius-s: 7px; --radius-m: 12px; --radius-l: 20px; --serif: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace; /* Bootstrap 5.3 lee estas variables en casi todos sus componentes (form-control, form-control:focus, tablas, etc.) pero solo sirve su valor claro salvo que se active [data-bs-theme="dark"] en — cosa que esta app nunca hace. Redefinirlas aquí (una sola vez; son referencias vivas a nuestros propios tokens) evita tener que parchear cada selector/pseudo-clase de Bootstrap uno por uno para que reaccione a prefers-color-scheme. */ --bs-body-bg: var(--card); --bs-body-color: var(--text); --bs-border-color: var(--line); --bs-tertiary-bg: var(--porcelain-dim); } @media (prefers-color-scheme: dark) { :root { --porcelain: #101e23; --porcelain-dim: #0b1519; --line: #24393f; --card: #16282f; --text: #eae3d6; --text-dim: #93a3a5; --gold: #52bec0; --gold-bright: #62d1d3; --good: #7fae8b; --good-bg: #1c2e22; --warn: #dba85c; --warn-bg: #34291a; --bad: #d68878; --bad-bg: #35201c; --info: #d3c48c; --info-bg: #2e2a1a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.55); } } /* ---------- base ---------- */ html, body { background: var(--porcelain-dim); color: var(--text); font-family: var(--sans); font-weight: 400; line-height: 1.6; } h1, h2, h3, h4, h5, .display-serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } a, .btn-link { color: var(--gold); } a:hover { color: var(--gold-bright); } code, .num, .tabular-nums { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---------- bootstrap harmonization ---------- Bootstrap 5.3 bakes its component colors as literal hex values at build time (not var() references), así que no basta con redefinir --bs-primary; se sobreescriben directamente los componentes que ya usan las páginas existentes (Pacientes, Odontograma, Agenda, Cargos, etc.) para que hereden la nueva paleta sin tener que reescribir cada página todavía. */ .btn-primary { --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-hover-bg: var(--gold-bright); --bs-btn-hover-border-color: var(--gold-bright); --bs-btn-active-bg: var(--gold-bright); --bs-btn-active-border-color: var(--gold-bright); --bs-btn-color: var(--ink); --bs-btn-hover-color: var(--ink); --bs-btn-active-color: var(--ink); font-weight: 500; border-radius: var(--radius-s); } .btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--text-dim); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--porcelain-dim); --bs-btn-hover-border-color: var(--gold); --bs-btn-hover-color: var(--text); border-radius: var(--radius-s); } .btn { font-family: var(--sans); } .form-control, .form-select { border-color: var(--line); border-radius: var(--radius-s); background-color: var(--card); color: var(--text); } .form-control:focus, .form-select:focus { background-color: var(--card); color: var(--text); border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); } .form-label { font-weight: 500; font-size: 13px; color: var(--text-dim); } .btn:focus-visible, .qbtn:focus-visible, .sb-item:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .table { color: var(--text); } .table > thead { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); } .table > :not(caption) > * > * { border-bottom-color: var(--line); } .card { border-color: var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); } .badge.bg-success { background-color: var(--good) !important; } .badge.bg-secondary { background-color: var(--text-dim) !important; } .badge.bg-danger { background-color: var(--bad) !important; } .badge.bg-warning { background-color: var(--warn) !important; color: #fff !important; } .table-warning, .table-danger { --bs-table-bg: transparent; } .table-warning > * { background-color: var(--warn-bg) !important; } .table-danger > * { background-color: var(--bad-bg) !important; } /* ===================================================================== App shell — sidebar + topbar (solo para el contenido autenticado; Login se renderiza fuera del shell, a pantalla completa). ===================================================================== */ .app-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .app-sidebar { background: var(--ink); color: var(--porcelain); padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sb-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 20px; border-bottom: 1px solid rgba(245, 242, 236, .12); margin-bottom: 14px; text-decoration: none; } .sb-brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--gold); display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 13px; flex-shrink: 0; } .sb-brand .name { font-family: var(--serif); font-size: 16.5px; color: var(--porcelain); } .sb-nav { display: flex; flex-direction: column; gap: 2px; } .sb-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-s); color: #aebdbb; font-size: 13.6px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; } .sb-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; } .sb-item:hover { background: rgba(245, 242, 236, .06); color: var(--porcelain); } .sb-item.active { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-bright); } .sb-divider { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #6b7c7a; padding: 16px 10px 6px; } .sb-foot { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid rgba(245, 242, 236, .12); display: flex; align-items: center; gap: 10px; } .sb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; font-family: var(--serif); flex-shrink: 0; } .sb-who { font-size: 12.5px; line-height: 1.35; overflow: hidden; } .sb-who .role { color: #8fa09e; font-size: 11px; } .sb-account { margin-left: auto; background: none; border: none; color: #8fa09e; cursor: pointer; padding: 6px; border-radius: var(--radius-s); display: flex; align-items: center; flex-shrink: 0; transition: color .15s ease, background .15s ease; text-decoration: none; } .sb-account:hover { color: var(--gold); background: rgba(245, 242, 236, .06); } .sb-account svg { width: 16px; height: 16px; } .sb-logout { background: none; border: none; color: #8fa09e; cursor: pointer; padding: 6px; border-radius: var(--radius-s); display: flex; align-items: center; flex-shrink: 0; transition: color .15s ease, background .15s ease; } .sb-logout:hover { color: var(--bad); background: rgba(245, 242, 236, .06); } .sb-logout svg { width: 16px; height: 16px; } .app-main { min-width: 0; } .app-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 10; } .app-search { flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px; background: var(--porcelain); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--text-dim); transition: border-color .16s ease; position: relative; } .app-search:focus-within { border-color: var(--gold); } .app-search svg { width: 15px; height: 15px; opacity: .6; flex-shrink: 0; } .app-search input { border: none; background: none; outline: none; font-size: 13.5px; color: var(--text); width: 100%; font-family: var(--sans); } .app-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); overflow: hidden; z-index: 20; } .app-search-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none; color: var(--text); font-size: 13.5px; transition: background .12s ease; } .app-search-result:hover { background: var(--porcelain-dim); } .app-search-result .p-avatar { width: 26px; height: 26px; font-size: 10.5px; } .app-search-empty { padding: 12px 14px; font-size: 13px; color: var(--text-dim); } .app-body { padding: 26px 28px 48px; } /* ---------- shared bits reused across dashboard / future ficha ---------- */ .p-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--porcelain-dim); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--text-dim); font-family: var(--serif); flex-shrink: 0; } .pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; display: inline-block; } .pill.good { background: var(--good-bg); color: var(--good); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.neutral { background: var(--porcelain-dim); color: var(--text-dim); } .pill.info { background: var(--info-bg); color: var(--info); } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); } .panel-head h3 { font-size: 15.5px; font-weight: 700; font-family: var(--sans); letter-spacing: -0.02em; margin: 0; } .panel-head .count { font-size: 11.5px; color: var(--text-dim); background: var(--porcelain-dim); padding: 3px 9px; border-radius: 999px; font-family: var(--mono); } .panel-empty { padding: 22px 20px; font-size: 13.5px; color: var(--text-dim); } .qbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-s); font-size: 13px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .qbtn svg { width: 14px; height: 14px; } .qbtn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--gold) 65%, transparent); } .qbtn:hover { transform: translateY(-1px); border-color: var(--gold); } .qbtn.gold:hover { background: var(--gold-bright); } /* ---------- dashboard ---------- */ .dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .dash-head h1 { font-size: 24px; margin: 0; } .dash-head .sub { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; font-family: var(--sans); } .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px; opacity: 0; animation: sigo-fade-up .5s ease forwards; } .kpi:nth-child(1) { animation-delay: .02s; } .kpi:nth-child(2) { animation-delay: .08s; } .kpi:nth-child(3) { animation-delay: .14s; } @keyframes sigo-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .kpi .lbl { font-size: 12px; color: var(--text-dim); font-weight: 600; } .kpi .val { font-size: 26px; margin-top: 6px; font-weight: 600; } .kpi .delta { font-size: 11.5px; margin-top: 5px; font-weight: 600; } .kpi .delta.good { color: var(--good); } .kpi .delta.warn { color: var(--warn); } .kpi .delta.neutral { color: var(--text-dim); } .grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; } .agenda-today-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); transition: background .14s ease; cursor: pointer; text-decoration: none; color: inherit; } .agenda-today-row:last-child { border-bottom: none; } .agenda-today-row:hover { background: var(--porcelain-dim); } .agenda-today-time { font-family: var(--mono); font-size: 13px; color: var(--text-dim); } .agenda-today-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .agenda-today-who .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agenda-today-who .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-card { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: relative; } .alert-card:last-child { border-bottom: none; } .alert-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; } .alert-card.warn::before { background: var(--warn); } .alert-card.bad::before { background: var(--bad); } .alert-card.good::before { background: var(--good); } .alert-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .alert-card.warn .alert-icon { background: var(--warn-bg); color: var(--warn); } .alert-card.bad .alert-icon { background: var(--bad-bg); color: var(--bad); } .alert-icon svg { width: 16px; height: 16px; } .alert-body .t { font-size: 13.5px; font-weight: 600; } .alert-body .d { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* ---------- ficha del paciente: pestañas ---------- */ .ficha-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; } .ficha-tab { padding: 10px 14px; font-size: 13.5px; font-family: var(--sans); font-weight: 600; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .ficha-tab:hover { color: var(--text); } .ficha-tab.active { color: var(--gold); border-bottom-color: var(--gold); } /* ---------- splash (una sola vez por carga completa, ver Components/Splash.razor) ---------- */ .splash-shell { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 30%, var(--ink-soft) 0%, var(--ink) 62%, #16292f 100%); overflow: hidden; opacity: 1; transition: opacity .32s ease; } .splash-shell.fading { opacity: 0; } .splash-shell::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(245, 242, 236, .05) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; -webkit-mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 68%); mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 68%); } .splash-halo { position: absolute; top: 18%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 50%, transparent) 0%, color-mix(in srgb, var(--gold) 26%, transparent) 38%, transparent 72%); filter: blur(2px); animation: splash-halo-pulse 3.6s ease-in-out infinite; } @keyframes splash-halo-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } } .splash-spark { position: absolute; z-index: 3; color: var(--gold-bright); opacity: 0; animation: splash-spark-in 2.6s ease-in-out infinite; } .splash-spark.s1 { top: 16%; left: 30%; font-size: 12px; animation-delay: .4s; } .splash-spark.s2 { top: 22%; right: 26%; font-size: 8px; animation-delay: 1.1s; } .splash-spark.s3 { top: 46%; right: 20%; font-size: 10px; animation-delay: 1.8s; } @keyframes splash-spark-in { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 18% { opacity: 1; transform: scale(1) rotate(90deg); } 36% { opacity: 0; transform: scale(.5) rotate(180deg); } } .splash-logo { position: relative; z-index: 2; animation: splash-in 1.1s cubic-bezier(.2,.9,.25,1) both; } @keyframes splash-in { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .splash-logo img { display: block; width: 240px; max-width: 62vw; height: auto; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .4)); } .splash-dots { position: relative; z-index: 2; display: flex; gap: 7px; margin-top: 30px; animation: splash-rise-in .9s cubic-bezier(.2,.9,.25,1) .55s both; } @keyframes splash-rise-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .splash-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); opacity: .35; animation: splash-dot-pulse 1.2s ease-in-out infinite; } .splash-dots span:nth-child(2) { animation-delay: .15s; } .splash-dots span:nth-child(3) { animation-delay: .3s; } @keyframes splash-dot-pulse { 0%, 60%, 100% { opacity: .3; transform: scale(1); } 30% { opacity: 1; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { .splash-halo, .splash-spark, .splash-logo, .splash-dots, .splash-dots span { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---------- login (a pantalla completa, fuera del shell) ---------- */ .login-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; background: var(--card); } .login-brand { position: relative; background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%); color: var(--porcelain); padding: 56px 52px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .login-brand canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; } .login-brand .brand-top, .login-brand .brand-mid, .login-brand .brand-foot { position: relative; z-index: 2; } .login-brand .wordmark { display: flex; align-items: center; gap: 10px; } .login-brand .wordmark .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--gold); display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 17px; } .login-brand .wordmark .name { font-family: var(--serif); font-size: 20px; } .login-brand .brand-mid { max-width: 380px; margin-top: 64px; } .login-brand .brand-mid h1 { font-size: 34px; line-height: 1.18; } .login-brand .brand-mid p { font-family: var(--sans); font-size: 14.5px; color: #b9c6c4; margin-top: 16px; line-height: 1.6; } .login-brand .brand-foot { display: flex; gap: 28px; } .login-brand .brand-stat .num { display: block; font-size: 22px; color: var(--gold-bright); } .login-brand .brand-stat .lbl { font-size: 11.5px; color: #92a3a1; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; } .login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 48px; } .login-form { width: 100%; max-width: 340px; } .login-form .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 600; } .login-form h2 { font-size: 27px; margin-top: 10px; } .login-form .sub { color: var(--text-dim); font-size: 14px; margin-top: 8px; } .login-form .field { margin-top: 22px; } .login-form .btn-primary { margin-top: 26px; width: 100%; padding: 13px; font-size: 14.5px; } .login-error { margin-top: 16px; font-size: 13.5px; color: var(--bad); background: var(--bad-bg); padding: 10px 14px; border-radius: var(--radius-s); } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .app-sidebar { display: none; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } .login-shell { grid-template-columns: 1fr; } .login-brand { padding: 36px 26px; min-height: 240px; } .login-brand .brand-mid { margin-top: 28px; } .login-brand .brand-foot { display: none; } } @media (prefers-reduced-motion: reduce) { .kpi { animation: none; opacity: 1; } * { transition-duration: .001ms !important; } }