/* ========================================================================== RHumma — theme.css Tokens y componentes del header, menú lateral y footer. El modo oscuro reutiliza el motor ya incluido en el template (Qompac UI): window.IQSetting.theme_scheme('dark') agrega la clase `dark` a , la misma que activa dark.min.css para el resto de la aplicación. Aquí solo se definen los tokens/estilos para los componentes nuevos (rh-*). ========================================================================== */ /* Sobreescribe el "primary" de Bootstrap/Qompac UI (venía en morado #7016d0) para que todo lo que ya usa var(--bs-primary...) en el template base (fuera de los componentes rh-*) también siga el verde de marca. */ :root { --bs-primary: #34A853; --bs-primary-rgb: 52, 168, 83; --bs-primary-tint-20: #5DB975; --bs-primary-tint-40: #85CB98; --bs-primary-tint-60: #AEDCBA; --bs-primary-tint-80: #D6EEDD; --bs-primary-tint-90: #EBF6EE; --bs-primary-shade-20: #2A8642; --bs-primary-shade-40: #1F6532; --bs-primary-shade-60: #154321; --bs-primary-shade-80: #0A2211; } :root { --rh-header-h: 68px; --rh-sidebar-w: 260px; --rh-radius: 10px; --rh-bg: #F4F7F7; --rh-surface: #FFFFFF; --rh-surface-2: #EEF2F2; --rh-ink: #16262A; --rh-ink-muted: #5B6E71; --rh-ink-faint: #8CA0A2; --rh-border: #DEE6E6; --rh-border-strong: #C7D3D3; --rh-accent: #34A853; --rh-accent-ink: #1E7A3C; --rh-accent-soft: #E6F4EA; --rh-header-strong: var(--rh-surface); --rh-highlight: #C9862B; --rh-highlight-soft: #F6E8D3; --rh-success: #2E8F5C; --rh-success-soft: #E1F1E8; --rh-warning: #C97B1D; --rh-warning-soft: #F8ECD9; --rh-danger: #C4433D; --rh-danger-soft: #FBE7E5; --rh-shadow-sm: 0 1px 2px rgba(15, 35, 38, .06); --rh-shadow-md: 0 8px 24px -8px rgba(15, 35, 38, .18); } body.dark { --rh-bg: #0D1719; --rh-surface: #132224; --rh-surface-2: #16282B; --rh-ink: #E9F1F1; --rh-ink-muted: #9BB1B3; --rh-ink-faint: #6E8688; --rh-border: #223638; --rh-border-strong: #2C4244; --rh-accent: #5FBE85; --rh-accent-ink: #B8E6C3; --rh-accent-soft: #163B24; --rh-header-strong: var(--rh-surface); --rh-highlight: #E3A64C; --rh-highlight-soft: #3A2C14; --rh-success: #4CBE84; --rh-success-soft: #163524; --rh-warning: #E3A64C; --rh-warning-soft: #3A2C14; --rh-danger: #E17168; --rh-danger-soft: #3A1D1B; --rh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --rh-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, .55); } /* ---------------- Shell / grid ---------------- */ .rh-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--rh-header-h) auto; grid-template-areas: "header" "main"; min-height: 100vh; background: var(--rh-bg); } /* ---------------- Sidebar (menú oculto por defecto, se despliega con la hamburguesa) ---------------- */ .rh-sidebar { background: var(--rh-surface); border-right: 1px solid var(--rh-border); box-shadow: var(--rh-shadow-md); display: flex; flex-direction: column; min-width: 0; position: fixed; left: 0; top: 0; width: var(--rh-sidebar-w); height: 100vh; transform: translateX(-100%); transition: transform .2s ease; z-index: 1030; } body.rh-menu-open .rh-sidebar { transform: translateX(0); } body.rh-menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 25, 27, .45); z-index: 1025; } .rh-sidebar-head { height: var(--rh-header-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--rh-header-strong); text-decoration: none; } .rh-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--rh-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--bs-body-font-family, sans-serif); font-weight: 700; font-size: 15px; } .rh-brand-word { font-size: 17px; white-space: nowrap; color: var(--rh-accent-ink); font-family: var(--bs-body-font-family, sans-serif); font-weight: 600; line-height: 1.1; } .rh-brand-sub { font-size: 10.5px; color: var(--rh-ink-faint); text-transform: uppercase; letter-spacing: .08em; } body.dark .rh-brand-word { color: #fff; } body.dark .rh-brand-sub { color: rgba(255, 255, 255, .6); } .rh-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 10px; } .rh-nav-group + .rh-nav-group { margin-top: 18px; } .rh-nav-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--rh-ink-faint); padding: 0 10px 6px; font-weight: 600; white-space: nowrap; } .rh-nav-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--rh-ink); text-decoration: none; font-size: 13.6px; font-weight: 500; white-space: nowrap; overflow: hidden; } .rh-nav-link svg { flex: none; width: 18px; height: 18px; opacity: .85; } .rh-nav-link:hover { background: var(--rh-surface-2); color: var(--rh-ink); } .rh-nav-link.active { background: var(--rh-accent-soft); color: var(--rh-accent-ink); font-weight: 600; } .rh-nav-link.active svg { opacity: 1; } .rh-nav-link .rh-chip { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--rh-accent-ink); background: var(--rh-accent-soft); padding: 1px 7px; border-radius: 999px; } .rh-sidebar-foot { border-top: 1px solid var(--rh-border); padding: 12px; flex: none; display: flex; align-items: center; gap: 10px; } .rh-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--rh-accent-soft); color: var(--rh-accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; } .rh-user-meta { min-width: 0; } .rh-user-meta .rh-name { font-size: 12.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rh-ink); } .rh-user-meta .rh-role { font-size: 11.2px; color: var(--rh-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Topbar ---------------- */ .rh-topbar { grid-area: header; background: linear-gradient(180deg, var(--rh-accent-soft) 0%, var(--rh-header-strong) 100%); box-shadow: var(--rh-shadow-sm); display: flex; align-items: center; gap: 14px; padding: 0 20px; min-width: 0; position: sticky; top: 0; z-index: 1020; } .rh-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rh-accent); opacity: .7; } .rh-topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .rh-caret { width: 13px; height: 13px; color: var(--rh-ink-faint); flex: none; margin-left: -2px; } body.dark .rh-caret { color: rgba(255, 255, 255, .55); } .rh-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--rh-ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; position: relative; } .rh-icon-btn:hover { background: var(--rh-surface-2); color: var(--rh-ink); } .rh-icon-btn svg { width: 18px; height: 18px; } .rh-topbar .rh-icon-btn { color: var(--rh-ink-muted); } .rh-topbar .rh-icon-btn:hover { background: rgba(15, 35, 38, .08); color: var(--rh-ink); } body.dark .rh-topbar .rh-icon-btn { color: rgba(255, 255, 255, .8); } body.dark .rh-topbar .rh-icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; } .rh-topbar .rh-bell { background: var(--rh-highlight-soft); color: var(--rh-highlight); } .rh-topbar .rh-bell:hover { background: var(--rh-highlight-soft); filter: brightness(0.96); color: var(--rh-highlight); } .rh-topbar .rh-theme-toggle { background: var(--rh-accent-soft); color: var(--rh-accent-ink); } .rh-topbar .rh-theme-toggle:hover { background: var(--rh-accent-soft); filter: brightness(0.96); color: var(--rh-accent-ink); } .rh-topbar-spacer { flex: 1 1 auto; } .rh-topbar-right { display: flex; align-items: center; gap: 6px; } .rh-divider-v { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--rh-border); } .rh-topbar .rh-divider-v { background: rgba(15, 35, 38, .14); } body.dark .rh-topbar .rh-divider-v { background: rgba(255, 255, 255, .18); } .rh-badge-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--rh-danger); border: 1.5px solid var(--rh-highlight-soft); } .rh-topbar-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; text-decoration: none; color: inherit; } .rh-topbar-user:hover { background: rgba(15, 35, 38, .08); } body.dark .rh-topbar-user:hover { background: rgba(255, 255, 255, .14); } .rh-topbar-user .rh-user-meta .rh-name { text-align: left; color: var(--rh-ink); } .rh-topbar-user .rh-user-meta .rh-role { text-align: left; color: var(--rh-ink-faint); } body.dark .rh-topbar-user .rh-user-meta .rh-name { color: #fff; } body.dark .rh-topbar-user .rh-user-meta .rh-role { color: rgba(255, 255, 255, .6); } /* ---------------- Loader inicial de página ---------------- */ /* El markup/estilos base (#loading > .loader.simple-loader > .loader-body) son del template (qompac-ui.css) y se dejan igual -- aquí solo se sobreescribe el color de fondo y se reemplaza el logo morado genérico por la marca rh-*. Se antepone #loading para ganarle en especificidad a esas reglas sin tener que tocar el CSS del vendor. */ #loading .loader.simple-loader { background: var(--rh-bg); } .rh-loader-badge { position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .rh-loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--rh-accent-soft); border-top-color: var(--rh-accent); animation: rh-loader-spin .8s linear infinite; } .rh-loader-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--rh-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--bs-body-font-family, sans-serif); font-weight: 700; font-size: 15px; } @keyframes rh-loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rh-loader-ring { animation: none; } } /* ---------------- Main content ---------------- */ .rh-main { grid-area: main; min-width: 0; } @media (max-width: 575.98px) { .rh-topbar-user .rh-user-meta { display: none; } } /* ========================================================================== Componentes de módulo: tarjetas, tablas, pills, botones, modal Reutilizables en cualquier catálogo/listado (Puestos, Áreas, etc.) ========================================================================== */ /* ---------------- Card ---------------- */ .rh-card { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-sm); overflow: hidden; } .rh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rh-border); flex-wrap: wrap; } .rh-card-head h2, .rh-card-head h4 { margin: 0; font-size: 18px; color: var(--rh-ink); font-family: var(--bs-body-font-family, sans-serif); font-weight: 600; } /* Variante para cabeceras de sub-secciones dentro de un mismo formulario/página (ej. los grupos de campos de empleado-info-general): más chica y con fondo suave para diferenciarla de un título de página como .rh-card-head normal. */ .rh-card-head-compact { padding: 12px 20px; background: var(--rh-surface-2); } .rh-card-head-compact h2, .rh-card-head-compact h4 { font-size: 13.5px; } .rh-card-body { padding: 20px; } .rh-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------------- Search ---------------- */ .rh-search-box { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--rh-border-strong); padding: 5px 2px; color: var(--rh-ink-faint); min-width: 220px; transition: border-color .12s ease; } .rh-search-box:focus-within { border-bottom-color: var(--rh-accent); color: var(--rh-accent); } .rh-search-box svg { width: 16px; height: 16px; flex: none; } .rh-search-input { border: 0; background: transparent; outline: 0; color: var(--rh-ink); font-size: 13.3px; width: 100%; } .rh-search-input::placeholder { color: var(--rh-ink-faint); } /* ---------------- Buttons ---------------- */ .rh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; font-size: 13.3px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .12s ease, background-color .12s ease; } .rh-btn svg { width: 15px; height: 15px; flex: none; } .rh-btn:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 2px; } .rh-btn-primary { background: var(--rh-accent); color: #fff; } .rh-btn-primary:hover { filter: brightness(1.08); color: #fff; } .rh-btn-secondary { background: var(--rh-surface); color: var(--rh-ink-muted); border-color: var(--rh-border-strong); } .rh-btn-secondary:hover { background: var(--rh-surface-2); color: var(--rh-ink); } .rh-btn-danger-soft { background: var(--rh-danger-soft); color: var(--rh-danger); } .rh-btn-danger-soft:hover { filter: brightness(0.97); color: var(--rh-danger); } .rh-btn-danger { background: var(--rh-danger); color: #fff; } .rh-btn-danger:hover { filter: brightness(1.08); color: #fff; } .rh-btn-sm { padding: 6px 12px; font-size: 12.5px; } /* ---------------- Table ---------------- */ .rh-table-wrap { overflow-x: auto; } /* Deja que el dropdown de una fila se salga del recorte de la tarjeta/tabla mientras está abierto */ .rh-table-wrap:has(.dropdown-menu.show), .rh-card:has(.dropdown-menu.show) { overflow: visible; } .dropdown-menu.show { z-index: 1090; } /* Igual que arriba, pero para el (ej. confirmación de eliminar en Referencias): .rh-card tiene overflow:hidden para las esquinas redondeadas, y eso recorta el popover flotante si no se libera mientras está abierto. */ .rh-card:has(.rh-popover) { overflow: visible; } .rh-table-wrap:has(.rh-popover) { overflow: visible; } .rh-table { width: 100%; border-collapse: collapse; font-size: 13.3px; } .rh-table thead th { text-align: left; font-size: 10.8px; text-transform: uppercase; letter-spacing: .06em; color: var(--rh-ink-faint); font-weight: 700; padding: 11px 18px; background: var(--rh-surface-2); border-bottom: 1px solid var(--rh-border); white-space: nowrap; } .rh-table tbody td { padding: 12px 18px; border-bottom: 1px solid var(--rh-border); color: var(--rh-ink); vertical-align: middle; } .rh-table tbody tr:last-child td { border-bottom: 0; } .rh-table tbody tr:hover td { background: var(--rh-surface-2); } .rh-table .rh-col-id { color: var(--rh-ink-faint); font-variant-numeric: tabular-nums; width: 1%; } .rh-table .rh-col-actions { text-align: right; white-space: nowrap; width: 1%; } .rh-table .rh-col-actions .rh-btn + .rh-btn { margin-left: 6px; } /* Encabezados ordenables */ .rh-table th.is-sortable { cursor: pointer; user-select: none; } .rh-table th.is-sortable:hover { color: var(--rh-ink); } .rh-table th.is-sortable .rh-sort-icon { display: inline-block; width: 10px; opacity: .35; margin-left: 2px; } .rh-table th.is-sortable.is-sorted .rh-sort-icon { opacity: 1; color: var(--rh-accent); } /* Primera columna fija al hacer scroll horizontal */ .rh-table .rh-col-sticky { position: sticky; left: 0; z-index: 1; background: var(--rh-surface); box-shadow: 1px 0 0 0 var(--rh-border); } .rh-table thead th.rh-col-sticky { background: var(--rh-surface-2); z-index: 2; } .rh-table tbody tr:hover td.rh-col-sticky { background: var(--rh-surface-2); } /* Atenúa la tabla mientras hay una request en curso (búsqueda / filtro / orden / paginación) */ .rh-table-wrap { transition: opacity .1s ease; } .rh-table-dim { opacity: .45; pointer-events: none; } .rh-icon-btn-sm { width: 28px; height: 28px; border-radius: 7px; } .rh-icon-btn-sm svg { width: 15px; height: 15px; } /* ---------------- Pills ---------------- */ .rh-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.3px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .rh-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .rh-pill-success { background: var(--rh-success-soft); color: var(--rh-success); } .rh-pill-neutral { background: var(--rh-surface-2); color: var(--rh-ink-faint); } .rh-pill-warning { background: var(--rh-warning-soft); color: var(--rh-warning); } .rh-pill-danger { background: var(--rh-danger-soft); color: var(--rh-danger); } /* ---------------- Lista de contactos (referencias de empleado) ---------------- */ .rh-ref-list { display: flex; flex-direction: column; } .rh-ref-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--rh-border); } .rh-ref-row:last-child { border-bottom: 0; } .rh-ref-info { min-width: 0; flex: 1 1 auto; } .rh-ref-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.6px; font-weight: 600; color: var(--rh-ink); } .rh-ref-tag { font-size: 10.8px; font-weight: 700; color: var(--rh-ink-faint); background: var(--rh-surface-2); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .rh-ref-contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--rh-ink-muted); } .rh-ref-contact span { display: inline-flex; align-items: center; gap: 5px; } .rh-ref-contact svg { width: 13px; height: 13px; color: var(--rh-ink-faint); flex: none; } .rh-ref-actions { display: flex; align-items: center; gap: 4px; flex: none; } /* ---------------- Saludo / encabezado de dashboard ---------------- */ .rh-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .rh-greet-eyebrow { font-size: 11.5px; color: var(--rh-ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; } .rh-greet-title { font-size: 20px; font-weight: 700; color: var(--rh-ink); margin: 0; font-family: var(--bs-body-font-family, sans-serif); } /* ---------------- Barras horizontales de ranking (ej. empleados por área) ---------------- */ .rh-bar-list { display: flex; flex-direction: column; gap: 9px; } .rh-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; align-items: center; gap: 10px; } .rh-bar-row-label { font-size: 12.3px; color: var(--rh-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rh-bar-track { height: 8px; border-radius: 5px; background: var(--rh-surface-2); overflow: hidden; } .rh-bar-fill { height: 100%; border-radius: 5px; background: var(--rh-accent); } .rh-bar-row-value { font-size: 12.5px; font-weight: 700; color: var(--rh-ink); text-align: right; font-variant-numeric: tabular-nums; } /* ---------------- Stat cards ---------------- */ .rh-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; margin-bottom: 18px; } .rh-stat-card { display: flex; align-items: center; gap: 10px; background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 11px 13px; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .rh-stat-card:hover { box-shadow: var(--rh-shadow-md); transform: translateY(-2px); } .rh-stat-card.active { border-color: var(--rh-stat-color, var(--rh-accent)); box-shadow: var(--rh-shadow-md); } .rh-stat-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--rh-stat-soft, var(--rh-accent-soft)); color: var(--rh-stat-color, var(--rh-accent)); } .rh-stat-icon svg { width: 18px; height: 18px; } .rh-stat-body { min-width: 0; flex: 1; } .rh-stat-card .rh-stat-count { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--rh-ink); } .rh-stat-card .rh-stat-label { font-size: 11px; color: var(--rh-ink-muted); margin-top: 1px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Periodo card ---------------- */ .rh-periodo-card.is-actual { box-shadow: 0 0 0 2px var(--rh-accent); } .rh-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 96px; border: 1.5px dashed var(--rh-border-strong); border-radius: var(--rh-radius); background: transparent; color: var(--rh-ink-faint); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .12s ease, color .12s ease; } .rh-add-tile:hover { border-color: var(--rh-accent); color: var(--rh-accent); } .rh-add-tile svg { width: 20px; height: 20px; } /* ---------------- Progress ---------------- */ .rh-progress { height: 6px; border-radius: 999px; background: var(--rh-surface-2); overflow: hidden; } .rh-progress-bar { height: 100%; background: var(--rh-success); border-radius: 999px; transition: width .2s ease; } /* ---------------- Empty state ---------------- */ .rh-empty { padding: 48px 20px; text-align: center; color: var(--rh-ink-faint); font-size: 13.5px; } /* ---------------- Alert / flash ---------------- */ .rh-alert { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 8px; font-size: 13.3px; font-weight: 500; margin-bottom: 16px; } .rh-alert svg { width: 17px; height: 17px; flex: none; } .rh-alert-success { background: var(--rh-success-soft); color: var(--rh-success); } .rh-alert-danger { background: var(--rh-danger-soft); color: var(--rh-danger); } .rh-alert-info { background: var(--rh-accent-soft); color: var(--rh-accent-ink); } /* ---------------- Modal (Alpine-driven) ---------------- */ .rh-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 35, 38, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1200; } .rh-modal { background: var(--rh-surface); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-md); width: 100%; max-width: 420px; padding: 26px; } .rh-modal-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--rh-danger-soft); color: var(--rh-danger); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .rh-modal-icon svg { width: 22px; height: 22px; } .rh-modal h3 { margin: 0 0 6px; font-size: 17.5px; color: var(--rh-ink); font-family: var(--bs-body-font-family, sans-serif); font-weight: 600; } .rh-modal p { margin: 0 0 22px; font-size: 13.5px; color: var(--rh-ink-muted); line-height: 1.5; } .rh-modal p b { color: var(--rh-ink); } .rh-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }